Practical tips to make a website more accessible to different devices, technologies, and interactions. Presented April 12, 2011 for the WordPress DC Meetup.
15. Use The Right Element For The Job
<p> = paragraph
<h1>-<h6> = Heading 1 through 6
<div class=”paragraph”>
Using Tables for Layout
Sunday, April 10, 2011
16. Think About Source Order
★ Markup content the way it should be read NOT the
way it should be displayed.
Header Header
Aside Content
Content
Aside
Sunday, April 10, 2011
17. Use Alt Attributes on <img>
★ Include text to display as a backup
★ Provide context to what the user is missing
★ If the image is purely decoration use alt=””
Sunday, April 10, 2011
18. Associate Inputs with Labels
★ Link descriptive text with an input field
★ Provides context about what is expected
★ Clicking label puts cursor in input field
Sunday, April 10, 2011
19. Implicit vs. Explicit Labels
<label for=”name”>Name</label>
<input type=”text” id=”name”>
<label> Name
<input type=”text”>
</label>
label { curser: pointer; }
Sunday, April 10, 2011
20. Use HTML5 Input Types
★ type=”search”
★ type=”tel”
★ type=”url”
★ type=”email”
★ type=”number”
★ Old browsers fallback to type=”text”
Sunday, April 10, 2011
26. Turn On Keyboard Navigation In OS X
System Preferences -> Keyboard -> All Controls
Sunday, April 10, 2011
27. Tab Index
★ Use tabindex attribute to specify tab order
★ Tab index goes from lowest to highest
★ tabindex=”-1” will be skipped
★ If you use proper HTML source order,
you’re done!
Sunday, April 10, 2011
28. :focus = :hover
★ Anywhere :hover is used, add :focus as well
a:hover,
a:focus {
text-decoration:underline;
color:red;
}
Sunday, April 10, 2011
29. Example of Bad Keyboard Accessibility
★ http://www.hd-live.co.uk/
Sunday, April 10, 2011
30. Hiding Content the Accessible Way
/* Hides from keyboard users */
display:none;
/* Hidden but still accessible */
.hidden {
left:-999em;
position:absolute;
top:auto;
}
Sunday, April 10, 2011
31. Revealing Hidden Content
/* Reveal on Focus */
.hidden:focus {
position:static;
}
Sunday, April 10, 2011
32. Skip Navigation Link
★ Lets a visitor skip straight to the content
★ Without it, keyboard visitors suffer
★ Should be the first element after <body>
★ Can be visible or hidden based on the desgin
★ If hidden, should stand out on focus
Sunday, April 10, 2011
33. Skip Navigation Link
<body>
<a id="top" href="#content">
Skip to Content</a>
Sunday, April 10, 2011
34. Skip Navigation Link
#top:focus {
position:static;
font-size:1.5em;
background-color:#FFFFD5;
display:block;
font-weight:bold;
color:#000;
padding:2px 15px 5px;
}
Sunday, April 10, 2011
35. ARIA Landmark Roles
★ Help define the structure of a document
★ Screenreaders can jump around
to different sections
★ Just add role attribute to an element
<div id=”header” 谤辞濒别=”产补苍苍别谤”>
Sunday, April 10, 2011
36. 谤辞濒别=”补谤迟颈肠濒别”
★ Content that makes sense in its own right, such
as a complete blog post, a comment on a blog,
a post in a forum, and so on.
Sunday, April 10, 2011
37. 谤辞濒别=”产补苍苍别谤”
★ Site-orientated content, such as the title of the
page and the logo.
★ Header
Sunday, April 10, 2011
38. 谤辞濒别=”肠辞尘辫濒别尘别苍迟补谤测”
★ Supporting content for the main content, but
meaningful in its own right when separated from
the main content.
★ Aside or sidebar
Sunday, April 10, 2011
39. 谤辞濒别=”肠辞苍迟别苍迟颈苍蹿辞”
★ Child content, such as footnotes, copyrights,
links to privacy statement, links to preferences,
and so on.
★ Footer
Sunday, April 10, 2011
40. 谤辞濒别=”尘补颈苍”
★ Content that is directly related to or expands on
the central content of the document.
★ Main content container, #content
Sunday, April 10, 2011
41. 谤辞濒别=”苍补惫颈驳补迟颈辞苍”
★ Content that contains the links to navigate this
document and/or related documents.
Sunday, April 10, 2011
42. 谤辞濒别=”蝉别补谤肠丑”
★ This section contains a search form to search
the site.
Sunday, April 10, 2011
43. Mobile Stylesheet
★ Smartphones handle websites OK
★ Dumb phones need a slimmed down stylesheet
★ http://perishablepress.com/press/2009/08/02/
the-5-minute-css-mobile-makeover/
Sunday, April 10, 2011