SlideShare 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” role=”banner”>


Sunday, April 10, 2011
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.




Sunday, April 10, 2011
role=”banner”
          ★ Site-orientated content, such as the title of the
                   page and the logo.
          ★ Header




Sunday, April 10, 2011
role=”complementary”
          ★ 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
role=”contentinfo”
          ★ Child content, such as footnotes, copyrights,
                   links to privacy statement, links to preferences,
                   and so on.
          ★ Footer




Sunday, April 10, 2011
role=”main”
          ★ Content that is directly related to or expands on
                   the central content of the document.
          ★ Main content container, #content




Sunday, April 10, 2011
role=”navigation”
          ★ Content that contains the links to navigate this
                   document and/or related documents.




Sunday, April 10, 2011
role=”search”
          ★ 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

Similar to Accessibility Lightning Talk

You're doing it wrong
You're doing it wrongYou're doing it wrong
You're doing it wrong
Adam Goucher
 
Beyond Page Objects
Beyond Page ObjectsBeyond Page Objects
Beyond Page Objects
Dante Briones
 
10 Tips For improving Traffic and Conversions on your Drupal Site
10 Tips For improving Traffic and Conversions on your Drupal Site10 Tips For improving Traffic and Conversions on your Drupal Site
10 Tips For improving Traffic and Conversions on your Drupal Site
Acquia
 
Namesmatter
NamesmatterNamesmatter
Namesmatter
Adam Goucher
 
Desenvolvimento Indolor com JQuery Mobile
Desenvolvimento Indolor com JQuery MobileDesenvolvimento Indolor com JQuery Mobile
Desenvolvimento Indolor com JQuery Mobile
Bruno Oliveira
 
Wordpress accessibility enhancements
Wordpress accessibility enhancementsWordpress accessibility enhancements
Wordpress accessibility enhancements
Ted Drake
 
Wordpress accessibility enhancements
Wordpress accessibility enhancementsWordpress accessibility enhancements
Wordpress accessibility enhancements
Ted Drake
 
CSS Power Tools
CSS Power ToolsCSS Power Tools
CSS Power Tools
Nicole Sullivan
 
Persistence Smoothie: Blending SQL and NoSQL (RubyNation Edition)
Persistence  Smoothie: Blending SQL and NoSQL (RubyNation Edition)Persistence  Smoothie: Blending SQL and NoSQL (RubyNation Edition)
Persistence Smoothie: Blending SQL and NoSQL (RubyNation Edition)
Michael Bleigh
 
Bruce / The Seminar: Het Salon
Bruce / The Seminar: Het SalonBruce / The Seminar: Het Salon
Bruce / The Seminar: Het Salon
markee
 
让开发也懂前端
让开发也懂前端让开发也懂前端
让开发也懂前端
lifesinger
 
Node js techtalksto
Node js techtalkstoNode js techtalksto
Node js techtalksto
Jason Diller
 
Rendering Views in JavaScript - "The New Web Architecture"
Rendering Views in JavaScript - "The New Web Architecture"Rendering Views in JavaScript - "The New Web Architecture"
Rendering Views in JavaScript - "The New Web Architecture"
Jonathan Julian
 
Destroy the box
Destroy the boxDestroy the box
Destroy the box
jsokohl
 
Speed Dating: How Speeding up your Blog Improves your SEO
Speed Dating: How Speeding up your Blog Improves your SEOSpeed Dating: How Speeding up your Blog Improves your SEO
Speed Dating: How Speeding up your Blog Improves your SEO
VigLink
 
MILOFest 2010
MILOFest 2010MILOFest 2010
MILOFest 2010
Larry Staton
 
The Easy Way - Plone Conference 2011
The Easy Way - Plone Conference 2011The Easy Way - Plone Conference 2011
The Easy Way - Plone Conference 2011
Mikko Ohtamaa
 
Social design (Seattle 09-2011)
Social design (Seattle 09-2011)Social design (Seattle 09-2011)
Social design (Seattle 09-2011)
Andrei Zyuzikov
 
Generating Print Sales Leads with LinkedIn session 1
Generating Print Sales Leads with LinkedIn session 1Generating Print Sales Leads with LinkedIn session 1
Generating Print Sales Leads with LinkedIn session 1
Joe Kern
 
node.js for front-end developers
node.js for front-end developersnode.js for front-end developers
node.js for front-end developers
Garann Means
 

Similar to Accessibility Lightning Talk (20)

You're doing it wrong
You're doing it wrongYou're doing it wrong
You're doing it wrong
 
Beyond Page Objects
Beyond Page ObjectsBeyond Page Objects
Beyond Page Objects
 
10 Tips For improving Traffic and Conversions on your Drupal Site
10 Tips For improving Traffic and Conversions on your Drupal Site10 Tips For improving Traffic and Conversions on your Drupal Site
10 Tips For improving Traffic and Conversions on your Drupal Site
 
Namesmatter
NamesmatterNamesmatter
Namesmatter
 
Desenvolvimento Indolor com JQuery Mobile
Desenvolvimento Indolor com JQuery MobileDesenvolvimento Indolor com JQuery Mobile
Desenvolvimento Indolor com JQuery Mobile
 
Wordpress accessibility enhancements
Wordpress accessibility enhancementsWordpress accessibility enhancements
Wordpress accessibility enhancements
 
Wordpress accessibility enhancements
Wordpress accessibility enhancementsWordpress accessibility enhancements
Wordpress accessibility enhancements
 
CSS Power Tools
CSS Power ToolsCSS Power Tools
CSS Power Tools
 
Persistence Smoothie: Blending SQL and NoSQL (RubyNation Edition)
Persistence  Smoothie: Blending SQL and NoSQL (RubyNation Edition)Persistence  Smoothie: Blending SQL and NoSQL (RubyNation Edition)
Persistence Smoothie: Blending SQL and NoSQL (RubyNation Edition)
 
Bruce / The Seminar: Het Salon
Bruce / The Seminar: Het SalonBruce / The Seminar: Het Salon
Bruce / The Seminar: Het Salon
 
让开发也懂前端
让开发也懂前端让开发也懂前端
让开发也懂前端
 
Node js techtalksto
Node js techtalkstoNode js techtalksto
Node js techtalksto
 
Rendering Views in JavaScript - "The New Web Architecture"
Rendering Views in JavaScript - "The New Web Architecture"Rendering Views in JavaScript - "The New Web Architecture"
Rendering Views in JavaScript - "The New Web Architecture"
 
Destroy the box
Destroy the boxDestroy the box
Destroy the box
 
Speed Dating: How Speeding up your Blog Improves your SEO
Speed Dating: How Speeding up your Blog Improves your SEOSpeed Dating: How Speeding up your Blog Improves your SEO
Speed Dating: How Speeding up your Blog Improves your SEO
 
MILOFest 2010
MILOFest 2010MILOFest 2010
MILOFest 2010
 
The Easy Way - Plone Conference 2011
The Easy Way - Plone Conference 2011The Easy Way - Plone Conference 2011
The Easy Way - Plone Conference 2011
 
Social design (Seattle 09-2011)
Social design (Seattle 09-2011)Social design (Seattle 09-2011)
Social design (Seattle 09-2011)
 
Generating Print Sales Leads with LinkedIn session 1
Generating Print Sales Leads with LinkedIn session 1Generating Print Sales Leads with LinkedIn session 1
Generating Print Sales Leads with LinkedIn session 1
 
node.js for front-end developers
node.js for front-end developersnode.js for front-end developers
node.js for front-end developers
 

More from Russell Heimlich

Cache Rules Everything Around Me
Cache Rules Everything Around MeCache Rules Everything Around Me
Cache Rules Everything Around Me
Russell Heimlich
 
stickyHeader.js
stickyHeader.jsstickyHeader.js
stickyHeader.js
Russell Heimlich
 
Analytics And You
Analytics And YouAnalytics And You
Analytics And You
Russell Heimlich
 
Video Captioning on the Web
Video Captioning on the WebVideo Captioning on the Web
Video Captioning on the Web
Russell Heimlich
 
Charting with Google
Charting with GoogleCharting with Google
Charting with Google
Russell Heimlich
 
Building An Accessible Site from the Ground Up
Building An Accessible Site from the Ground UpBuilding An Accessible Site from the Ground Up
Building An Accessible Site from the Ground Up
Russell Heimlich
 

More from Russell Heimlich (6)

Cache Rules Everything Around Me
Cache Rules Everything Around MeCache Rules Everything Around Me
Cache Rules Everything Around Me
 
stickyHeader.js
stickyHeader.jsstickyHeader.js
stickyHeader.js
 
Analytics And You
Analytics And YouAnalytics And You
Analytics And You
 
Video Captioning on the Web
Video Captioning on the WebVideo Captioning on the Web
Video Captioning on the Web
 
Charting with Google
Charting with GoogleCharting with Google
Charting with Google
 
Building An Accessible Site from the Ground Up
Building An Accessible Site from the Ground UpBuilding An Accessible Site from the Ground Up
Building An Accessible Site from the Ground Up
 

Recently uploaded

The Death of Slim Shady HatThe Death of Slim Shady Hat
The Death of Slim Shady HatThe Death of Slim Shady HatThe Death of Slim Shady HatThe Death of Slim Shady Hat
The Death of Slim Shady HatThe Death of Slim Shady Hat
TeeFusion
 
Asian Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
Asian Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...Asian Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
Asian Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
monikaservice00
 
High Profile Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Gir...
High Profile Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Gir...High Profile Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Gir...
High Profile Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Gir...
revolutionary575
 
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
bookneha89
 
How to Choose the Perfect Exterior Paint Colors for Your Home.pptx
How to Choose the Perfect Exterior Paint Colors for Your Home.pptxHow to Choose the Perfect Exterior Paint Colors for Your Home.pptx
How to Choose the Perfect Exterior Paint Colors for Your Home.pptx
Anit Kapoor
 
Product And Design Portfolio - Hemant Nagwekar 2024
Product And Design Portfolio - Hemant Nagwekar 2024Product And Design Portfolio - Hemant Nagwekar 2024
Product And Design Portfolio - Hemant Nagwekar 2024
Hemant Nagwekar
 
Unit-1 OOMD- Inthhro- class modeling.ppt
Unit-1 OOMD- Inthhro- class modeling.pptUnit-1 OOMD- Inthhro- class modeling.ppt
Unit-1 OOMD- Inthhro- class modeling.ppt
ChiragSuresh
 
SS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers ParisSS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers Paris
Peclers Paris
 
Building Accessibility into your Design Systems
Building Accessibility into your Design SystemsBuilding Accessibility into your Design Systems
Building Accessibility into your Design Systems
Resolute
 
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
monikaservice00
 
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
sonalibook860
 
Artificial Intelligence (AI) is revolutionizing the field of architecture
Artificial Intelligence (AI) is revolutionizing the field of architectureArtificial Intelligence (AI) is revolutionizing the field of architecture
Artificial Intelligence (AI) is revolutionizing the field of architecture
Mostafa Abd Elrahman
 
Russian Girls Call Delhi 🛵🚡9711199171 💃 Choose Best And Top Girl Service And ...
Russian Girls Call Delhi 🛵🚡9711199171 💃 Choose Best And Top Girl Service And ...Russian Girls Call Delhi 🛵🚡9711199171 💃 Choose Best And Top Girl Service And ...
Russian Girls Call Delhi 🛵🚡9711199171 💃 Choose Best And Top Girl Service And ...
kimmi singla$A17
 
oyo Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 in...
oyo Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 in...oyo Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 in...
oyo Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 in...
monikaservice00
 
BBW Girls Call Mumbai 9967584737 Provide Best And Top Girl Service And No1 in...
BBW Girls Call Mumbai 9967584737 Provide Best And Top Girl Service And No1 in...BBW Girls Call Mumbai 9967584737 Provide Best And Top Girl Service And No1 in...
BBW Girls Call Mumbai 9967584737 Provide Best And Top Girl Service And No1 in...
khloe sexy girl
 
Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
monikaservice00
 
New PPT Template for operations on field.pptx
New PPT Template for operations on field.pptxNew PPT Template for operations on field.pptx
New PPT Template for operations on field.pptx
hicham benkhelifa
 
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
sharonblush
 
Carleton University degree offer diploma Transcript
Carleton University degree offer diploma TranscriptCarleton University degree offer diploma Transcript
Carleton University degree offer diploma Transcript
eamhs
 
Enemy Encounter Standards for Hogwarts Legacy
Enemy Encounter Standards for Hogwarts LegacyEnemy Encounter Standards for Hogwarts Legacy
Enemy Encounter Standards for Hogwarts Legacy
AidanOKeefe2
 

Recently uploaded (20)

The Death of Slim Shady HatThe Death of Slim Shady Hat
The Death of Slim Shady HatThe Death of Slim Shady HatThe Death of Slim Shady HatThe Death of Slim Shady Hat
The Death of Slim Shady HatThe Death of Slim Shady Hat
 
Asian Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
Asian Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...Asian Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
Asian Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
 
High Profile Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Gir...
High Profile Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Gir...High Profile Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Gir...
High Profile Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Gir...
 
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
 
How to Choose the Perfect Exterior Paint Colors for Your Home.pptx
How to Choose the Perfect Exterior Paint Colors for Your Home.pptxHow to Choose the Perfect Exterior Paint Colors for Your Home.pptx
How to Choose the Perfect Exterior Paint Colors for Your Home.pptx
 
Product And Design Portfolio - Hemant Nagwekar 2024
Product And Design Portfolio - Hemant Nagwekar 2024Product And Design Portfolio - Hemant Nagwekar 2024
Product And Design Portfolio - Hemant Nagwekar 2024
 
Unit-1 OOMD- Inthhro- class modeling.ppt
Unit-1 OOMD- Inthhro- class modeling.pptUnit-1 OOMD- Inthhro- class modeling.ppt
Unit-1 OOMD- Inthhro- class modeling.ppt
 
SS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers ParisSS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers Paris
 
Building Accessibility into your Design Systems
Building Accessibility into your Design SystemsBuilding Accessibility into your Design Systems
Building Accessibility into your Design Systems
 
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
 
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
 
Artificial Intelligence (AI) is revolutionizing the field of architecture
Artificial Intelligence (AI) is revolutionizing the field of architectureArtificial Intelligence (AI) is revolutionizing the field of architecture
Artificial Intelligence (AI) is revolutionizing the field of architecture
 
Russian Girls Call Delhi 🛵🚡9711199171 💃 Choose Best And Top Girl Service And ...
Russian Girls Call Delhi 🛵🚡9711199171 💃 Choose Best And Top Girl Service And ...Russian Girls Call Delhi 🛵🚡9711199171 💃 Choose Best And Top Girl Service And ...
Russian Girls Call Delhi 🛵🚡9711199171 💃 Choose Best And Top Girl Service And ...
 
oyo Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 in...
oyo Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 in...oyo Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 in...
oyo Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 in...
 
BBW Girls Call Mumbai 9967584737 Provide Best And Top Girl Service And No1 in...
BBW Girls Call Mumbai 9967584737 Provide Best And Top Girl Service And No1 in...BBW Girls Call Mumbai 9967584737 Provide Best And Top Girl Service And No1 in...
BBW Girls Call Mumbai 9967584737 Provide Best And Top Girl Service And No1 in...
 
Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
 
New PPT Template for operations on field.pptx
New PPT Template for operations on field.pptxNew PPT Template for operations on field.pptx
New PPT Template for operations on field.pptx
 
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
 
Carleton University degree offer diploma Transcript
Carleton University degree offer diploma TranscriptCarleton University degree offer diploma Transcript
Carleton University degree offer diploma Transcript
 
Enemy Encounter Standards for Hogwarts Legacy
Enemy Encounter Standards for Hogwarts LegacyEnemy Encounter Standards for Hogwarts Legacy
Enemy Encounter Standards for Hogwarts Legacy
 

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” role=”banner”> Sunday, April 10, 2011
  • 36. 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. Sunday, April 10, 2011
  • 37. role=”banner” ★ Site-orientated content, such as the title of the page and the logo. ★ Header Sunday, April 10, 2011
  • 38. role=”complementary” ★ 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. role=”contentinfo” ★ Child content, such as footnotes, copyrights, links to privacy statement, links to preferences, and so on. ★ Footer Sunday, April 10, 2011
  • 40. role=”main” ★ Content that is directly related to or expands on the central content of the document. ★ Main content container, #content Sunday, April 10, 2011
  • 41. role=”navigation” ★ Content that contains the links to navigate this document and/or related documents. Sunday, April 10, 2011
  • 42. role=”search” ★ 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