The 5 Layers of Web Accessibility
Upcoming SlideShare
Loading in...5
×
 

The 5 Layers of Web Accessibility

on

  • 23,082 views

In this month's YDN Tuesday Dirk Ginader, Web Developer and part of the Accessibility Task Force at Yahoo!, will talk about Web Accessibility. ...

In this month's YDN Tuesday Dirk Ginader, Web Developer and part of the Accessibility Task Force at Yahoo!, will talk about Web Accessibility.
Starting with basic markup and ending with accessible javascript and WAI ARIA he'll cover best practices and lots of tips and tricks to make your websites and web applications accessible to everyone.
Get more information about the event here:
http://skillsmatter.com/event/ajax-ria/web-accessibility

Statistics

Views

Total Views
23,082
Views on SlideShare
14,621
Embed Views
8,461

Actions

Likes
42
Downloads
216
Comments
0

27 Embeds 8,461

http://blog.ginader.de 7453
http://blog.marchibbins.com 424
http://yaccessibilityblog.com 235
http://feeds.feedburner.com 152
http://paper.li 98
http://codesmiles.com 16
http://www.blog.ginader.de 16
http://www.slideshare.net 13
http://translate.googleusercontent.com 10
http://clarioninteractive.com 6
http://demo.proximity.fr 5
http://www.heart.org 5
http://codesmiles.tumblr.com 5
https://twitter.com 3
http://www.linkedin.com 3
http://ranksit.com 3
http://wave.webaim.org 2
http://coderwall.com 2
http://wcm1.heart.org 2
http://ginader.de HTTP 1
http://inoreader.com 1
https://blog.ginader.de 1
http://10.52.63.121 1
http://webcache.googleusercontent.com 1
http://localhost:50624 1
file:// 1
https://developer.yahoo.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • over 90 different roles to map existing OS concepts onto your Markup <br />
  • <br /> <br />
  • <br /> article <br /> <br /> <br /> <br /> <br /> <br /> 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. <br /> <br /> <br /> banner <br /> <br /> <br /> <br /> <br /> <br /> Site-orientated content, such as the title of the page and the logo. <br /> <br /> <br /> complementary <br /> <br /> <br /> <br /> <br /> <br /> Supporting content for the main content, but meaningful in its own right when separated from the main content. For example, the weather listed on a portal. <br /> <br /> <br /> contentinfo <br /> <br /> <br /> <br /> <br /> <br /> Child content, such as footnotes, copyrights, links to privacy statement, links to preferences, and so on. <br /> <br /> <br /> main <br /> <br /> <br /> <br /> <br /> <br /> Content that is directly related to or expands on the central content of the document. <br /> <br /> <br /> navigation <br /> <br /> <br /> <br /> <br /> <br /> Content that contains the links to navigate this document and/or related documents. <br /> <br /> <br /> search <br /> <br /> <br /> <br /> <br /> <br /> This section contains a search form to search the site. <br /> <br />
  • <br /> <br />
  • <br /> aria-valuemin <br /> <br /> <br /> <br /> <br /> <br /> Stores the lowest value a range may have. <br /> <br /> <br /> aria-valuemax <br /> <br /> <br /> <br /> <br /> <br /> Stores the highest value a range may have. <br /> <br /> <br /> aria-valuenow <br /> <br /> <br /> <br /> <br /> <br /> Stores the current value in a range. <br /> <br /> <br /> aria-valuetext <br /> <br /> <br /> <br /> <br /> <br /> Stores readable text to help the user understand the context. For example, <br /> \"30 dollars\" <br /> . <br /> <br /> <br /> aria-labelledby <br /> <br /> <br /> <br /> <br /> <br /> Stores the <br /> id <br /> attribute of a text label containing an appropriate prompt for this widget. <br /> <br />
  • <br /> <br />
  • <br /> off <br /> <br /> <br /> <br /> <br /> <br /> This is the default value, and indicates that the region is not live. <br /> <br /> <br /> <br /> <br />
  • <br /> <br />
  • <br /> off <br /> <br /> <br /> <br /> <br /> <br /> This is the default value, and indicates that the region is not live. <br /> <br /> <br /> <br /> <br />
  • <br /> off <br /> <br /> <br /> <br /> <br /> <br /> This is the default value, and indicates that the region is not live. <br /> <br /> <br /> <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />

The 5 Layers of Web Accessibility The 5 Layers of Web Accessibility Presentation Transcript

  • Hi there! :-)
  • Ogres = Onions = Web Standards?
  • LAYERS!
  • Common Frontend Development knows 3 Layers
  • The 5 Layers of Web Accessibility YDN Tuesday 5.5.2009 Dirk Ginader http://ginader.com http://twitter.com/ginader
  • The Markup is the most important Layer of all
  • Source order = tab order
  • Best matching HTML Element for the job?
  • Is the page understandable and usable without CSS?
  • Interaction using links, forms and reloads
  • CSS can make inaccessible too
  • display:none and visibility:hidden hide from everyone
  • :hover only works for a mouse
  • :focus to the rescue!
  • always use them combined: a:hover, a:focus{ /*awesome CSS*/ }
  • CSS is for Design not for Interaction
  • Javascript is the icing on the cake
  • Does anything, you need the user to do, work without Javascript?
  • then we can add some Magic
  • hijack existing interaction elements
  • create new buttons for JS only interactions
  • Screenreaders do know JS. They often just don’t know what happens...
  • focus() to the rescue!
  • mind the tab order
  • focus() to the rescue!
  • tabindex=0 makes even divs keyboard accessible
  • tabindex=-1 for JS only tab access
  • yeah focus()
  • Ajax = delays = tricky to communicate
  • inform about what happens!
  • you guessed it: focus()
  • Screenreaders update their Virtual Buffer “regularly”
  • while in Forms Mode they update in realtime
  • use the Forms Mode to update the Buffer when you need to
  • another layer: different CSS if Javascript is available
  • Change the interface for the JS version
  • CSS is much faster than Javascript
  • Tell CSS that there’s JS: document.documentElement.className += ” js”;
  • .module{ /* nice CSS for the non JS Layout */ } .js .module{ /* awesome CSS for the JS Layout*/ }
  • How does your CSS react when the text size changes?
  • Screen Magnifier only show a very small part of the screen
  • make sure everybody knows what happens right now
  • yellow fades + focus() help to find and understand
  • the last Layer the new Hotness
  • WAI-ARIA maps existing and well known OS concepts to custom Elements in the Browser
  • Adds semantics to non semantic Markup
  • provides instant updates and notifications
  • Roles
  • • alert • banner • button • menuitem • slider
  • Document Landmark Roles
  • • application • banner • complementary • contentinfo • main • navigation • search
  • States and Properties
  • • aria-valuemin • aria-valuemax • aria-valuenow • aria-valuetext • aria-labelledby
  • Live Regions informing about changes
  • • off • polite • assertive • (rude)
  • You can use it today
  • • it does no validate • you can simply add the properties using Javascript as it depends on it anyway
  • • everybody can add Landmark roles now • aria-required=”true” makes a dream come true
  • Don’t rely on it
  • • There are no stats but we know that still a lot of Screenreader users are stuck on old versions without ARIA support • Progressive Enhancement all over again...
  • Examples
  • without Javascript http://finance.yahoo.com/currency-converter
  • without Javascript http://finance.yahoo.com/currency-converter
  • without Javascript http://finance.yahoo.com/currency-converter
  • with Javascript http://finance.yahoo.com/currency-converter
  • with Javascript http://finance.yahoo.com/currency-converter
  • with Javascript http://finance.yahoo.com/currency-converter
  • http://uk.tv.yahoo.com/
  • more • http://cli.gs/wai-aria • http://cli.gs/accessible-tabs • http://cli.gs/accessibilitytips • http://cli.gs/wai-aria-video
  • http://ginader.com http://twitter.com/ginader