Common accessibility mistakes and how to avoid them
- 1. Common Accessibility Mistakes and How to Make Avoid Them July 14, 2018 Mediacurrent
- 2. | 2 Today’s Agenda I. About Me II. Accessibility Principles III. Common Mistakes IV. Questions and Opinions
- 3. | 3 Ben Robertson Front End Developer benrobertson.io @banquos_ghost Mediacurrent is a full-service digital agency that implements world class open source software development, strategy and design to achieve defined goals for enterprise organizations seeking a better return on investment.
- 4. | 4 Ben’s Homegrown Web Accessibility Principles ●●●●●●
- 5. | 5 Principle 1: Web Design > Graphic Design ●●●●●●
- 6. | 6 The Three Tasks of Web Design ●●●●●● 1. Write Good Markup 2. Use CSS to enhance the existing structure 3. Layer interactivity with JavaScript
- 7. | 7 Principle 2: Be ASAP: As Semantic As Possible ●●●●●●
- 8. | 8 Every time you start typing <div>... Ask yourself: ●●●●●●
- 9. | 9 Could I use a more semantic element? ●●●●●●
- 10. | 10 HTML Elements Organized by Purpose ●●●●●● http://bit.ly/semantic-html (MDN)
- 11. | 11●●●●●●
- 12. | 12 Alternatives to <div> ●●●●●● List of all elements, organized by purpose (MDN): http://bit.ly/semantic-html ● <section> ● <article> ● <ul> or <ol> ● <header> ● <footer> ● <aside> ● <button>
- 13. | 13 Principle 3: Web Sites Should Look Good Naked ●●●●●●
- 14. | 14●●●●●●
- 15. | 15●●●●●● The Naked Test: Bookmarklet http://bit.ly/remove-styles (StackExchange)
- 16. | 16●●●●●●
- 17. | 17 Nice heading. Where are the buttons? Label order? Next / Create Account Swapped Position
- 18. | 18 The Naked Test: What to Look For ●●●●●● ● Does the structure of the site make sense? ● Is the content organized? ● Do interactive elements look interactive? ● Do inputs have labels?
- 19. | 19 Principle 4: Talk to Your Computer ●●●●●●
- 20. | 20 ARIA Attributes ●●●●●● ● aria-label: What is this element? ● aria-expanded: Is this element open or closed? ● aria-describedby: What element describes this element? ● aria-live: Will this element be updated later?
- 21. | 21 The Principles: A Refresher ●●●●●●
- 22. | 22 Web Design > Graphic Design Write Good Markup. Enhance good markup with CSS. Layer interactivity with JavaScript.
- 23. | 23 As Semantic As Possible Avoid <div>s when possible. Always use <button>.
- 24. | 24 Websites should look good naked. Remove CSS to check markup.
- 25. | 25 Talk to your computer. Use ARIA attributes to give the browser / screen reader more context.
- 27. | 27 Missing Title ● Every page needs a <title>Page Title</title> ● It should be informative ● It should be unique on your site.
- 28. | 28 Poor Heading structure ● Headings: h1, h2, h3, h4, h5, h6 ● Form the outline of a web page ● Should be used in order - don’t skip one! ● Assist readability / scannability
- 29. | 29
- 30. | 30 <a href=“/”>Read More</a> ● Read more what? ● Read more where? ● Links text should tell where or what a user is clicking on ● Solution: Add hidden text ● <a href=”/link” aria-label=”Read more about {{ title }}”>{{ title }}</a>
- 31. | 31 Inputs Missing a <label> ● Most common mistake is using a placeholder value instead of a value ● Designers love this: ● Wrong way: <input placeholder=”Search Google or type URL” /> ● You can achieve this using the “float label” pattern (http://bit.ly/float-labels) ● Every input needs a real <label> tag, associated with an input ● <label for=”email-field”>Email Address</label>
- 32. | 32 CSS Grid / Flexbox: { order: ?? } ● `order` lets you reorder flex items or grid items ● Only visual reordering ● Creates a mismatch between logical ordering / visual order ● Go back and update the source order
- 33. | 33 Images and ALT attributes ● Always include the alt attribute on an image ● ALT = Alternative ● <img src=”image.png” alt=”Description of the image” /> ● Is the image content, or merely decorative? ● It may be fine to leave the alt attribute blank
- 34. | 34 Empty ALT
- 35. | 35 Empty ALT #2
- 36. | 36 :focus { outline: none; } ● Focus styles are for people who aren’t using a mouse ● They help show a user where they are currently interacting with the interface ● Don’t remove them, style them! ● Limit them to keyboard-only interactions with :focus-visible (polyfill: http://bit.ly/focus-ring)
- 37. | 37 Missing keyboard functionality ● Interactivity needs to be triggered via mouse and keyboard ● Use the <button> element ● Other common keyboard considerations: ○ Exiting the current component ○ Submitting ○ Moving position / browsing
- 38. | 38 For other keyboard functionality, listen to the keyup or keydown event. http://keycode.info
- 39. | 39 Hiding Things ● So many ways to hide things ● The mistake is to hide something visually but not from tabindex or screen readers ● Methods of hiding visually and from tabindex / screen readers: ○ display: none ○ Html hidden attribute: <p hidden>Hidden Text</p> ● Hiding from screen-readers (combine with other CSS): ○ aria-hidden=”true”
- 40. | 40 Hiding & aria-expanded ● Indicates expanded / collapsed ● <button aria-expanded=”false”>A Button</button>