Accessibility Myths Debunked: Why Smart Organizations Know it's Not Optional

©2016 Acquia Inc. — Confidential and Proprietary

Christina Dulude, AcquiaEverett Zufelt, Myplanet

Accessibility Myths DebunkedWhy Smart Organizations Know it's Not Optional

©2016 Acquia Inc. — Confidential and Proprietary©2016 Acquia Inc. — Confidential and Proprietary

Christina DuludeTechnical Account Manager

[email protected]

Everett ZufeltAssociate Director of Technology, Marketing & Commerce Solutions

[email protected]

mailto:[email protected]








Why should we care about accessibility?

– Litigation

– Lost business, conversions, opportunities

– It’s the right thing to do


Vivienne– Blind since birth

– Uses JAWS screen reader

– Can’t use a website or make transactions if website isn’t coded for screen readers


Thomas– Deaf

– Uses ASL

– Needs captions on videos


Juan– Non-native English speaker

– Needs language on websites to be straightforward and clear

– Appreciates when translations are available in Spanish, his primary language


Edith– Elderly, experiencing loss of

fine motor control

– Appreciates the ability to enlarge small text

– Needs large click targets for mouse actions


What is accessibility?

– Almost 1 in 5 Americans have a disability of some kind

– Vision, hearing, mobility and fine motor skills, and cognitive disabilities

– Most of us will have a disability at some point in our lives, especially as we grow older.


“Disability” of devices and networks

– Websites and applications should work on all devices

– Isn’t that responsive design?

– Yes. Accessibility helps everyone, regardless of ability.


WCAG vs. Section 508

– The Web Content Accessibility Guidelines (WCAG 2.0): A standard published by the W3C (World Wide Web Consortium)

– Section 508 is a national regulation in the US

– Other countries have their own regulations

– A standard vs. a regulation

– Many similar requirements between the two


WCAG

– Reflects the best international consensus

– 12 guidelines that are organized under 4 principles

– Perceivable

– Operable

– Understandable

– Robust

– A, AA, and AAA


Section 508

– Requires federal agencies to provide software and website accessibility to people with disabilities

– Includes:

– Government agencies

– Federal-funded nonprofits

– Public higher education institutions

– Public K-12 schools


AODA

– Accessibility for Ontarians with Disabilities Act

– Requires organizations to provide website accessibility to people with disabilities

– Includes:

– Designated public sector organizations

– Private sector organizations

– Not-for-profit organizations


How can I make my site more accessible?

– Myth: Building an accessible website is hard

– Myth: You need a separate, stripped down site to serve your disabled users

– Big wins with small tweaks

– Development best practices


Use ARIA roles

– Defines the semantics behind sections on the page

– Associate elements in the document to a WAI-ARIA role

– Use appropriate states and properties


Color contrast

– Provide sufficient contrast between colors, especially foreground and backgrounds

– Don't use color alone to convey information



Obvious calls to action

– Provide clear and consistent navigation options

– "Skip to content" links

– Menu items and links must be reached by tabbing

– All interactive elements must be used with a keyboard

– Lost customers and business


Don’t start movement automatically

– But if you do, be sure you have controls to stop it

– Be careful with movement in general– Flashing– Parallax scrolling


Help users avoid and correct mistakes

– Whatever device they are using to access the site, don't let them get into states that they cannot exit or fix

– Isn’t that just good usability?

– Yes. Accessibility helps everyone, regardless of ability.


Good code structure

– Tables with <th> tags

– Use headings and spacing to group related content

– Added SEO bonus

– Avoid CAPTCHAs for form validation

– No flashing of any kind

– Avoid unnecessary movement


Textual Content

– Provide informative, unique page titles

– Use headings to convey meaning and structure

– Make link text informative

– Write meaningful text alternatives for images, including captions

– Create transcripts and captions for multimedia

– Isn’t this just good usability?


Clear instructions, simple language

– WCAG AAA: Content shouldn’t be above a lower secondary ed level

– https://readability-score.com

– Simple language does not correlate to intelligence

– Accessibility helps everyone.

https://readability-score.com



Keep content clean and concise

– BEFORE: “The Committee on Education shall concern itself with the quality of educational services provided to all school-aged residents by the Boston Public Schools.”

– AFTER: “We work to make sure all Boston public school students get a quality education.”

http://next.boston.gov/updates/2016/3/10/writing-for-a-human-centere


Video and Audio

– Transcript to provide basic accessibility for most W3C media

– For visuals such as charts and diagrams, supply an audio description

– Captions are nice to have


Case study: Accessible Media Inc

– Accessible media for all Canadians

– Not-for-profit multimedia organization serving Canadians who are blind, partially sighted, deaf, hard of hearing, mobility or print restricted

– Improved UX and accessibility were prioritized

– Easy but extensible content publishing platform for all content authors

– Drupal 8



Drupal and accessibility

– Improvements in Drupal 8

– Semantic HTML5 elements

– Drupal.announce JavaScript method


Drupal and accessibility

– Controlled tab order

– Hidden/invisible/on-focus elements

– Fieldsets for radio buttons and checkboxes now in the Form API

– Alt text now required by default


All stages of the design process

– Plan from the start

– Universal design


Design & Develop

Discover– Who will be using the product, what will they need to

achieve?

Define– Review prototypes to ensure they will work for all

personas


Design & Develop

Deploy– Test with different browsers, devices and assistive

technologies

Analyze– Collect feedback from users about what is working well

and what could be improved


What if you can’t start from scratch?

– Incremental changes

Tools:– http://wave.webaim.org

– http://www.508checker.com

– https://www.w3.org/WAI/ER/tools

– https://readability-score.com

http://wave.webaim.org

http://wave.webaim.org

http://www.508checker.com

http://www.508checker.com

https://www.w3.org/WAI/ER/tools/

https://www.w3.org/WAI/ER/tools/




Working with a development partner

– “Do you build accessible websites?” WRONG!

– Ask for specific examples of past projects

– How do they test sites for accessibility compliance?

– Run code through scanner


Why should we care about accessibility?

– Litigation

– Lost business, conversions, opportunities

– It’s the right thing to do


Easter Egg!

– Be one of the first 5 respondents to email [email protected] with subject line "Accessibility Check-up" and receive a complimentary accessibility check-up for your website.

Some restrictions apply. Inquire for details.


Thank you!