Download to read offline
More Related Content
Similar to Lessons Learned: Coding Accessible Apps with Frameworks 2017
![Copy of Presentation - [Your Organization Name]_20250924_181258_0000.pdf](https://cdn.slidesharecdn.com/ss_thumbnails/copyofpresentation-yourorganizationname202509241812580000-251117131601-9744dd2d-thumbnail.jpg?width=640&height=640&fit=bounds)
Lessons Learned: Coding Accessible Apps with Frameworks 2017
- 1. Lessons Learned Coding AccessibleApps with Frameworks Kate Walser kwalser@cxinsights.com Slides @ http://www.slideshare.net/kwalser
- 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 theearly 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 themarket 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 & OpenSource 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
- 6. TRENDING Agile Creative Commons –Some Rights Reserved 6
- 7. THE PROMISE Powerful, Quickerto build apps Creative Commons – Some Rights Reserved 7
- 8. THE SIDE EFFECT Blackbox accessibility Creative Commons – Some Rights Reserved 8
- 9. » Apps &Frameworks in Action 9
- 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 andcomplex 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 canalso 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
- 13. Dynamic Areas Autocompletes, Data-dependentforms, Pop-ups, Surveys, Chat Creative Commons – Some Rights Reserved 13
- 14. Maps & Geo-locations Nearyou, Mapped search results Creative Commons – Some Rights Reserved 14
- 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
- 17. » Lessons Learned Photocredit: “Caution Falling Hardware,” fdecomite 17
- 18. FOR FRAMEWORKS Accessible content’seasy(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 Accessibleinteractions fell short » Keyboard and speech recognition had less support » Accessible rich Internet application (ARIA) support varied Creative Commons – Some Rights Reserved 19
- 20. » Websites withpop-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’treachable » 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
- 24. DEMO Validation messages needfocus Creative Commons – Some Rights Reserved 24
- 25. LESSONS LEARNED Validation messagesneeded 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 neededtweaks Example: http://www.211texas.org/search/ Creative Commons – Some Rights Reserved 26
- 27. LESSONS LEARNED Search resultsneeds 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 typeaheadfunctionality 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
- 29. A better strategy »Planning A11y into Frameworks 29
- 30. 1. List allmajor 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 toolswith 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 statsif available Creative Commons – Some Rights Reserved 35
- 36. 4. Use forums,API, examples Creative Commons – Some Rights Reserved 36
- 37. 5. Apply (orcreate) 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 DeveloperResources – 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
- 40. 40 » Knowbility.org » WCAG »Assets.CMS.gov » WebAIM.org » Playbook.CIO.gov » Standards.USA.gov Creative Commons – Some Rights Reserved 40 Exemplar Sites
- 41. Summary 41 » Biggest challengeswith framework accessibility are the rich, interactive elements » Describing how those should work in advance and finding examples helps.
- 42. Contact Kate Walser kwalser@cxinsights.com •@kwalser 42
Editor's Notes
- #2 Acronyms to know A11y = accessibility WCAG = web content accessibility guidelines ARIA = accessible rich Internet application standards
- #4 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.
- #5 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
- #6 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.
- #7 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
- #9 With today’s frameworks, creating an accessible product can feel like being locked in a jail with limited options to get out.
- #16 Search, Tables & Filters
- #17 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
- #18 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
- #21 With several plugins and libraries, we found great support for screen reader users. Accessible rich Internet application (ARIA) standards were great
- #22 In several tools, there’s a built in asterisk that’s included in various positions –
- #24 In several tools, there’s a built in asterisk that’s included in various positions –
- #27 WordPress site Search uses plugin
- #28 In several tools, there’s a built in asterisk that’s included in various positions –
- #29 In several tools, there’s a built in asterisk that’s included in various positions –
- #33 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.
- #39 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