USABILITY AND ACCESSIBILITY CSS GOTCHAS by Dennis E. Lembree Accessibility Summit September 10, 2013
Preview:
Citation preview
- Slide 1
- 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
- Slide 9
- Usability and Accessibility CSS Gotchas page 9 HIDING CONTENT
label { display: none; } GOTCHA!
- Slide 10
- 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); }
- Slide 13
- Usability and Accessibility CSS Gotchas page 13 HIDING CONTENT
Code example: Search terms: Search
- Slide 14
- Usability and Accessibility CSS Gotchas page 14 HIDING CONTENT
- TRANSITIONS.foo { height: 40px; overflow: hidden; transition: 1s
all; }.foo.hidden { height: 0; transition: 1s all; } GOTCHA!
- Slide 15
- 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;
- Slide 16
- Usability and Accessibility CSS Gotchas page 16 HIDING CONTENT
- TRANSITIONS Transition example: http://bit.ly/1dRgLV8 #foo {
height: 50px; overflow: hidden; transition: 0.5s all; } #foo.hidden
{ height: 0; visibility: hidden; transition: 0.5s all; }
- Slide 17 Toggle Lorem ipsum dolor sit amet.">
- Usability and Accessibility CSS Gotchas page 17 HIDING CONTENT
- TRANSITIONS PS: Dont forget the ARIA Goodness! Toggle Lorem ipsum
dolor sit amet.
- Slide 18
- Usability and Accessibility CSS Gotchas page 18 HIDING CONTENT
- TRANSITIONS Animations http://bit.ly/15l1P9O
$("#foo").bind("animationend webkitAnimationEnd oAnimationEnd
MSAnimationEnd", function(){ if (!$("#foo").hasClass("displayed"))
{ $('#foo').css("display","none"); } });
- Slide 19
- Usability and Accessibility CSS Gotchas page 19 CSS-GENERATED
CONTENT h1:before { content: "Chapter: "; } GOTCHA!
- Slide 20
- 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