狠狠撸

狠狠撸Share a Scribd company logo
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                            Header

                                          Aside      Content
                 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” 谤辞濒别=”产补苍苍别谤”>


Sunday, April 10, 2011
谤辞濒别=”补谤迟颈肠濒别”
          ★ 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
谤辞濒别=”产补苍苍别谤”
          ★ Site-orientated content, such as the title of the
                   page and the logo.
          ★ Header




Sunday, April 10, 2011
谤辞濒别=”肠辞尘辫濒别尘别苍迟补谤测”
          ★ 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
谤辞濒别=”肠辞苍迟别苍迟颈苍蹿辞”
          ★ Child content, such as footnotes, copyrights,
                   links to privacy statement, links to preferences,
                   and so on.
          ★ Footer




Sunday, April 10, 2011
谤辞濒别=”尘补颈苍”
          ★ Content that is directly related to or expands on
                   the central content of the document.
          ★ Main content container, #content




Sunday, April 10, 2011
谤辞濒别=”苍补惫颈驳补迟颈辞苍”
          ★ Content that contains the links to navigate this
                   document and/or related documents.




Sunday, April 10, 2011
谤辞濒别=”蝉别补谤肠丑”
          ★ 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 End
                         http://slidesha.re/kingkool68




Sunday, April 10, 2011

More Related Content

Accessibility Lightning Talk

  • 1. Accessibility Lightning Talk Sunday, April 10, 2011
  • 2. When you hear ‘accessibility’ what comes to mind? Sunday, April 10, 2011
  • 3. Do you think of this? Sunday, April 10, 2011
  • 5. Have you thought about this? Sunday, April 10, 2011
  • 7. or even this? Sunday, April 10, 2011
  • 8. Accessibility is not about people with disabilities. Sunday, April 10, 2011
  • 9. Accessibility is about people! Sunday, April 10, 2011
  • 11. Different Devices ★ Desktop Computer ★ Mobile ★ In Between (iPad, Netbooks) ★ TV’s Sunday, April 10, 2011
  • 12. Different Interactions ★ Mouse ★ Keyboard ★ Touchscreen ★ Screenreader Sunday, April 10, 2011
  • 13. Different Technologies ★ JavaScript ★ CSS ★ Images display: none; Sunday, April 10, 2011
  • 14. Tips For Better Accessibility Sunday, April 10, 2011
  • 15. 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
  • 16. Think About Source Order ★ Markup content the way it should be read NOT the way it should be displayed. Header Header Aside Content Content Aside Sunday, April 10, 2011
  • 17. 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
  • 18. 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
  • 19. 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
  • 20. Use HTML5 Input Types ★ type=”search” ★ type=”tel” ★ type=”url” ★ type=”email” ★ type=”number” ★ Old browsers fallback to type=”text” Sunday, April 10, 2011
  • 21. Type=“search” Has Slight Benefits Sunday, April 10, 2011
  • 22. 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
  • 26. Turn On Keyboard Navigation In OS X System Preferences -> Keyboard -> All Controls Sunday, April 10, 2011
  • 27. 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
  • 28. :focus = :hover ★ Anywhere :hover is used, add :focus as well a:hover, a:focus { text-decoration:underline; color:red; } Sunday, April 10, 2011
  • 29. Example of Bad Keyboard Accessibility ★ http://www.hd-live.co.uk/ Sunday, April 10, 2011
  • 30. 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
  • 31. Revealing Hidden Content /* Reveal on Focus */ .hidden:focus { position:static; } Sunday, April 10, 2011
  • 32. 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
  • 33. Skip Navigation Link <body> <a id="top" href="#content"> Skip to Content</a> Sunday, April 10, 2011
  • 34. 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
  • 35. 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” 谤辞濒别=”产补苍苍别谤”> Sunday, April 10, 2011
  • 36. 谤辞濒别=”补谤迟颈肠濒别” ★ 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
  • 37. 谤辞濒别=”产补苍苍别谤” ★ Site-orientated content, such as the title of the page and the logo. ★ Header Sunday, April 10, 2011
  • 38. 谤辞濒别=”肠辞尘辫濒别尘别苍迟补谤测” ★ 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
  • 39. 谤辞濒别=”肠辞苍迟别苍迟颈苍蹿辞” ★ Child content, such as footnotes, copyrights, links to privacy statement, links to preferences, and so on. ★ Footer Sunday, April 10, 2011
  • 40. 谤辞濒别=”尘补颈苍” ★ Content that is directly related to or expands on the central content of the document. ★ Main content container, #content Sunday, April 10, 2011
  • 41. 谤辞濒别=”苍补惫颈驳补迟颈辞苍” ★ Content that contains the links to navigate this document and/or related documents. Sunday, April 10, 2011
  • 42. 谤辞濒别=”蝉别补谤肠丑” ★ This section contains a search form to search the site. Sunday, April 10, 2011
  • 43. 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
  • 45. Accessibility isn’t something you can tack on at the end! Sunday, April 10, 2011
  • 46. Think about it from the start. Sunday, April 10, 2011
  • 47. 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
  • 48. Russell Heimlich ★ @kingkool68 ★ http://www.russellheimlich.com/blog/ Sunday, April 10, 2011
  • 49. The End http://slidesha.re/kingkool68 Sunday, April 10, 2011