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
 
D219 Conference - Beyond Search
D219 Conference - Beyond SearchD219 Conference - Beyond Search
D219 Conference - Beyond Search
Lucy Gray
 
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"
 
D219 Conference - Beyond Search
D219 Conference - Beyond SearchD219 Conference - Beyond Search
D219 Conference - Beyond Search
 
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

一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
bo44ban1
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
21uul8se
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
anthonylin333
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
Kyungeun Sung
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
Virtual Real Design
 
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
f22b6g9c
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
bagmai
 
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
67n7f53
 
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
kuapy
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
3vgr39kx
 
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
jafiradnan336
 
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
ijk38lw
 
LGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation TemplateLGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation Template
DakshGudwani
 
一比一原版(soton毕业证书)英国南安普顿大学毕业证在读证明如何办理
一比一原版(soton毕业证书)英国南安普顿大学毕业证在读证明如何办理一比一原版(soton毕业证书)英国南安普顿大学毕业证在读证明如何办理
一比一原版(soton毕业证书)英国南安普顿大学毕业证在读证明如何办理
yufen5
 
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
67n7f53
 
一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
k4krdgxx
 
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build  Your Online Presence 2024.pptxBest Digital Marketing Strategy Build  Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
pavankumarpayexelsol
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
qo1as76n
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
qo1as76n
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
Harry Harrold
 

Recently uploaded (20)

一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
 
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
 
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
 
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
 
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
 
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
 
LGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation TemplateLGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation Template
 
一比一原版(soton毕业证书)英国南安普顿大学毕业证在读证明如何办理
一比一原版(soton毕业证书)英国南安普顿大学毕业证在读证明如何办理一比一原版(soton毕业证书)英国南安普顿大学毕业证在读证明如何办理
一比一原版(soton毕业证书)英国南安普顿大学毕业证在读证明如何办理
 
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
 
一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
 
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build  Your Online Presence 2024.pptxBest Digital Marketing Strategy Build  Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
 

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