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