accessibility lightning talk
DESCRIPTION
Practical tips to make a website more accessible to different devices, technologies, and interactions. Presented April 12, 2011 for the WordPress DC Meetup.TRANSCRIPT
Accessibility Lightning Talk
Sunday, April 10, 2011
When you hear ‘accessibility’what comes to mind?
Sunday, April 10, 2011
Do you think of this?
Sunday, April 10, 2011
...or this?
Sunday, April 10, 2011
Have you thought about this?
Sunday, April 10, 2011
or this?
Sunday, April 10, 2011
or even this?
Sunday, April 10, 2011
Accessibility is not about people with disabilities.
Sunday, April 10, 2011
Accessibility is about
people!
Sunday, April 10, 2011
Accessibility encompasses...
Sunday, April 10, 2011
Different Devices
★ Desktop Computer
★ Mobile
★ In Between (iPad, Netbooks)
★ TV’s
Sunday, April 10, 2011
Different Interactions
★ Mouse
★ Keyboard
★ Touchscreen
★ Screenreader
Sunday, April 10, 2011
Different Technologies
★ JavaScript
★ CSS
★ Images
display: none;
Sunday, April 10, 2011
Tips For Better Accessibility
Sunday, April 10, 2011
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
Think About Source Order★ Markup content the way it should be read NOT the
way it should be displayed.
Header
Aside Content
Header
Content
Aside
Sunday, April 10, 2011
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
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
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
Use HTML5 Input Types
★ type=”search”
★ type=”tel”
★ type=”url”
★ type=”email”
★ type=”number”
★ Old browsers fallback to type=”text”
Sunday, April 10, 2011
Type=“search” Has Slight Benefits
Sunday, April 10, 2011
Removing Type=”search” Default Styles
input[type=”search”] { -moz-appearance: textfield; -webkit-appearance: textfield;}
input[type=”search”]::-webkit-search-cancel-button { /* Remove default */ -webkit-appearance: none;}
Sunday, April 10, 2011
<input type=”number”>
Sunday, April 10, 2011
<input type=”url”>
Sunday, April 10, 2011
<input type=”email”>
Sunday, April 10, 2011
Turn On Keyboard Navigation In OS X
System Preferences -> Keyboard -> All Controls
Sunday, April 10, 2011
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
:focus = :hover
★ Anywhere :hover is used, add :focus as well
a:hover,a:focus { text-decoration:underline; color:red;}
Sunday, April 10, 2011
Example of Bad Keyboard Accessibility
★ http://www.hd-live.co.uk/
Sunday, April 10, 2011
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
Revealing Hidden Content
/* Reveal on Focus */.hidden:focus { position:static;}
Sunday, April 10, 2011
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
Skip Navigation Link
<body> <a id="top" href="#content"> Skip to Content</a>
Sunday, April 10, 2011
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
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” role=”banner”>
Sunday, April 10, 2011
role=”article”
★ 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
role=”banner”
★ Site-orientated content, such as the title of the
page and the logo.
★ Header
Sunday, April 10, 2011
role=”complementary”
★ 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
role=”contentinfo”
★ Child content, such as footnotes, copyrights,
links to privacy statement, links to preferences,
and so on.
★ Footer
Sunday, April 10, 2011
role=”main”
★ Content that is directly related to or expands on
the central content of the document.
★ Main content container, #content
Sunday, April 10, 2011
role=”navigation”
★ Content that contains the links to navigate this
document and/or related documents.
Sunday, April 10, 2011
role=”search”
★ This section contains a search form to search
the site.
Sunday, April 10, 2011
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
Mobile Stylesheet
Sunday, April 10, 2011
Accessibility isn’t something you can tack on
at the end!Sunday, April 10, 2011
Think about it from the start.
Sunday, April 10, 2011
Accessibility Resources
★ http://webaim.org
★ http://diveintoaccessibility.org/
★ http://juicystudio.com/article/examining-wai-
aria-document-andmark-roles.php
★ http://www.w3.org/standards/webdesign/
accessibility
★ http://jfciii.com/
Sunday, April 10, 2011
Russell Heimlich
★ @kingkool68
★ http://www.russellheimlich.com/blog/
Sunday, April 10, 2011
The Endhttp://slidesha.re/kingkool68
Sunday, April 10, 2011