SlideShare a Scribd company logo
The Role of Design in Accessibility
• I’ve written some stuff,
• Member of W3C,
• Building for the web
since 1993,
• Learn more at
AdrianRoselli.com,
• Avoid on Twitter @aardrian.
About Adrian Roselli
WHERE DO I FIT?
WHERE DO I START?
Document it
• As the designer, you are making decisions.
• Document them.
• Do not let the developers improvise.
• CYA.
• Eventually you will get a pattern library.
Pattern Library
• Document all this for your custom widgets,
• Use this to build a larger pattern library,
• For many custom widgets: WAI-ARIA Authoring Practices 1.1,
• It is not perfect, but gets you started,
• Be wary of application-specific patterns.
• For truly custom widgets you have never seen before, consider
simplifying to an existing pattern.
Pattern Library
1. Title as <h2> which is also the
link to the thing,
2. Image, but must appear below
<h2> in DOM,
3. Plain text,
4. Share link.
HOW DO I DO IT?
Non-Text Content
• When you include an image in a design, you do it for a reason.
• Just a design element?
• Support the narrative?
• Stand-alone content?
• You must account for its absence.
Non-Text Content
• Hero images,
• Background images,
• Icons,
• Video & audio,
• Animations,
• Charts,
• Screen shots,
• …
Non-Text Content
http://www.4syllables.com.au/2010/12/text-alternatives-decision-tree/
https://www.w3.org/WAI/tutorials/images/decision-tree/
1. What role
does image
play?
2. Does it
present
new info?
3. What
type of
info?
Informative Yes
alt=""
or
<a href="foo"><img alt="">Link</a>
alt=""
or
Use CSS
alt="descriptive identification"
or
alt="short label" + caption
PurelyDecorative
Sensory
No
alt="label for link"
alt=“short alternative"
or
alt="short label" + caption
alt="short label + location of long alternative"
or
long text alternative on same or linked page
Long/Complex
Short/Simple
Non-Text Content
Alt: A unicorn with a rainbow mane
and outstretched wings, clumsily
stumbling around a clearing with a
startled expression on its face.
Structure
• Identify:
• Headings,
• Lists,
• Data tables,
• Captions,
• Regions (banner, navigation, footer, main content).
• This allows a developer to map them to correct element.
Structure
Banner
Navigation
Related
Search
Footer
Main content
Banner
Navigation
Related
Search
Footer
Main content
“Mobile” often means narrow screen
in RWD, as well as this context.
Structure
Structure
Sequence and Order
• CSS techniques allow visual order to break from DOM order:
• Floats,
• Absolute positioning,
• Flexbox,
• Grid.
• WCAG 1.3.2 and 2.4.3 describe meaningful sequence and tab
order matching visual flow.
Sequence and Order
Typography
• Avoid justified text,
• Limit italics,
• Use larger text (lean on browser default),
• Use good contrast,
• Avoid all-caps,
• Avoid very long lines,
• Use clear, concise writing.
Typography
• Leading / line height at least 1.5× font size (WCAG 2.1),
• Space after paragraphs at least 2× font size (WCAG 2.1),
• Letter spacing / tracking at least 0.12× font size (WCAG 2.1),
• Word spacing at least 0.16× font size (WCAG 2.1).
Typography
Color and Contrast
• Does your thing rely on color alone to convey meaning?
• Is there enough contrast?
• Are hyperlinks, menus, etc. still visible?
• WCAG 2.0:
• 4.5:1 for normal text
• 3:1 for large text (14+pt & bold, or 18+pt)
• WCAG 2.1:
• 3:1 for UI components, graphical objects
Color and Contrast
• WCAG 2.1 has broadened it,
• Typography,
• Icons and glyphs,
• Form elements, error messages,
placeholders,
• Hover, focus, selected states.
Hit Areas
• Make areas large enough to tap,
• Leave space between hit areas to avoid mis-taps/clicks,
• Fitts’ Law (time to target as function of size of target),
• Apple: 44pt × 44pt,
• Microsoft: 48px × 48px (spaced 2mm apart),
• Android: 48dp × 48dp (spaced 8dp apart),
• BBC: 7mm × 7mm (inside an exclusion zone of at least 7mm × 7mm)
• WCAG 2.1 Success Criterion 2.5.5 Target Size (AAA).
Hit Areas
Hit Areas
Hit Areas
Hit Areas
Instructions
• Make sure hyperlinks have clear text,
• Do not rely on instructions that assume a user can see, hear, or
interact in a specific way,
• Provide clear form labels,
• Ensure errors are clear and direct the user to correct them.
Indicators
• Make sure you have focus styles,
• Do not rely on hover states for interaction,
• Your design should indicate standard, select, hover, and focus
states,
• Remember that contrast requirements apply to all these,
• Make sure errors, warnings, alerts do not get confused with
regular content.
WRAP-UP
References
• How to design for accessibility
https://www.bbc.co.uk/gel/guidelines/how-to-design-for-
accessibility
• Inclusive Design Principles
https://inclusivedesignprinciples.org/
The Role of Design in Accessibility

More Related Content

What's hot

Open Standards in the Walled Garden
Open Standards in the Walled GardenOpen Standards in the Walled Garden
Open Standards in the Walled Garden
digitalbindery
 
Epub in the wild
Epub in the wildEpub in the wild
Epub in the wild
liz_castro
 
Guelph A11y Conf: Everything I Know About Accessibility I Learned from Stack ...
Guelph A11y Conf: Everything I Know About Accessibility I Learned from Stack ...Guelph A11y Conf: Everything I Know About Accessibility I Learned from Stack ...
Guelph A11y Conf: Everything I Know About Accessibility I Learned from Stack ...
Adrian Roselli
 
Web Accessibility Gone Wild
Web Accessibility Gone WildWeb Accessibility Gone Wild
Web Accessibility Gone Wild
Jared Smith
 
Accessible Design WordCamp Europe 2018 in Belgrad
Accessible Design WordCamp Europe 2018 in BelgradAccessible Design WordCamp Europe 2018 in Belgrad
Accessible Design WordCamp Europe 2018 in Belgrad
Maja Benke
 
Are you accessible
Are you accessibleAre you accessible
Are you accessible
Geri Druckman
 
IS100 Week 6
IS100 Week 6IS100 Week 6
IS100 Week 6
METU-Informatics
 
Down and Dirty EPUB 3
Down and Dirty EPUB 3Down and Dirty EPUB 3
Down and Dirty EPUB 3
digitalbindery
 
Design Concepts and Web Design
Design Concepts and Web DesignDesign Concepts and Web Design
Design Concepts and Web Design
Mindy McAdams
 
Are Mega Menus Really Heroic? 20160317
Are Mega Menus Really Heroic? 20160317Are Mega Menus Really Heroic? 20160317
Are Mega Menus Really Heroic? 20160317
Heather Staudt
 
Web Accessibility for the 21st Century
Web Accessibility for the 21st CenturyWeb Accessibility for the 21st Century
Web Accessibility for the 21st Century
dreamwidth
 
Ppt ch06
Ppt ch06Ppt ch06
Ppt ch06
1geassking
 
dahava
dahavadahava
dahava
dahava
 
Abstractions: Fringe Accessibility
Abstractions: Fringe AccessibilityAbstractions: Fringe Accessibility
Abstractions: Fringe Accessibility
Adrian Roselli
 
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
Chris Mills
 
accessibility
accessibilityaccessibility
accessibility
Dr. V Vorvoreanu
 
Remodel your website
Remodel your websiteRemodel your website
Remodel your website
Robin Hastings
 

What's hot (17)

Open Standards in the Walled Garden
Open Standards in the Walled GardenOpen Standards in the Walled Garden
Open Standards in the Walled Garden
 
Epub in the wild
Epub in the wildEpub in the wild
Epub in the wild
 
Guelph A11y Conf: Everything I Know About Accessibility I Learned from Stack ...
Guelph A11y Conf: Everything I Know About Accessibility I Learned from Stack ...Guelph A11y Conf: Everything I Know About Accessibility I Learned from Stack ...
Guelph A11y Conf: Everything I Know About Accessibility I Learned from Stack ...
 
Web Accessibility Gone Wild
Web Accessibility Gone WildWeb Accessibility Gone Wild
Web Accessibility Gone Wild
 
Accessible Design WordCamp Europe 2018 in Belgrad
Accessible Design WordCamp Europe 2018 in BelgradAccessible Design WordCamp Europe 2018 in Belgrad
Accessible Design WordCamp Europe 2018 in Belgrad
 
Are you accessible
Are you accessibleAre you accessible
Are you accessible
 
IS100 Week 6
IS100 Week 6IS100 Week 6
IS100 Week 6
 
Down and Dirty EPUB 3
Down and Dirty EPUB 3Down and Dirty EPUB 3
Down and Dirty EPUB 3
 
Design Concepts and Web Design
Design Concepts and Web DesignDesign Concepts and Web Design
Design Concepts and Web Design
 
Are Mega Menus Really Heroic? 20160317
Are Mega Menus Really Heroic? 20160317Are Mega Menus Really Heroic? 20160317
Are Mega Menus Really Heroic? 20160317
 
Web Accessibility for the 21st Century
Web Accessibility for the 21st CenturyWeb Accessibility for the 21st Century
Web Accessibility for the 21st Century
 
Ppt ch06
Ppt ch06Ppt ch06
Ppt ch06
 
dahava
dahavadahava
dahava
 
Abstractions: Fringe Accessibility
Abstractions: Fringe AccessibilityAbstractions: Fringe Accessibility
Abstractions: Fringe Accessibility
 
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
 
accessibility
accessibilityaccessibility
accessibility
 
Remodel your website
Remodel your websiteRemodel your website
Remodel your website
 

Similar to The Role of Design in Accessibility — a11yTO Meet-up

Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014
Adrian Roselli
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
Peter Kaizer
 
Web Design Norms
Web Design NormsWeb Design Norms
Web Design Norms
Shantanu Suryawanshi
 
Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG)
Mediacurrent
 
Cross Browser Issues - few solutions inspired by smashing magazine
Cross Browser Issues - few solutions inspired by smashing magazineCross Browser Issues - few solutions inspired by smashing magazine
Cross Browser Issues - few solutions inspired by smashing magazine
Prabhakaran Mani
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principles
Dzung Nguyen
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
Mike Wilcox
 
Multimedia Development Lifecycle
Multimedia Development LifecycleMultimedia Development Lifecycle
Multimedia Development Lifecycle
Leoni Rahmawati
 
A Future Friendly Workflow
A Future Friendly WorkflowA Future Friendly Workflow
A Future Friendly Workflow
Luke Brooker
 
Twitter bootstrap1
Twitter bootstrap1Twitter bootstrap1
Twitter bootstrap1
www.netgains.org
 
Html presentation
Html presentationHtml presentation
Html presentation
Jordan Dichev
 
Advanced Android Design Implementation
Advanced Android Design ImplementationAdvanced Android Design Implementation
Advanced Android Design Implementation
Tack Mobile
 
Jumpstart Your Web App
Jumpstart Your Web AppJumpstart Your Web App
Jumpstart Your Web App
Harvard Web Working Group
 
Customizing ERModernLook Applications
Customizing ERModernLook ApplicationsCustomizing ERModernLook Applications
Customizing ERModernLook Applications
WO Community
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
Yandex
 
WordPress Theming Best Practices
WordPress Theming Best PracticesWordPress Theming Best Practices
WordPress Theming Best Practices
Brian Krogsgard
 
HTML5- Create divisions in a web page
HTML5- Create divisions in a web pageHTML5- Create divisions in a web page
HTML5- Create divisions in a web page
Grayzon Gonzales, LPT
 
Designing for Everybody Workshop
Designing for Everybody WorkshopDesigning for Everybody Workshop
Designing for Everybody Workshop
nightkitcheninteractive
 
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly...
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly...WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly...
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly...
nois3
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
Denise Jacobs
 

Similar to The Role of Design in Accessibility — a11yTO Meet-up (20)

Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
 
Web Design Norms
Web Design NormsWeb Design Norms
Web Design Norms
 
Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG)
 
Cross Browser Issues - few solutions inspired by smashing magazine
Cross Browser Issues - few solutions inspired by smashing magazineCross Browser Issues - few solutions inspired by smashing magazine
Cross Browser Issues - few solutions inspired by smashing magazine
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principles
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
 
Multimedia Development Lifecycle
Multimedia Development LifecycleMultimedia Development Lifecycle
Multimedia Development Lifecycle
 
A Future Friendly Workflow
A Future Friendly WorkflowA Future Friendly Workflow
A Future Friendly Workflow
 
Twitter bootstrap1
Twitter bootstrap1Twitter bootstrap1
Twitter bootstrap1
 
Html presentation
Html presentationHtml presentation
Html presentation
 
Advanced Android Design Implementation
Advanced Android Design ImplementationAdvanced Android Design Implementation
Advanced Android Design Implementation
 
Jumpstart Your Web App
Jumpstart Your Web AppJumpstart Your Web App
Jumpstart Your Web App
 
Customizing ERModernLook Applications
Customizing ERModernLook ApplicationsCustomizing ERModernLook Applications
Customizing ERModernLook Applications
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
 
WordPress Theming Best Practices
WordPress Theming Best PracticesWordPress Theming Best Practices
WordPress Theming Best Practices
 
HTML5- Create divisions in a web page
HTML5- Create divisions in a web pageHTML5- Create divisions in a web page
HTML5- Create divisions in a web page
 
Designing for Everybody Workshop
Designing for Everybody WorkshopDesigning for Everybody Workshop
Designing for Everybody Workshop
 
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly...
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly...WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly...
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly...
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
 

More from Adrian Roselli

CSUN 2020: CSS Display Properties Versus HTML Semantics
CSUN 2020: CSS Display Properties Versus HTML SemanticsCSUN 2020: CSS Display Properties Versus HTML Semantics
CSUN 2020: CSS Display Properties Versus HTML Semantics
Adrian Roselli
 
Selfish Accessibility —DevOpsDays Buffalo
Selfish Accessibility —DevOpsDays BuffaloSelfish Accessibility —DevOpsDays Buffalo
Selfish Accessibility —DevOpsDays Buffalo
Adrian Roselli
 
Selfish Accessibility — Harbour Front HK
Selfish Accessibility — Harbour Front HKSelfish Accessibility — Harbour Front HK
Selfish Accessibility — Harbour Front HK
Adrian Roselli
 
Selfish Accessibility — CodeDaze
Selfish Accessibility — CodeDazeSelfish Accessibility — CodeDaze
Selfish Accessibility — CodeDaze
Adrian Roselli
 
Fringe Accessibility — Portland UX
Fringe Accessibility — Portland UXFringe Accessibility — Portland UX
Fringe Accessibility — Portland UX
Adrian Roselli
 
WCBuf: CSS Display Properties versus HTML Semantics
WCBuf: CSS Display Properties versus HTML SemanticsWCBuf: CSS Display Properties versus HTML Semantics
WCBuf: CSS Display Properties versus HTML Semantics
Adrian Roselli
 
Mind Your Lang — London Web Standards
Mind Your Lang — London Web StandardsMind Your Lang — London Web Standards
Mind Your Lang — London Web Standards
Adrian Roselli
 
Inclusive Usability Testing - WordCamp London
Inclusive Usability Testing - WordCamp LondonInclusive Usability Testing - WordCamp London
Inclusive Usability Testing - WordCamp London
Adrian Roselli
 
CSUN 2018: Everything I Know About Accessibility I Learned from Stack Overflow
CSUN 2018: Everything I Know About Accessibility I Learned from Stack OverflowCSUN 2018: Everything I Know About Accessibility I Learned from Stack Overflow
CSUN 2018: Everything I Know About Accessibility I Learned from Stack Overflow
Adrian Roselli
 
Inclusive Usability Testing — a11yTOCamp
Inclusive Usability Testing — a11yTOCampInclusive Usability Testing — a11yTOCamp
Inclusive Usability Testing — a11yTOCamp
Adrian Roselli
 
Selfish Accessibility - Girl Develop It Buffalo
Selfish Accessibility - Girl Develop It BuffaloSelfish Accessibility - Girl Develop It Buffalo
Selfish Accessibility - Girl Develop It Buffalo
Adrian Roselli
 
Everything I Know About Accessibility I Learned from Stack Overflow
Everything I Know About Accessibility I Learned from Stack OverflowEverything I Know About Accessibility I Learned from Stack Overflow
Everything I Know About Accessibility I Learned from Stack Overflow
Adrian Roselli
 
Selfish Accessibility — WordCamp Europe 2017
Selfish Accessibility — WordCamp Europe 2017Selfish Accessibility — WordCamp Europe 2017
Selfish Accessibility — WordCamp Europe 2017
Adrian Roselli
 
Inclusive User Testing — Guelph Accessibility Conference
Inclusive User Testing — Guelph Accessibility ConferenceInclusive User Testing — Guelph Accessibility Conference
Inclusive User Testing — Guelph Accessibility Conference
Adrian Roselli
 
Selfish Accessibility: MinneWebCon 2017
Selfish Accessibility: MinneWebCon 2017Selfish Accessibility: MinneWebCon 2017
Selfish Accessibility: MinneWebCon 2017
Adrian Roselli
 
Fringe Accessibility: London Web Standards
Fringe Accessibility: London Web StandardsFringe Accessibility: London Web Standards
Fringe Accessibility: London Web Standards
Adrian Roselli
 
Selfish Accessibility: Government Digital Service
Selfish Accessibility: Government Digital ServiceSelfish Accessibility: Government Digital Service
Selfish Accessibility: Government Digital Service
Adrian Roselli
 
Selfish Accessibility: WordCamp London 2017
Selfish Accessibility: WordCamp London 2017Selfish Accessibility: WordCamp London 2017
Selfish Accessibility: WordCamp London 2017
Adrian Roselli
 
Mind your lang (for role=drinks at CSUN 2017)
Mind your lang (for role=drinks at CSUN 2017)Mind your lang (for role=drinks at CSUN 2017)
Mind your lang (for role=drinks at CSUN 2017)
Adrian Roselli
 
Implementing Accessibility: Accessibility Toronto
Implementing Accessibility: Accessibility TorontoImplementing Accessibility: Accessibility Toronto
Implementing Accessibility: Accessibility Toronto
Adrian Roselli
 

More from Adrian Roselli (20)

CSUN 2020: CSS Display Properties Versus HTML Semantics
CSUN 2020: CSS Display Properties Versus HTML SemanticsCSUN 2020: CSS Display Properties Versus HTML Semantics
CSUN 2020: CSS Display Properties Versus HTML Semantics
 
Selfish Accessibility —DevOpsDays Buffalo
Selfish Accessibility —DevOpsDays BuffaloSelfish Accessibility —DevOpsDays Buffalo
Selfish Accessibility —DevOpsDays Buffalo
 
Selfish Accessibility — Harbour Front HK
Selfish Accessibility — Harbour Front HKSelfish Accessibility — Harbour Front HK
Selfish Accessibility — Harbour Front HK
 
Selfish Accessibility — CodeDaze
Selfish Accessibility — CodeDazeSelfish Accessibility — CodeDaze
Selfish Accessibility — CodeDaze
 
Fringe Accessibility — Portland UX
Fringe Accessibility — Portland UXFringe Accessibility — Portland UX
Fringe Accessibility — Portland UX
 
WCBuf: CSS Display Properties versus HTML Semantics
WCBuf: CSS Display Properties versus HTML SemanticsWCBuf: CSS Display Properties versus HTML Semantics
WCBuf: CSS Display Properties versus HTML Semantics
 
Mind Your Lang — London Web Standards
Mind Your Lang — London Web StandardsMind Your Lang — London Web Standards
Mind Your Lang — London Web Standards
 
Inclusive Usability Testing - WordCamp London
Inclusive Usability Testing - WordCamp LondonInclusive Usability Testing - WordCamp London
Inclusive Usability Testing - WordCamp London
 
CSUN 2018: Everything I Know About Accessibility I Learned from Stack Overflow
CSUN 2018: Everything I Know About Accessibility I Learned from Stack OverflowCSUN 2018: Everything I Know About Accessibility I Learned from Stack Overflow
CSUN 2018: Everything I Know About Accessibility I Learned from Stack Overflow
 
Inclusive Usability Testing — a11yTOCamp
Inclusive Usability Testing — a11yTOCampInclusive Usability Testing — a11yTOCamp
Inclusive Usability Testing — a11yTOCamp
 
Selfish Accessibility - Girl Develop It Buffalo
Selfish Accessibility - Girl Develop It BuffaloSelfish Accessibility - Girl Develop It Buffalo
Selfish Accessibility - Girl Develop It Buffalo
 
Everything I Know About Accessibility I Learned from Stack Overflow
Everything I Know About Accessibility I Learned from Stack OverflowEverything I Know About Accessibility I Learned from Stack Overflow
Everything I Know About Accessibility I Learned from Stack Overflow
 
Selfish Accessibility — WordCamp Europe 2017
Selfish Accessibility — WordCamp Europe 2017Selfish Accessibility — WordCamp Europe 2017
Selfish Accessibility — WordCamp Europe 2017
 
Inclusive User Testing — Guelph Accessibility Conference
Inclusive User Testing — Guelph Accessibility ConferenceInclusive User Testing — Guelph Accessibility Conference
Inclusive User Testing — Guelph Accessibility Conference
 
Selfish Accessibility: MinneWebCon 2017
Selfish Accessibility: MinneWebCon 2017Selfish Accessibility: MinneWebCon 2017
Selfish Accessibility: MinneWebCon 2017
 
Fringe Accessibility: London Web Standards
Fringe Accessibility: London Web StandardsFringe Accessibility: London Web Standards
Fringe Accessibility: London Web Standards
 
Selfish Accessibility: Government Digital Service
Selfish Accessibility: Government Digital ServiceSelfish Accessibility: Government Digital Service
Selfish Accessibility: Government Digital Service
 
Selfish Accessibility: WordCamp London 2017
Selfish Accessibility: WordCamp London 2017Selfish Accessibility: WordCamp London 2017
Selfish Accessibility: WordCamp London 2017
 
Mind your lang (for role=drinks at CSUN 2017)
Mind your lang (for role=drinks at CSUN 2017)Mind your lang (for role=drinks at CSUN 2017)
Mind your lang (for role=drinks at CSUN 2017)
 
Implementing Accessibility: Accessibility Toronto
Implementing Accessibility: Accessibility TorontoImplementing Accessibility: Accessibility Toronto
Implementing Accessibility: Accessibility Toronto
 

Recently uploaded

学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
zyfovom
 
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdf
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdfMeet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdf
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdf
Florence Consulting
 
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
xjq03c34
 
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC
 
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
uehowe
 
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
ukwwuq
 
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptxBridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Brad Spiegel Macon GA
 
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
keoku
 
制作毕业证书(ANU毕业证)莫纳什大学毕业证成绩单官方原版办理
制作毕业证书(ANU毕业证)莫纳什大学毕业证成绩单官方原版办理制作毕业证书(ANU毕业证)莫纳什大学毕业证成绩单官方原版办理
制作毕业证书(ANU毕业证)莫纳什大学毕业证成绩单官方原版办理
cuobya
 
Explore-Insanony: Watch Instagram Stories Secretly
Explore-Insanony: Watch Instagram Stories SecretlyExplore-Insanony: Watch Instagram Stories Secretly
Explore-Insanony: Watch Instagram Stories Secretly
Trending Blogers
 
Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?
Paul Walk
 
Gen Z and the marketplaces - let's translate their needs
Gen Z and the marketplaces - let's translate their needsGen Z and the marketplaces - let's translate their needs
Gen Z and the marketplaces - let's translate their needs
Laura Szabó
 
Internet of Things in Manufacturing: Revolutionizing Efficiency & Quality | C...
Internet of Things in Manufacturing: Revolutionizing Efficiency & Quality | C...Internet of Things in Manufacturing: Revolutionizing Efficiency & Quality | C...
Internet of Things in Manufacturing: Revolutionizing Efficiency & Quality | C...
CIOWomenMagazine
 
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
uehowe
 
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
bseovas
 
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
cuobya
 
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
ufdana
 
Search Result Showing My Post is Now Buried
Search Result Showing My Post is Now BuriedSearch Result Showing My Post is Now Buried
Search Result Showing My Post is Now Buried
Trish Parr
 
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
fovkoyb
 
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
bseovas
 

Recently uploaded (20)

学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
 
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdf
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdfMeet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdf
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdf
 
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
 
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
 
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
 
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
 
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptxBridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
 
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
 
制作毕业证书(ANU毕业证)莫纳什大学毕业证成绩单官方原版办理
制作毕业证书(ANU毕业证)莫纳什大学毕业证成绩单官方原版办理制作毕业证书(ANU毕业证)莫纳什大学毕业证成绩单官方原版办理
制作毕业证书(ANU毕业证)莫纳什大学毕业证成绩单官方原版办理
 
Explore-Insanony: Watch Instagram Stories Secretly
Explore-Insanony: Watch Instagram Stories SecretlyExplore-Insanony: Watch Instagram Stories Secretly
Explore-Insanony: Watch Instagram Stories Secretly
 
Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?
 
Gen Z and the marketplaces - let's translate their needs
Gen Z and the marketplaces - let's translate their needsGen Z and the marketplaces - let's translate their needs
Gen Z and the marketplaces - let's translate their needs
 
Internet of Things in Manufacturing: Revolutionizing Efficiency & Quality | C...
Internet of Things in Manufacturing: Revolutionizing Efficiency & Quality | C...Internet of Things in Manufacturing: Revolutionizing Efficiency & Quality | C...
Internet of Things in Manufacturing: Revolutionizing Efficiency & Quality | C...
 
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
 
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
 
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
 
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
 
Search Result Showing My Post is Now Buried
Search Result Showing My Post is Now BuriedSearch Result Showing My Post is Now Buried
Search Result Showing My Post is Now Buried
 
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
 
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
 

The Role of Design in Accessibility — a11yTO Meet-up

  • 1. The Role of Design in Accessibility
  • 2. • I’ve written some stuff, • Member of W3C, • Building for the web since 1993, • Learn more at AdrianRoselli.com, • Avoid on Twitter @aardrian. About Adrian Roselli
  • 3. WHERE DO I FIT?
  • 4.
  • 5.
  • 6.
  • 7. WHERE DO I START?
  • 8. Document it • As the designer, you are making decisions. • Document them. • Do not let the developers improvise. • CYA. • Eventually you will get a pattern library.
  • 9.
  • 10.
  • 11. Pattern Library • Document all this for your custom widgets, • Use this to build a larger pattern library, • For many custom widgets: WAI-ARIA Authoring Practices 1.1, • It is not perfect, but gets you started, • Be wary of application-specific patterns. • For truly custom widgets you have never seen before, consider simplifying to an existing pattern.
  • 12. Pattern Library 1. Title as <h2> which is also the link to the thing, 2. Image, but must appear below <h2> in DOM, 3. Plain text, 4. Share link.
  • 13. HOW DO I DO IT?
  • 14. Non-Text Content • When you include an image in a design, you do it for a reason. • Just a design element? • Support the narrative? • Stand-alone content? • You must account for its absence.
  • 15. Non-Text Content • Hero images, • Background images, • Icons, • Video & audio, • Animations, • Charts, • Screen shots, • …
  • 16. Non-Text Content http://www.4syllables.com.au/2010/12/text-alternatives-decision-tree/ https://www.w3.org/WAI/tutorials/images/decision-tree/ 1. What role does image play? 2. Does it present new info? 3. What type of info? Informative Yes alt="" or <a href="foo"><img alt="">Link</a> alt="" or Use CSS alt="descriptive identification" or alt="short label" + caption PurelyDecorative Sensory No alt="label for link" alt=“short alternative" or alt="short label" + caption alt="short label + location of long alternative" or long text alternative on same or linked page Long/Complex Short/Simple
  • 17. Non-Text Content Alt: A unicorn with a rainbow mane and outstretched wings, clumsily stumbling around a clearing with a startled expression on its face.
  • 18. Structure • Identify: • Headings, • Lists, • Data tables, • Captions, • Regions (banner, navigation, footer, main content). • This allows a developer to map them to correct element.
  • 20. Banner Navigation Related Search Footer Main content “Mobile” often means narrow screen in RWD, as well as this context. Structure
  • 22. Sequence and Order • CSS techniques allow visual order to break from DOM order: • Floats, • Absolute positioning, • Flexbox, • Grid. • WCAG 1.3.2 and 2.4.3 describe meaningful sequence and tab order matching visual flow.
  • 24. Typography • Avoid justified text, • Limit italics, • Use larger text (lean on browser default), • Use good contrast, • Avoid all-caps, • Avoid very long lines, • Use clear, concise writing.
  • 25. Typography • Leading / line height at least 1.5× font size (WCAG 2.1), • Space after paragraphs at least 2× font size (WCAG 2.1), • Letter spacing / tracking at least 0.12× font size (WCAG 2.1), • Word spacing at least 0.16× font size (WCAG 2.1).
  • 27. Color and Contrast • Does your thing rely on color alone to convey meaning? • Is there enough contrast? • Are hyperlinks, menus, etc. still visible? • WCAG 2.0: • 4.5:1 for normal text • 3:1 for large text (14+pt & bold, or 18+pt) • WCAG 2.1: • 3:1 for UI components, graphical objects
  • 28. Color and Contrast • WCAG 2.1 has broadened it, • Typography, • Icons and glyphs, • Form elements, error messages, placeholders, • Hover, focus, selected states.
  • 29. Hit Areas • Make areas large enough to tap, • Leave space between hit areas to avoid mis-taps/clicks, • Fitts’ Law (time to target as function of size of target), • Apple: 44pt × 44pt, • Microsoft: 48px × 48px (spaced 2mm apart), • Android: 48dp × 48dp (spaced 8dp apart), • BBC: 7mm × 7mm (inside an exclusion zone of at least 7mm × 7mm) • WCAG 2.1 Success Criterion 2.5.5 Target Size (AAA).
  • 34. Instructions • Make sure hyperlinks have clear text, • Do not rely on instructions that assume a user can see, hear, or interact in a specific way, • Provide clear form labels, • Ensure errors are clear and direct the user to correct them.
  • 35. Indicators • Make sure you have focus styles, • Do not rely on hover states for interaction, • Your design should indicate standard, select, hover, and focus states, • Remember that contrast requirements apply to all these, • Make sure errors, warnings, alerts do not get confused with regular content.
  • 37. References • How to design for accessibility https://www.bbc.co.uk/gel/guidelines/how-to-design-for- accessibility • Inclusive Design Principles https://inclusivedesignprinciples.org/
  • 38. The Role of Design in Accessibility

Editor's Notes

  1. Accessibility is typically seen as a technical challenge in need of a technical solution.
  2. A designer who is suddenly tasked with addressing accessibility may feel confused, alarmed, and all alone. Maybe even unable to contribute. But the designer is often the most potent force for accessibility on a team.
  3. The WCAG 2 Quick Reference is a great tool to both justify that value and to push for a greater role in the process.
  4. You can filter WCAG SCs based on just visual design and/or interaction design.
  5. It may not be clear where you can start to have an impact. But there is always a good first step.
  6. This also reinforces your value. Puts others in a position to accept, reject, challenge. Gives them the chance to get invested.
  7. The BBC
  8. Here the BBC team documents the content and structure of a screen.
  9. https://www.bbc.co.uk/gel/guidelines/how-to-design-for-accessibility A pattern library would document things you re-use.
  10. Now you need to know what to document. Let’s review some accessibility tasks that fall under the designer’s role.
  11. It is unlikely you are taking random images off the web and dropping them into your design.
  12. Non-text content comes in many forms.
  13. Document the image and what its alt text should be. As the designer, you are the best one to do that. Remember that alt text for an image may be different when used in other contexts.
  14. This can provide guidance to a developer. Avoids <div>-soup. Forces them, and you, to think about the content you are presenting.
  15. It can be as simple as drawing boxes over your design.
  16. Don’t forget that a responsive site can adjust its layout.
  17. https://www.bbc.co.uk/gel/guidelines/how-to-design-for-accessibility A good structure allows AT users to quickly move to the content they want, or more easily explore the page.
  18. It is too easy to rely on coding techniques that do not consider how the content is to be consumed. A keyboard-only user or screen reader user is going to consume and interact with the content in the order it appears in the DOM.
  19. https://www.bbc.co.uk/gel/guidelines/how-to-design-for-accessibility A developer may not understand how you intend the content to be consumed. A developer may shoehorn it into a library or framework to make it look the same, regardless of flow. Note that for both reading order and tab order.
  20. We can lean on long-established rules for good typography. Legibility benefits all users, but also helps those with cog, low vision, and folks traveling on bumpy planes or working in the sun.
  21. WCAG also gives some guidance, but note that these are not hard rules. Instead, your design has to be able to adapt to this.
  22. https://opendyslexic.org/about Specialized typefaces are generally ineffective. Note that Verdana and Helvetica are terrible anyway for not distinguishing between I and l.
  23. We see this failure all the time I hate them because of all the screen shots I need for the audits
  24. The screen shot is from the TPG style guide Note that it shows good color combinations and calls out ones to avoid
  25. WCAG 2.1 AAA: 44px Excludes: Equivalent: The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels; Inline: The target is in a sentence or block of text; User Agent Control: The size of the target is determined by the user agent and is not modified by the author; Essential: A particular presentation of the target is essential to the information being conveyed.
  26. Apple
  27. Microsoft
  28. Android
  29. BBC Not a platform; this is good for planning your own internal guidelines
  30. Hyperlinks should manage expectations. Do not say “tap the red box to the right.” The form label should be visible, obvious, and not placeholder text. Error text should tell me what I did wrong, how I can fix it, and how to get to the errored field.
  31. The easiest step is to duplicate your hover styles to your focus styles; document that step. Tool-tips are a no-no unless you can focus them and it is obvious; document the focus requirement. Make sure a user can dismiss tool-tips, similar with just an Esc A user should know what is the current thing, what has focus, what is disabled, and so on, with just a look. Calendar controls can have a dozen states (today, previous/next month, weekends, holidays, past, future, unavailable, selected date, selected current date, …)