Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Common accessibility mistakes and how to avoid them

65 views

Published on

For some, accessibility conjures nightmares of garish focus rings and high-contrast fonts. For others, it's snooze-inducing checklists ad nauseam.

With the onerous checklists and guidelines and complicated wording, accessibility can seem like a chore that takes a beautiful design and makes it...less beautiful. But accessible web design really boils down to a few basic principles and when you have these as your first principles when starting a project, you can save your self, your team, and your clients hours of headaches around accessibility testing.

This presentation will describe a few basic principles to keep in mind when building accessible web experiences, provide explanations and examples of these principles in code, and identify common accessibility pitfalls and how to avoid them.

Topics to be covered:
- Simple JavaScript techniques for ensuring accessible components
- CSS properties that affect accessibility
- How to use modern CSS (flexbox, grid) without compromising accessibility

Attendees will leave with:
- A mental framework for building accessible web experiences.
- The ability to avoid common accessibility pitfalls.
- JS and CSS code samples to use in future projects.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Common accessibility mistakes and how to avoid them

  1. 1. Common Accessibility Mistakes and How to Make Avoid Them July 14, 2018 Mediacurrent
  2. 2. | 2 Today’s Agenda I. About Me II. Accessibility Principles III. Common Mistakes IV. Questions and Opinions
  3. 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. | 4 Ben’s Homegrown Web Accessibility Principles ●●●●●●
  5. 5. | 5 Principle 1: Web Design > Graphic Design ●●●●●●
  6. 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. | 7 Principle 2: Be ASAP: As Semantic As Possible ●●●●●●
  8. 8. | 8 Every time you start typing <div>... Ask yourself: ●●●●●●
  9. 9. | 9 Could I use a more semantic element? ●●●●●●
  10. 10. | 10 HTML Elements Organized by Purpose ●●●●●● http://bit.ly/semantic-html (MDN)
  11. 11. | 11●●●●●●
  12. 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. | 13 Principle 3: Web Sites Should Look Good Naked ●●●●●●
  14. 14. | 14●●●●●●
  15. 15. | 15●●●●●● The Naked Test: Bookmarklet http://bit.ly/remove-styles (StackExchange)
  16. 16. | 16●●●●●●
  17. 17. | 17 Nice heading. Where are the buttons? Label order? Next / Create Account Swapped Position
  18. 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. | 19 Principle 4: Talk to Your Computer ●●●●●●
  20. 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. | 21 The Principles: A Refresher ●●●●●●
  22. 22. | 22 Web Design > Graphic Design Write Good Markup. Enhance good markup with CSS. Layer interactivity with JavaScript.
  23. 23. | 23 As Semantic As Possible Avoid <div>s when possible. Always use <button>.
  24. 24. | 24 Websites should look good naked. Remove CSS to check markup.
  25. 25. | 25 Talk to your computer. Use ARIA attributes to give the browser / screen reader more context.
  26. 26. | 26 Common Mistakes ●●●●●●
  27. 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. | 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. | 29
  30. 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. | 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. | 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. | 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. | 34 Empty ALT
  35. 35. | 35 Empty ALT #2
  36. 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. | 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. | 38 For other keyboard functionality, listen to the keyup or keydown event. http://keycode.info
  39. 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. | 40 Hiding & aria-expanded ● Indicates expanded / collapsed ● <button aria-expanded=”false”>A Button</button>
  41. 41. Thank you! @Mediacurrent Mediacurrent.comfacebook.com/mediacurrent

×