SlideShare a Scribd company logo
Top Mistakes
 in Web Accessibility
 F R O N T R OW CO N F E R E N C E




KRAKÓW, 20.10.2011
3
TYPES
1. Bored manager
  T H E Y S AY


 “Disabled people are not
 in my target group”

 FAV O R I T E T O O L

 his blackberry
2. A future lover
   T H E Y S AY


 “I’ll AJAX all over your
 CSS3”

  FAV O R I T E T E C H N I Q U E

  hashbangs
3. Over-exciter
  T H E Y S AY


 “I created a text-
 only version of my
 church’s website”

 FAV O R I T E T O O L

 JS text resizer
You’ll need to deal with different types of people.



           Let’s get
          some facts

           straight
Benefits of web accessibility
✦   About 15% (5 mln) of total population in
    Poland live with some kind of disability
✦   The average age of web users increases
    every year
✦   Good for not proficient language users
✦   Meets legal requirements
✦   Everyone benefits! (think slower
    connections)
Benefits of web accessibility

✦   Strong overlap with: mobile web
    http://www.w3.org/TR/mwbp-wcag/
Benefits of web accessibility

✦   Strong overlap with: SEO
Types of disability
Visual           Hearing   Motor   Cognitive



✦   Blind
✦   Partial vision loss
✦   Color blindness
Visual          Hearing        Motor         Cognitive


    Video transcription (closed captioning) benefits not just
    those with hearing impairments.


✦   Disabling sound
✦   Content becomes searchable and quotable
Visual          Hearing          Motor          Cognitive

Motor impaired can find using keyboard or mouse problematic.
Alternative inputs can have different range of complexity, most frequent
being different types “switches”.
Visual            Hearing          Motor      Cognitive

    Cognitive problems occur to older users and those
    with worse level of document language.

✦   Increase readability
✦   Large headlines
✦   Descriptive link text
✦   Increased target area of navigation links
“For me being online is everything.
 It’s my hi-fi, my source of income,
  my supermarket, my telephone.
           It’s my way in”
               TeLynn Holdsworth, screen reader user




                                    http://www.flickr.com/photos/tjc/4084712050/
A brief guide
into frequent problems
Incorrect alternative text
Text provided as
the text alternative must present
   the content and function.
fig. Image based navigation
            with no alt text
BAD

 I <img src="" alt="Image of heart"> you.


GOOD




                                   Ferrari Daytona               Ferrari Daytona

Ferrari is an Italian sports   Ferrari is an Italian sports   Ferrari is an Italian sports
car manufacturer based in      car manufacturer based in      car manufacturer based in
Maranello, Italy.              Maranello, Italy.              Maranello, Italy.




   alt=”Ferrari Daytona”                  alt=””                   alt=”Buy Ferrari”
Some rules to remember…

  ✦   Context is important
  ✦   Short is better than long
  ✦   Avoid redundancy
  ✦   Skip “image of…” or “graphic of…”
  ✦   Describe function
  ✦   alt= "" for decorative images
Following the visual appearance
Top Mistakes in Web Accessibility
Semantics is the king



 <h3>        <ul>
Not changing defaults
Top Mistakes in Web Accessibility
Don’t do
                                          OUTLINE: 0;
                                               (or at least provide
                                                with alternatives)




2.4.7 Focus Visible: Any keyboard operable user interface has a mode of
operation where the keyboard focus indicator is visible. (Level AA)
Disabling mobile zoom
Don’t copy & paste
<meta name="viewport"
  content="width=device-width; initial-scale=1.0;
  maximum-scale=1.0; user-scalable=0;" />


     without testing
Failing in navigation
Lengthy mega drop-down



2.4.1 A mechanism is available to bypass blocks of content that are
repeated on multiple Web pages. (Level A)
Keep the proper structure
 of document headings.
Keep the proper structure
 of document headings.
Hiding content
 FROM SCREEN
                                           FROM SCREEN READERS
 .hidden {
     position: absolute;
     left: -10000px;                        .hide {
     top: auto;                                 display: none;
     width: 1px;                                visibility: hidden;
     height: 1px;                           }
     overflow: hidden;
 }



D I S P L AY O N F O C U S

       .hidden:focus { position: static; width: auto; height: auto; }
QUICK FIX
WAI-ARIA Landmark Roles


   Landmark                          HTML 5 element
 role=”application”                         none
   role=”banner”                            none
role=”complementary”                       <aside>
 role=”contentinfo”                        <footer>
    role=”main”                             none
  role=”navigation”                         <nav>
    role=”search”                           none

                    ~ The Paciello Group
Inaccessible forms
✦   Label your inputs               ✦   Check the tab order
✦   Group form elements             ✦   Make sure it’s JS independent



    WRONG:




Name: [radio button] Mr. [radio button] Mrs. [text input] [text input]
[text input] eMail Address Retype eMail
Form validation




        ~ Derek Featherstone: Aria and Progressive Enhancement
Ambiguous links
Read more                                    Click here


Success Criterion 2.4.4 - Link Purpose (In Context)
Failure 63: Failure of Success Criterion 2.4.4 due to providing link context only in content that is not
related to the link



Success Criterion 2.4.9 - Link Purpose (Link Only)
Failure 84: Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click here" or
"more" without a mechanism to change the link text to specific text.
Top Mistakes in Web Accessibility
Adding interaction
Manage focus order!
Use ARIA roles to add meaning
        to your components and
     provide with readable data.

           <li role="menuitemcheckbox" aria-checked="true">
               Sort by Last Modified
           </li>




LIVE REGIONS for AJAX


aria-live="off"         aria-live="assertive"

aria-live="polite"      aria-live="rude"
Browser extensions
  Fangs
  Web Developer Toolbar
  Accessibility Evaluation Toolbar




Free screen readers
  NVDA
  ChromeVox
  FireVox
  VoiceOver
Fangs
                 No anchor text
No h e ading s                    No a l t te x
                                                  t




                                     S ubm i t n o t
                                                     be i ng
                                         re ad o u t
Thanks!

                                          Q&A


Wojtek Zając (@theanxy)
                                                    This work is licensed
http://www.slideshare.net/wojciechzajac                under a Creative
                                                    Commons Attribution
                                                    3.0 Unported License

More Related Content

Similar to Top Mistakes in Web Accessibility (20)

PDF
Web Accessibility Gone Wild (Now Even MORE Wilder!)
Jared Smith
 
PPTX
Selfish Accessibility — CodeDaze
Adrian Roselli
 
PDF
Web Accessibility Gone Wild
Jared Smith
 
PPTX
Selfish Accessibility — Harbour Front HK
Adrian Roselli
 
PPTX
Selfish Accessibility — YGLF Vilnius
Adrian Roselli
 
PPTX
Prototyping Accessibility - WordCamp Europe 2018
Adrian Roselli
 
PPTX
Prototyping Accessibility: Booster 2019
Adrian Roselli
 
PDF
How Accessibility Made Me a Better Developer
Billy Gregory
 
PPTX
Fringe Accessibility - Guelph Accessibility Conference
Adrian Roselli
 
PPTX
Selfish Accessibility: Government Digital Service
Adrian Roselli
 
PPTX
Accessibility in Responsive web design
Nexer Digital
 
PDF
#STLUX - Designing with Accessibility in MInd (March 14, 2014)
November Samnee
 
PPTX
Selfish accessibility: 2015 Buffalo Unconference
Adrian Roselli
 
PPTX
The Pointerless Web
Nicholas Zakas
 
PPTX
Developing accessible experiences - Alison Walden
Web à Québec
 
PPTX
Practical Accessibility - Midwest UX conference 2011
Chris Merkel
 
PDF
Four Principles of Accessibility UK Version
Homer Gaines
 
PPTX
Web accessibility
Afif Alfiano
 
PPTX
Abstractions: Fringe Accessibility
Adrian Roselli
 
PPTX
WCAG2 Guidelines and Cognitive Impairment a11y ldn 2011
Graham Armfield
 
Web Accessibility Gone Wild (Now Even MORE Wilder!)
Jared Smith
 
Selfish Accessibility — CodeDaze
Adrian Roselli
 
Web Accessibility Gone Wild
Jared Smith
 
Selfish Accessibility — Harbour Front HK
Adrian Roselli
 
Selfish Accessibility — YGLF Vilnius
Adrian Roselli
 
Prototyping Accessibility - WordCamp Europe 2018
Adrian Roselli
 
Prototyping Accessibility: Booster 2019
Adrian Roselli
 
How Accessibility Made Me a Better Developer
Billy Gregory
 
Fringe Accessibility - Guelph Accessibility Conference
Adrian Roselli
 
Selfish Accessibility: Government Digital Service
Adrian Roselli
 
Accessibility in Responsive web design
Nexer Digital
 
#STLUX - Designing with Accessibility in MInd (March 14, 2014)
November Samnee
 
Selfish accessibility: 2015 Buffalo Unconference
Adrian Roselli
 
The Pointerless Web
Nicholas Zakas
 
Developing accessible experiences - Alison Walden
Web à Québec
 
Practical Accessibility - Midwest UX conference 2011
Chris Merkel
 
Four Principles of Accessibility UK Version
Homer Gaines
 
Web accessibility
Afif Alfiano
 
Abstractions: Fringe Accessibility
Adrian Roselli
 
WCAG2 Guidelines and Cognitive Impairment a11y ldn 2011
Graham Armfield
 

Recently uploaded (20)

PDF
NewMind AI Weekly Chronicles – July’25, Week III
NewMind AI
 
PPTX
AI in Daily Life: How Artificial Intelligence Helps Us Every Day
vanshrpatil7
 
PDF
Brief History of Internet - Early Days of Internet
sutharharshit158
 
PDF
MASTERDECK GRAPHSUMMIT SYDNEY (Public).pdf
Neo4j
 
PPTX
What-is-the-World-Wide-Web -- Introduction
tonifi9488
 
PDF
Researching The Best Chat SDK Providers in 2025
Ray Fields
 
PPTX
AI Code Generation Risks (Ramkumar Dilli, CIO, Myridius)
Priyanka Aash
 
PDF
Trying to figure out MCP by actually building an app from scratch with open s...
Julien SIMON
 
PDF
Market Insight : ETH Dominance Returns
CIFDAQ
 
PDF
Peak of Data & AI Encore - Real-Time Insights & Scalable Editing with ArcGIS
Safe Software
 
PPTX
Dev Dives: Automate, test, and deploy in one place—with Unified Developer Exp...
AndreeaTom
 
PDF
TrustArc Webinar - Navigating Data Privacy in LATAM: Laws, Trends, and Compli...
TrustArc
 
PDF
GDG Cloud Munich - Intro - Luiz Carneiro - #BuildWithAI - July - Abdel.pdf
Luiz Carneiro
 
PDF
Generative AI vs Predictive AI-The Ultimate Comparison Guide
Lily Clark
 
PDF
CIFDAQ's Market Wrap : Bears Back in Control?
CIFDAQ
 
PDF
Per Axbom: The spectacular lies of maps
Nexer Digital
 
PDF
OFFOFFBOX™ – A New Era for African Film | Startup Presentation
ambaicciwalkerbrian
 
PDF
AI Unleashed - Shaping the Future -Starting Today - AIOUG Yatra 2025 - For Co...
Sandesh Rao
 
PDF
Data_Analytics_vs_Data_Science_vs_BI_by_CA_Suvidha_Chaplot.pdf
CA Suvidha Chaplot
 
PPTX
Farrell_Programming Logic and Design slides_10e_ch02_PowerPoint.pptx
bashnahara11
 
NewMind AI Weekly Chronicles – July’25, Week III
NewMind AI
 
AI in Daily Life: How Artificial Intelligence Helps Us Every Day
vanshrpatil7
 
Brief History of Internet - Early Days of Internet
sutharharshit158
 
MASTERDECK GRAPHSUMMIT SYDNEY (Public).pdf
Neo4j
 
What-is-the-World-Wide-Web -- Introduction
tonifi9488
 
Researching The Best Chat SDK Providers in 2025
Ray Fields
 
AI Code Generation Risks (Ramkumar Dilli, CIO, Myridius)
Priyanka Aash
 
Trying to figure out MCP by actually building an app from scratch with open s...
Julien SIMON
 
Market Insight : ETH Dominance Returns
CIFDAQ
 
Peak of Data & AI Encore - Real-Time Insights & Scalable Editing with ArcGIS
Safe Software
 
Dev Dives: Automate, test, and deploy in one place—with Unified Developer Exp...
AndreeaTom
 
TrustArc Webinar - Navigating Data Privacy in LATAM: Laws, Trends, and Compli...
TrustArc
 
GDG Cloud Munich - Intro - Luiz Carneiro - #BuildWithAI - July - Abdel.pdf
Luiz Carneiro
 
Generative AI vs Predictive AI-The Ultimate Comparison Guide
Lily Clark
 
CIFDAQ's Market Wrap : Bears Back in Control?
CIFDAQ
 
Per Axbom: The spectacular lies of maps
Nexer Digital
 
OFFOFFBOX™ – A New Era for African Film | Startup Presentation
ambaicciwalkerbrian
 
AI Unleashed - Shaping the Future -Starting Today - AIOUG Yatra 2025 - For Co...
Sandesh Rao
 
Data_Analytics_vs_Data_Science_vs_BI_by_CA_Suvidha_Chaplot.pdf
CA Suvidha Chaplot
 
Farrell_Programming Logic and Design slides_10e_ch02_PowerPoint.pptx
bashnahara11
 
Ad

Top Mistakes in Web Accessibility

  • 1. Top Mistakes in Web Accessibility F R O N T R OW CO N F E R E N C E KRAKÓW, 20.10.2011
  • 3. 1. Bored manager T H E Y S AY “Disabled people are not in my target group” FAV O R I T E T O O L his blackberry
  • 4. 2. A future lover T H E Y S AY “I’ll AJAX all over your CSS3” FAV O R I T E T E C H N I Q U E hashbangs
  • 5. 3. Over-exciter T H E Y S AY “I created a text- only version of my church’s website” FAV O R I T E T O O L JS text resizer
  • 6. You’ll need to deal with different types of people. Let’s get some facts straight
  • 7. Benefits of web accessibility ✦ About 15% (5 mln) of total population in Poland live with some kind of disability ✦ The average age of web users increases every year ✦ Good for not proficient language users ✦ Meets legal requirements ✦ Everyone benefits! (think slower connections)
  • 8. Benefits of web accessibility ✦ Strong overlap with: mobile web http://www.w3.org/TR/mwbp-wcag/
  • 9. Benefits of web accessibility ✦ Strong overlap with: SEO
  • 11. Visual Hearing Motor Cognitive ✦ Blind ✦ Partial vision loss ✦ Color blindness
  • 12. Visual Hearing Motor Cognitive Video transcription (closed captioning) benefits not just those with hearing impairments. ✦ Disabling sound ✦ Content becomes searchable and quotable
  • 13. Visual Hearing Motor Cognitive Motor impaired can find using keyboard or mouse problematic. Alternative inputs can have different range of complexity, most frequent being different types “switches”.
  • 14. Visual Hearing Motor Cognitive Cognitive problems occur to older users and those with worse level of document language. ✦ Increase readability ✦ Large headlines ✦ Descriptive link text ✦ Increased target area of navigation links
  • 15. “For me being online is everything. It’s my hi-fi, my source of income, my supermarket, my telephone. It’s my way in” TeLynn Holdsworth, screen reader user http://www.flickr.com/photos/tjc/4084712050/
  • 16. A brief guide into frequent problems
  • 18. Text provided as the text alternative must present the content and function.
  • 19. fig. Image based navigation with no alt text
  • 20. BAD I <img src="" alt="Image of heart"> you. GOOD Ferrari Daytona Ferrari Daytona Ferrari is an Italian sports Ferrari is an Italian sports Ferrari is an Italian sports car manufacturer based in car manufacturer based in car manufacturer based in Maranello, Italy. Maranello, Italy. Maranello, Italy. alt=”Ferrari Daytona” alt=”” alt=”Buy Ferrari”
  • 21. Some rules to remember… ✦ Context is important ✦ Short is better than long ✦ Avoid redundancy ✦ Skip “image of…” or “graphic of…” ✦ Describe function ✦ alt= "" for decorative images
  • 22. Following the visual appearance
  • 24. Semantics is the king <h3> <ul>
  • 27. Don’t do OUTLINE: 0; (or at least provide with alternatives) 2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)
  • 29. Don’t copy & paste <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> without testing
  • 31. Lengthy mega drop-down 2.4.1 A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)
  • 32. Keep the proper structure of document headings.
  • 33. Keep the proper structure of document headings.
  • 34. Hiding content FROM SCREEN FROM SCREEN READERS .hidden { position: absolute; left: -10000px; .hide { top: auto; display: none; width: 1px; visibility: hidden; height: 1px; } overflow: hidden; } D I S P L AY O N F O C U S .hidden:focus { position: static; width: auto; height: auto; }
  • 36. WAI-ARIA Landmark Roles Landmark HTML 5 element role=”application” none role=”banner” none role=”complementary” <aside> role=”contentinfo” <footer> role=”main” none role=”navigation” <nav> role=”search” none ~ The Paciello Group
  • 38. Label your inputs ✦ Check the tab order ✦ Group form elements ✦ Make sure it’s JS independent WRONG: Name: [radio button] Mr. [radio button] Mrs. [text input] [text input] [text input] eMail Address Retype eMail
  • 39. Form validation ~ Derek Featherstone: Aria and Progressive Enhancement
  • 41. Read more Click here Success Criterion 2.4.4 - Link Purpose (In Context) Failure 63: Failure of Success Criterion 2.4.4 due to providing link context only in content that is not related to the link Success Criterion 2.4.9 - Link Purpose (Link Only) Failure 84: Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click here" or "more" without a mechanism to change the link text to specific text.
  • 45. Use ARIA roles to add meaning to your components and provide with readable data. <li role="menuitemcheckbox" aria-checked="true"> Sort by Last Modified </li> LIVE REGIONS for AJAX aria-live="off" aria-live="assertive" aria-live="polite" aria-live="rude"
  • 46. Browser extensions Fangs Web Developer Toolbar Accessibility Evaluation Toolbar Free screen readers NVDA ChromeVox FireVox VoiceOver
  • 47. Fangs No anchor text No h e ading s No a l t te x t S ubm i t n o t be i ng re ad o u t
  • 48. Thanks! Q&A Wojtek Zając (@theanxy) This work is licensed http://www.slideshare.net/wojciechzajac under a Creative Commons Attribution 3.0 Unported License