Your SlideShare is downloading. ×
0
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://twitte...
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...
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-...
http://ginader.com
http://twitter.com/ginader
The 5 Layers of Web Accessibility
The 5 Layers of Web Accessibility
The 5 Layers of Web Accessibility
The 5 Layers of Web Accessibility
The 5 Layers of Web Accessibility
The 5 Layers of Web Accessibility
The 5 Layers of Web Accessibility
Upcoming SlideShare
Loading in...5
×

The 5 Layers of Web Accessibility

19,838

Published on

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

Published in: Technology, Design
0 Comments
43 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
19,838
On Slideshare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
221
Comments
0
Likes
43
Embeds 0
No embeds

No notes for slide












































































































  • over 90 different roles to map existing OS concepts onto your Markup



  • 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.


    banner





    Site-orientated content, such as the title of the page and the logo.


    complementary





    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.


    contentinfo





    Child content, such as footnotes, copyrights, links to privacy statement, links to preferences, and so on.


    main





    Content that is directly related to or expands on the central content of the document.


    navigation





    Content that contains the links to navigate this document and/or related documents.


    search





    This section contains a search form to search the site.




  • aria-valuemin





    Stores the lowest value a range may have.


    aria-valuemax





    Stores the highest value a range may have.


    aria-valuenow





    Stores the current value in a range.


    aria-valuetext





    Stores readable text to help the user understand the context. For example,
    \"30 dollars\"
    .


    aria-labelledby





    Stores the
    id
    attribute of a text label containing an appropriate prompt for this widget.




  • off





    This is the default value, and indicates that the region is not live.


    <ul aria-live=\"off\">


    polite





    This is normal operation and the expected behaviour for live regions. A value of
    polite
    indicates that it is not necessary to respond until user completes their current activity.


    <ul aria-live=\"polite\">


    assertive





    This value is a higher priority than normal but does not necessarily interrupt the user immediately.


    <ul aria-live=\"assertive\">




  • off





    This is the default value, and indicates that the region is not live.


    <ul aria-live=\"off\">


    polite





    This is normal operation and the expected behaviour for live regions. A value of
    polite
    indicates that it is not necessary to respond until user completes their current activity.


    <ul aria-live=\"polite\">


    assertive





    This value is a higher priority than normal but does not necessarily interrupt the user immediately.


    <ul aria-live=\"assertive\">


  • off





    This is the default value, and indicates that the region is not live.


    <ul aria-live=\"off\">


    polite





    This is normal operation and the expected behaviour for live regions. A value of
    polite
    indicates that it is not necessary to respond until user completes their current activity.


    <ul aria-live=\"polite\">


    assertive





    This value is a higher priority than normal but does not necessarily interrupt the user immediately.


    <ul aria-live=\"assertive\">



























  • Transcript of "The 5 Layers of Web Accessibility"

    1. 1. Hi there! :-)
    2. 2. Ogres = Onions = Web Standards?
    3. 3. LAYERS!
    4. 4. Common Frontend Development knows 3 Layers
    5. 5. The 5 Layers of Web Accessibility YDN Tuesday 5.5.2009 Dirk Ginader http://ginader.com http://twitter.com/ginader
    6. 6. The Markup is the most important Layer of all
    7. 7. Source order = tab order
    8. 8. Best matching HTML Element for the job?
    9. 9. Is the page understandable and usable without CSS?
    10. 10. Interaction using links, forms and reloads
    11. 11. CSS can make inaccessible too
    12. 12. display:none and visibility:hidden hide from everyone
    13. 13. :hover only works for a mouse
    14. 14. :focus to the rescue!
    15. 15. always use them combined: a:hover, a:focus{ /*awesome CSS*/ }
    16. 16. CSS is for Design not for Interaction
    17. 17. Javascript is the icing on the cake
    18. 18. Does anything, you need the user to do, work without Javascript?
    19. 19. then we can add some Magic
    20. 20. hijack existing interaction elements
    21. 21. create new buttons for JS only interactions
    22. 22. Screenreaders do know JS. They often just don’t know what happens...
    23. 23. focus() to the rescue!
    24. 24. mind the tab order
    25. 25. focus() to the rescue!
    26. 26. tabindex=0 makes even divs keyboard accessible
    27. 27. tabindex=-1 for JS only tab access
    28. 28. yeah focus()
    29. 29. Ajax = delays = tricky to communicate
    30. 30. inform about what happens!
    31. 31. you guessed it: focus()
    32. 32. Screenreaders update their Virtual Buffer “regularly”
    33. 33. while in Forms Mode they update in realtime
    34. 34. use the Forms Mode to update the Buffer when you need to
    35. 35. another layer: different CSS if Javascript is available
    36. 36. Change the interface for the JS version
    37. 37. CSS is much faster than Javascript
    38. 38. Tell CSS that there’s JS: document.documentElement.className += ” js”;
    39. 39. .module{ /* nice CSS for the non JS Layout */ } .js .module{ /* awesome CSS for the JS Layout*/ }
    40. 40. How does your CSS react when the text size changes?
    41. 41. Screen Magnifier only show a very small part of the screen
    42. 42. make sure everybody knows what happens right now
    43. 43. yellow fades + focus() help to find and understand
    44. 44. the last Layer the new Hotness
    45. 45. WAI-ARIA maps existing and well known OS concepts to custom Elements in the Browser
    46. 46. Adds semantics to non semantic Markup
    47. 47. provides instant updates and notifications
    48. 48. Roles
    49. 49. • alert • banner • button • menuitem • slider
    50. 50. Document Landmark Roles
    51. 51. • application • banner • complementary • contentinfo • main • navigation • search
    52. 52. States and Properties
    53. 53. • aria-valuemin • aria-valuemax • aria-valuenow • aria-valuetext • aria-labelledby
    54. 54. Live Regions informing about changes
    55. 55. • off • polite • assertive • (rude)
    56. 56. You can use it today
    57. 57. • it does no validate • you can simply add the properties using Javascript as it depends on it anyway
    58. 58. • everybody can add Landmark roles now • aria-required=”true” makes a dream come true
    59. 59. Don’t rely on it
    60. 60. • 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...
    61. 61. Examples
    62. 62. without Javascript http://finance.yahoo.com/currency-converter
    63. 63. without Javascript http://finance.yahoo.com/currency-converter
    64. 64. without Javascript http://finance.yahoo.com/currency-converter
    65. 65. with Javascript http://finance.yahoo.com/currency-converter
    66. 66. with Javascript http://finance.yahoo.com/currency-converter
    67. 67. with Javascript http://finance.yahoo.com/currency-converter
    68. 68. http://uk.tv.yahoo.com/
    69. 69. more • http://cli.gs/wai-aria • http://cli.gs/accessible-tabs • http://cli.gs/accessibilitytips • http://cli.gs/wai-aria-video
    70. 70. http://ginader.com http://twitter.com/ginader
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×