I was fortunate to be able to attend the 2012 Accessibility Conference this week, hosted by Environments for Humans (http://environmentsforhumans.com/).
There were several great presentations on subjects like plain language, ARIA, implementation strategies, testing methods, developing accessible apps for iOS and more.
I have compiled my notes and presented them here along with links to supporting information, documentation and other resources.
Jared Smith — ARIA Gone Wild
@jared_w_smith | Works @ WebAim.org | http://smithplanet.com
- ARIA does not solve all accessibility problems
- ARIA does communicate roles, states and properties to screen reader users
- ARIA is not supported by IE6 & IE7
- Do not use ARIA when HTML communicates the semantics
-
ARIA Landmarks (used to navigate the page)
application, banner, complementary, contentinfo, main, navigation, form, search- Differentiate similar landmarks with
aria-label and aria-labelledby attributes (associates one element with another)
- Note: Not every list of links is navigation
- ARIA usages can be valid, but fail to improve (or even diminish) accessibility
- Landmarks that should be used once per page: banner, contentinfo, main
-
Skip navigation links
- These are only useful for browsers. (for keyboard accessibility)
- Proper landmarks will serve screen reader users.
-
role="presentation"
-
Nullifies HTML semantics (a table marked with role="presentation" will look like a div to a screen reader)
-
role="application"
- Forces the marked element into forms-mode or application-mode vs. reading-mode
- The two modes change the way the screen reader keyboard shortcuts work
- Use only when element contains only interactive controls (very sparingly)
- Some ARIA roles imply application-mode
-
aria-required="true"
- Only necessary when it’s not obvious a field is required (Ex: A login form does not need required attribute on username and password fields.)
-
aria-invalid="true"
- Identifies errant form-fields
- Use dynamically when validating form fields
-
aria-disabled="true"
- Using disabled="disabled" hides the element from screen readers
-
aria-hidden="true"
- Use on hidden content to hide from screen readers
- Other useful attributes: aria-haspopup,aria-expanded, aria-live (for dynamic content)
-
Hide skip link navigation by moving off screen
Elle Waters — Gamification of Accessibility
@nethermind | http://www.ellewaters.com
As Texas.gov already has all the motivation we need to make our tools accessible, I took few notes during this session. But I did have the following two notes:
- Checkout HUMANA’s responsive infographics & SVG map (http://www.humananews.com/tag/infographic/)
- Skip navigation solution: Provide a hidden table-of-contents that links to particular parts of the page (see note above regarding skip link navigation)
Glenda ‘The Good Witch’ Sims — Hands on Accessibility
-
Free testing tools:
- WAVE
- Jim Thatcher’s favelets (http://jimthatcher.com/favelets/)
- Firebug
- Accessibility Evaluator (FAE)
- Juicy Studio’s Accessibility Toolbar
- Headings map
- FireEyes
- aChecker
- 25% of the types of accessibility issues can be found with automated tools (but this amounts to roughly 60% of the accessibility problems in a web page)
- No sight, no sound, no mouse, no problem!
-
Free Screen readers:
- NVDA
- WindowEyes (Jared Smith says not so good)
- VoiceOver (Mac)
-
Good Witch Flight Plan
- Map
- Enterprise scan & smoke test
- Screen readers
- Checklist
-
Manual testing:
- Select representative pages
- Consider audience, impact and exposure
- Follow doitmyselfblog.com (disabled accessibility expert)
-
WCAG 2.0 AA
-
38 success criteria
-
12 tested by keyboard alone
- Audio control
- Keyboard
- No keyboard trap?
- Timing adjustable
- Pause, stop, hide
- Focus order
- Focus visible
- Onfocus
- Oninput
- + 3 more
- 11 tested by screen reader
- 1-2 hours to comprehensively test a simple page
-
80/20 rule
- 80% technology (automated testing)
- 20% manual
John Foliot — Accessibility Implementation Strategies
-
Book: The Tipping Point by Malcolm Gladwell
-
"The law of the few"
- Connectors: They know everybody in the organization
- Mavens: Tech gurus. Know a lot about the various technologies
- Salesmen: Works with connectors & mavens to communicate message
-
Communication skills
- Be likeable – stay positive!
- Connect: Find mutual points of interest
-
‘Accessible’ JS frameworks
-
Consistency is as important to accessibility as to overall design
- Your solution might not be perfect, but if it’s functional and consistent across the application users will learn it.
- "Be the fireman and not the cop."
Paul Adam — iAccessibility Mobile Freedom for All
-
Developing for iOS
-
Respect the rotor
-
Use tags and aria attributes correctly
- Labels, fieldsets, tables, etc
-
Use correct input types
- Can enable automatic device keyboard changes based on expected input
-
Focus on focus management
- Set focus on dynamically generated content (modals, etc.)
-
Labels above and aligned with input fields
- With any formatting instructions below (and aligned with) the input field
Matt May — 40 Years of Mobile Development Experience
- 1971: Trace R&D founded with a focus on augmentative communication
- 1980s – 90s: OS/Software accessibility
- 90s – present: Web and mobile accessibility
-
Aren’t humans interesting?
-
Traditional concepts of disability
- Deafness (.1% deaf in both ears)
- Colorblindness (1-12% depending on race/gender)
-
Things that are left out or minimized
- Low vision (10 for every 1 who’s blind)
- Poor hearing (90 for every 1 who’s deaf)
- Limited mobility (36.5 million in the US)
- Limited capacity to read (25-50% of US adults)
-
Situational disability
-
Mobile problems are user problems
- Low vision
- Poor hearing
- Limited mobility
- Limited capacity to read text
- Limited capacity to type
-
What we’ve learned
- Start early
- Focus on the people
- Build on what works
-
Anticipate breakthroughs
- Not just the media query kind
-
Book: Universal Design for Web Applications by Wendy Chisholm and Matt May
- "The universal design concept increases the supply of usable housing by including universal features in as many houses as possible, and allows people to remain in their homes as long as they like." – Ron Mace
-
Seven Principles of Universal Design
-
Equitable use
- The design is useful and marketable to people with diverse abilities
-
Flexibility in use
- The design accommodates a wide range of individual preferences and abilities
-
Simple and intuitive
- Use of the design is easy to understand, regardless of the users experience, knowledge, language skills, etc.
-
Perceptible information
- Communicate effectively to the user, regardless of ambient conditions or the users sensory abilities
-
Tolerance for error
- Minimize hazards and adverse consequences of accidental or unintended actions
-
Low physical effort
- The design can be used efficiently andcomfortably and with a minimum of fatigue
-
Size and space for approach and use
- Appropriate size and space is provided for approach, reach, manipulation, and use regardless of user’s body size, posture, or mobility
- Designing for Devices
-
Designing for Humans
-
Don’t assume you know the user
- Allow desktop experience on mobile
- Provide common URLs
- Don’t limit user unnecessarily
- Keep your markup clean
