Download to read offline
AccessU 2018 - Surviving Dev Frameworks: Lessons Learned with WordPress, Drupal, and jQuery
- 1. SURVIVING DEV FRAMEWORKS: LESSONSLEARNED WITH DRUPAL, WORDPRESS, JQUERY, AND MORE Kate Walser • CX Insights kwalser@cxinsights.com • @kwalser Slides @ https://www.slideshare.net/kwalser
- 2. CHALLENGE Costly commercial software •As the market crashed in the late 1990s and early 2000s and the recession hit, agencies and businesses were finding ways to cut costs. Creative Commons – Some Rights Reserved 2 Image credit: “Piggy Banks with savings chart,” by managementwritingsolutions Flickr Creative Commons
- 3. TRENDING Agile Creative Commons –Some Rights Reserved 3
- 4. TRENDING Frameworks & OpenSource Creative Commons – Some Rights Reserved 4 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.
- 5. THE PROMISE Powerful, Quickerto build apps Creative Commons – Some Rights Reserved 5
- 6. THE SIDE EFFECT Blackbox accessibility Creative Commons – Some Rights Reserved 6
- 7. » More ComplexUser Experiences 7
- 8. Content Management Publish, Edit,Approve • WordPress, Drupal, Joomla, Grav, 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. Creative Commons – Some Rights Reserved 8
- 9. Navigation Drop-downs, Megamenus, Mobilemenus • Menu trends totally collapsed menus and that drop-down menus that are only available on hover Creative Commons – Some Rights Reserved 9
- 10. Forms Cues, Formats, Feedback •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. Creative Commons – Some Rights Reserved 10
- 11. Dynamic Areas Autocompletes, Data-dependentforms, Pop-ups • Functionality like autocomplete, typeahead search / results, data-driven forms are popping up across sites. Creative Commons – Some Rights Reserved 11
- 12. Dynamic Sidebars Feedback, Chat,and Support • More sites are including feedback and chat options off to the side. In some cases they pop up without any user interaction, which can cause confusion for users. Creative Commons – Some Rights Reserved 12
- 13. Maps & Geo-locations Nearyou, Mapped search results Creative Commons – Some Rights Reserved 13
- 14. Search & Queries Tables,Filter, Show X rows, Pagerlinks Creative Commons – Some Rights Reserved 14 Example: https://datatables.net/
- 15. Big Data Charts andTables New and easier to leverage chart libraries are giving organizations quick and easy ways to show big data in charts and scorecards. Creative Commons – Some Rights Reserved 15 Source: https://cloud.google.com/blog/big-data/2017/04/how-to-build-a-bi-dashboard-using-google- data-studio-and-bigquery
- 16. » Lessons Learned 16 Photocredit: “Caution Falling Hardware,” fdecomite
- 17. FOR FRAMEWORKS Accessible content’seasy(er)… • Content headings • Labels for basic fields • Table headings • Skip to main content Creative Commons – Some Rights Reserved 17
- 18. WHEN USING FRAMEWORKS Richercontent and interactions fell short 1. Title, not alt attribute, was default text for media 2. Tables pasted in from Word lost headings 3. Keyboard and speech recognition had less support 4. Accessible rich Internet application (ARIA) support to provide context, info varied – good for menus, but lacking for autocomplete and dynamic widgets Creative Commons – Some Rights Reserved 18
- 19. DEMO Pop-ups, menus weren’treachable • Websites with pop-ups for tooltips, navigation menus, and modals and dialogs weren’t always reachable by keyboard. Creative Commons – Some Rights Reserved 19
- 20. LESSONS LEARNED Add keylisteners, focus management • Add keyboard alternative for click and hover events – Use native <a href> and interactive elements (button, etc.) when possible – Level 1 menu links sometimes removed href that provides keyboard support – Add hover only after keyboard handled • Verify that focus outline available • Set focus when open pop-up windows and dialogs • Provide a11y info via Help, offscreen text, or ARIA Creative Commons – Some Rights Reserved 20
- 21. DEMO Form labels, helpertext, feedback weren’t accessible Example: https://kwalser.wufoo.com/forms/applicant/ Creative Commons – Some Rights Reserved 21
- 22. LESSONS LEARNED Adjust renderingof labels, helper text with ARIA, listeners • 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 22
- 23. LESSONS LEARNED Set focusto feedback and add “aria-describedby” • Improve status messages – Move focus to success / error messages after validation – Include links to fields with problems • Associate error message with field via ARIA Creative Commons – Some Rights Reserved 23 Example: http://assets.cms.gov/resources/framework/3.4.1/Pages/#formvalidator
- 24. DEMO Search, typeahead weren’tkeyboard accessible or didn’t announce result set Creative Commons – Some Rights Reserved 24 Example: https://www.nps.gov , https://www.cdc.gov
- 25. • Where inputfields offer typeahead functionality, use ARIA and event listeners if needed to enable focus to move to the list as soon as it’s available. • Include the empty div / container in the code on page load and position it immediately after the search box to minimize extra work. Creative Commons – Some Rights Reserved 25 LESSONS LEARNED Test with keyboard and check ARIA attributes Sample Code <input id="search-input" name=" search-input " type="text" class="form- text" size="60" maxlength="128" aria-haspopup="true" aria- autocomplete="both" role="combobox" aria-describedby="number-results"> <p class="show-on-results sr-only" id="number-results">10 matching results</p> <ul class="show-on-results" id="search-results" role=""> <li><a href="…">medicaid</a></li></ul>
- 26. LESSONS LEARNED Extend typeaheadfunctionality • 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 Creative Commons – Some Rights Reserved 26
- 27. DEMO Table abilities, pluginsvaried in accessibility27
- 28. LESSONS LEARNED Pick accessiblelibraries and tweak as needed • 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 28
- 29. DEMO Interactive charts stillevolving Creative Commons – Some Rights Reserved 29 Source: http://www.chartjs.org/samples/latest/charts/pie.html
- 30. LESSONS LEARNED Use chartlibraries that show labels or raw data Creative Commons – Some Rights Reserved 30
- 31. LESSONS LEARNED Use chartlibraries that show labels or raw data Creative Commons – Some Rights Reserved 31
- 32. A better strategy »Planning A11y into Frameworks 32
- 33. 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 33
- 34. 2. Describe interactions,test criteria, examples • If click triggers action, keyboard will also… • If hover triggers action, keyboard alternative… • If error returned… • If many links / elements in the widget... Creative Commons – Some Rights Reserved 34
- 35. 3. Prioritize keyboardaccess • Start with click and key event listeners • Only use mouse-related listeners for non-critical interactions • Try interacting from different devices – Keyboard only – Mobile Creative Commons – Some Rights Reserved 35
- 36. 4. Choose toolswith large communities • Look at downloads, usage, active maintenance • Find resources on StackOverflow, Quora, JSFiddle.net, CodePen.io – site:codepen.io +aria +example +jquery/drupal/wp – site:jsfiddle.net +aria +example +jquery/drupal/wp – site:jsbin.com +aria +example +jquery/drupal/wp • Google site:frameworkname +accessibility +… – “How do I” – Keyboard access Creative Commons – Some Rights Reserved 36
- 37. WordPress Accessibility Site https://make.wordpress.org/accessibility/ •WordPress’s accessibility site includes resources for creating accessible plugins and themes. Creative Commons – Some Rights Reserved 37
- 38. Drupal Groups Site Accessibility(AX) Pledge Modules / Themes • Drupal Group’s site lists modules and themes that have pledge to be accessible and those that the community wishes would take the pledge. Creative Commons – Some Rights Reserved 38 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 #D7AX, #D8AX
- 39. Check usage statsif available Creative Commons – Some Rights Reserved 39
- 40. 5. Do aquick check • Can you navigate using the keyboard? (Tab key) • Are any menus keyboard-accessible, either with Enter or Spacebar key on parent? Can you reach any pop-ups? • Do form elements wrap labels in <label> tags? • Do any dynamic elements have aria-* attributes in the code? • Do dynamic elements that return information or results relate the element with the results? Creative Commons – Some Rights Reserved 40
- 41. 6. Use forums,API, examples • Many JavaScript libraries document their APIs and options • Look for examples to see if and how you can change things like labels, event listeners, and other options • Check forums like StackOverflow and others to see if others experienced same issue Creative Commons – Some Rights Reserved 41
- 42. • Look foraccessibility frameworks that extend the functionality or provide examples of how to make it accessible 7. Apply (or create) a11y helpers Creative Commons – Some Rights Reserved 42 Assets.CMS.gov Standards.USA.gov
- 43. Useful a11y resources •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 43
- 44. Exemplar Sites • Knowbility.org •WCAG • Assets.CMS.gov • WebAIM.org • Playbook.CIO.gov • Standards.USA.gov Creative Commons – Some Rights Reserved 44
- 45. Summary • Rich, interactiveelements present greatest challenge • “Quick check” of plugin, module, library accessibility helps • Describe how interactions should work and find examples 45
Editor's Notes
- #2 Acronyms to know A11y = accessibility WCAG = web content accessibility guidelines ARIA = accessible rich Internet application standards
- #4 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
- #5 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 With today’s frameworks, creating an accessible product can feel like being locked in a jail with limited options to get out.
- #15 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
- #20 With several plugins and libraries, we found great support for screen reader users. Accessible rich Internet application (ARIA) standards were great
- #21 In several tools, there’s a built in asterisk that’s included in various positions –
- #23 In several tools, there’s a built in asterisk that’s included in various positions –
- #25 WordPress site Search uses plugin
- #27 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 –
- #37 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.