Everyones invited! Meet accesibility requirements with ColdFusion

Everyone's Invited!*
Meet Accessibility Requirements With ColdFusion
*Except Chad. He knows what he did.

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...

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

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.

But the Menus...the Menus
You have to use this to set up that

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:

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.

●  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

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?

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

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.

Make sure everyone is responsible

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
Web Comics
Wrestling
Video Games
Childish Humor
●  I’m on Twitter : @Idahobo
●  I’m on Battlenet : Idahobo

Everyones invited! Meet accesibility requirements with ColdFusion

More Related Content

What's hot (19)

Viewers also liked (20)

Similar to Everyones invited! Meet accesibility requirements with ColdFusion (20)

More from ColdFusionConference (20)

Recently uploaded (20)

Everyones invited! Meet accesibility requirements with ColdFusion