Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
ACCESSIBILITY
WITH CSS:
MAKING WEBSITES
BETTER FOR
EVERYONE
WHAT IS
ACCESSIBILITY?
SCREEN READER
Page has fifty-eight headings and two hundred
seventy-one links BBC dash Homepage Link
Graphic BBC Heading l...
HIGH CONTRAST
HIGH CONTRAST
VOICE RECOGNITION
VOICE RECOGNITION
VOICE RECOGNITION
TRACKBALL
KEYBOARD
YOU SHOULD
CARE ABOUT
ACCESSIBILITY
1: UX
Content
Information Architecture
Interface Design
2: HTML
WCAG
(Web Content Accessibility Guidelines)
3: JAVASCRIPT
ARIA Roles
(Accessible Rich Internet Applications)
4: CSS
DON’T SCREW IT UP
Don’t disable outlines.
Don’t forget :focus.
Don’t write in ALL CAPS.
Style the right element.
MAKE
IMPROVEMENTS
LINKS
Bigger is better.
Be descriptive.
Underline on :hover.
LINKS
LINKS
<a href="article.html">
<h3>Heavy-duty…</h3>
<p>Government is
providing… transportation
programs.</p>
</a>
LINKS
LINKS
GENERATED CONTENT
GENERATED CONTENT
button[type=submit]:after {
content: " >";
speak: none; }
<button type="submit">
Next</button>
GENERATED CONTENT
GENERATED CONTENT
SPRITES
SPRITES
SPRITES
.icon { overflow: hidden; }
.icon:before {
content: url(sprite.png);
position: absolute;
top: -30px;
left: -30px;
}
SPRITES
SPRITES
ICON FONTS
<span class="icon
icon_check"></span>
.icon_check {
content: 'e00e'; }
ICON FONTS
<span class="icon">
<span class="icon_check"
aria-hidden=“true”></span>
<span class=“offscreen”>
Good</span>
</...
ARIA AS A HOOK
.summary[aria-expanded=false]{
/* make it look clickable */
}
.details[aria-hidden=true] {
display: none;
}
SPECIAL FEATURES
.offscreen
Skip navigation link
.OFFSCREEN
.offscreen {
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
clip: ...
SKIP LINK
SKIP LINK
FORM LABELS
FORM LABELS
TRY IT YOURSELF
ChromeVox
Windows High Contrast Theme
Turn off your mouse
BETTER FOR
EVERYONE
I LIKE TO MAKE
WEBSITES EVERYONE
CAN USE
@stephaniehobson
Stephaniehobson.ca
RESOURCES
- webaim.org
- wave.webaim.org
- alistapart.com/article/the-accessibility-of-wai-aria
- 24ways.org/2009/dont-los...
Nächste SlideShare
Wird geladen in …5
×

Accessibility with CSS: Making Websites Better for Everyone

6.441 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie, Design
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Accessibility with CSS: Making Websites Better for Everyone

  1. 1. ACCESSIBILITY WITH CSS: MAKING WEBSITES BETTER FOR EVERYONE
  2. 2. WHAT IS ACCESSIBILITY?
  3. 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. 4. HIGH CONTRAST
  5. 5. HIGH CONTRAST
  6. 6. VOICE RECOGNITION
  7. 7. VOICE RECOGNITION
  8. 8. VOICE RECOGNITION
  9. 9. TRACKBALL
  10. 10. KEYBOARD
  11. 11. YOU SHOULD CARE ABOUT ACCESSIBILITY
  12. 12. 1: UX Content Information Architecture Interface Design
  13. 13. 2: HTML WCAG (Web Content Accessibility Guidelines)
  14. 14. 3: JAVASCRIPT ARIA Roles (Accessible Rich Internet Applications)
  15. 15. 4: CSS
  16. 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. 17. MAKE IMPROVEMENTS
  18. 18. LINKS Bigger is better. Be descriptive. Underline on :hover.
  19. 19. LINKS
  20. 20. LINKS
  21. 21. <a href="article.html"> <h3>Heavy-duty…</h3> <p>Government is providing… transportation programs.</p> </a>
  22. 22. LINKS
  23. 23. LINKS
  24. 24. GENERATED CONTENT
  25. 25. GENERATED CONTENT button[type=submit]:after { content: " >"; speak: none; } <button type="submit"> Next</button>
  26. 26. GENERATED CONTENT
  27. 27. GENERATED CONTENT
  28. 28. SPRITES
  29. 29. SPRITES
  30. 30. SPRITES .icon { overflow: hidden; } .icon:before { content: url(sprite.png); position: absolute; top: -30px; left: -30px; }
  31. 31. SPRITES
  32. 32. SPRITES
  33. 33. ICON FONTS <span class="icon icon_check"></span> .icon_check { content: 'e00e'; }
  34. 34. ICON FONTS <span class="icon"> <span class="icon_check" aria-hidden=“true”></span> <span class=“offscreen”> Good</span> </span>
  35. 35. ARIA AS A HOOK .summary[aria-expanded=false]{ /* make it look clickable */ } .details[aria-hidden=true] { display: none; }
  36. 36. SPECIAL FEATURES .offscreen Skip navigation link
  37. 37. .OFFSCREEN .offscreen { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); }
  38. 38. SKIP LINK
  39. 39. SKIP LINK
  40. 40. FORM LABELS
  41. 41. FORM LABELS
  42. 42. TRY IT YOURSELF ChromeVox Windows High Contrast Theme Turn off your mouse
  43. 43. BETTER FOR EVERYONE
  44. 44. I LIKE TO MAKE WEBSITES EVERYONE CAN USE @stephaniehobson Stephaniehobson.ca
  45. 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

×