SlideShare a Scribd company logo
How to start with Accessibility
About Me
▸ Maja Benke
▸ Webdesigner from Berlin
▸ UX and Accessibility Enthusiast
▸ Community Member since 2015
▸ @MajaBenke
A 11 y
A ccessibilit y
Step 1:
What is Accessibility
Enabling Access for People with
Disabilities, Special Needs and for
Assistive Technology
What is Accessibility
Kind of Disabilities
Physical Audio VisualCognitive
What is Accessibility
What is Accessibility
Kind of Disabilities
PermanentlyTemporary
What is Accessibility
Every Fifth Person
Needs an Accessible Website
Accessibility is for Everyone!
What is Accessibility
Step 2:
The right Mindset
"For people without disabilities, 

technology makes things easier.
For people with disabilities, 

technology makes things possible."
IBM Training Manual 1991
The right Mindset
The right Mindset
Why Accessibility matters
▸ Makes it Usable for People with Handicaps and doesn’t
exclude People
▸ Improves User Experience for Everyone
▸ Legally required for Public Websites
▸ It’s the Right Thing To Do
▸ Improves the Code Quality
▸ Improves SEO of a Website
Step 3:
Technologies for Accessibility
Technologies for Accessibility
Keyboard Navigation only and alternative Keyboards
Source: http://access.sfsu.edu/
Source:https://commons.wikimedia.org/wiki/File:Plage-braille-Alva.jpg
Technologies for Accessibility
Stylus/Wand held in the Mouth
Source: http://www.unitedspinal.org/disability-products-services/mundstab-mouthstick---mouth-head-sticks/
Technologies for Accessibility
Screen Readers (Voice Over, Jaws, …)
Technologies for Accessibility
Speech Recognition Software
Source: https://voicebot.ai/2018/12/21/google-assistant-wins-another-open-question-test-while-apple-siri-
and-amazon-alexa-improve-substantially/
Technologies for Accessibility
Switch Buttons
Source: https://axesslab.com/switches/

Recommendation: https://www.24a11y.com/2018/i-used-a-switch-control-for-a-day/
Technologies for Accessibility
Accessibility Settings
▸ Browser Options and Extensions
Technologies for Accessibility
Reader Mode in Browsers
Technologies for Accessibility
Browser Extension
Technologies for Accessibility
Accessibility Settings
▸ Browser Extensions and Options
▸ Settings in Operating System
▸ Zoom
▸ Tools
▸ …
AT and Settings Requires
Skillset of Users!
Technologies for Accessibility
Step 4:
Accessibility Rules
Accessibility Rules
Integrate A11y in Every Component
Design
Content
Code
A11y:
For Project Management
A11y for Project Management
Common Mistakes
▸ A11y are often not integrated in Requirements and
Calculation
▸ A11y is the First Position to cut out for Budget
▸ Wrong Mindset: „Accessibility is not important for this Target
Group / this Project“
▸ No Accessibility-Testing during the Project
A11y for Project Management
Solutions
▸ Accessibility by Design! 
▸ Integrate and understand Accessibility as natural as 

Responsive Design, SEO or Security
▸ Reduce Costs by integrate A11y from the Beginning and Avoid
Fees
▸ In Agencies: try to onboard Everyone in the Team.
▸ Check Accessibility after Every Step
▸ Teach your Clients about A11y, if they Work on the Website 
A11y:
For Design
A11y for Design
Common mistakes
▸ Bad Color Contrast
▸ Thin and Smalls Fonts 
▸ Information with Color only 
▸ Not underlined Links
A11y for Design
Information by Color Only
A11y for Design
Common Mistakes
▸ Focus Style is missing
▸ Small clickable Areas / Touch Regions
▸ Mindset: „But A11y does not look good“
▸ Design breaks Functionality
A11y for Design
Design breaks Functionality
A11y for Design
Solutions
▸ Understand your Design to Support:
▸ the User
▸ the Functionality and Content of the Website
▸ Design is not Art!
▸ Make it not only Pretty, Make It Usable 
▸ Be Creative. Find fun Ways to make your Design Accessible
A11y for Design
Solutions - Layout
▸ Clear Layout
▸ Enough Whitespace
A11y for Design
Clear Structure
A11y for Design
Solutions - Layout
▸ Clear Layout
▸ Enough Whitespace
▸ Clickable Areas must be large enough
▸ Design the Focus Style together with the Hover Style
A11y for Design
Style the Focus
A11y for Design
Solutions - Color
▸ Clear Color Contrast (Level AA or higher)
▸ Information not by Color only
▸ Test your site in Black and White
▸ Underline your Links in Text
A11y for Design
Underline the Links!
A11y for Design
Solutions - Fonts
▸ Use Fonts, that are easy to read
▸ Design it not to thin and small. Make it easy to read the Text
▸ Limit the Use of Uppercase and Italic
A11y Checkliste
- Designers -
Fonts are easy to read
Text is large and thick enough to read easily
Limited use of Uppercase and Italic
Fonts
Site is understandable in Black & White
Clear Color Contrast
Information not by Color only
Links in Text are underlined
Color
Clear Layout
Enough Whitespace
Layout
Focus has a style
Clickable Areas are large enough
Ressources
▸ wp1x1.de/checklists-for-
accessibility
A11y for Design
Ressources
▸ A11y Posters: gov.uk https://accessibility.blog.gov.uk/
2016/09/02/dos-and-donts-on-designing-for-accessibility/
▸ WordPress A11y Handbook: https://make.wordpress.org/
accessibility/handbook/
Tools:
▸ Contrastchecker.com
▸ Sim Daltonism
A11y for Design
Take a Breath and
Drink some Water!
A11y:
For Developing
A11y for Developing
Common Mistakes
▸ Website not Usable by Keyboard only (especially Menus, Pop Ups, Accordions…)
▸ Wrong Index Order
▸ Wrong use of HTML Elements
▸ No Use of Landmarks
▸ <div class="header“> instead of <header>
▸ Missing Labels for Forms
▸ Time Limits
▸ Use of target=_blank (Links Open in new Tab)
▸ Wrong Language Settings
A11y for Developing
Solutions - Semantics
▸ Always use Best Practice 
▸ Use Correct Semantic
▸ Learn HTML5 deeply
▸ Use Landmarks
▸ Correct Index Order
A11y for Developing
Solutions - Code
▸ Don’t use target=_blank (let the Choice to the User) 
▸ Use a Focus Style
▸ Forms must have Labels
▸ Test for Keyboard Navigation (Menu, Tables, Accordions,..)
▸ Integrate ”Skip to Content“
A11y for Developing
Integrate „Skip to Content“
Integrate „Skip to Content“ in
<a class=”screen-reader-text skip-link” href="#content">Skip to
content</a>
More Informations: make.wordpress.org/accessibility/
handbook/markup/skip-links/
A11y for Developing
Solutions - Screen Reader
▸ Use ARIA only if HTML is not enough
▸ Talk: ”Who’s is afraid of ARIA“ from Rian Rietveld

https://wordpress.tv/2019/06/19/rian-rietveld-whos-afraid-
of-aria-2/
▸ Define Language in HTML-Tag
Use ARIA only if you have to
Define Language in HTML-Tag
Screen Reader
Forms must have Labels
Test for Keyboard Navigation (Menu,
Tables, Accordions,..)
Don’t use target=_blank
Use a Focus Style
Integrate ”Skip to Content“
Code
Use Correct Semantic
Use HTML5
Semantic
Correct Index Order
Use Landmarks
A11y Checkliste
- Developers -
Ressources
▸ wp1x1.de/checklists-for-
accessibility
A11y for Developing
Ressources
▸ WordPress A11y Handbook: make.wordpress.org/accessibility/
handbook/
▸ Theme Dev Handbook: developer.wordpress.org/themes/
functionality/accessibility/
Automatic Testing Tools:
▸ Axe: deque.com/axe/
▸ Wave: wave.webaim.org/
A11y for Developing
Testing Tools: Axe
A11y for Developing
Testing Tools: Wave
A11y:
For Content
A11y for Content
Common Mistakes
▸ Wrong Semantic
▸ Big Text-Blocks that are hard to read
▸ No clear Meaning of Headlines, Buttons, Links, …
▸ Link-Text like „Click Here“
▸ Alt-Texts are Missing
A11y for Content
Solutions - Text
▸ Structured Text with Text Elements
▸ To make the scannable and easy to read
A11y for Content
Use Headlines and Whitespace
A11y for Content
Solutions - Text
▸ Structured Text with Text Elements
▸ To make the scannable and easy to read
▸ Correct Semantics for Headlines
▸ Important Informations on Top
▸ Clear Description for Links
▸ Not „Click Here“, better „See our Guide“
▸ Don’t open Links by Default in new Tab
A11y for Content
Solutions - Content
▸ Variation of Content Formats
A11y for Content
Variation of Content Formats
A11y for Content
Solutions - Content
▸ Variation of Content Formats
▸ Add Alt-Text to Images
▸ Provide Content from Videos, Graphs, Images also as Text
▸ Provide Subtitels and Captions
A11y for Content
Use Captioning
youtube.com/watch?v=P2YBkZCRTGA
A11y for Content
Solutions - Content
▸ Variation of Content Formats
▸ Add Alt-Text to Images
▸ Provide Content from Videos, Graphs, Images also as Text
▸ Provide Subtitels and Captions
▸ No Autostart for Videos, Audios, Sliders
▸ Avoid Moving and Flashing Elements
A11y Checkliste
- Content Creators -
Integrate Subtitels and Captions
No Autostart
No flashing Elements
Video, Audio & Slider
Clear Description for Links
Don’t open Links by Default in new Tab
Links
Add Alt-Text to Images
Images
Structured Text with Text Elements
Correct Semantics for Headlines
Important Informations on Top
Text
Content
Don’t rely on Memory of Content
Variation of Content Formats
Ressources
▸ wp1x1.de/checklists-for-
accessibility
A11y for Content
Ressources
▸ A11y Posters: gov.uk https://accessibility.blog.gov.uk/
2016/09/02/dos-and-donts-on-designing-for-accessibility/
Automatic Testing Tools:
▸ Gutenberg
▸ Plugin: Content Author Accessibility Preview :
wordpress.org/plugins/content-author-accessibility-preview/
A11y for Content
Gutenberg Testing Tool
A11y for Content
Plugin: Content Author Accessibility Preview
Content Author Accessibility Preview: wordpress.org/plugins/content-author-
accessibility-preview/
A11y:
General Rules
General A11y Rules
General Accessibility Rules
▸ Be Empathic
▸ Accessibility by Design (like Responsive and SEO)
▸ Let the Choice to the User
▸ Use Best Practice
▸ Use Correct Semantic for your Elements
▸ Learn Basics of Accessibility for your Field
▸ Train your „Accessibility Thinking Muscle“
“The one argument for accessibility that doesn’t get
made nearly often enough is how extraordinarily
better it makes some people’s lives.
How many opportunities do we have to dramatically
improve people’s lives just by doing our job a little
better?”
Steve Krug
Why Accessibility matters
Step 5:
Testing Tools
The right Tools
Testing Tools
▸ Axe
▸ Wave
▸ ContrastChecker.com
▸ Sim Daltonism
▸ Plugin: Content Author Accessibility Preview
▸ Gutenberg Tools
Step 6:
Ressources
Ressources
▸ A11y Posters and more: gov.uk https://
accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-
designing-for-accessibility/
▸ WordPress A11y Handbook: https://make.wordpress.org/
accessibility/handbook/
▸ WordPress Dev Handbook: developer.wordpress.org/
coding-standards/wordpress-coding-standards/accessibility/
▸ "Accessibility for everyone“ - Laura Kalbag
▸ Accessibility Checklists: wp1x1.de/checklists-for-accessibility
Questions?
Ressources
‣ Adrian Rosilli: “Selfish Accessibility”

youtube.com/watch?v=xbI0665plgM
‣ Taeke Reijenga: The Accessibility Business Case

wordpress.tv/2019/06/10/taeke-reijenga-the-accessibility-
business-case/

More Related Content

Similar to How to start with Accessibility - WordCamp Stuttgart

Power of an Accessible Website.pdf
Power of an Accessible Website.pdfPower of an Accessible Website.pdf
Power of an Accessible Website.pdf
3Play Media
 
Copy of Colorful Retro Creative Infographic Presentation.pptx
Copy of Colorful Retro Creative Infographic Presentation.pptxCopy of Colorful Retro Creative Infographic Presentation.pptx
Copy of Colorful Retro Creative Infographic Presentation.pptx
MischelleCTorregosa
 
Top 11 usability recommendations for 2011
Top 11 usability recommendations for 2011Top 11 usability recommendations for 2011
Top 11 usability recommendations for 2011
John Whalen
 
Profitability of Accessibility WordPress Accessibility Day 2020
Profitability of Accessibility WordPress Accessibility Day 2020Profitability of Accessibility WordPress Accessibility Day 2020
Profitability of Accessibility WordPress Accessibility Day 2020
Sumner M. Davenport
 
Help Content Strategy presentation, iDW Oct 2014
Help Content Strategy presentation, iDW Oct 2014Help Content Strategy presentation, iDW Oct 2014
Help Content Strategy presentation, iDW Oct 2014
Chris Todd
 
Scribe Academy™ presents - Web Accessibility for Town and Parish Councils by...
Scribe Academy™  presents - Web Accessibility for Town and Parish Councils by...Scribe Academy™  presents - Web Accessibility for Town and Parish Councils by...
Scribe Academy™ presents - Web Accessibility for Town and Parish Councils by...
Scribe
 
Web Accessibility and why we need it
Web Accessibility and why we need itWeb Accessibility and why we need it
Web Accessibility and why we need it
Genevieve Nelson
 
Getting Started with Content Strategy | General Assembly
Getting Started with Content Strategy | General AssemblyGetting Started with Content Strategy | General Assembly
Getting Started with Content Strategy | General Assembly
Melanie Seibert
 
Top 10 tips for maximising accessibility - breakfast briefing March 2016
Top 10 tips for maximising accessibility - breakfast briefing March 2016Top 10 tips for maximising accessibility - breakfast briefing March 2016
Top 10 tips for maximising accessibility - breakfast briefing March 2016
User Vision
 
Accessibility, SEO and Joomla
Accessibility, SEO and Joomla Accessibility, SEO and Joomla
Accessibility, SEO and Joomla
JoomlaDay Australia
 
Accessibility, SEO and Joomla
Accessibility, SEO and JoomlaAccessibility, SEO and Joomla
Accessibility, SEO and Joomla
Aimee Maree Forsstrom
 
Accessibility: Proven, easy integration into design and development workflows
Accessibility: Proven, easy integration into design and development workflowsAccessibility: Proven, easy integration into design and development workflows
Accessibility: Proven, easy integration into design and development workflows
Robert Jolly
 
Do More with Less! Increase Your ROC!
Do More with Less! Increase Your ROC!Do More with Less! Increase Your ROC!
Do More with Less! Increase Your ROC!
LavaCon
 
Website Design Part 1
Website Design Part 1Website Design Part 1
Website Design Part 1
Eric Legg
 
Website Design2
Website Design2Website Design2
Website Design2
Eric Legg
 
Agriculture Marketing Presentation in Green Yellow Modern Style.pptx
Agriculture Marketing Presentation in Green Yellow Modern Style.pptxAgriculture Marketing Presentation in Green Yellow Modern Style.pptx
Agriculture Marketing Presentation in Green Yellow Modern Style.pptx
ramzan345tabid
 
Agriculture Marketing Presentation in Green Yellow Modern Style_20240228_2117...
Agriculture Marketing Presentation in Green Yellow Modern Style_20240228_2117...Agriculture Marketing Presentation in Green Yellow Modern Style_20240228_2117...
Agriculture Marketing Presentation in Green Yellow Modern Style_20240228_2117...
moodman0903
 
How to devise a content strategy post content audit - BrightonSEO Jul 2021
How to devise a content strategy post content audit - BrightonSEO Jul 2021How to devise a content strategy post content audit - BrightonSEO Jul 2021
How to devise a content strategy post content audit - BrightonSEO Jul 2021
Jess Peace
 
Yahoo Help Content Strategy - Chris Todd
Yahoo Help Content Strategy -  Chris ToddYahoo Help Content Strategy -  Chris Todd
Yahoo Help Content Strategy - Chris Todd
Information Development World
 
Ud in-curriculum-4 accessu-2018 (howard-lydia combined-nn)
Ud in-curriculum-4 accessu-2018 (howard-lydia combined-nn)Ud in-curriculum-4 accessu-2018 (howard-lydia combined-nn)
Ud in-curriculum-4 accessu-2018 (howard-lydia combined-nn)
Howard Kramer
 

Similar to How to start with Accessibility - WordCamp Stuttgart (20)

Power of an Accessible Website.pdf
Power of an Accessible Website.pdfPower of an Accessible Website.pdf
Power of an Accessible Website.pdf
 
Copy of Colorful Retro Creative Infographic Presentation.pptx
Copy of Colorful Retro Creative Infographic Presentation.pptxCopy of Colorful Retro Creative Infographic Presentation.pptx
Copy of Colorful Retro Creative Infographic Presentation.pptx
 
Top 11 usability recommendations for 2011
Top 11 usability recommendations for 2011Top 11 usability recommendations for 2011
Top 11 usability recommendations for 2011
 
Profitability of Accessibility WordPress Accessibility Day 2020
Profitability of Accessibility WordPress Accessibility Day 2020Profitability of Accessibility WordPress Accessibility Day 2020
Profitability of Accessibility WordPress Accessibility Day 2020
 
Help Content Strategy presentation, iDW Oct 2014
Help Content Strategy presentation, iDW Oct 2014Help Content Strategy presentation, iDW Oct 2014
Help Content Strategy presentation, iDW Oct 2014
 
Scribe Academy™ presents - Web Accessibility for Town and Parish Councils by...
Scribe Academy™  presents - Web Accessibility for Town and Parish Councils by...Scribe Academy™  presents - Web Accessibility for Town and Parish Councils by...
Scribe Academy™ presents - Web Accessibility for Town and Parish Councils by...
 
Web Accessibility and why we need it
Web Accessibility and why we need itWeb Accessibility and why we need it
Web Accessibility and why we need it
 
Getting Started with Content Strategy | General Assembly
Getting Started with Content Strategy | General AssemblyGetting Started with Content Strategy | General Assembly
Getting Started with Content Strategy | General Assembly
 
Top 10 tips for maximising accessibility - breakfast briefing March 2016
Top 10 tips for maximising accessibility - breakfast briefing March 2016Top 10 tips for maximising accessibility - breakfast briefing March 2016
Top 10 tips for maximising accessibility - breakfast briefing March 2016
 
Accessibility, SEO and Joomla
Accessibility, SEO and Joomla Accessibility, SEO and Joomla
Accessibility, SEO and Joomla
 
Accessibility, SEO and Joomla
Accessibility, SEO and JoomlaAccessibility, SEO and Joomla
Accessibility, SEO and Joomla
 
Accessibility: Proven, easy integration into design and development workflows
Accessibility: Proven, easy integration into design and development workflowsAccessibility: Proven, easy integration into design and development workflows
Accessibility: Proven, easy integration into design and development workflows
 
Do More with Less! Increase Your ROC!
Do More with Less! Increase Your ROC!Do More with Less! Increase Your ROC!
Do More with Less! Increase Your ROC!
 
Website Design Part 1
Website Design Part 1Website Design Part 1
Website Design Part 1
 
Website Design2
Website Design2Website Design2
Website Design2
 
Agriculture Marketing Presentation in Green Yellow Modern Style.pptx
Agriculture Marketing Presentation in Green Yellow Modern Style.pptxAgriculture Marketing Presentation in Green Yellow Modern Style.pptx
Agriculture Marketing Presentation in Green Yellow Modern Style.pptx
 
Agriculture Marketing Presentation in Green Yellow Modern Style_20240228_2117...
Agriculture Marketing Presentation in Green Yellow Modern Style_20240228_2117...Agriculture Marketing Presentation in Green Yellow Modern Style_20240228_2117...
Agriculture Marketing Presentation in Green Yellow Modern Style_20240228_2117...
 
How to devise a content strategy post content audit - BrightonSEO Jul 2021
How to devise a content strategy post content audit - BrightonSEO Jul 2021How to devise a content strategy post content audit - BrightonSEO Jul 2021
How to devise a content strategy post content audit - BrightonSEO Jul 2021
 
Yahoo Help Content Strategy - Chris Todd
Yahoo Help Content Strategy -  Chris ToddYahoo Help Content Strategy -  Chris Todd
Yahoo Help Content Strategy - Chris Todd
 
Ud in-curriculum-4 accessu-2018 (howard-lydia combined-nn)
Ud in-curriculum-4 accessu-2018 (howard-lydia combined-nn)Ud in-curriculum-4 accessu-2018 (howard-lydia combined-nn)
Ud in-curriculum-4 accessu-2018 (howard-lydia combined-nn)
 

Recently uploaded

Italy Agriculture Equipment Market Outlook to 2027
Italy Agriculture Equipment Market Outlook to 2027Italy Agriculture Equipment Market Outlook to 2027
Italy Agriculture Equipment Market Outlook to 2027
harveenkaur52
 
重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理
重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理
重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理
vmemo1
 
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
keoku
 
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalmanuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
wolfsoftcompanyco
 
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
ufdana
 
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
3ipehhoa
 
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
eutxy
 
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
 
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
cuobya
 
7 Best Cloud Hosting Services to Try Out in 2024
7 Best Cloud Hosting Services to Try Out in 20247 Best Cloud Hosting Services to Try Out in 2024
7 Best Cloud Hosting Services to Try Out in 2024
Danica Gill
 
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
cuobya
 
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
3ipehhoa
 
国外证书(Lincoln毕业证)新西兰林肯大学毕业证成绩单不能毕业办理
国外证书(Lincoln毕业证)新西兰林肯大学毕业证成绩单不能毕业办理国外证书(Lincoln毕业证)新西兰林肯大学毕业证成绩单不能毕业办理
国外证书(Lincoln毕业证)新西兰林肯大学毕业证成绩单不能毕业办理
zoowe
 
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
ysasp1
 
[HUN][hackersuli] Red Teaming alapok 2024
[HUN][hackersuli] Red Teaming alapok 2024[HUN][hackersuli] Red Teaming alapok 2024
[HUN][hackersuli] Red Teaming alapok 2024
hackersuli
 
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
 
Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!
Toptal Tech
 
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
bseovas
 
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ó
 
Understanding User Behavior with Google Analytics.pdf
Understanding User Behavior with Google Analytics.pdfUnderstanding User Behavior with Google Analytics.pdf
Understanding User Behavior with Google Analytics.pdf
SEO Article Boost
 

Recently uploaded (20)

Italy Agriculture Equipment Market Outlook to 2027
Italy Agriculture Equipment Market Outlook to 2027Italy Agriculture Equipment Market Outlook to 2027
Italy Agriculture Equipment Market Outlook to 2027
 
重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理
重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理
重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理
 
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
 
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalmanuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
 
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
 
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
 
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
 
Explore-Insanony: Watch Instagram Stories Secretly
Explore-Insanony: Watch Instagram Stories SecretlyExplore-Insanony: Watch Instagram Stories Secretly
Explore-Insanony: Watch Instagram Stories Secretly
 
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
 
7 Best Cloud Hosting Services to Try Out in 2024
7 Best Cloud Hosting Services to Try Out in 20247 Best Cloud Hosting Services to Try Out in 2024
7 Best Cloud Hosting Services to Try Out in 2024
 
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
 
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
 
国外证书(Lincoln毕业证)新西兰林肯大学毕业证成绩单不能毕业办理
国外证书(Lincoln毕业证)新西兰林肯大学毕业证成绩单不能毕业办理国外证书(Lincoln毕业证)新西兰林肯大学毕业证成绩单不能毕业办理
国外证书(Lincoln毕业证)新西兰林肯大学毕业证成绩单不能毕业办理
 
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
 
[HUN][hackersuli] Red Teaming alapok 2024
[HUN][hackersuli] Red Teaming alapok 2024[HUN][hackersuli] Red Teaming alapok 2024
[HUN][hackersuli] Red Teaming alapok 2024
 
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
 
Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!
 
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
 
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
 
Understanding User Behavior with Google Analytics.pdf
Understanding User Behavior with Google Analytics.pdfUnderstanding User Behavior with Google Analytics.pdf
Understanding User Behavior with Google Analytics.pdf
 

How to start with Accessibility - WordCamp Stuttgart

  • 1. How to start with Accessibility
  • 2. About Me ▸ Maja Benke ▸ Webdesigner from Berlin ▸ UX and Accessibility Enthusiast ▸ Community Member since 2015 ▸ @MajaBenke
  • 3. A 11 y A ccessibilit y
  • 4. Step 1: What is Accessibility
  • 5. Enabling Access for People with Disabilities, Special Needs and for Assistive Technology What is Accessibility
  • 6. Kind of Disabilities Physical Audio VisualCognitive What is Accessibility
  • 7. What is Accessibility Kind of Disabilities PermanentlyTemporary
  • 8. What is Accessibility Every Fifth Person Needs an Accessible Website
  • 9. Accessibility is for Everyone! What is Accessibility
  • 10. Step 2: The right Mindset
  • 11. "For people without disabilities, 
 technology makes things easier. For people with disabilities, 
 technology makes things possible." IBM Training Manual 1991 The right Mindset
  • 12. The right Mindset Why Accessibility matters ▸ Makes it Usable for People with Handicaps and doesn’t exclude People ▸ Improves User Experience for Everyone ▸ Legally required for Public Websites ▸ It’s the Right Thing To Do ▸ Improves the Code Quality ▸ Improves SEO of a Website
  • 13. Step 3: Technologies for Accessibility
  • 14. Technologies for Accessibility Keyboard Navigation only and alternative Keyboards Source: http://access.sfsu.edu/ Source:https://commons.wikimedia.org/wiki/File:Plage-braille-Alva.jpg
  • 15. Technologies for Accessibility Stylus/Wand held in the Mouth Source: http://www.unitedspinal.org/disability-products-services/mundstab-mouthstick---mouth-head-sticks/
  • 16. Technologies for Accessibility Screen Readers (Voice Over, Jaws, …)
  • 17. Technologies for Accessibility Speech Recognition Software Source: https://voicebot.ai/2018/12/21/google-assistant-wins-another-open-question-test-while-apple-siri- and-amazon-alexa-improve-substantially/
  • 18. Technologies for Accessibility Switch Buttons Source: https://axesslab.com/switches/
 Recommendation: https://www.24a11y.com/2018/i-used-a-switch-control-for-a-day/
  • 19. Technologies for Accessibility Accessibility Settings ▸ Browser Options and Extensions
  • 22. Technologies for Accessibility Accessibility Settings ▸ Browser Extensions and Options ▸ Settings in Operating System ▸ Zoom ▸ Tools ▸ …
  • 23. AT and Settings Requires Skillset of Users! Technologies for Accessibility
  • 25. Accessibility Rules Integrate A11y in Every Component Design Content Code
  • 27. A11y for Project Management Common Mistakes ▸ A11y are often not integrated in Requirements and Calculation ▸ A11y is the First Position to cut out for Budget ▸ Wrong Mindset: „Accessibility is not important for this Target Group / this Project“ ▸ No Accessibility-Testing during the Project
  • 28. A11y for Project Management Solutions ▸ Accessibility by Design!  ▸ Integrate and understand Accessibility as natural as 
 Responsive Design, SEO or Security ▸ Reduce Costs by integrate A11y from the Beginning and Avoid Fees ▸ In Agencies: try to onboard Everyone in the Team. ▸ Check Accessibility after Every Step ▸ Teach your Clients about A11y, if they Work on the Website 
  • 30. A11y for Design Common mistakes ▸ Bad Color Contrast ▸ Thin and Smalls Fonts  ▸ Information with Color only  ▸ Not underlined Links
  • 32. A11y for Design Common Mistakes ▸ Focus Style is missing ▸ Small clickable Areas / Touch Regions ▸ Mindset: „But A11y does not look good“ ▸ Design breaks Functionality
  • 33. A11y for Design Design breaks Functionality
  • 34. A11y for Design Solutions ▸ Understand your Design to Support: ▸ the User ▸ the Functionality and Content of the Website ▸ Design is not Art! ▸ Make it not only Pretty, Make It Usable  ▸ Be Creative. Find fun Ways to make your Design Accessible
  • 35. A11y for Design Solutions - Layout ▸ Clear Layout ▸ Enough Whitespace
  • 37. A11y for Design Solutions - Layout ▸ Clear Layout ▸ Enough Whitespace ▸ Clickable Areas must be large enough ▸ Design the Focus Style together with the Hover Style
  • 39. A11y for Design Solutions - Color ▸ Clear Color Contrast (Level AA or higher) ▸ Information not by Color only ▸ Test your site in Black and White ▸ Underline your Links in Text
  • 41. A11y for Design Solutions - Fonts ▸ Use Fonts, that are easy to read ▸ Design it not to thin and small. Make it easy to read the Text ▸ Limit the Use of Uppercase and Italic
  • 42. A11y Checkliste - Designers - Fonts are easy to read Text is large and thick enough to read easily Limited use of Uppercase and Italic Fonts Site is understandable in Black & White Clear Color Contrast Information not by Color only Links in Text are underlined Color Clear Layout Enough Whitespace Layout Focus has a style Clickable Areas are large enough Ressources ▸ wp1x1.de/checklists-for- accessibility A11y for Design
  • 43. Ressources ▸ A11y Posters: gov.uk https://accessibility.blog.gov.uk/ 2016/09/02/dos-and-donts-on-designing-for-accessibility/ ▸ WordPress A11y Handbook: https://make.wordpress.org/ accessibility/handbook/ Tools: ▸ Contrastchecker.com ▸ Sim Daltonism A11y for Design
  • 44. Take a Breath and Drink some Water!
  • 46. A11y for Developing Common Mistakes ▸ Website not Usable by Keyboard only (especially Menus, Pop Ups, Accordions…) ▸ Wrong Index Order ▸ Wrong use of HTML Elements ▸ No Use of Landmarks ▸ <div class="header“> instead of <header> ▸ Missing Labels for Forms ▸ Time Limits ▸ Use of target=_blank (Links Open in new Tab) ▸ Wrong Language Settings
  • 47. A11y for Developing Solutions - Semantics ▸ Always use Best Practice  ▸ Use Correct Semantic ▸ Learn HTML5 deeply ▸ Use Landmarks ▸ Correct Index Order
  • 48. A11y for Developing Solutions - Code ▸ Don’t use target=_blank (let the Choice to the User)  ▸ Use a Focus Style ▸ Forms must have Labels ▸ Test for Keyboard Navigation (Menu, Tables, Accordions,..) ▸ Integrate ”Skip to Content“
  • 49. A11y for Developing Integrate „Skip to Content“ Integrate „Skip to Content“ in <a class=”screen-reader-text skip-link” href="#content">Skip to content</a> More Informations: make.wordpress.org/accessibility/ handbook/markup/skip-links/
  • 50. A11y for Developing Solutions - Screen Reader ▸ Use ARIA only if HTML is not enough ▸ Talk: ”Who’s is afraid of ARIA“ from Rian Rietveld
 https://wordpress.tv/2019/06/19/rian-rietveld-whos-afraid- of-aria-2/ ▸ Define Language in HTML-Tag
  • 51. Use ARIA only if you have to Define Language in HTML-Tag Screen Reader Forms must have Labels Test for Keyboard Navigation (Menu, Tables, Accordions,..) Don’t use target=_blank Use a Focus Style Integrate ”Skip to Content“ Code Use Correct Semantic Use HTML5 Semantic Correct Index Order Use Landmarks A11y Checkliste - Developers - Ressources ▸ wp1x1.de/checklists-for- accessibility A11y for Developing
  • 52. Ressources ▸ WordPress A11y Handbook: make.wordpress.org/accessibility/ handbook/ ▸ Theme Dev Handbook: developer.wordpress.org/themes/ functionality/accessibility/ Automatic Testing Tools: ▸ Axe: deque.com/axe/ ▸ Wave: wave.webaim.org/
  • 56. A11y for Content Common Mistakes ▸ Wrong Semantic ▸ Big Text-Blocks that are hard to read ▸ No clear Meaning of Headlines, Buttons, Links, … ▸ Link-Text like „Click Here“ ▸ Alt-Texts are Missing
  • 57. A11y for Content Solutions - Text ▸ Structured Text with Text Elements ▸ To make the scannable and easy to read
  • 58. A11y for Content Use Headlines and Whitespace
  • 59. A11y for Content Solutions - Text ▸ Structured Text with Text Elements ▸ To make the scannable and easy to read ▸ Correct Semantics for Headlines ▸ Important Informations on Top ▸ Clear Description for Links ▸ Not „Click Here“, better „See our Guide“ ▸ Don’t open Links by Default in new Tab
  • 60. A11y for Content Solutions - Content ▸ Variation of Content Formats
  • 61. A11y for Content Variation of Content Formats
  • 62. A11y for Content Solutions - Content ▸ Variation of Content Formats ▸ Add Alt-Text to Images ▸ Provide Content from Videos, Graphs, Images also as Text ▸ Provide Subtitels and Captions
  • 63. A11y for Content Use Captioning youtube.com/watch?v=P2YBkZCRTGA
  • 64. A11y for Content Solutions - Content ▸ Variation of Content Formats ▸ Add Alt-Text to Images ▸ Provide Content from Videos, Graphs, Images also as Text ▸ Provide Subtitels and Captions ▸ No Autostart for Videos, Audios, Sliders ▸ Avoid Moving and Flashing Elements
  • 65. A11y Checkliste - Content Creators - Integrate Subtitels and Captions No Autostart No flashing Elements Video, Audio & Slider Clear Description for Links Don’t open Links by Default in new Tab Links Add Alt-Text to Images Images Structured Text with Text Elements Correct Semantics for Headlines Important Informations on Top Text Content Don’t rely on Memory of Content Variation of Content Formats Ressources ▸ wp1x1.de/checklists-for- accessibility A11y for Content
  • 66. Ressources ▸ A11y Posters: gov.uk https://accessibility.blog.gov.uk/ 2016/09/02/dos-and-donts-on-designing-for-accessibility/ Automatic Testing Tools: ▸ Gutenberg ▸ Plugin: Content Author Accessibility Preview : wordpress.org/plugins/content-author-accessibility-preview/
  • 68. A11y for Content Plugin: Content Author Accessibility Preview Content Author Accessibility Preview: wordpress.org/plugins/content-author- accessibility-preview/
  • 70. General A11y Rules General Accessibility Rules ▸ Be Empathic ▸ Accessibility by Design (like Responsive and SEO) ▸ Let the Choice to the User ▸ Use Best Practice ▸ Use Correct Semantic for your Elements ▸ Learn Basics of Accessibility for your Field ▸ Train your „Accessibility Thinking Muscle“
  • 71. “The one argument for accessibility that doesn’t get made nearly often enough is how extraordinarily better it makes some people’s lives. How many opportunities do we have to dramatically improve people’s lives just by doing our job a little better?” Steve Krug Why Accessibility matters
  • 73. The right Tools Testing Tools ▸ Axe ▸ Wave ▸ ContrastChecker.com ▸ Sim Daltonism ▸ Plugin: Content Author Accessibility Preview ▸ Gutenberg Tools
  • 75. Ressources ▸ A11y Posters and more: gov.uk https:// accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on- designing-for-accessibility/ ▸ WordPress A11y Handbook: https://make.wordpress.org/ accessibility/handbook/ ▸ WordPress Dev Handbook: developer.wordpress.org/ coding-standards/wordpress-coding-standards/accessibility/ ▸ "Accessibility for everyone“ - Laura Kalbag ▸ Accessibility Checklists: wp1x1.de/checklists-for-accessibility
  • 77. Ressources ‣ Adrian Rosilli: “Selfish Accessibility”
 youtube.com/watch?v=xbI0665plgM ‣ Taeke Reijenga: The Accessibility Business Case
 wordpress.tv/2019/06/10/taeke-reijenga-the-accessibility- business-case/