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.

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.

26. | 26
Common Mistakes
●●●●●●

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>

41. Thank you!
@Mediacurrent Mediacurrent.comfacebook.com/mediacurrent