View
230
Download
0
Category
Preview:
Citation preview
Lessons LearnedCoding Accessible Apps with Frameworks
Kate Walserkwalser@cxinsights.com 571-281-2626Slides @ http://www.slideshare.net/kwalser
Creative Commons – Some Rights Reserved
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.com571.281.2626
Creative Commons – Some Rights Reserved
3
3
Agenda
Time Duration Topic10:15 – 10:25 10 minutes Introductions, Objectives
10:25 – 10:35 10 minutes Apps & frameworks in action
10:35 – 10:45 15 minutes GROUP EXERCISESpot the A11y Gems
10:45 – 11:05 20 minutes What we learned
11:05 – 11:20 15 minutes Strategy
11:20 – 11:35 15 minutes GROUP EXERCISEYour site
11:35 – 11:45 10 minutes Discussion, Wrap-up
http://www.slideshare.net/kwalser
Creative Commons – Some Rights Reserved
4
» 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 softwareImage credit: “Commercial Software Licensing Costs,” by maisonbissonFlickr Creative Commons
Creative Commons – Some Rights Reserved
5
» As the market crashed in the late 1990s and early 2000s and the recession hit, agencies and businesses were finding ways to cut costs.
CHALLENGEFinancial Times & Costly Software
Image credit: “Piggy Banks with savings chart,” by managementwritingsolutionsFlickr Creative Commons
Creative Commons – Some Rights Reserved
6
TRENDINGFrameworks & 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
7
TRENDINGAgile
Creative Commons – Some Rights Reserved
8
THE PROMISE
Powerful, Quicker to build apps
Creative Commons – Some Rights Reserved
9
THE SIDE EFFECTBlack box accessibility
10
» Apps & Frameworks in Action
Creative Commons – Some Rights Reserved
11
» 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 ManagementPublish, Edit, Approve
Creative Commons – Some Rights Reserved
12
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.
NavigationDrop-downs, Megamenus, Mobile menus
Creative Commons – Some Rights Reserved
13
» 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.
FormsCues, Formats, Feedback
Creative Commons – Some Rights Reserved
14
Dynamic AreasAutocompletes, Data-dependent forms, Pop-ups, Surveys, Chat
Creative Commons – Some Rights Reserved
15
Maps & Geo-locationsNear you, Mapped search results
Creative Commons – Some Rights Reserved
16
Search & QueriesTables, Filter, Show X rows, Pagerlinks
Example: https://datatables.net/
17
GROUP EXERCISE #1 – 10:35 – 10:45
» 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?
18
» Lessons Learned
Photo credit: “Caution Falling Hardware,” fdecomite
Creative Commons – Some Rights Reserved
19
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
20
WHEN USING FRAMEWORKSAccessible interactions fell short
» Keyboard and speech recognition had less support
» Accessible rich Internet application (ARIA) support varied
Creative Commons – Some Rights Reserved
21
» 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
22
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
dialogshttps://www.playosmo.com/en/
Creative Commons – Some Rights Reserved
23
DEMO
Field label, help, access issues
Example: https://kwalser.wufoo.com/forms/applicant/
Creative Commons – Some Rights Reserved
24
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
25
DEMO
Validation messages needed focus
Note: These Oracle Apex example link may require a username and password. https://apex.oracle.com/pls/apex/wwv_flow.accept https://apex.oracle.com/pls/apex/f?p=4000:4500:3378385214844::NO:::
Creative Commons – Some Rights Reserved
26
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/#formvalidator
Creative Commons – Some Rights Reserved
27
DEMO
Search results needed tweaks
Example: http://www.211texas.org/search/
Creative Commons – Some Rights Reserved
28
LESSONS LEARNED
Search results needed 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
29
A better strategy» Planning A11y into Frameworks
Creative Commons – Some Rights Reserved
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
31
2. Describe interactions & test criteria, then find exemplar site
» If click triggers action, keyboard will also
» If hover triggers action, keyboard alternative
» If error returned, list specific errors in status message with link to field, show error near field, and assign to field explicitly
Creative Commons – Some Rights Reserved
32
3. Pick tools with large communities
» Drupal» WordPress» jQuery» Bootstrap» AngularJS» …
Creative Commons – Some Rights Reserved
33
WordPress Accessibility Site» WordPress’s accessibility site
includes resources for creating accessible plugins and themes.
Creative Commons – Some Rights Reserved
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
35
Check usage stats if available
Creative Commons – Some Rights Reserved
36
4. Look for tips forums, API
Creative Commons – Some Rights Reserved
37
5. Apply accessibility frameworks
Creative Commons – Some Rights Reserved
38
38
» 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
Useful a11y resources
Creative Commons – Some Rights Reserved
39
39
» WCAG» Assets.CMS.gov» WebAIM.org» Playbook.CIO.gov» WhiteHouse.gov
Exemplar Sites
40
Summary» Biggest challenges with framework accessibility are
the rich, interactive elements» Describing how those should work in advance and
finding examples helps.
41
ContactKate Walserkwalser@cxinsights.com • @kwalser • +1 (571) 281-2626
Recommended