Everyones invited! Meet accesibility requirements with ColdFusion

ColdFusion Summit 2016

Everyone's Invited!* MeetAccessibilityRequirementsWithColdFusion

*Except Chad. He knows what he did.

What’s this about?

Quick Overview

●  What do we mean by accessibility ●  What kind of requirements are there ●  How to meet these requirements ●  How Coldfusion can make this quick and

easy ●  Ensuring that compliance is maintained ●  Questions, hopefully followed by answers

But before we talk about that...

Dwarfs

I Friggin’ Love Dwarfs

Art by Federico Musetti

I Try Not to Think about Why

Art by Dave Dunstan

Unfortunately despite my love for the men under the mountain, I cannot play

the best dwarf related game of of all time

Dwarf Fortress

Art by Borkur Eiriksson

Dwarf Fortress is the simulation game from H-E-double hockey sticks

Build the Greatest Fortress Ever

Only Not with These Guys

With These Guys

Which Can Cause Problems

Art by Tim Dundee

Lots of problems

Actual Patch Notes

2004 ●  Made them care about clothes more

2005 ●  Fixed a bug where animals could rent rooms ●  Cleaned up the bear situation

2006 ●  Added mouths ●  Added an aperture flag that stops mouths from

being gouged out 2007 ●  Fixed a problem with blood hanging in air

2008 ●  Made all undead respectful of each other ●  Stopped aerial births ●  Stopped looping dwarves from constantly trying

out gloves and boots when they should just pick one and go

2010 ●  Rain kills everything it lands on ●  Humans in Farming houses are naked

2011 ●  Rodent men have no teeth ●  Serpent Men can Kick ●  Rodent men don't use their new teeth to bite

2012 ●  Sleeping on a melting iceberg results in waking

up as a demon ●  Dwarf children die from embarrassment at not

being dressed by age 2 2015 ●  Animal breeding is prevented if animals aren't

"willing to marry" ●  Cats dying for no reason - alcohol poisoning? ●  Incorrect use of "whom" in elf.txt

So we have a game about my favorite thing, with unlimited story potential,

where all these amazing things can and do happen, and I can’t play it.

Because it Looks Like This

And Yes I Know

But the Menus...the Menus

You have to use this to set up that

Finally, the point

There is a piece of amazing, high quality, high functioning software that I

desperately want to use but I can’t because it is not accessible.

It is our duty as developers to ensure that our life-bettering software be available to

everyone. We must adhere to the principles of accessibility.

The most important of these principles is:

Don’t be Ryan Seacrest

Ryan Seacrest is Not Accessible

Aren’t there laws about this?

Brief History Lesson

1973: Because Ryan Seacrest will soon be born, the U.S. Rehabilitation Act prohibits discrimination on the basis of disability in programs conducted by Federal agencies, in programs receiving Federal financial assistance, in Federal employment, and in the employment practices of Federal contractors. 1998: The US Congress amended the Rehabilitation Act to require Federal agencies to make their electronic and information technology accessible to people with disabilities. The law applies to all Federal agencies when they develop, procure, maintain or use electronic and information technology. Under Section 508 agencies must give disabled employees and members of the public access to information that is comparable to the access available to others.

Two Slides Counts as Brief

1997: The W3C launched the Web Accessibility Initiative with endorsement by The White House and W3C members. 2011: Steve is working at software company that creates software for FDA regulated companies. The company has a chance to gain the FDA itself as a customer, contingent on the system becoming 508 compliant. Steve gets the assignment. 2015: Steve starts to feel comfortable saying they are 508 compliant. 2016: This presentation happens.

No changes to the actual 508 specification since 1998

The Gist

The US Government (for the most part) cannot discriminate against anyone based on ability. This means any software that they require

people use to do their jobs needs to be accessible to everyone.

This isn’t just about Government contracts, millions of people are not able to interface with a computer the way you may be able to. If your site/application isn’t accessible to them, you’re basically a huge jerk.

Don’t be a huge jerk.

Who’s Invited?

Color Blind People: We all know that green means good and red means bad*. Not everyone knows which is which though.

Limited Mobility: Ever use your mouse so much your arm hurts? Some people don’t have that problem.

Visually Impaired: Everything must be readable by a screen reader and make sense when using it.

Hearing Impaired: Less of an issue on the Web, since there’s so much text. Where there is audio though, keep these people in mind.

*Not actually, but we’re not going to get into that here.

So what do we need to know?

●  Don’t use color as the only way to know something. If you make something red to show it’s required, add an asterisk or the word “required” or something else.

●  Don’t use dark gray text on a white gray background.

●  “Branding” information is OK. ●  This is the hardest to enforce

I See your True Colors

●  Everything that can be interacted with needs to reached by pressing tab.

●  Non-interactable text should not be. ●  Don’t use a div with an image as a button with

an onclick event. ●  Try not to use tabindex

Keepin’ Tabs on You

●  Drag and Drop functionality is convenient, fun, engaging, sexy and good.

●  It’s also not 508 compliant. ●  We can still have it, just include another way

to do what you were doing with your dragging and dropping like the may or may not be hot

Quit Draggin’ Me Down

Say What?

1. Subheaders need to be announced 2. The label needs to be tied to the text field,

the requiredness needs to be explained 3. This icon needs a helpful alt-text 4. The user needs to know they can’t edit

this field.

1

2 3

4

Table This for Later

●  Table cells need to be associated with their row and column headers.

●  Headers with multiple cells need to have mark up to explains what everything belongs to.

●  Imagine having someone read a 50 row database column to you.

Other Criteria without Puns

●  A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).

●  Documents shall be organized so they are readable without requiring an associated style sheet.

●  Redundant text links shall be provided for each active region of a server-side image map.

●  Frames shall be titled with text that facilitates frame identification and navigation

●  Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz

●  Don’t use the marquee tag ●  When pages utilize scripting languages to

display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by Assistive Technology.

●  A method shall be provided that permits users to skip repetitive navigation links.

●  When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

●  Forms and Applets need to be as 508 compliant as the rest of your application.

OK, so how do we do all that? I’m starting to see why this took four years

I have good news Which naturally means I also have bad news

The Good News

Properly structured HTML will take care of a lot of this for you. Especially once you start using the ARIA (Accessible Rich Internet Applications) specification from the W3C.

You can talk about ARIA

●  First rule of ARIA use ○  If you can use a native HTML element or attribute with the

semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

●  Second rule of ARIA use ○  Do not change native semantics, unless you really have to.

This is bad

This is good

Just a taste •  aria-atomic

•  aria-busy (state)

•  aria-controls

•  aria-current (state)

•  aria-describedby

•  aria-details

•  aria-disabled (state)

•  aria-dropeffect

•  aria-errormessage

•  aria-flowto

•  aria-grabbed (state)

●  aria-haspopup

●  aria-hidden (state)

●  aria-invalid (state)

●  aria-keyshortcuts

●  aria-label

●  aria-labelledby

●  aria-live

●  aria-owns

●  aria-relevant Many element specific options also exist

By simply using a label element, adding the word “required” to the label and the “aria-required” attribute, I can make an entire simple form 508 compliant.

Forms are easy

Adding the scope attribute to our headers is all we need.

Easy Tables are Easy

Now we actually have to add headers to each td which is easy in CF.

Hard Tables are Easy

The Bad News

●  This is all dependent on developers actually using the proper syntax and building their interfaces in a certain way.

●  One developer can ruin it for everyone

This developer will probably be named Chad

How can I possibly get everyone on my team to remember to use proper HTML

syntax and use all these extra attributes? I can’t get them to agree where the opening curly brace goes

MCML Before you google “Roman Numeral Converter” it’s 1950

The Solution

●  MasterControl Markup Language (MCML) was a library of custom tags that ensured that every page that used them would be 508 compliant

●  They were precompiled, globally available and most importantly requirable.

●  They also forced a standard format for our CSS to expect

The “Front” End

The Back End

The Back End

It keeps getting better

●  We could require certain attributes - not just for 508 issues - and throw errors alerting the developer to what they needed. QA loved this as they could require attributes they keyed off.

●  Our tags began building off each other, increasing in complexity and power.

●  We experimented with cfc based tags instead of cfm based.

Getting Better All the Time ●  Many tags used external jQuery components,

by picking one, we no longer had five different solutions to the same problem.

●  Everyone knew what to use and how to use it ●  Editor highlighting and even autocomplete

were possible (cfeclipse) ●  We were the masters of our own destiny.

●  mcactionIcons ●  mcApplayer ●  mcApplayerParameter ●  mcbrowseButton ●  mcbutton ●  mcchart ●  mccheckBox ●  mccontent ●  mccookie ●  mccourseDropDown ●  mccss ●  mcdatePicker ●  mcdropDown ●  mcdropDownGroup ●  mcdropDownOption ●  mcfieldSet

We Made a Lot of Tags

●  mcheader ●  Mcimage ●  mcinputButton ●  mclifecycleDropDown ●  mclabel ●  mcminiList ●  mcpassword ●  mcradioButton ●  mcroleDropDown ●  mcsubHeader ●  mctable ●  mctableRow ●  mctableColumn ●  mctimePicker ●  mcuserPicker ●  And many, many more

It kind of sounds like absolute power may have corrupted you.

Absolutely Absolute power is pretty cool

Ok, that sounds great, if I were starting from scratch on a new project but our

system is 12 years old. What do I do Mr. Smart Guy?

Interns

How we did it

●  Developing custom tags with Coldfusion is actually quick and easy

●  Two summers with me and two teams of interns (four and two)

●  They’d pick a page and go through changing all the tags to the new ones, I’d build what they needed.

I Thought it Took Four Years ●  Other priorities would pop up ●  It took a long time to get the framework in

place and get the momentum to start ●  We had to wait on the FDA a couple times ●  Once we started getting to 90% was fast ●  We drug our feet on applets

Testing

Make Sure you Stay Good ●  There are scads of automatic testing

programs out there. o  Don’t use them if you don’t have to, they

return too many false positives to be useful ●  Use a pre commit hook to make sure people

use your tags. ●  Manually test your tags on a special page

once a release.

Final Thoughts

This is important

This is hard

Start now

Put one person in charge

Make sure everyone is responsible

Don’t be Ryan Seacrest

Q&A

Hit me with your best shot Enjoy your Pat Benatar earworm

Once You Go Steve You Never Leave

●  I podcast (a lot): www.digitalstrips.com WebComicsWrestlingVideoGamesChildish Humor

●  I’m on Twitter : @Idahobo ●  I’m on Battlenet : Idahobo

Thank you!