Web Accessibility Gone Wild
-
Upload
jared-smith -
Category
Technology
-
view
4.398 -
download
2
description
Transcript of Web Accessibility Gone Wild
![Page 1: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/1.jpg)
Web Ac cess i b i l i tyG o ne Wi ld
Jared Smith & Jon Whitinghttp://webaim.org
Now even w i lder !
![Page 2: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/2.jpg)
Gone wild?
Mistakes, misconceptions, over-indulgences, minutia, and generally
silly aspects of modern web accessibility
... or “How to FAIL at web accessibility”
![Page 3: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/3.jpg)
Disclaimers
• There will be controversy and you may disagree.
• We’ll attempt to be equal opportunity offenders
• There’s little logic to the sequencing of topics
![Page 4: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/4.jpg)
Survey of screen reader user preferences
http://webaim.org/projects/screenreadersurvey/
![Page 5: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/5.jpg)
Alt text blunders
![Page 6: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/6.jpg)
• alt=”bullet”
![Page 7: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/7.jpg)
alt=”bullet”
![Page 8: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/8.jpg)
alt=”image of my cat”
![Page 9: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/9.jpg)
Adding “image of...”, “graphic of...”, etc. to alt text
![Page 10: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/10.jpg)
alt=”photo of the White House”
![Page 11: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/11.jpg)
alt=”photo of the White House”
![Page 12: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/12.jpg)
alt=”smiling lady”???
![Page 13: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/13.jpg)
alt=”smiling lady”
![Page 14: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/14.jpg)
alt=”Our business promises the best service you will find on the planet. Our team is professionally trained to offer excellent customer service throughout the contract negotiation process. Customer satisfaction is our top priority and is guaranteed.”
![Page 15: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/15.jpg)
“Describing” images - particularly decorative images used to convey mood or feeling.
![Page 16: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/16.jpg)
Apple iPhone
Images that have a function MUST have alt text
alt=”iPhone web site”
![Page 17: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/17.jpg)
alt=”iPhone web site”Images that have a function MUST have alt text
![Page 18: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/18.jpg)
<a href=”http://apple.com/iphone/”><img src=”iphone.jpg” alt=””><br>
Apple iPhone</a>
Avoiding redundant text...
![Page 19: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/19.jpg)
Logos that link to the home page
![Page 20: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/20.jpg)
Logos that link to the home page
There’s no real consensus
![Page 21: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/21.jpg)
![Page 22: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/22.jpg)
![Page 23: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/23.jpg)
Overly long alt text...
Using real text instead of images (when possible)...
![Page 24: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/24.jpg)
alt=”Sales steadily increased from $5 million to $16 million
between 1996 and 2004”
![Page 25: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/25.jpg)
Focusing on equivalent CONTENT rather than describing an image
![Page 26: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/26.jpg)
longdesc=”80 percent of this chart resembles Pac-man. 20
percent does not.”
![Page 27: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/27.jpg)
Putting anything other than a URL in longdesc...
![Page 28: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/28.jpg)
The most accessible site on Earth...
![Page 29: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/29.jpg)
•Home•Products•Support•Sales•Forum•Contact Us
Hey, I’m the content!!!
![Page 30: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/30.jpg)
Can you have too much accessibility?
![Page 31: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/31.jpg)
FAIL!
![Page 32: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/32.jpg)
Which provides better accessibility?
![Page 33: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/33.jpg)
FAIL!
![Page 34: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/34.jpg)
FAIL!
![Page 35: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/35.jpg)
FAIL!
![Page 36: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/36.jpg)
Text-only alternatives
• Not an excuse for a site that could otherwise be made accessible
• Only benefits a small number of users
• Native accessibility = text alternative
• Rarely used
![Page 37: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/37.jpg)
Building one version of a web site that is fully accessible...
![Page 38: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/38.jpg)
Using text only versions of inaccessible web sites...
![Page 39: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/39.jpg)
We don’t need no stinkin’ badges
![Page 40: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/40.jpg)
Accesskey and Tabindex
![Page 41: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/41.jpg)
Tabindex
• tabindex=”1+”Specifies exact tab order. Ensure tabindex is complete, logical, and intuitive.
• tabindex=”0”Place item in the default tab order
• tabindex=”-1”Do not place in tab order, but allow the element to programmatically receive focus
![Page 42: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/42.jpg)
Visually hiding content
• display:none AND visibility:hidden hides from everyone
• Position off-screen left with CSS for screen readers
• Use judiciously
![Page 43: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/43.jpg)
Skip to content
• Think beyond “screen reader access”
• One link is typically sufficient
• Are headings “a mechanism”?
• Use ARIA landmark roles
![Page 44: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/44.jpg)
Navigation
Navigate through CNN.com using only the keyboard
![Page 45: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/45.jpg)
Navigation
• Ensure page is keyboard accessible
• Do not remove outline
• Provide clear focus indicators
![Page 46: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/46.jpg)
Text resizing
Increase the font size (not zoom) at MLB.com
![Page 47: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/47.jpg)
Bullet-proof web design...
![Page 48: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/48.jpg)
Fixing screen readers
alt=”sea sun”
vs.alt=”CSUN”
![Page 49: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/49.jpg)
![Page 50: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/50.jpg)
Until user agents...
They do
![Page 51: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/51.jpg)
You don’t need to provide...
• default text in form fields
• printable character between links
• redundant text links for client-side image maps
![Page 52: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/52.jpg)
Acronym and Abbreviation
• Expand in text at first instance OR use <acronym> or <abbr>.
• It’s not necessary to expand all instances.
• It’s not necessary to expand commonly known acronyms and abbreviations (for our web site - HTML, CSS, etc.)
![Page 53: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/53.jpg)
Proper use of Acronym and Abbreviation
![Page 54: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/54.jpg)
HeadingsProperly structured, one <h1>, never empty
... and other semantic structure.
![Page 55: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/55.jpg)
Title attribute
• Advisory information only
• Ignored by screen readers, except...
• form elements missing labels
• <frame title=”navigation”>
• <acronym>/<abbr>...usually.
![Page 56: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/56.jpg)
Using title attribute properly...
![Page 57: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/57.jpg)
Accessibility > Compliance
The mythical “accessible” web site doesn’t exist!
“Is your site WCAG 2.0 AAA compliant???”
![Page 58: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/58.jpg)
Cognitive disabilities
(not much happening here)
![Page 59: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/59.jpg)
![Page 60: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/60.jpg)
![Page 61: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/61.jpg)
Cognitive load vs Functionality
![Page 62: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/62.jpg)
![Page 63: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/63.jpg)
Other• Accessibility statements. Who cares?
• Site maps aren’t typically used
• Design for optimal line length (Jello layouts)
• Provide accurate, descriptive page titles
• You don’t HAVE to check in screen readers
• Don’t provide summary for layout tables
• Use fieldset for grouped radio buttons and checkboxes
• Layout tables don’t (typically) affect accessibility
![Page 64: Web Accessibility Gone Wild](https://reader038.fdocuments.in/reader038/viewer/2022110115/54951f62b47959cd018b471e/html5/thumbnails/64.jpg)
<plug shameless=”true”> read the articles check the blog join the list subscribe to newsletter get our training</plug>
Questions?