Simple accessibility THE BARE MINIMUM FOR COMPASSIONATE DEVELOPMENT Melissa Avery-Weir @averymd

Our jobs, our passions oWe are creators oWe are empowered oWe are… constrained

Accessibility and “Disability” o Auditory: hard of hearing, deafness o Visual: low-vision, blindness, color blindness o Neurological or Cognitive: memory impairments, distractibility, learning disabilities o Motor: reduced response time, inability to use a mouse, lack of fine motor control

Bring forth the compassion “Deep awareness of the suffering of another, coupled with the wish to relieve it.” —Wiktionary

“They’ll have someone to help them do it.” —Someone I don’t want to work for

How do we do better? o Semantic markup and ARIA roles o Explicitly connect content with descriptors o Provide text alternatives o Keyboard accessibility

Accessible Rich Internet Applications “ARIA” o Part of Web Content Accessibility Guidelines (WCAG) 2.0 o Provides optional roles, state information, and “live regions” for more semantic markup o Example roles: banner, navigation, search, main, form

ARIA roles example

Semantic markup and ARIA roles o Use h1-h6, p, ul/ol/dl, header, nav, aside, footer Why? 1. Screenreaders will announce “landmarks”, headers, and lists 2. Allows users to customize their view of pages

https://www.youtube.com/watch?v=jiA9RJBwXvw

Semantic Markup and Roles 1. Use semantic HTML5 markup (headers, lists) 2. Use the “role” attribute to indicate landmarks: banner, navigation, search, main, form

Connect content with descriptors Visual users have visual context

ARIA label, labelledby, describedby o aria-label: Text label for an object o aria-labelledby: ID references to elements that label a focusable object o aria-describedby: ID references to elements that describe an object

Split label – the better way

Provide text alternatives o Concise, accurate alt attributes on images o Don’t treat “title” on images as a text alternative o Descriptions of charts and diagrams o Encourage video/audio content creators to provide closed captioning and transcripts

Why provide text alternatives? o Screenreaders o Slow connections o Triggering content

Keyboard accessibility o Events that trigger on hover, mouseover, or mouseout should probably also trigger on focus and blur o onclick isn’t mouse-specific o Functionality should be available to keyboards o JS widgets get complicated

Widget Libraries o jQuery UI is not accessible o Kendo UI seems pretty awesome o Drag and Drop/Sortables: not accessible in the big libraries o You can hack extend toolkits by adding keypress event bindings

Our four techniques 1. Use semantic markup and ARIA roles 2. Associate content with descriptors 3. Provide text alternatives 4. Ensure keyboard access to all functionality

Are we doing it right? o Navigate the site/app without a mouse o Can you complete every form, navigate to any page? o Give yourself a custom stylesheet that overrides base styles o Turn off CSS o WAVE: Web Accessibility Evaluation Tool o JAWS has a 40-minute trial

Compassionate culture “Sympathetic consciousness of others' distress together with a desire to alleviate it.” —Merriam-Webster

Raising the bar o Video/audio captioning and transcripts o Care for color contrast o Use ARIA “live regions” o Eliminate time restrictions o Font scalability o Interactive element size o Clarity of interactive elements o Access keys o Skip links for repetitive content (nav) o Allow users to disable flashing content o Add breadcrumb trails o Give expect input formats o Link to or provide pronunciations o Allow undos or restores o Don’t disguise one element as another o Pursue accessibility certification

Resources o ARIA: http://www.w3.org/TR/wai-aria o WebAIM (Web Accessibility In Mind): http://webaim.org/ o WAVE: http://wave.webaim.org/ o SSB Bart Group: https://www.ssbbartgroup.com/index.php