Usability and Accessibility CSS Gotchas

USABILITY AND ACCESSIBILITY CSS GOTCHASby Dennis E. LembreeAccessibility SummitSeptember 10, 2013

Usability and Accessibility CSS Gotchas – page 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


ABOUT ME

• Senior Web Developer, Accessibility at PayPal (under Victor Tsaran)• @PayPalinclusive• @DennisL• @WebAxe• @EasyChirp


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


LINK OUTLINE

a { outline: none }

GOTCHA!


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!


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/

http://www.outlinenone.com/


LINK OUTLINE

Missing on CNN.com, Bloomberg.com


HIDING CONTENT

label { display: none; }

GOTCHA!


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


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.


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);

}


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>


HIDING CONTENT - TRANSITIONS

.foo { height: 40px; overflow: hidden; transition: 1s all;}.foo.hidden { height: 0; transition: 1s all;} GOTCHA!



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



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;

}

http://bit.ly/1dRgLV8

http://bit.ly/1dRgLV8



PS: Don’t forget the ARIA Goodness!

<a class="bar" href="#foo" aria-controls="foo" aria-expanded="true">Toggle</a>

<div id="foo">Lorem ipsum dolor sit amet.</div>



Animationshttp://bit.ly/15l1P9O

$("#foo").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){

if (!$("#foo").hasClass("displayed")) {$('#foo').css("display","none");

}});

http://bit.ly/15l1P9O

http://bit.ly/15l1P9O


CSS-GENERATED CONTENT

h1:before { content: "Chapter: ";}

GOTCHA!



• 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).



• Besides accessibility:• Bad for progressive enhancement/separation of content from presentation

(content not part of DOM).• Bad for internationalization.• Could be maintenance issue.



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



Good for quotes and colons.

/* quotes */q { quotes: "“" "”" "‘" "’";}q:before { content: open-quote;}

/* add colon after label */label:after { content: ": ";}



Good for clearfix and 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; }


USING SPRITES

<div class=“sprite”> </div>

GOTCHA!


USING SPRITES

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


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

http://bit.ly/176BpJG

http://bit.ly/176BpJG


USING SPRITES

The CSS sprite generator, CSSSprites.com creates:

<div style="background-position: 0px 0px; width: 50px; height: 50px”>

</div>

No textual content! Bad for:• Screen reader users• Broken sprite image• Non-CSS rendering

http://csssprites.com/


USING SPRITES

<div style="background-position: 0px 0px; width: 50px; height: 50px">

Delicious</div>


USING SPRITES

<div class="icon delicious"><span class="hide">Delicious</span>

</div>


TEXT SIZE/READABILITY

p { font-size: 10px; line-height: 11px;}

GOTCHA!



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.

http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/



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.



Text size becoming less of an issue due to: • responsive web design• trends• awareness



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


TEXT LINKS

#main a { text-decoration: none }

GOTCHA!


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.


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!


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


QUESTIONS/CONTACT

Questions?

Contact:• @PayPalinclusive• @DennisL• [email protected]

Usability and Accessibility CSS Gotchas

Documents

Transcript of Usability and Accessibility CSS Gotchas