USABILITY AND ACCESSIBILITY
CSS GOTCHAS
by Dennis E. Lembree
Accessibility Summit
September 10, 2013
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
Usability and Accessibility CSS Gotchas – page 2
ABOUT ME
•
•
•
•
•
Senior Web Developer, Accessibility at PayPal (under Victor Tsaran)
@PayPalinclusive
@DennisL
@WebAxe
@EasyChirp
Usability and Accessibility CSS Gotchas – page 3
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
Usability and Accessibility CSS Gotchas – page 4
LINK OUTLINE
a { outline: none }
GOTCHA!
Usability and Accessibility CSS Gotchas – page 5
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!
Usability and Accessibility CSS Gotchas – page 6
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/
Usability and Accessibility CSS Gotchas – page 7
LINK OUTLINE
Missing on CNN.com, Bloomberg.com
Usability and Accessibility CSS Gotchas – page 8
HIDING CONTENT
label { display: none; }
GOTCHA!
Usability and Accessibility CSS Gotchas – page 9
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.
Usability and Accessibility CSS Gotchas – page 10
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.
Usability and Accessibility CSS Gotchas – page 11
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);
}
Usability and Accessibility CSS Gotchas – page 12
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>
Usability and Accessibility CSS Gotchas – page 13
HIDING CONTENT - TRANSITIONS
.foo {
height: 40px;
overflow: hidden;
transition: 1s all;
}
.foo.hidden {
height: 0;
transition: 1s all;
}
GOTCHA!
Usability and Accessibility CSS Gotchas – page 14
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;
Usability and Accessibility CSS Gotchas – page 15
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;
}
Usability and Accessibility CSS Gotchas – page 16
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">Lorem ipsum dolor sit amet.</div>
Usability and Accessibility CSS Gotchas – page 17
HIDING CONTENT - TRANSITIONS
Animations
http://bit.ly/15l1P9O
$("#foo").bind("animationend webkitAnimationEnd
oAnimationEnd MSAnimationEnd", function(){
if (!$("#foo").hasClass("displayed")) {
$('#foo').css("display","none");
}
});
Usability and Accessibility CSS Gotchas – page 18
CSS-GENERATED CONTENT
h1:before {
content: "Chapter: ";
}
GOTCHA!
Usability and Accessibility CSS Gotchas – page 19
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).
Usability and Accessibility CSS Gotchas – page 20
CSS-GENERATED CONTENT
Usability and Accessibility CSS Gotchas – page 21
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.
Usability and Accessibility CSS Gotchas – page 22
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
Usability and Accessibility CSS Gotchas – page 23
CSS-GENERATED CONTENT
Good for quotes and colons.
/* quotes */
q {
quotes: "“" "”" "‘" "’";
}
q:before {
content: open-quote;
}
/* add colon after label */
label:after {
content: ": ";
}
Usability and Accessibility CSS Gotchas – page 24
CSS-GENERATED 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;
}
Usability and Accessibility CSS Gotchas – page 25
CSS-GENERATED CONTENT
Usability and Accessibility CSS Gotchas – page 26
USING SPRITES
<div class=“sprite”>&nbsp;</div>
GOTCHA!
Usability and Accessibility CSS Gotchas – page 27
USING SPRITES
• Sprite is a technique using one graphic with multiple images in order to save
HTTP requests and therefore improve performance.
Usability and Accessibility CSS Gotchas – page 28
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
Usability and Accessibility CSS Gotchas – page 29
USING SPRITES
The CSS sprite generator, CSSSprites.com creates:
<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
Usability and Accessibility CSS Gotchas – page 30
USING SPRITES
<div style="background-position: 0px 0px; width: 50px;
height: 50px">
Delicious
</div>
Usability and Accessibility CSS Gotchas – page 31
USING SPRITES
<div class="icon delicious">
<span class="hide">Delicious</span>
</div>
Usability and Accessibility CSS Gotchas – page 32
TEXT SIZE/READABILITY
p {
font-size: 10px;
line-height: 11px;
}
GOTCHA!
Usability and Accessibility CSS Gotchas – page 33
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.
Usability and Accessibility CSS Gotchas – page 34
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.
Usability and Accessibility CSS Gotchas – page 35
TEXT SIZE/READABILITY
Text size becoming less of an issue due to:
• responsive web design
• trends
• awareness
Usability and Accessibility CSS Gotchas – page 36
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
Usability and Accessibility CSS Gotchas – page 37
TEXT LINKS
#main a { text-decoration: none }
GOTCHA!
Usability and Accessibility CSS Gotchas – page 40
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.
Usability and Accessibility CSS Gotchas – page 41
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!
Usability and Accessibility CSS Gotchas – page 42
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”.
Usability and Accessibility CSS Gotchas – page 45
QUESTIONS/CONTACT
Questions?
Contact:
• @PayPalinclusive
• @DennisL
• dlembree@paypal.com
Usability and Accessibility CSS Gotchas – page 46