Accessibility with CSS: Making Websites Better for Everyone

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 USE@stephaniehobsonStephaniehobson.ca

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