May 18, 2017 presentation at AccessU: There’s often a debate about why applications aren’t accessible. Some people argue that teams don’t care enough about accessibility or prioritize it. Others argue that developers just don’t get it. What if it’s not that simple? What if, in a world of open source and Agile/fast-paced projects, frameworks and deadlines get in the way?
When frameworks like Drupal, jQuery, and WordPress fall short, you can still come out ahead in accessibility by knowing what questions to ask and what resources to engage. This session isn’t a session on out-of-the-box accessibility for Drupal, jQuery, WordPress, and similar frameworks – it will teach you some common glitches in frameworks and techniques to work around those to improve accessibility.
2. 2
» Usability & accessibility
specialist
» Member of TEITAC, or Section
508 / Section 255 refresh
committee
» Principal consultant at CX
Insights, the user experience
division of Tritus Technologies,
Inc.
» Originally from upstate NY, now
call Fairfax, VA (near DC) home
Kate Walser
kate@cxinsights.com
571.281.2626
2
Creative Commons – Some Rights
Reserved
3. » In the early days of software and web
apps, software licensing was a given if you
were not building your own from-scratch
applications.
VINTAGE
Commercial software
Image credit: “Commercial Software Licensing Costs,” by maisonbisson
Flickr Creative Commons
Creative Commons – Some Rights
Reserved
3
4. » As the market crashed in the late 1990s
and early 2000s and the recession hit,
agencies and businesses were finding
ways to cut costs.
CHALLENGE
Financial Times & Costly Software
Image credit: “Piggy Banks with savings chart,” by managementwritingsolutions
Flickr Creative Commons Creative Commons – Some Rights
Reserved
4
5. TRENDING
Frameworks & Open Source
Logos and trademarks courtesy of Oracle, Microsoft, Drupal, and
WordPress.
All product and company names are trademarks™ or registered® trademarks
of their respective holders. Use of them does not imply any affiliation with or
endorsement by them. Creative Commons – Some Rights
Reserved
5
10. » WordPress, Drupal, Joomla, SharePoint and other
content management tools let organizations build
websites quickly and manage content easily. The
built-in options out of box for most of them include
the ability to tag content with headings, used by
assistive technologies.
» Content owners can also insert media, and in
some better designed tools like WordPress, add
alternative text.
Content Management
Publish, Edit, Approve
Creative Commons – Some Rights
Reserved
10
11. With drop-down and complex menus, it can
be hard to find option you need. Menu
doesn’t stay open to let users use ctrl+f to
find nav.
Navigation
Drop-downs, Megamenus, Mobile menus
Creative Commons – Some Rights
Reserved
11
12. » You can also quickly stand up forms to
collect information such as Contact Us,
newsletter subscription, registration, or
application information using Drupal’s
Ctools and various frameworks and plug-
ins, like Contact Form 7.
» Many offer support to let you include
required indicators, date picker widgets,
and informative text near the fields to help
users know what format is needed.
Forms
Cues, Formats, Feedback
Creative Commons – Some Rights
Reserved
12
15. Search & Queries
Tables, Filter, Show X rows, Pagerlinks
Example: https://datatables.net/
Creative Commons – Some Rights
Reserved
15
16. GROUP EXERCISE #1
» Look at your site (or a site)
» Content, articles
» Any interactive sliders, carousels, media
» Search and search results
» Contact, registration, application forms
» How would you describe the items to a user who
couldn’t see the screen?
» If you had to tell Siri what to do, what would you say?
16
18. FOR FRAMEWORKS
Accessible content’s easy(er)…
» Content headings
» Alt attributes
» Labels for basic fields
» Table headings
» Skip to main content
Creative Commons – Some Rights
Reserved
18
19. WHEN USING FRAMEWORKS
Accessible interactions fell short
» Keyboard and speech
recognition had less
support
» Accessible rich Internet
application (ARIA) support
varied
Creative Commons – Some Rights
Reserved
19
20. » Websites with pop-ups for tooltips,
navigation menus, and modals and dialogs
weren’t always reachable by keyboard.
DEMO
Pop-ups weren’t reachable
Creative Commons – Some Rights
Reserved
20
21. LESSONS LEARNED
Pop-ups weren’t reachable
» Add keyboard alternative for
click and hover events
– Level 1 menu links sometimes
removed href that provides
keyboard support
– Hover sometimes used as trigger
» Improve focus outline
» Set focus when open dialogs
https://www.playosmo.com/en/
Creative Commons – Some Rights
Reserved
21
22. DEMO
Field label, help, access issues
Creative Commons – Some Rights
Reserved
22
Example: https://kwalser.wufoo.com/forms/applicant/
23. LESSONS LEARNED
Field label, help issues
» Adjust out of box required field
settings
– Change * to Required
– Add required attribute to field
» Assign field descriptions to fields
» Adjust code for custom items
– Forms in dialogs
– Character counts
Creative Commons – Some Rights
Reserved
23
25. LESSONS LEARNED
Validation messages needed focus
» Improve status messages
– Move focus to success / error
messages after validation
– Include links to fields with
problems
» Associate error message
with field via ARIA
Example: http://assets.cms.gov/resources/framework/3.4.1/Pages/#formvalidatorCreative Commons – Some Rights
Reserved
25
26. DEMO
Search results needed tweaks
Example: http://www.211texas.org/search/
Creative Commons – Some Rights
Reserved
26
27. LESSONS LEARNED
Search results needs tweaks
» Change filter option labels to “Filter” to avoid Search
hot command collision in speech recognition
» Set focus back to logical spot when pager links used
– Previous, page #, and next caused page refresh, focus set to top
rather than search results (or pager links)
» Associate text and map results for location-aware
searches (e.g., Near you) to improve map a11y
Creative Commons – Some Rights
Reserved
27
28. LESSONS LEARNED
Extend typeahead functionality
Creative Commons – Some Rights
Reserved
28
» Add offscreen element (e.g.,
<span>) with role=“status” and
aria-live=“polite” to provide
feedback on # of results,
navigation tips
» Add keydown listener on down
arrow to show and set focus on the
first result
30. 1. List all major features
» Navigation
– Drop-downs, Jump links, Into / out of
dialogs and auto-complete
» Search, faceted drill-down
– Results, Filtering, Pagination / pager links,
Table headings
» Sliders, carousels, galleries, tabs
» Content sharing options, plugins
» Maps and data charts
Creative Commons – Some Rights
Reserved
30
31. 2. Describe interactions, test criteria,
examples
Creative Commons – Some Rights
Reserved
31
» If click triggers action,
keyboard will also…
» If hover triggers action,
keyboard alternative…
» If error returned…
» If many links / elements
in the widget...
32. 3. Pick tools with large communities
Creative Commons – Some Rights
Reserved
32
» Look at downloads, usage,
active maintenance
» Find resources on
StackOverflow, Quora,
JSFiddle.net, CodePen.io
» Google site:frameworkname +
accessibility +…
– “How do I”
– Keyboard access
33. WordPress Accessibility Site
» WordPress’s accessibility site includes
resources for creating accessible plugins
and themes.
Creative Commons – Some Rights
Reserved
33
34. Drupal Groups Site
» Drupal Group’s site lists modules and
themes that have pledge to be accessible
and those that the community wishes
would take the pledge.
Drupal has made a pledge to accessibility, to make both its core framework
accessible and challenge module and theme developers to take an accessibility
pledge. This means they will “try” to make their products accessible.
Accessibility pledge modules/themes
Creative Commons – Some Rights
Reserved
34
#D7AX, #D8AX
35. Check usage stats if available
Creative Commons – Some Rights
Reserved
35
36. 4. Use forums, API, examples
Creative Commons – Some Rights
Reserved
36
37. 5. Apply (or create) a11y helpers
Creative Commons – Some Rights
Reserved
37
Assets.CMS.gov
Standards.USA.gov
38. GROUP EXERCISE #2
» Go back to your site (or a site)
» Content, articles
» Any interactive sliders, carousels, media
» Search and search results
» Contact, registration, application forms
» How would you describe those items and test them?
» What would you want to add, look for to improve
accessibility?
38
39. 39
» Knowbility Developer Resources
– Includes links to browser add-ons and favelets –
http://www.knowbility.org/v/air-dev-resources/AIR-Austin/34/
» Center for Medicare & Medicaid Services
– Assets.cms.gov – Accessibility framework
– Medicare.gov – Accessible website
» Browser add-ons
– Check Chrome, Firefox, IE plugins, extensions
Creative Commons – Some Rights
Reserved
Useful a11y resources
39
41. Summary
41
» Biggest challenges with framework accessibility are the rich,
interactive elements
» Describing how those should work in advance and finding
examples helps.
Acronyms to know
A11y = accessibility
WCAG = web content accessibility guidelines
ARIA = accessible rich Internet application standards
Before open source, many software and framework vendors who sold to government agencies considered accessibility as a must-have in their commercial off-the-shelf (COTS) products.
If it wasn’t accessible, agencies could request for a price, adjustments to improve accessibility.
Many of us are still in an Agile world where agencies and businesses are focused on creating an initial concept and iterating on that and building
Open source software and commercial frameworks like Drupal, WordPress, jQuery, Yahoo UI, and others have grown in popularity over the past decade.
Businesses use Microsoft SharePoint and Oracle Apex used to stand up intranets and data-intensive apps.
Many of us are still in an Agile world where agencies and businesses are focused on creating an initial concept and iterating on that and building
With today’s frameworks, creating an accessible product can feel like being locked in a jail with limited options to get out.
Search, Tables & Filters
Simplistic idea of accessibility as alt attributes and table headings
Apps have evolved and so have the interactions users expect and accessibility options
Drupal configuration
WordPress settings
Limitations and constraints imposed by the modules and framework
Far removed from the actual code
Simplistic idea of accessibility as alt attributes and table headings
Apps have evolved and so have the interactions users expect and accessibility options
Drupal configuration
WordPress settings
Limitations and constraints imposed by the modules and framework
Far removed from the actual code
With several plugins and libraries, we found great support for screen reader users. Accessible rich Internet application (ARIA) standards were great
In several tools, there’s a built in asterisk that’s included in various positions –
In several tools, there’s a built in asterisk that’s included in various positions –
WordPress site
Search uses plugin
In several tools, there’s a built in asterisk that’s included in various positions –
In several tools, there’s a built in asterisk that’s included in various positions –
When choosing modules and plug-ins for your framework, think about support – the more popular and widely used modules tend to have more support and examples. You’ll find lots of claims of “Accessible, responsive” choices, but they’re often pretty limited and they often do the easy things.
The more popular, widely-used items tend to have better out-of-box accessibility support as they applied standards / good coding and have more contributors. And if not, you’ll often be able to Google to find examples on Quora, Stack Overflow or other websites where developers ask questions.
Simplistic idea of accessibility as alt attributes and table headings
Apps have evolved and so have the interactions users expect and accessibility options
Drupal configuration
WordPress settings
Limitations and constraints imposed by the modules and framework
Far removed from the actual code