Upload
stephanie-hobson
View
2.257
Download
2
Embed Size (px)
DESCRIPTION
When we make our sites more accessible we make them easier for everyone to use.
Citation preview
ACCESSIBILITY WITH CSS: MAKING WEBSITES BETTER FOR EVERYONE
WHAT IS ACCESSIBILITY?
SCREEN READERPage 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
HIGH CONTRAST
HIGH CONTRAST
VOICE RECOGNITION
VOICE RECOGNITION
VOICE RECOGNITION
TRACKBALL
KEYBOARD
YOU SHOULD CARE ABOUT ACCESSIBILITY
1: UXContentInformation ArchitectureInterface Design
2: HTMLWCAG (Web Content Accessibility Guidelines)
3: JAVASCRIPTARIA Roles(Accessible Rich Internet Applications)
4: CSS
DON’T SCREW IT UPDon’t disable outlines.Don’t forget :focus.Don’t write in ALL CAPS.Style the right element.
MAKE IMPROVEMENTS
LINKSBigger 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 CONTENTbutton[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></span>
ARIA AS A HOOK.summary[aria-expanded=false]{ /* make it look clickable */}.details[aria-hidden=true] { display: none;}
SPECIAL FEATURES.offscreenSkip navigation link
.OFFSCREEN
.offscreen { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px);}
SKIP LINK
SKIP LINK
FORM LABELS
FORM LABELS
TRY IT YOURSELFChromeVoxWindows High Contrast ThemeTurn off your mouse
BETTER FOR EVERYONE
I LIKE TO MAKE WEBSITES EVERYONE CAN [email protected]
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