Fringe Accessibility: A11y Camp Toronto 2015
-
Upload
adrian-roselli -
Category
Technology
-
view
759 -
download
0
Transcript of Fringe Accessibility: A11y Camp Toronto 2015
![Page 1: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/1.jpg)
Fringe Accessibility Techniques(That Probably Shouldn’t Be)
Presented by Adrian Roselli for Accessibility Camp Toronto 2015
#a11yTO
Slides from this talk will be available at rosel.li/a11yTO
![Page 2: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/2.jpg)
About Adrian Roselli
• Co-written four books.• Technical editor
for two books.• Written over fifty
articles, most recentlyfor .net Magazine andWeb Standards Sherpa.
• You might know me from suchtalks as Selfish Accessibility.
Great bedtime reading!
![Page 3: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/3.jpg)
About Adrian Roselli
• Member of W3C HTML Working Group*, W3C Accessibility Task Force, five W3C Community Groups.
• Building for the web since 1994.• Founder, owner at Algonquin (
aHealthTech.com).• Learn more at AdrianRoselli.com.• Avoid on Twitter @aardrian.
I warned you.
![Page 4: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/4.jpg)
What is a11y?
• A numeronym for “accessibility”:• The first and last letter,• The number of characters omitted.
• Prominent on Twitter (character restrictions):• #a11y
• Examples:• l10n → localization• i18n → internationalization
Ain’t language funsies?
![Page 5: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/5.jpg)
What We’ll Cover
• Common(?) Techniques• The (not really) Fringe• Key Takeaways
Work with me, people.
![Page 6: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/6.jpg)
Common(?) Techniques
1 of 3 sections.
![Page 7: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/7.jpg)
Common(?) Techniques
• Click on field labels
Make sure the corresponding field gets focus.
![Page 8: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/8.jpg)
Common(?) Techniques
• Click on field labels• Unplug your mouse
Make sure you can still use the page / application.
![Page 9: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/9.jpg)
Common(?) Techniques
• Click on field labels• Unplug your mouse• Turn off images
Make sure no important content has disappeared.
![Page 10: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/10.jpg)
Common(?) Techniques
• Click on field labels• Unplug your mouse• Turn off images• Turn off CSS
Make sure the page still makes sense.
![Page 11: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/11.jpg)
Common(?) Techniques
• Click on field labels• Unplug your mouse• Turn off images• Turn off CSS• Check color contrast
Make sure it’s sufficient.
![Page 12: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/12.jpg)
Common(?) Techniques
• Click on field labels• Unplug your mouse• Turn off images• Turn off CSS• Check color contrast• Consider hyperlink text
Be consistent and clear, managing expectations the whole time.
![Page 13: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/13.jpg)
The (not really) Fringe
2 of 3 sections.
![Page 14: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/14.jpg)
Use Link Underlines
http://www.theverge.com/2014/3/13/5503894/google-removes-underlined-links-site-redesign
1/16
![Page 15: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/15.jpg)
Use Link Underlines
• You are not Google:• Users know Google’s layout,• Users probably don’t visit your site daily.
• Relying on color alone will not suffice (WCAG 1.4.1 [A], 1.4.3 [AA]),
• Necessary contrast values:• 4.5:1 between text and its background for copy,• 3:1 between text and its background for larger text,• 3:1 between surrounding text and a hyperlink, plus an
additional visual cue (G183).http://adrianroselli.com/2014/03/i-dont-care-what-google-did-just-keep.html
1/16
![Page 16: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/16.jpg)
Use <h#> Wisely
2/16
![Page 17: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/17.jpg)
Use <h#> Wisely
• Use only one <h1> per page,• Don’t skip heading levels,• Use appropriate nesting,• There is no Document Outline Algorithm:• Don’t use <h1> within every new <section> nor <article>,
• This will not affect your SEO.
http://adrianroselli.com/2013/12/the-truth-about-truth-about-multiple-h1.html
2/16
![Page 18: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/18.jpg)
Use :focus Styles
https://www.virginamerica.com/
3/16
![Page 19: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/19.jpg)
Use :focus Styles
• Particularly if you removed link underlines,• Everywhere you have :hover, add :focus,• Look for :focus{outline:none;} in libraries:• Remove it.
• Easy to test with the tab key.
http://adrianroselli.com/2014/06/keep-focus-outline.html
3/16
![Page 20: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/20.jpg)
Don’t Use tabindex > 0
https://www.digitalgov.gov/2014/11/17/user-experience-impossible-the-line-between-accessibility-and-usability/
4/16
![Page 21: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/21.jpg)
Don’t Use tabindex > 0• tabindex="-1"• Use to set focus with script,• Does not put it in tab order of page.
• tabindex="0"• Allows user to set focus (eg: via keyboard),• Puts in tab order of page (based on DOM).
• tabindex="1" (or greater)• Do not do this,• Messes with natural tab order.
http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html
4/16
![Page 22: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/22.jpg)
Don’t Disable Zoom
http://codepen.io/aardrian/full/dYNJOVhttp://codepen.io/aardrian/full/ojBpjw
5/16
![Page 23: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/23.jpg)
Don’t Disable Zoom
• Allow users on mobile to zoom in,• Look in <meta name="viewport"> for this:
• minimum-scale=1.0• maximum-scale=1.0• user-scalable=no
• Look in @-ms-viewport {} for this:• zoom:1.0
• Enhance!• (Google AMP HTML is getting fixed)
http://adrianroselli.com/2015/10/dont-disable-zoom.html
5/16
![Page 24: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/24.jpg)
Use Captions/Subtitles
https://www.youtube.com/watch?v=V592VMJeXc8
6/16
![Page 25: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/25.jpg)
Use Captions/Subtitles
• Everybody uses them:• Working in public, in bed, at home,• Surfing in public, in bed, at work.
• Should include audio descriptions,• Should include speaker identification,• Review auto-captions (“craptions”):• NoMoreCraptions.com
http://adrianroselli.com/2013/11/captions-in-everyday-use.html
6/16
![Page 26: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/26.jpg)
Test in Windows High Contrast Mode
http://buffalosoccerclub.org/About
7/16
![Page 27: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/27.jpg)
Test in Windows High Contrast Mode
• It removes CSS background images,• Colors defined in your CSS are overridden,• To activate:• Left ALT + left SHIFT + PRINT SCREEN
• Media queries:• -ms-high-contrast: active• -ms-high-contrast: black-on-white• -ms-high-contrast: white-on-black
http://adrianroselli.com/2012/08/css-background-images-high-contrast-mode.html
7/16
![Page 28: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/28.jpg)
Avoid Infinite Scroll
http://www.pewresearch.org/category/publications/
8/16
![Page 29: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/29.jpg)
Avoid Infinite Scroll
• Makes it impossible to access some content:• Footer,• Sidebar links.
• Destroys the back button,• Makes it impossible to share a URL to specific
“page” of results,• Makes it impossible to jump ahead several “pages”
of results,• Can overwhelm AT users, less powerful devices.
http://adrianroselli.com/2014/05/so-you-think-you-built-good-infinite.htmlhttp://adrianroselli.com/2015/05/for-infinite-scroll-bounce-rate-is.html
8/16
![Page 30: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/30.jpg)
Set lang attribute on <html>
http://codepen.io/aardrian/pen/rOGYNL
9/16
![Page 31: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/31.jpg)
Set lang attribute on <html>
• VoiceOver uses to auto-switch voices,• VoiceOver uses appropriate accenting,• JAWS loads correct phonetic engine /
phonologic dictionary,• NVDA matches VoiceOver and JAWS,• Use the correct lang value:• Sub-tags are ok,• Avoid private-use: en-GB-x-hixie
http://adrianroselli.com/2015/01/on-use-of-lang-attribute.html
9/16
![Page 32: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/32.jpg)
Reconsider Typefaces for Dyslexia
http://opendyslexic.org/try-it/
10/16
![Page 33: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/33.jpg)
Reconsider Typefaces for Dyslexia
• Use good typography rules:• Avoid justified text,• Use generous line spacing / leading,• Use generous letter spacing,• Avoid italics,• Generally use sans serif faces,• Use larger text,• Use good contrast,• Use clear, concise writing.
http://adrianroselli.com/2015/03/typefaces-for-dyslexia.html
10/16
![Page 34: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/34.jpg)
Use Only One <main> per Page
Modified version of Hixie’s image at https://github.com/whatwg/html/issues/100#issuecomment-138620240
11/16
![Page 35: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/35.jpg)
Use Only One <main> per Page
• <main> maps directly to role="main",• AT users expect one main content block, may
miss subsequent <main>s,• AT doesn’t expose that are multiples,• Can erode trust in landmark navigation.
http://adrianroselli.com/2015/09/use-only-one-main-on-a-page.html
11/16
![Page 36: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/36.jpg)
Source Order Matters
http://codepen.io/aardrian/full/MavVeb/
Firefox
Chrome
12/16
![Page 37: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/37.jpg)
Source Order Matters
• CSS techniques allow visual order to break from DOM order:• Floats,• Absolute positioning,• Flexbox (see 5.4.1 of ED for a11y note),• Grid (read Rachel Andrew on subgrid).
• WCAG 1.3.2 and 2.4.3 describe meaningful sequence and tab order matching visual flow,
• Different behavior among different browsers.http://adrianroselli.com/2015/09/source-order-matters.html http://200ok.nl/a11y-flexbox/
12/16
![Page 38: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/38.jpg)
Use On-Page Descriptions
http://adrianroselli.com/2014/04/we-need-to-raise-stink-about-net.html
13/16
![Page 39: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/39.jpg)
Use On-Page Descriptions
• Not just for longdesc or aria-describedat, but any long description technique,
• Use an in-page anchor,• Don’t link to another page without reason:• Consider burden of loading a new page,• Consider burden of re-loading original page.
• Based on results of latest WebAIM screen reader survey results.
http://adrianroselli.com/2015/09/use-on-page-image-descriptions.html
13/16
![Page 40: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/40.jpg)
No role="search" on <form>
http://codepen.io/aardrian/pen/MaKbPa/
14/16
![Page 41: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/41.jpg)
No role="search" on <form>
• Avoid <form role="search">,• This overrides <form> native semantics:
• search: a search facility, which includes a form,• form: a form.
• Does not replicate role="form",• Options:
• <div role="search"> <form>• <form> <div role="search">
http://adrianroselli.com/2015/08/where-to-put-your-search-role.html
14/16
![Page 42: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/42.jpg)
Don’t Tweet Pictures of Text
https://twitter.com/jmspool/status/546303256990076929https://twitter.com/lukew/status/541986091960528896 https://twitter.com/altonbrown/status/653030164985708544 15/16
![Page 43: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/43.jpg)
Don’t Tweet Pictures of Text
• Twitter has no provision for alt text,• Make your own:• Reply to own tweet with alt text,• Link to a tweet and provide alt text,• Link to long-form alternative text.
• @alt_text_bot as interesting experiment:• By Cameron Cundiff for NYU ABILITY hackathon,• Uses CloudSight API.
http://adrianroselli.com/2014/12/dont-tweet-pictures-of-text.htmlhttp://adrianroselli.com/2015/04/twitter-accidentally-takes-step-toward.htmlhttp://adrianroselli.com/2015/04/alt-text-bot-image-descriptions-ftw.html 15/16
![Page 44: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/44.jpg)
Share a11y Experiences
http://blog.podio.com/2015/07/08/hard-truths-helped-us-start-improving-podio-experience-visually-impaired/https://medium.com/medium-eng/five-goofy-things-medium-did-that-break-accessibility-3bc804ae818d
16/16
![Page 45: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/45.jpg)
Share a11y Experiences
• We’re all trying to do what we can,• Don’t attack someone who doesn’t know what
they don’t know,• Someone may find something you never
considered,• You may get feedback on something you never
considered,• a11ywins.tumblr.com FTW:• Thanks to Marcy Sutton.
http://adrianroselli.com/2015/07/lets-share-more-accessibility-experiences.html
16/16
![Page 46: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/46.jpg)
Key Takeaways
3 of 3 sections.
![Page 47: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/47.jpg)
≠ Checklist
• Accessibility is not a checklist.
No matter how pretty that checklist looks now how many items you get to check.
![Page 48: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/48.jpg)
Stairamp
Dean Bouchard on Flickrhttp://incl.ca/the-problems-with-ramps-blended-into-stairs/
![Page 49: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/49.jpg)
= Process
• Accessibility is not a checklist.• Accessibility is an ongoing process.
You know, kinda like all software.
![Page 50: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/50.jpg)
Snowtreeramp
Nicolas Steenhouthttps://twitter.com/vavroom/status/571092086365261824
“Wheelchair ramp at pharmacy not only hasn’t been cleared of snow but has 2 potted trees to ensure nobody can pass.”
![Page 51: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/51.jpg)
Oslo Davis, https://twitter.com/oslodavis/status/373219062697840640
![Page 52: Fringe Accessibility: A11y Camp Toronto 2015](https://reader036.fdocuments.in/reader036/viewer/2022062412/58f0b4681a28ab62138b4577/html5/thumbnails/52.jpg)
Fringe Accessibility Techniques(That Probably Shouldn’t Be)
Presented by Adrian Roselli for Accessibility Camp Toronto 2015
My thanks and apologies.
Slides from this talk will be available at rosel.li/a11yTO