Accessibility Lightning Talk

Accessibility Lightning Talk

Sunday, April 10, 2011

When you hear ‘accessibility’what comes to mind?


Do you think of this?


...or this?


Have you thought about this?


or this?


or even this?


Accessibility is not about people with disabilities.


Accessibility is about

people!


Accessibility encompasses...


Different Devices

★ Desktop Computer

★ Mobile

★ In Between (iPad, Netbooks)

★ TV’s


Different Interactions

★ Mouse

★ Keyboard

★ Touchscreen

★ Screenreader


Different Technologies

★ JavaScript

★ CSS

★ Images

display: none;


Tips For Better Accessibility


Use The Right Element For The Job

<p> = paragraph

<h1>-<h6> = Heading 1 through 6

<div class=”paragraph”>

Using Tables for Layout


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


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


http://alistapart.com

http://alistapart.com

Associate Inputs with Labels

★ Link descriptive text with an input field

★ Provides context about what is expected

★ Clicking label puts cursor in input field


Implicit vs. Explicit Labels

<label for=”name”>Name</label><input type=”text” id=”name”>

<label> Name <input type=”text”></label>

label { curser: pointer; }


Use HTML5 Input Types

★ type=”search”

★ type=”tel”

★ type=”url”

★ type=”email”

★ type=”number”

★ Old browsers fallback to type=”text”


Type=“search” Has Slight Benefits


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


<input type=”number”>


<input type=”url”>


<input type=”email”>


Turn On Keyboard Navigation In OS X

System Preferences -> Keyboard -> All Controls


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!


:focus = :hover

★ Anywhere :hover is used, add :focus as well

a:hover,a:focus { text-decoration:underline; color:red;}


Example of Bad Keyboard Accessibility

★ http://www.hd-live.co.uk/


http://www.hd-live.co.uk

http://www.hd-live.co.uk

http://www.hd-live.co.uk/

http://www.hd-live.co.uk/

Hiding Content the Accessible Way

/* Hides from keyboard users */display:none;

/* Hidden but still accessible */.hidden { left:-999em; position:absolute; top:auto;}


Revealing Hidden Content

/* Reveal on Focus */.hidden:focus { position:static;}


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



<body> <a id="top" href="#content"> Skip to Content</a>


http://search.pewresearch.org/

http://search.pewresearch.org/


#top:focus { position:static; font-size:1.5em; background-color:#FFFFD5; display:block; font-weight:bold; color:#000; padding:2px 15px 5px;}


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


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.


role=”banner”

★ Site-orientated content, such as the title of the

page and the logo.

★ Header


role=”complementary”

★ Supporting content for the main content, but

meaningful in its own right when separated from

the main content.

★ Aside or sidebar


role=”contentinfo”

★ Child content, such as footnotes, copyrights,

links to privacy statement, links to preferences,

and so on.

★ Footer


role=”main”

★ Content that is directly related to or expands on

the central content of the document.

★ Main content container, #content


role=”navigation”

★ Content that contains the links to navigate this

document and/or related documents.


role=”search”

★ This section contains a search form to search

the site.


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/


http://perishablepress.com/press/2009/08/02/the-5-minute-css-mobile-makeover/




Mobile Stylesheet




Accessibility isn’t something you can tack on

at the end!Sunday, April 10, 2011

Think about it from the start.


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/


http://webaim.org

http://webaim.org

http://diveintoaccessibility.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

http://jfciii.com

Russell Heimlich

★ @kingkool68

★ http://www.russellheimlich.com/blog/


http://twitter.com/kingkool68

http://twitter.com/kingkool68

http://www.russellheimlich.com/blog/

http://www.russellheimlich.com/blog/

The Endhttp://slidesha.re/kingkool68


http://slidesha.re/kingkool68

http://slidesha.re/kingkool68

Accessibility Lightning Talk

Design

hidden content

navigation content

search type

article content

central content

main content container

contentinfo child content

keyboard navigation