Building An Accessible Site from the Ground Up
-
Upload
russell-heimlich -
Category
Design
-
view
3.629 -
download
0
description
Transcript of Building An Accessible Site from the Ground Up
![Page 1: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/1.jpg)
Building An Accessible Site from
the Ground Up
![Page 2: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/2.jpg)
Russell Heimlich @KingKool68
‣Web Developer at the Pew Research Center
‣http://www.russellheimlich.com/blog
![Page 3: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/3.jpg)
I Like Funny T-Shirts
![Page 4: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/4.jpg)
What is accessibility?
http://www.flickr.com/photos/artbystevejohnson/4610457832/
![Page 5: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/5.jpg)
Accessibility is NOT just about people with
disabilities.
![Page 6: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/6.jpg)
Accessibility is about PEOPLE!
http://www.flickr.com/photos/elvire-r/2451784799/
![Page 7: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/7.jpg)
Devices
‣Desktop Computer
‣Mobile
‣In Between (iPad, Netbooks)
‣TV’s
http://www.flickr.com/photos/krossbow/4757275301/
![Page 8: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/8.jpg)
Interactions
‣Mouse
‣Keyboard
‣Touchscreen
‣Screenreader
http://www.flickr.com/photos/a6u571n/3207185886/
![Page 9: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/9.jpg)
Technologies
‣JavaScript
‣CSS
‣Images display: none;
![Page 10: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/10.jpg)
So what can be done to make websites more accessible?
![Page 11: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/11.jpg)
Think About The HTML
![Page 12: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/12.jpg)
Use the Right Element for the Job
<p> = paragraph
<h1>-<h6> = Heading 1 through 6
<div class=”paragraph”>
Using Tables for Layout
![Page 13: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/13.jpg)
Be Aware of the Source Order
‣Markup content the way it should be read NOT the
way it should be displayed.
Header
Aside Content
Header
Content
Aside
![Page 14: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/14.jpg)
Create Consistent Conventions
<div id=”header”>
<ul id=”nav”>
<div id=”content”>
<div id=”sidebar”>
<div id=”footer”>
![Page 15: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/15.jpg)
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=””
![Page 16: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/16.jpg)
Style Alt Text
a img { background-color:#EDEBD5; border:medium none; color:#000; font-size:28px; line-height:125%;}
![Page 17: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/17.jpg)
Why Bother with Alt Text?
‣Screenreaders read filenames when no alt attribute
‣Text-only browsers/devices benefit
‣Image links have anchor text/context
‣Google indexes alt text
‣Sometimes your CDN goes down
![Page 18: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/18.jpg)
Form Inputs
![Page 19: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/19.jpg)
Associate Inputs with Labels
‣Link descriptive text with an input field
‣Provides context about what is expected
‣Clicking label focuses input field
![Page 20: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/20.jpg)
Implicit vs. Explicit Labels
<label for=”name”>Name</label><input type=”text” id=”name”>
<label> Name <input type=”text”></label>
label { curser: pointer; }
![Page 21: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/21.jpg)
Use Most HTML5 Input Types
‣type=”search”
‣type=”tel”
‣type=”url”
‣type=”email”
‣Old browsers fallback to type=”text”
![Page 22: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/22.jpg)
Type=”search” Has Slight Benefit
http://css-tricks.com/webkit-html5-search-inputs/
![Page 23: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/23.jpg)
Fieldsets Group Several Inputs
<fieldset id=”contact”> <label> Name <input type="text"> </label> <label> Email <input type="email"> </label>
</fieldset>
![Page 24: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/24.jpg)
Legend is a Caption for Fieldsets
<fieldset id=”contact”> <legend>Contact Info</legend> ....</fieldset
![Page 25: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/25.jpg)
Keyboard Navigation
![Page 26: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/26.jpg)
Turn it on in OSX
System Preferences -> Keyboard -> All Controls
or Press Control + F7
![Page 27: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/27.jpg)
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!
![Page 31: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/31.jpg)
:focus = :hover
‣Anywhere :hover is used, add :focus as well
a:hover,a:focus { text-decoration:underline; color:red;}
![Page 32: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/32.jpg)
Design for the Outline
a { /* This is bad! */ outline:0; }
a:focus { /* Keyboard Users */ outline: thin dotted #000;}a:hover { /* Mouse Users */ outline:none;}
![Page 33: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/33.jpg)
Design for the Outline
‣Adding outline style is the same as adding a border
‣Some elements need 1 or 2 px of padding
‣TEST, TEST, TEST!
![Page 34: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/34.jpg)
Hiding Content the Accessible Way
/* Hides from keyboard users */display:none;
/* Hidden but still accessible */.hidden { left:-999em; position:absolute; top:auto;}
![Page 35: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/35.jpg)
Reavling Hidden Content
/* Reveal on Focus */.hidden:focus { position:static;}
![Page 36: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/36.jpg)
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
![Page 37: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/37.jpg)
Skip Navigation Link
<body> <a id="top" href="#content"> Skip to Content</a>
![Page 38: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/38.jpg)
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;}
![Page 39: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/39.jpg)
Screenreaders
![Page 40: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/40.jpg)
Add an Anchor to Search Forms
<form action="/search/#content"> <label for=”q”>Search</label> <input type="search" id=”q”> <input type=”submit” value=”search”></form>
![Page 41: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/41.jpg)
Add an Anchor to Search Forms
‣Skips visitors straight to the results
‣No need for screenreaders to read through nav
![Page 42: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/42.jpg)
ARIA Landmark Roles
‣Help define the structure of a document
‣Screenreaders can move around different sections
‣Just add role attribute to an element
<div id=”header” role=”banner”>
![Page 43: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/43.jpg)
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.
![Page 44: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/44.jpg)
role=”banner”
‣Site-orientated content, such as the title of the
page and the logo.
‣Header
![Page 45: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/45.jpg)
role=”complementary”
‣Supporting content for the main content, but
meaningful in its own right when separated from the
main content.
‣Aside or sidebar
![Page 46: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/46.jpg)
role=”contentinfo”
‣Child content, such as footnotes, copyrights, links
to privacy statement, links to preferences, and so
on.
‣Footer
![Page 47: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/47.jpg)
role=”main”
‣Content that is directly related to or expands on the
central content of the document.
‣Main content container, #content
![Page 48: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/48.jpg)
role=”navigation”
‣Content that contains the links to navigate this
document and/or related documents.
![Page 49: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/49.jpg)
role=”search”
‣This section contains a search form to search the
site.
![Page 50: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/50.jpg)
Mobile
![Page 51: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/51.jpg)
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/
![Page 52: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/52.jpg)
Why should I care?
![Page 53: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/53.jpg)
More Visitors
‣The more ways your site can be accessed, the more
potential visitors.
‣More visitors = more traffic
‣More traffic = more conversions (sales, ad clicks,
downloads, whatever)
![Page 54: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/54.jpg)
Happier Visitors
‣Users that can find what they’re looking for become
loyal, repeat visitors.
‣Loyalty = word of mouth
‣Adds to your brand/reputation
![Page 55: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/55.jpg)
Search Engine Optimization
‣Accessible content makes Google Happy!
‣Happy Google ranks you better!
‣Better Rankings = More Traffic
‣Sometimes you need to disguise accessibility with
SEO to sell it to stakeholders.
![Page 56: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/56.jpg)
The Spirit of the Web
‣The Internet is an open platform
‣The web wants to be device agnostic
‣Different ways to view the same content is what
makes the Internet a special medium.
![Page 57: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/57.jpg)
It’s the right thing to do!
‣At the end of the day, it’s people on the other end
of your website.
![Page 58: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/58.jpg)
Thank You!
![Page 59: Building An Accessible Site from the Ground Up](https://reader034.fdocuments.us/reader034/viewer/2022042816/558bcde4d8b42a960b8b4618/html5/thumbnails/59.jpg)
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/