Everyones invited! Meet accesibility requirements with ColdFusion
-
Upload
coldfusionconference -
Category
Technology
-
view
218 -
download
2
Transcript of 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!