USABILITY AND ACCESSIBILITY CSS GOTCHAS by Dennis E. Lembree
Accessibility Summit September 10, 2013
Slide 2
Usability and Accessibility CSS Gotchas page 2 AGENDA About me
Whats a Gotcha? Gotchas: Link outline Hiding content Hiding content
with transitions CSS-generated content Using sprites Text
size/readability Text links Questions/Contact
Slide 3
Usability and Accessibility CSS Gotchas page 3 ABOUT ME Senior
Web Developer, Accessibility at PayPal (under Victor Tsaran)
@PayPalinclusive @DennisL @WebAxe @EasyChirp
Slide 4
Usability and Accessibility CSS Gotchas page 4 WHATS A GOTCHA?
Urban Dictionary (definition 4): An annoying or unfavorable feature
of a product or item that has not been fully disclosed or is not
obvious. Online Slang Dictionary: a common source of problems CSS
Gotcha === poor CSS technique
Slide 5
Usability and Accessibility CSS Gotchas page 5 LINK OUTLINE a {
outline: none } GOTCHA!
Slide 6
Usability and Accessibility CSS Gotchas page 6 LINK OUTLINE The
link outline visually indicates a focused element, most often a
link. Rendered by default in most browsers as a fuzzy blue outline
(webkit) or a dotted line around the linked element. The CSS
outline:none (or outline:0) removes the outline, so dont do
it!
Slide 7
Usability and Accessibility CSS Gotchas page 7 LINK OUTLINE
Crucial for sighted keyboard users to navigate. Why is problem so
widespread? CSS resets, design, ignorance. Modifying the styling is
acceptable, but: Risky; check all user agents. Could be maintenance
intensive. More:
http://www.outlinenone.com/http://www.outlinenone.com/
Slide 8
Usability and Accessibility CSS Gotchas page 8 LINK OUTLINE
Missing on CNN.com, Bloomberg.com
Usability and Accessibility CSS Gotchas page 10 HIDING CONTENT
Goal of hiding content visually but provide to screen reader users.
Do not use display:none as it will hide content for all users. [But
do use if thats the intent.] CSS clip method is usually the best
method to hide content visually.
Slide 11
Usability and Accessibility CSS Gotchas page 11 HIDING CONTENT
Use discretion when hiding content for screen reader users.
Labeling a form element that has meaning conveyed visually (such as
search). An alternative is the aria-label attribute. Hiding skip-
to links when not focused. Providing instructions in special
circumstances where interaction may be confusing to users of
assistive technology.
Slide 12
Usability and Accessibility CSS Gotchas page 12 HIDING CONTENT
Do not use display:none for content specific to screen reader
users. Use off-screen (good for skip-to).hide { position: absolute;
left: -9999em; } Use clipping (better for screen readers on
touch-screen devices; better for adding RTL language support).hide
{ position: absolute; clip: rect(1px, 1px, 1px, 1px); }
Usability and Accessibility CSS Gotchas page 15 HIDING CONTENT
- TRANSITIONS CSS transitions and animations which hide content.
Using height of zero alone doesnt hide the content to screen reader
users. The solution: visibility: hidden;
Usability and Accessibility CSS Gotchas page 20 CSS-GENERATED
CONTENT Be cautious when creating content with CSS. Content from
:before and :after pseudo-elements not accessible with some screen
readers and
