When we make our sites more accessible we make them easier for everyone to use.

1. ACCESSIBILITY
WITH CSS:
MAKING WEBSITES
BETTER FOR
EVERYONE

2. WHAT IS
ACCESSIBILITY?

3. SCREEN READER
Page has fifty-eight headings and two hundred
seventy-one links BBC dash Homepage Link
Graphic BBC Heading level two Heading level
two BBC navigation List of nine items bullet
Link News bullet Link Sport bullet Link
Weather bullet Link Capital bullet Link Future
bullet Link Shop bullet Link TV bullet Link
Radio bullet Link More…List end Search term
colon Edit Graphic Search Heading

4. HIGH CONTRAST

5. HIGH CONTRAST

6. VOICE RECOGNITION

7. VOICE RECOGNITION

8. VOICE RECOGNITION

9. TRACKBALL

10. KEYBOARD

11. YOU SHOULD
CARE ABOUT
ACCESSIBILITY

12. 1: UX
Content
Information Architecture
Interface Design

13. 2: HTML
WCAG
(Web Content Accessibility Guidelines)

14. 3: JAVASCRIPT
ARIA Roles
(Accessible Rich Internet Applications)

15. 4: CSS

16. DON’T SCREW IT UP
Don’t disable outlines.
Don’t forget :focus.
Don’t write in ALL CAPS.
Style the right element.

17. MAKE
IMPROVEMENTS

18. LINKS
Bigger is better.
Be descriptive.
Underline on :hover.

19. LINKS

20. LINKS

21. <a href="article.html">
<h3>Heavy-duty…</h3>
<p>Government is
providing… transportation
programs.</p>
</a>

22. LINKS

23. LINKS

24. GENERATED CONTENT

25. GENERATED CONTENT
button[type=submit]:after {
content: " >";
speak: none; }
<button type="submit">
Next</button>

26. GENERATED CONTENT

27. GENERATED CONTENT

28. SPRITES

29. SPRITES

30. SPRITES
.icon { overflow: hidden; }
.icon:before {
content: url(sprite.png);
position: absolute;
top: -30px;
left: -30px;
}

31. SPRITES

32. SPRITES

33. ICON FONTS
<span class="icon
icon_check"></span>
.icon_check {
content: 'e00e'; }

34. ICON FONTS
<span class="icon">
<span class="icon_check"
aria-hidden=“true”></span>
<span class=“offscreen”>
Good</span>
</span>

35. ARIA AS A HOOK
.summary[aria-expanded=false]{
/* make it look clickable */
}
.details[aria-hidden=true] {
display: none;
}

36. SPECIAL FEATURES
.offscreen
Skip navigation link

37. .OFFSCREEN
.offscreen {
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
}

38. SKIP LINK

39. SKIP LINK

40. FORM LABELS

41. FORM LABELS

42. TRY IT YOURSELF
ChromeVox
Windows High Contrast Theme
Turn off your mouse

43. BETTER FOR
EVERYONE

44. I LIKE TO MAKE
WEBSITES EVERYONE
CAN USE
@stephaniehobson
Stephaniehobson.ca

45. RESOURCES
- webaim.org
- wave.webaim.org
- alistapart.com/article/the-accessibility-of-wai-aria
- 24ways.org/2009/dont-lose-your-focus/
- blog.paciellogroup.com/2010/01/high-contrast-proof-css-
sprites
- http://snook.ca/archives/html_and_css/floated-label-pattern-
css
- www.wufoo.com/guides/custom-radio-buttons-and-checkboxes
- adam.co/lab/jquery/customselect
- filamentgroup.com/lab/bulletproof_icon_fonts.html
- www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-
links