Usability and Accessibility CSS Gotchas

1. Usability and Accessibility CSS Gotchas by Dennis E. Lembree Accessibility Summit September 10, 2013

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

3. About me • Senior Web Developer, Accessibility at PayPal (under Victor Tsaran) • @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. Link outline a { outline: none } Gotcha!

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

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/

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

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

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 allusers. [But do use if that’s the intent.] • CSS clip method is usually the best method to hide content visually.

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.

12. Hiding content • Do not use display:nonefor 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); • }

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

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

15. 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;

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; • }

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

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

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

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 <IE8. • Latest Voiceover and NVDA+Firefox supports :before and :after, but no AT supports CSS counters AFAIK (see next slide).

21. CSS-generated content

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

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

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

25. CSS-generated content • Good for clearfixand CSS3 shapes. • /* clear-fix */.group:after { content: ""; display: table; clear: both;} • For IE8+; credit CSS-Tricks • /* shapes */#triangle { width: 0;  height: 0;  border-bottom: 100px solid green;  border-left: 50px solid transparent;  border-right: 50px solid transparent; }

26. CSS-generated content

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

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

29. Using sprites • Warning: • 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). • JavaScript polyfill: http://bit.ly/176BpJG

30. 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 reader users • Broken sprite image • Non-CSS rendering

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

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

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

34. Text Size/Readability • Text size: • Small text is bad; recommend using minimum font size of 14px. • 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.

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

36. Text Size/Readability • Text size becoming less of an issue due to: • responsive web design • trends • awareness

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

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

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

42. 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!

45. Text links More tips: • Like regular text, a text link must provide sufficient color contrast against background (see dev.twitter.com). • Provide ample hit areas; use padding. • Provide descriptive link content. Meaningful text, no “click here”.

46. Questions/Contact • Questions? • Contact: • @PayPalinclusive • @DennisL • dlembree@paypal.com