Usability and Accessibility CSS Gotchas

1. Usability and Accessibility CSS Gotchas by Dennis E. Lembree Accessing Higher Ground November 6, 2013

2. Agenda • About me & my team • What’s a Gotcha? • Link outline • Hiding content • Hiding content with transitions • CSS-generated content • Font icons • Using sprites • Text size/readability • Text links • Questions/Contact

3. About Me & my Team • Senior Web Developer, Accessibility at PayPal. • Victor Tsaranis the accessibility program manager. • Victor, Cathy O’Connor (pictured), and I run the Accessibility Showcase. • @PayPalinclusive • @DennisL • @WebAxe • @EasyChirp

4. What’s 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

5. About Usability/Accessibility • Usability • Usability is the ease of use and learnability of a human-made object. (wikipedia) • Accessibility • Accessibility is the degree to which a product, device, service, or environment is available to as many people as possible. (wikipedia) • Disability, assistive tech • Situational disability (hand in cast, broken speakers, sunlight, etc.) • Cross browser, device, etc. • Lowbandinternet • Internationalization • SEO

6. Link outline a { outline: none } Gotcha!

7. 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 don’t do it!

8. 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/

9. Link outline • Missing on CNN.com, Bloomberg.com

10. Hiding content label { display: none; } Gotcha!

11. Hiding content • Goal of hiding content visually but provide to screen reader users. • Do not use display:none as it will hide content for allusers. [But do use if that’s the intent.] • CSS clip method is usually the best method to hide content visually.

12. 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.

13. Hiding content • Do not use display:nonefor content specific to screen reader users. • Older method is off-screen positioning (good for skip-to) • .hide { • position: absolute; • left: -9999em; • } • Use clipping (better for screen readers on touch-screen devicesand RTL language support) • .hide { • position: absolute; • clip: rect(1px, 1px, 1px, 1px); • }

14. Hiding content • Code example: • <form> • <label for="query" class="hide">Search terms:</label> • <input name="query" id="query" type="text"> • <button type="submit">Search</button> • </form>

15. Hiding content - transitions .foo { height: 40px; transition: 1s all; } .foo.hidden { height: 0; transition: 1s all; } Gotcha!

16. Hiding content - transitions • CSS transitions and animations which hide content. • Using height of zero alone doesn’t hide the content to screen reader users. • The solution: visibility: hidden;

17. Hiding content - transitions • Transition example: • http://bit.ly/1dRgLV8 • #foo { • height: 50px; • transition: 1s all; • } • #foo.hidden { • height: 0; • visibility: hidden; • transition: 1s all; • }

18. Hiding content - transitions • PS: Don’t forget the ARIA Goodness! • <a id="baz" class="bar" href="#foo" • aria-controls="foo" • aria-expanded="true">Toggle</a> • <div id="foo" aria-labelledby="baz">Loremipsum dolor sit amet.</div>

19. Hiding content - transitions • CSS Animations • http://bit.ly/15l1P9O • $("#foo").bind("animationendwebkitAnimationEndoAnimationEndMSAnimationEnd", function(){ • if (!$("#foo").hasClass("displayed")) { • $('#foo').css("display","none"); • } • });

20. CSS-generated content h1:before { content: "Chapter: "; } Gotcha!

21. CSS-generated content • Be cautious when creating content with CSS. • Content from :before and :after pseudo-elements not accessible with some screen readers and older browsers (<IE8). • Latest Voiceover and NVDA+Firefox supports :before and :after, but not CSS counters.

22. CSS-generated content • Besides accessibility: • Bad for progressive enhancement/separation of content from presentation (content not part of DOM). • Makes internationalization much more difficult. • Could be maintenance issue.

23. CSS-generated content • Poor uses: • /* general text */ • h1:before { • content: "Chapter: "; • } • p:after { • content: " is missing."; • }

24. CSS-generated content • Poor uses: • /* Add “Step #” to beginning of paragraphs */ • p:before{ • counter-increment: steps; • content: "Step " counter(steps) ": "; • font-weight: bold; • } • /* Add “ (PDF)” after links that go to PDFs */ • a[href$=".pdf"]:after { • content: " (PDF)"; • } • Credit Karl Groves

25. CSS-generated content • Good for quotes and colons. • /* quotes */ • q { • quotes: "“" "”" "‘" "’"; • } • q:before { • content: open-quote; • } • /* add colon after label */ • label:after { • content: ": "; • }

26. CSS-generated content • Good for clearfix. • /* clear-fix */.group:after { content: ""; display: table; clear: both;} • For IE8+; credit CSS-Tricks

27. CSS-generated content • Good for complex CSS3 shapes. • Pseudo-element provides extra hooks needed. • Many CSS shapes examples on CSS-Tricks:http://css-tricks.com/examples/ShapesOfCSS/

28. CSS-generated content • #pentagon { • position: relative; • width: 54px; • border-width: 50px 18px 0; • border-style: solid; • border-color: red transparent; • } • #pentagon:before { • content: ""; • position: absolute; • height: 0; • width: 0; • top: -85px; • left: -18px; • border-width: 0 45px 35px; • border-style: solid; • border-color: transparent transparent red; • }

29. CSS-generated content

30. CSS-generated content • Font Icons • Since some screen readers may read the pseudo content, you must: • Provide inline text label but hide visually. • Hide the generated content (the font character) from screen readers which support it. • Provide text label additionally in title attribute for keyboard (must build in support) and hint for mouse users. • CSS example: • .icon-gear:before { • font-family: 'my-custom-font-name'; • content: "\29"; • }

31. CSS-generated content • Font Icons • Don’t do: • <a href="#foo" title="options" class="icon-gear"> • <span class="hide">options</span> • </a> • Do: • <a href="#foo" title="options"> • <span aria-hidden="true" class="icon-gear"></span> • <span class="hide">options</span> • </a>

32. CSS-generated content

33. Using sprites <div class=“sprite”>&nbsp;</div> Gotcha!

34. Using sprites • Sprite is a technique using one graphic with multiple images in order to save HTTP requests and therefore improve performance.

35. Using sprites • Warnings • When images are disabled (or broken), the sprite is not displayed.  • When high contrast mode is enabled in Windows, the sprite is not displayed (CSS background images are not displayed in high contrast mode).

36. Using sprites • The CSS sprite generator, CSSSprites.comcreates: • <div style="background-position: 0px 0px; width: 50px; height: 50px”> • &nbsp; • </div> • No textual content! Bad for: • Screen readers • Broken sprite image • Non-CSS rendering, text-only browsers

37. Using sprites • <div style="background-position: 0px 0px; width: 50px; height: 50px"> • Delicious • </div>

38. Using sprites • <div class="icon delicious"> • <span class="hide">Delicious</span> • </div>

39. Using sprites • Other solutions: • “Notes on accessible CSS image sprites” by The Paciello Group; includes JavaScript polyfill: http://bit.ly/176BpJG • “Techniques for High-Contrast-Friendly Icons” by Yahoo: http://bit.ly/16FSw54

40. Text Size/Readability p { font-size: 10px; line-height: 11px; } Gotcha!

41. Text Size/Readability • Issues: • Small text is bad; recommend using minimum font size of 14px (when rendered). • Too little line height. • 16 PIXELS For Body Copy. Anything Less Is A Costly Mistake • Many users don’t know how to page zoom or resize text. • IE still doesn’t resize text set in fixed value. • Text overlays when increasing text size.

42. Text Size/Readability • Not convinced? Some stats: • The number of Americans who report some form of visual impairment is expected to double by 2030. • In 2008, an estimated 25.2 million adult Americans reported they either “have trouble” seeing, even when wearing glasses or contact lenses, or that they are blind or unable to see at all. • In 2013, 19% of Americans are 60 or older (most people with low vision are over the age of 60). • 314 million people worldwide live with visual impairment due to eye diseases or uncorrected refractive errors.

43. Text Size/Readability • Text size becoming less of an issue due to: • Responsive web design (RWD) • Trends • Awareness

44. Text Size/Readability • Speaking of RWD… • <meta name="viewport" content="width=device-width; initialscale=1.0; maximum-scale=1.0;"> Maximum scale of 1 takes away the ability to zoom. Don’t ever do this. Gotcha!

45. Text Size/Readability • Readability design tips: • Medium weight font • Ample line height (1.2-1.5) • Medium line length (50-65 characters) • Ample white space and margins • Avoid centering blocks of text • Avoid justified text • Sufficient color contrast • Readability content tips: • Use headings and lists • Supplement with images • Clear and simple language

48. Text links #main a { text-decoration: none } Gotcha!

49. Text links • User must be able to visually determine linked from regular text. • Underline is the convention (don’t make me think). • Strongly recommend not removing the link underline in main copy. • Conversely, do not underline text that isn’t a link.

50. Text links • Like the link outline, if you must remove the underline from links, provide a replacement. • Custom underline (usually for spacing between the text and underline) • Dotted underline • Color + bold • Warning: Can be confused with other text such as subheadings • Sadly, WCAG 2.0 provides a loophole for using color alone to indicate a link. • “Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them” BONUS GOTCHA!