SlideShare ist ein Scribd-Unternehmen logo
1 von 39
Coolfields Consulting www.coolfields.co.uk
@coolfields
Beginners Guide to
Web Accessibility
Graham Armfield
Web Accessibility Consultant
WordPress Developer
graham.armfield@coolfields.co.uk
@coolfields
What I‟m Going to Cover
• What is web accessibility?
• Why is it important?
• Who is affected by poor accessibility?
• How can accessibility be improved?
• When to think about accessibility?
2
Coolfields Consulting www.coolfields.co.uk
@coolfields
What is Web Accessibility?
“Enabling the web so that everyone
can access its content when they
want to and how they need to”
Accessibility vs Usability
4
Usability Accessibility
Accessibility is not black and white
In most websites there are usually few accessibility
showstoppers. But…
• They do occur
• Websites can be fine for some people but totally
inaccessible for others
Web accessibility issues make life a harder for some people.
So, web accessibility is about making websites easy to use
for as many people as possible.
Remember, if people find your website hard to use they will
probably leave.
5
Coolfields Consulting www.coolfields.co.uk
@coolfields
Why is Accessibility Important?
What is all the fuss about?
Why is accessibility important?
The web is increasingly the world‟s preferred channel for:
• Knowledge
• Social interaction
• Commerce
But it‟s not always easy for:
• Those with disabilities
• Those who are getting older
Accessibility can increase the profitability of a website
Accessibility is a legal requirement
7
Coolfields Consulting www.coolfields.co.uk
@coolfields
Who is Affected by Poor
Accessibility?
More people than you may think.
Accessibility Myths - 1
It‟s just for a minority of people…
• 12 million people in UK have a recognised disability
• In the UK 15 million are over 55 – 12 million over 65
• Allowing for overlap between those with disability and those
over 65 there could be as many as 16.5 million people in UK
who could benefit from good accessibility in websites
9
Accessibility Myths - 2
Accessibility is all about blind people…
• 1.8 million people have a vision impairment, of which
180,000 are registered blind
• 1 in 12 men have colour-blindness
• 2.6 million have difficulties using their hands which could
impact their use of keyboard and/or mouse
• About 2 million people have a hearing impairment, of which
50,000 use British Sign Language to communicate
• About 2 million people are dyslexic
• 2.2 million people have difficulty with memory,
concentration or learning, of which about 1 million have a
learning difficulty
10
Accessibility Myths - 3
Yes, but my site is not meant for the blind/deaf/motor
impaired* (Delete as appropriate)
• People don‟t always browse/buy just for themselves
• You can‟t make assumptions about people
• Think about your site‟s reputation amongst friends and
family of PWD
• Studies in US show that friends and family of PWD will also
avoid inaccessible sites
11
Accessibility Myths - 4
It‟s too expensive – not enough ROI
• PWD represent a market worth £80bn per year in the UK –
approx £320bn across EU
• Friends and family can add significantly to that
• 83% of disabled people will not return to a business that
does not meet their access needs.
• If a company‟s website is hard to use, people will visit a
competitor‟s site which is easier to use.
• Tesco – In 2001 an accessible version of their shopping site
was launched at a cost £35k and yielded £13m turnover a
year
12
Accessibility Myths - 5
If I ignore it, it‟ll go away
• We are all getting older
• One in four will be over 65 by 2061
• How accessible do you want the web to be in 20/30/40
years time?
13
Accessibility and the law
• Equality Act 2010 (Disability Discrimination Act in Northern
Ireland)
• Laws specifically refer to websites
14
Accessibility Myths - 6
Yes but no-one ever gets sued anyway
• A number of actions started against companies but many
settled „out of court‟ with confidentiality clauses attached.
• In 2012 RNIB started an action publicly against BMI Baby. It
was impossible to book flights and reserve seats on their
website without using a mouse.
» The case was settled as BMI Baby agreed to make
changes.
» RNIB have indicated that they may be looking at more
actions in the near future.
15
Types of disability/impairment
So who can experience difficulties with websites and apps?
Those with:
• Visual impairments
• Motor impairments
• Hearing impairments
• Epilepsy
• Cognitive impairments
71% of PWD have „invisible‟ disabilities or impairments
16
Techniques to mitigate impairment
Accessibility options in browsers
• Mainly Internet Explorer + Firefox
• Specify colours, font styles and sizes
• Adjust text size without zooming – there is a difference
• Attach your own custom stylesheet (IE only)
17
Assistive technology
18
But complexity comes at a price
How much for a screen reader?
Open source to the rescue?
• NVDA screen reader
• free to download
• Mac and PC
• Improving all the time - http://www.nvda-project.org/
19
Screen reader examples
1.BBC News with NVDA –
medium speed
2.BBC News with NVDA –
faster speed
20
Refreshable Braille Display
http://www.youtube.com/watch?v=R6XAPkiQMtw
at approx 2:06 in
iPhones, iPads and blindness
• Many accessibility features built in
• Eg Voiceover – screen reader
• Speech recognition
• The result is that many blind users swear by their iOS
devices
21
Coolfields Consulting www.coolfields.co.uk
@coolfields
How Can Accessibility be
Improved?
It‟s not rocket science.
WordPress sites
Accessibility is influenced by three groups of people
23
Theme
Developers
Plugin
Developers
Content
Authors
So what can we do?
• Remember, disabilities and impairments are not
absolutes
• Few websites are totally impossible for those with
impairments to use.
• But most websites are difficult for some people with
disabilities and impairments
• Every accessibility step that you take will make
life easier for someone
24
Simple things we can do - 1
Images – correct use of
alternate text (alt attribute)
• Describe what image shows or
what it represents
• If a link, describe destination
• If decorative, leave blank
(alt=“”)
25
Relevant for:
Simple things we can do - 2
Links
• Ensure that destination is clear
from the link:
My blog post: Read more
rather than
My blog post: Read more
• If link opens new tab or
window inform the user
26
Links list from JAWS screen
reader
Relevant for:
Simple things we can do - 3
Use headings properly
• Semantic elements
• Often used as navigation
mechanism by screen reader
users
• Signpost content
27
Headings list from JAWS screen
reader
Relevant for:
Simple things we can do - 4
Keyboard focus and operation
• Focus should be easily visible
• Tab order should make sense
• Ensure all functionality
accessible by keystrokes
28
Relevant for:
Simple things we can do - 5
Text
• Good colour contrast
• Should allow itself to be
resized without breaking
layout (initially)
• Use of colour alone to convey
meaning
29
How not to do it
Relevant for:
Simple things we can do - 6
Mark up forms correctly
• Use labels for input fields
• Fieldset for grouping controls
• Clear display of errors and
use text
• Don‟t use CAPTCHAs
30
Relevant for:
<label for="yourname">Your
name:</label>
<input type="text"
name="yourname"
id="yourname" value="" />
<input type=“checkbox"
name=“legal" id=“legal"
value=""
checked=“checked”/>
<label for=“legal">I have
read the legal page</label>
Simple things we can do - 7
WAI-ARIA
• Roles/Landmarks help signpost
parts of web pages
• Live regions for dynamic
content
• More advanced roles for AJAX
sites and apps – including
mobile apps
31
Relevant for:
Coolfields Consulting www.coolfields.co.uk
@coolfields
When Should I Think About
Accessibility?
Implementing accessibility
• Accessibility is a lot harder and more expensive to retrofit.
• So it needs to be designed in from the start
• Think of it as another requirement – one which may not be
explicitly asked for.
33
Coolfields Consulting www.coolfields.co.uk
@coolfields
Useful Resources
Resources 1
• WCAG Guidelines - http://www.w3.org/TR/WCAG/
WARNING: Not all easy reading, but use the „Understanding
WCAG‟ section
• Accessibility sites and blogs (including my own)
• Webaim - http://webaim.org/
• Accessify Forum - http://www.accessifyforum.com/
• WebAxe - http://webaxe.blogspot.com/
• Coolfields (my own) - http://www.coolfields.co.uk/blog/
(including many guides to correct markup of forms, text for
screen readers only, etc)
35
Resources 2
• Validators and accessibility tools
• Markup validator - http://validator.w3.org/
• Wave - http://wave.webaim.org/
• Colour contrast analyser -
http://www.paciellogroup.com/resources/contrast-
analyser.html
• NVDA - http://www.nvda-project.org/
• Useful Firefox Add-ons
• Fangs (screen reader emulator)
• HTML Validator
• Web Developer toolbar
There is no tool that can fully test for accessibility
automatically – so much is about context.
36
Resources 3
• Other Useful sites
• Keyboard accessible dropdowns –
http://blakehaswell.com/lab/dropdown/deux/
• HTML5 and Accessibility - http://www.html5accessibility.com/
• Subtitle Horse - http://subtitle-horse.com/
• Amara (Universal Subtitles) - http://www.amara.org/en/
37
Resources 4
YouTube Videos
• American blind woman demos JAWS – (slow start)
http://www.youtube.com/watch?v=si1_iR5lbyg
• ARIA - live regions
http://www.youtube.com/watch?v=9nZnTdSAkH0
• Leonie Watson on ARIA regions
http://www.youtube.com/watch?v=IhWMou12_Vk
• MS User and Dragon Naturally Speaking
http://www.youtube.com/watch?v=BsZo1p_5-o4
• Build your own assistive technology – (Don‟t) try this at home
http://www.youtube.com/watch?v=1LR11wDFMcA
38
Thanks for listening –
any (more) questions?
graham.armfield@coolfields.co.uk
@coolfields
39

Weitere ähnliche Inhalte

Was ist angesagt?

Web Accessibility 101
Web Accessibility 101Web Accessibility 101
Web Accessibility 101Eric Malcolm
 
Accessibility and why it matters
Accessibility and why it mattersAccessibility and why it matters
Accessibility and why it mattersMargarida Sousa
 
Web accessibility 101: The why, who, what, and how of "a11y"
Web accessibility 101: The why, who, what, and how of "a11y"Web accessibility 101: The why, who, what, and how of "a11y"
Web accessibility 101: The why, who, what, and how of "a11y"ecentricarts
 
WCAG 2.1: What You Need to Know About the Most Recent Accessibility Standards
WCAG 2.1: What You Need to Know About the Most Recent Accessibility StandardsWCAG 2.1: What You Need to Know About the Most Recent Accessibility Standards
WCAG 2.1: What You Need to Know About the Most Recent Accessibility StandardsUXPA International
 
Basics of Web Accessibility
Basics of Web AccessibilityBasics of Web Accessibility
Basics of Web AccessibilityMoin Shaikh
 
Website Accessibility
Website AccessibilityWebsite Accessibility
Website AccessibilityNishan Bose
 
What is accessibility?
What is accessibility?What is accessibility?
What is accessibility?Russ Weakley
 
Web accessibility testing 4 - NVDA screen reader
Web accessibility testing 4 - NVDA screen readerWeb accessibility testing 4 - NVDA screen reader
Web accessibility testing 4 - NVDA screen readerJohn McNabb
 
A Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challengeA Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challengeWhitney Quesenbery
 
Design for accessibility
Design for accessibilityDesign for accessibility
Design for accessibilityYogeshDaphane
 
Web accessibility: it’s everyone’s responsibility
Web accessibility: it’s everyone’s responsibilityWeb accessibility: it’s everyone’s responsibility
Web accessibility: it’s everyone’s responsibilityMedia Access Australia
 
Digital Accessibility - The Quick Wins
Digital Accessibility - The Quick WinsDigital Accessibility - The Quick Wins
Digital Accessibility - The Quick WinsMedia Access Australia
 
Design for Accessibility
Design for AccessibilityDesign for Accessibility
Design for Accessibilityqixingz
 

Was ist angesagt? (20)

Web Accessibility 101
Web Accessibility 101Web Accessibility 101
Web Accessibility 101
 
Accessibility and why it matters
Accessibility and why it mattersAccessibility and why it matters
Accessibility and why it matters
 
Web accessibility 101: The why, who, what, and how of "a11y"
Web accessibility 101: The why, who, what, and how of "a11y"Web accessibility 101: The why, who, what, and how of "a11y"
Web accessibility 101: The why, who, what, and how of "a11y"
 
WCAG 2.1: What You Need to Know About the Most Recent Accessibility Standards
WCAG 2.1: What You Need to Know About the Most Recent Accessibility StandardsWCAG 2.1: What You Need to Know About the Most Recent Accessibility Standards
WCAG 2.1: What You Need to Know About the Most Recent Accessibility Standards
 
Web content accessibility
Web content accessibilityWeb content accessibility
Web content accessibility
 
Accessibilitytesting public
Accessibilitytesting publicAccessibilitytesting public
Accessibilitytesting public
 
Accessibility Basics
Accessibility BasicsAccessibility Basics
Accessibility Basics
 
Basics of Web Accessibility
Basics of Web AccessibilityBasics of Web Accessibility
Basics of Web Accessibility
 
Website Accessibility
Website AccessibilityWebsite Accessibility
Website Accessibility
 
What is accessibility?
What is accessibility?What is accessibility?
What is accessibility?
 
Web accessibility testing 4 - NVDA screen reader
Web accessibility testing 4 - NVDA screen readerWeb accessibility testing 4 - NVDA screen reader
Web accessibility testing 4 - NVDA screen reader
 
A Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challengeA Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challenge
 
Design for accessibility
Design for accessibilityDesign for accessibility
Design for accessibility
 
Web accessibility: it’s everyone’s responsibility
Web accessibility: it’s everyone’s responsibilityWeb accessibility: it’s everyone’s responsibility
Web accessibility: it’s everyone’s responsibility
 
Digital Accessibility - The Quick Wins
Digital Accessibility - The Quick WinsDigital Accessibility - The Quick Wins
Digital Accessibility - The Quick Wins
 
Web 3.0
Web 3.0 Web 3.0
Web 3.0
 
Web invisible
Web invisibleWeb invisible
Web invisible
 
Deep web and dark web
Deep web and dark webDeep web and dark web
Deep web and dark web
 
Deep web Seminar
Deep web Seminar Deep web Seminar
Deep web Seminar
 
Design for Accessibility
Design for AccessibilityDesign for Accessibility
Design for Accessibility
 

Andere mochten auch

Dossier uau retail_es
Dossier uau retail_esDossier uau retail_es
Dossier uau retail_esJULIO_GUATE25
 
Trabajo dos hermanas
Trabajo dos hermanasTrabajo dos hermanas
Trabajo dos hermanasrocio651
 
The cutting edge retail intelligence
The cutting edge retail intelligenceThe cutting edge retail intelligence
The cutting edge retail intelligencePoindus Systems Corp
 
MakerGod - Full deck
MakerGod - Full deckMakerGod - Full deck
MakerGod - Full deckMichal Monit
 
Que es una consulta
Que es una consultaQue es una consulta
Que es una consultalorena_stars
 
Ftcr solorzano viviana
Ftcr solorzano vivianaFtcr solorzano viviana
Ftcr solorzano vivianaVisol
 
Poly Club Official Zeroth Level Presentation
Poly Club Official Zeroth Level PresentationPoly Club Official Zeroth Level Presentation
Poly Club Official Zeroth Level PresentationShafeer Khan
 
Puppet Camp Paris 2015: Continuous Integration of Puppet Code (Intermediate)
Puppet Camp Paris 2015: Continuous Integration of Puppet Code (Intermediate) Puppet Camp Paris 2015: Continuous Integration of Puppet Code (Intermediate)
Puppet Camp Paris 2015: Continuous Integration of Puppet Code (Intermediate) Puppet
 
FotoVINCI™: l’app per creare il concorso fotografico legato alla tua attività
FotoVINCI™: l’app per creare il concorso fotografico legato alla tua attivitàFotoVINCI™: l’app per creare il concorso fotografico legato alla tua attività
FotoVINCI™: l’app per creare il concorso fotografico legato alla tua attivitàAlecsandria Comunicazione
 
Transporte ferroviario
Transporte ferroviarioTransporte ferroviario
Transporte ferroviarioRafaeloVivas
 
Presentación trabajo final grupo 335
Presentación trabajo final grupo 335Presentación trabajo final grupo 335
Presentación trabajo final grupo 335gato551
 
Bullyn perez
Bullyn perezBullyn perez
Bullyn perezMANUELSSS
 
Why does everyone hate email?
Why does everyone hate email?Why does everyone hate email?
Why does everyone hate email?Becs Kemm
 
Descubra madrid concierge apresentaçao
Descubra madrid  concierge apresentaçaoDescubra madrid  concierge apresentaçao
Descubra madrid concierge apresentaçaoReceptivo Madrid
 
Exposicion moda fashion en los adolescentes 8 1
Exposicion moda fashion en los adolescentes 8 1Exposicion moda fashion en los adolescentes 8 1
Exposicion moda fashion en los adolescentes 8 1presentacionaguacatal
 

Andere mochten auch (20)

Dossier uau retail_es
Dossier uau retail_esDossier uau retail_es
Dossier uau retail_es
 
Trabajo dos hermanas
Trabajo dos hermanasTrabajo dos hermanas
Trabajo dos hermanas
 
The cutting edge retail intelligence
The cutting edge retail intelligenceThe cutting edge retail intelligence
The cutting edge retail intelligence
 
Publicidades impactantes
Publicidades impactantesPublicidades impactantes
Publicidades impactantes
 
MakerGod - Full deck
MakerGod - Full deckMakerGod - Full deck
MakerGod - Full deck
 
Fasc 05
Fasc 05Fasc 05
Fasc 05
 
Que es una consulta
Que es una consultaQue es una consulta
Que es una consulta
 
Deepesh_Sharma_CV
Deepesh_Sharma_CVDeepesh_Sharma_CV
Deepesh_Sharma_CV
 
Ftcr solorzano viviana
Ftcr solorzano vivianaFtcr solorzano viviana
Ftcr solorzano viviana
 
Poly Club Official Zeroth Level Presentation
Poly Club Official Zeroth Level PresentationPoly Club Official Zeroth Level Presentation
Poly Club Official Zeroth Level Presentation
 
Semana 03 software libre maxima
Semana 03 software libre maximaSemana 03 software libre maxima
Semana 03 software libre maxima
 
Puppet Camp Paris 2015: Continuous Integration of Puppet Code (Intermediate)
Puppet Camp Paris 2015: Continuous Integration of Puppet Code (Intermediate) Puppet Camp Paris 2015: Continuous Integration of Puppet Code (Intermediate)
Puppet Camp Paris 2015: Continuous Integration of Puppet Code (Intermediate)
 
Calculo avanzado usach
Calculo avanzado usachCalculo avanzado usach
Calculo avanzado usach
 
FotoVINCI™: l’app per creare il concorso fotografico legato alla tua attività
FotoVINCI™: l’app per creare il concorso fotografico legato alla tua attivitàFotoVINCI™: l’app per creare il concorso fotografico legato alla tua attività
FotoVINCI™: l’app per creare il concorso fotografico legato alla tua attività
 
Transporte ferroviario
Transporte ferroviarioTransporte ferroviario
Transporte ferroviario
 
Presentación trabajo final grupo 335
Presentación trabajo final grupo 335Presentación trabajo final grupo 335
Presentación trabajo final grupo 335
 
Bullyn perez
Bullyn perezBullyn perez
Bullyn perez
 
Why does everyone hate email?
Why does everyone hate email?Why does everyone hate email?
Why does everyone hate email?
 
Descubra madrid concierge apresentaçao
Descubra madrid  concierge apresentaçaoDescubra madrid  concierge apresentaçao
Descubra madrid concierge apresentaçao
 
Exposicion moda fashion en los adolescentes 8 1
Exposicion moda fashion en los adolescentes 8 1Exposicion moda fashion en los adolescentes 8 1
Exposicion moda fashion en los adolescentes 8 1
 

Ähnlich wie Beginners Guide To Web Accessibility - WordCamp UK July 2013

Web Accessibility: What it is, Why it's important
Web Accessibility: What it is, Why it's importantWeb Accessibility: What it is, Why it's important
Web Accessibility: What it is, Why it's importantGraham Armfield
 
Web Accessibility & It's Guidelines.pptx
Web Accessibility & It's Guidelines.pptxWeb Accessibility & It's Guidelines.pptx
Web Accessibility & It's Guidelines.pptxGurzu Inc
 
WordPress and Web Accessibility: Why It's Important. WordCampUK 2012
WordPress and Web Accessibility: Why It's Important. WordCampUK 2012WordPress and Web Accessibility: Why It's Important. WordCampUK 2012
WordPress and Web Accessibility: Why It's Important. WordCampUK 2012Graham Armfield
 
WordPress and Web Accessibility - TCUK 2012
WordPress and Web Accessibility - TCUK 2012WordPress and Web Accessibility - TCUK 2012
WordPress and Web Accessibility - TCUK 2012Graham Armfield
 
How to create accessible websites - WordCamp Boston
How to create accessible websites - WordCamp BostonHow to create accessible websites - WordCamp Boston
How to create accessible websites - WordCamp BostonRachel Cherry
 
How to Make Learning Accessible and Inclusive
How to Make Learning Accessible and InclusiveHow to Make Learning Accessible and Inclusive
How to Make Learning Accessible and InclusiveLambda Solutions
 
Web accessibility workshop 1
Web accessibility workshop 1Web accessibility workshop 1
Web accessibility workshop 1Vladimir Tomberg
 
Web accessibility workshop 1
Web accessibility workshop 1Web accessibility workshop 1
Web accessibility workshop 1Vladimir Tomberg
 
Checking Our Footing: 16 Modern Accessibility Myths Debunked
Checking Our Footing: 16 Modern Accessibility Myths DebunkedChecking Our Footing: 16 Modern Accessibility Myths Debunked
Checking Our Footing: 16 Modern Accessibility Myths DebunkedJonathan Hassell
 
Web Accessibility: MISSION POSSIBLE!
Web Accessibility: MISSION POSSIBLE!Web Accessibility: MISSION POSSIBLE!
Web Accessibility: MISSION POSSIBLE!Charity Dynamics
 
Accessibility myths for a mobile generation
Accessibility myths for a mobile generationAccessibility myths for a mobile generation
Accessibility myths for a mobile generationJonathan Hassell
 
Don't Panic! How to perform an accessibility evaluation with limited resources
Don't Panic! How to perform an accessibility evaluation with limited resourcesDon't Panic! How to perform an accessibility evaluation with limited resources
Don't Panic! How to perform an accessibility evaluation with limited resourcesMichael Ryan
 
Accessibility for Fun and Profit
Accessibility for Fun and ProfitAccessibility for Fun and Profit
Accessibility for Fun and ProfitMike Wilcox
 
Eve Designs Presentation
Eve Designs PresentationEve Designs Presentation
Eve Designs Presentationbloodofeve
 
BDA - The Importance of Digital Accessibility and why it should matter to the...
BDA - The Importance of Digital Accessibility and why it should matter to the...BDA - The Importance of Digital Accessibility and why it should matter to the...
BDA - The Importance of Digital Accessibility and why it should matter to the...Lyndon Borrow
 
Developing Accessible Experiences
Developing Accessible ExperiencesDeveloping Accessible Experiences
Developing Accessible ExperiencesAlison Walden
 

Ähnlich wie Beginners Guide To Web Accessibility - WordCamp UK July 2013 (20)

Web Accessibility: What it is, Why it's important
Web Accessibility: What it is, Why it's importantWeb Accessibility: What it is, Why it's important
Web Accessibility: What it is, Why it's important
 
Web Accessibility & It's Guidelines.pptx
Web Accessibility & It's Guidelines.pptxWeb Accessibility & It's Guidelines.pptx
Web Accessibility & It's Guidelines.pptx
 
WordPress and Web Accessibility: Why It's Important. WordCampUK 2012
WordPress and Web Accessibility: Why It's Important. WordCampUK 2012WordPress and Web Accessibility: Why It's Important. WordCampUK 2012
WordPress and Web Accessibility: Why It's Important. WordCampUK 2012
 
WordPress and Web Accessibility - TCUK 2012
WordPress and Web Accessibility - TCUK 2012WordPress and Web Accessibility - TCUK 2012
WordPress and Web Accessibility - TCUK 2012
 
Siegman "Creating Accessible Content"
Siegman "Creating Accessible Content"Siegman "Creating Accessible Content"
Siegman "Creating Accessible Content"
 
How to create accessible websites - WordCamp Boston
How to create accessible websites - WordCamp BostonHow to create accessible websites - WordCamp Boston
How to create accessible websites - WordCamp Boston
 
Demystifying digital accessibility webinar
Demystifying digital accessibility webinarDemystifying digital accessibility webinar
Demystifying digital accessibility webinar
 
How to Make Learning Accessible and Inclusive
How to Make Learning Accessible and InclusiveHow to Make Learning Accessible and Inclusive
How to Make Learning Accessible and Inclusive
 
Week 3 Lecture: Accessibility
Week 3 Lecture: AccessibilityWeek 3 Lecture: Accessibility
Week 3 Lecture: Accessibility
 
Web accessibility workshop 1
Web accessibility workshop 1Web accessibility workshop 1
Web accessibility workshop 1
 
Web accessibility workshop 1
Web accessibility workshop 1Web accessibility workshop 1
Web accessibility workshop 1
 
Beginners Guide to Accessibility
Beginners Guide to AccessibilityBeginners Guide to Accessibility
Beginners Guide to Accessibility
 
Checking Our Footing: 16 Modern Accessibility Myths Debunked
Checking Our Footing: 16 Modern Accessibility Myths DebunkedChecking Our Footing: 16 Modern Accessibility Myths Debunked
Checking Our Footing: 16 Modern Accessibility Myths Debunked
 
Web Accessibility: MISSION POSSIBLE!
Web Accessibility: MISSION POSSIBLE!Web Accessibility: MISSION POSSIBLE!
Web Accessibility: MISSION POSSIBLE!
 
Accessibility myths for a mobile generation
Accessibility myths for a mobile generationAccessibility myths for a mobile generation
Accessibility myths for a mobile generation
 
Don't Panic! How to perform an accessibility evaluation with limited resources
Don't Panic! How to perform an accessibility evaluation with limited resourcesDon't Panic! How to perform an accessibility evaluation with limited resources
Don't Panic! How to perform an accessibility evaluation with limited resources
 
Accessibility for Fun and Profit
Accessibility for Fun and ProfitAccessibility for Fun and Profit
Accessibility for Fun and Profit
 
Eve Designs Presentation
Eve Designs PresentationEve Designs Presentation
Eve Designs Presentation
 
BDA - The Importance of Digital Accessibility and why it should matter to the...
BDA - The Importance of Digital Accessibility and why it should matter to the...BDA - The Importance of Digital Accessibility and why it should matter to the...
BDA - The Importance of Digital Accessibility and why it should matter to the...
 
Developing Accessible Experiences
Developing Accessible ExperiencesDeveloping Accessible Experiences
Developing Accessible Experiences
 

Mehr von Graham Armfield

Useful Accessibility Tools Version 3 - Jul 2021
Useful Accessibility Tools Version 3 - Jul 2021Useful Accessibility Tools Version 3 - Jul 2021
Useful Accessibility Tools Version 3 - Jul 2021Graham Armfield
 
So how do i know if my wordpress website is accessible - WordPress Accessibil...
So how do i know if my wordpress website is accessible - WordPress Accessibil...So how do i know if my wordpress website is accessible - WordPress Accessibil...
So how do i know if my wordpress website is accessible - WordPress Accessibil...Graham Armfield
 
Useful Accessibility Tools - WordCamp Brighton
Useful Accessibility Tools - WordCamp BrightonUseful Accessibility Tools - WordCamp Brighton
Useful Accessibility Tools - WordCamp BrightonGraham Armfield
 
Accessibility Hacks Version 2
Accessibility Hacks Version 2Accessibility Hacks Version 2
Accessibility Hacks Version 2Graham Armfield
 
Accessibility Hacks version 2
Accessibility Hacks version 2Accessibility Hacks version 2
Accessibility Hacks version 2Graham Armfield
 
Useful Accessibility Tools - WP Pompey April 2019
Useful Accessibility Tools - WP Pompey April 2019Useful Accessibility Tools - WP Pompey April 2019
Useful Accessibility Tools - WP Pompey April 2019Graham Armfield
 
How to Build an Accessible WordPress Theme
How to Build an Accessible WordPress ThemeHow to Build an Accessible WordPress Theme
How to Build an Accessible WordPress ThemeGraham Armfield
 
Accessibility Hacks Wordcamp Manchester October 2018
Accessibility Hacks Wordcamp Manchester October 2018Accessibility Hacks Wordcamp Manchester October 2018
Accessibility Hacks Wordcamp Manchester October 2018Graham Armfield
 
Useful Accessibility Tools
Useful Accessibility ToolsUseful Accessibility Tools
Useful Accessibility ToolsGraham Armfield
 
Assistive technology Demo WordCamp Bristol
Assistive technology Demo WordCamp BristolAssistive technology Demo WordCamp Bristol
Assistive technology Demo WordCamp BristolGraham Armfield
 
Designing for Accessibility - WordCamp London 2017
Designing for Accessibility - WordCamp London 2017Designing for Accessibility - WordCamp London 2017
Designing for Accessibility - WordCamp London 2017Graham Armfield
 
Designing for Accessibility - Front End North - September 2016
Designing for Accessibility - Front End North - September 2016Designing for Accessibility - Front End North - September 2016
Designing for Accessibility - Front End North - September 2016Graham Armfield
 
Obscure Wordpress Functions That Are Actually Quite Useful
Obscure Wordpress Functions That Are Actually Quite UsefulObscure Wordpress Functions That Are Actually Quite Useful
Obscure Wordpress Functions That Are Actually Quite UsefulGraham Armfield
 
Themes Plugins and Accessibility - WordCamp London March 2015
Themes Plugins and Accessibility - WordCamp London March 2015Themes Plugins and Accessibility - WordCamp London March 2015
Themes Plugins and Accessibility - WordCamp London March 2015Graham Armfield
 
Can WordPress help make the web more accessible - eaccess15 - Feb 2015
Can WordPress help make the web more accessible - eaccess15 - Feb 2015Can WordPress help make the web more accessible - eaccess15 - Feb 2015
Can WordPress help make the web more accessible - eaccess15 - Feb 2015Graham Armfield
 
Themes, Plugins and Accessibility
Themes, Plugins and AccessibilityThemes, Plugins and Accessibility
Themes, Plugins and AccessibilityGraham Armfield
 
Wordpress and Web Accessibility Wordcamp UK 2014
Wordpress and Web Accessibility Wordcamp UK 2014Wordpress and Web Accessibility Wordcamp UK 2014
Wordpress and Web Accessibility Wordcamp UK 2014Graham Armfield
 
So What is This Thing Called WordPress?
So What is This Thing Called WordPress?So What is This Thing Called WordPress?
So What is This Thing Called WordPress?Graham Armfield
 
So How Do I Know if My Website is Accessible?
So How Do I Know if My Website is Accessible?So How Do I Know if My Website is Accessible?
So How Do I Know if My Website is Accessible?Graham Armfield
 
Handling User Generated Content in WordPress
Handling User Generated Content in WordPressHandling User Generated Content in WordPress
Handling User Generated Content in WordPressGraham Armfield
 

Mehr von Graham Armfield (20)

Useful Accessibility Tools Version 3 - Jul 2021
Useful Accessibility Tools Version 3 - Jul 2021Useful Accessibility Tools Version 3 - Jul 2021
Useful Accessibility Tools Version 3 - Jul 2021
 
So how do i know if my wordpress website is accessible - WordPress Accessibil...
So how do i know if my wordpress website is accessible - WordPress Accessibil...So how do i know if my wordpress website is accessible - WordPress Accessibil...
So how do i know if my wordpress website is accessible - WordPress Accessibil...
 
Useful Accessibility Tools - WordCamp Brighton
Useful Accessibility Tools - WordCamp BrightonUseful Accessibility Tools - WordCamp Brighton
Useful Accessibility Tools - WordCamp Brighton
 
Accessibility Hacks Version 2
Accessibility Hacks Version 2Accessibility Hacks Version 2
Accessibility Hacks Version 2
 
Accessibility Hacks version 2
Accessibility Hacks version 2Accessibility Hacks version 2
Accessibility Hacks version 2
 
Useful Accessibility Tools - WP Pompey April 2019
Useful Accessibility Tools - WP Pompey April 2019Useful Accessibility Tools - WP Pompey April 2019
Useful Accessibility Tools - WP Pompey April 2019
 
How to Build an Accessible WordPress Theme
How to Build an Accessible WordPress ThemeHow to Build an Accessible WordPress Theme
How to Build an Accessible WordPress Theme
 
Accessibility Hacks Wordcamp Manchester October 2018
Accessibility Hacks Wordcamp Manchester October 2018Accessibility Hacks Wordcamp Manchester October 2018
Accessibility Hacks Wordcamp Manchester October 2018
 
Useful Accessibility Tools
Useful Accessibility ToolsUseful Accessibility Tools
Useful Accessibility Tools
 
Assistive technology Demo WordCamp Bristol
Assistive technology Demo WordCamp BristolAssistive technology Demo WordCamp Bristol
Assistive technology Demo WordCamp Bristol
 
Designing for Accessibility - WordCamp London 2017
Designing for Accessibility - WordCamp London 2017Designing for Accessibility - WordCamp London 2017
Designing for Accessibility - WordCamp London 2017
 
Designing for Accessibility - Front End North - September 2016
Designing for Accessibility - Front End North - September 2016Designing for Accessibility - Front End North - September 2016
Designing for Accessibility - Front End North - September 2016
 
Obscure Wordpress Functions That Are Actually Quite Useful
Obscure Wordpress Functions That Are Actually Quite UsefulObscure Wordpress Functions That Are Actually Quite Useful
Obscure Wordpress Functions That Are Actually Quite Useful
 
Themes Plugins and Accessibility - WordCamp London March 2015
Themes Plugins and Accessibility - WordCamp London March 2015Themes Plugins and Accessibility - WordCamp London March 2015
Themes Plugins and Accessibility - WordCamp London March 2015
 
Can WordPress help make the web more accessible - eaccess15 - Feb 2015
Can WordPress help make the web more accessible - eaccess15 - Feb 2015Can WordPress help make the web more accessible - eaccess15 - Feb 2015
Can WordPress help make the web more accessible - eaccess15 - Feb 2015
 
Themes, Plugins and Accessibility
Themes, Plugins and AccessibilityThemes, Plugins and Accessibility
Themes, Plugins and Accessibility
 
Wordpress and Web Accessibility Wordcamp UK 2014
Wordpress and Web Accessibility Wordcamp UK 2014Wordpress and Web Accessibility Wordcamp UK 2014
Wordpress and Web Accessibility Wordcamp UK 2014
 
So What is This Thing Called WordPress?
So What is This Thing Called WordPress?So What is This Thing Called WordPress?
So What is This Thing Called WordPress?
 
So How Do I Know if My Website is Accessible?
So How Do I Know if My Website is Accessible?So How Do I Know if My Website is Accessible?
So How Do I Know if My Website is Accessible?
 
Handling User Generated Content in WordPress
Handling User Generated Content in WordPressHandling User Generated Content in WordPress
Handling User Generated Content in WordPress
 

Kürzlich hochgeladen

Deliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceDeliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceOpsTree solutions
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
The work to make the piecework work: An ethnographic study of food delivery w...
The work to make the piecework work: An ethnographic study of food delivery w...The work to make the piecework work: An ethnographic study of food delivery w...
The work to make the piecework work: An ethnographic study of food delivery w...stockholm university
 
A PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptxA PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptxatharvdev2010
 
The Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data EcosystemThe Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data EcosystemSafe Software
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxAna-Maria Mihalceanu
 
Tecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for RotogravureTecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for RotogravureAntonio de Llamas
 
Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!Memoori
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Mark Simos
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?Rustici Software
 
Software Security in the Real World w/Kelsey Hightower
Software Security in the Real World w/Kelsey HightowerSoftware Security in the Real World w/Kelsey Hightower
Software Security in the Real World w/Kelsey HightowerAnchore
 
Dynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationDynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationBuild Intuit
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessWSO2
 
full stack practical assignment msc cs.pdf
full stack practical assignment msc cs.pdffull stack practical assignment msc cs.pdf
full stack practical assignment msc cs.pdfHulkTheDevil
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 
Bitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactiveBitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactivestartupro
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneUiPathCommunity
 

Kürzlich hochgeladen (20)

Deliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceDeliver Latency Free Customer Experience
Deliver Latency Free Customer Experience
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
The work to make the piecework work: An ethnographic study of food delivery w...
The work to make the piecework work: An ethnographic study of food delivery w...The work to make the piecework work: An ethnographic study of food delivery w...
The work to make the piecework work: An ethnographic study of food delivery w...
 
A PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptxA PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptx
 
The Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data EcosystemThe Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data Ecosystem
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance Toolbox
 
Tecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for RotogravureTecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for Rotogravure
 
Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?
 
Software Security in the Real World w/Kelsey Hightower
Software Security in the Real World w/Kelsey HightowerSoftware Security in the Real World w/Kelsey Hightower
Software Security in the Real World w/Kelsey Hightower
 
Dynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationDynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientation
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with Platformless
 
full stack practical assignment msc cs.pdf
full stack practical assignment msc cs.pdffull stack practical assignment msc cs.pdf
full stack practical assignment msc cs.pdf
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 
Bitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactiveBitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactive
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyone
 
BoSEU24 | Bill Thompson | Talk From Another Century
BoSEU24 | Bill Thompson | Talk From Another CenturyBoSEU24 | Bill Thompson | Talk From Another Century
BoSEU24 | Bill Thompson | Talk From Another Century
 

Beginners Guide To Web Accessibility - WordCamp UK July 2013

  • 1. Coolfields Consulting www.coolfields.co.uk @coolfields Beginners Guide to Web Accessibility Graham Armfield Web Accessibility Consultant WordPress Developer graham.armfield@coolfields.co.uk @coolfields
  • 2. What I‟m Going to Cover • What is web accessibility? • Why is it important? • Who is affected by poor accessibility? • How can accessibility be improved? • When to think about accessibility? 2
  • 3. Coolfields Consulting www.coolfields.co.uk @coolfields What is Web Accessibility? “Enabling the web so that everyone can access its content when they want to and how they need to”
  • 5. Accessibility is not black and white In most websites there are usually few accessibility showstoppers. But… • They do occur • Websites can be fine for some people but totally inaccessible for others Web accessibility issues make life a harder for some people. So, web accessibility is about making websites easy to use for as many people as possible. Remember, if people find your website hard to use they will probably leave. 5
  • 6. Coolfields Consulting www.coolfields.co.uk @coolfields Why is Accessibility Important? What is all the fuss about?
  • 7. Why is accessibility important? The web is increasingly the world‟s preferred channel for: • Knowledge • Social interaction • Commerce But it‟s not always easy for: • Those with disabilities • Those who are getting older Accessibility can increase the profitability of a website Accessibility is a legal requirement 7
  • 8. Coolfields Consulting www.coolfields.co.uk @coolfields Who is Affected by Poor Accessibility? More people than you may think.
  • 9. Accessibility Myths - 1 It‟s just for a minority of people… • 12 million people in UK have a recognised disability • In the UK 15 million are over 55 – 12 million over 65 • Allowing for overlap between those with disability and those over 65 there could be as many as 16.5 million people in UK who could benefit from good accessibility in websites 9
  • 10. Accessibility Myths - 2 Accessibility is all about blind people… • 1.8 million people have a vision impairment, of which 180,000 are registered blind • 1 in 12 men have colour-blindness • 2.6 million have difficulties using their hands which could impact their use of keyboard and/or mouse • About 2 million people have a hearing impairment, of which 50,000 use British Sign Language to communicate • About 2 million people are dyslexic • 2.2 million people have difficulty with memory, concentration or learning, of which about 1 million have a learning difficulty 10
  • 11. Accessibility Myths - 3 Yes, but my site is not meant for the blind/deaf/motor impaired* (Delete as appropriate) • People don‟t always browse/buy just for themselves • You can‟t make assumptions about people • Think about your site‟s reputation amongst friends and family of PWD • Studies in US show that friends and family of PWD will also avoid inaccessible sites 11
  • 12. Accessibility Myths - 4 It‟s too expensive – not enough ROI • PWD represent a market worth £80bn per year in the UK – approx £320bn across EU • Friends and family can add significantly to that • 83% of disabled people will not return to a business that does not meet their access needs. • If a company‟s website is hard to use, people will visit a competitor‟s site which is easier to use. • Tesco – In 2001 an accessible version of their shopping site was launched at a cost £35k and yielded £13m turnover a year 12
  • 13. Accessibility Myths - 5 If I ignore it, it‟ll go away • We are all getting older • One in four will be over 65 by 2061 • How accessible do you want the web to be in 20/30/40 years time? 13
  • 14. Accessibility and the law • Equality Act 2010 (Disability Discrimination Act in Northern Ireland) • Laws specifically refer to websites 14
  • 15. Accessibility Myths - 6 Yes but no-one ever gets sued anyway • A number of actions started against companies but many settled „out of court‟ with confidentiality clauses attached. • In 2012 RNIB started an action publicly against BMI Baby. It was impossible to book flights and reserve seats on their website without using a mouse. » The case was settled as BMI Baby agreed to make changes. » RNIB have indicated that they may be looking at more actions in the near future. 15
  • 16. Types of disability/impairment So who can experience difficulties with websites and apps? Those with: • Visual impairments • Motor impairments • Hearing impairments • Epilepsy • Cognitive impairments 71% of PWD have „invisible‟ disabilities or impairments 16
  • 17. Techniques to mitigate impairment Accessibility options in browsers • Mainly Internet Explorer + Firefox • Specify colours, font styles and sizes • Adjust text size without zooming – there is a difference • Attach your own custom stylesheet (IE only) 17
  • 19. But complexity comes at a price How much for a screen reader? Open source to the rescue? • NVDA screen reader • free to download • Mac and PC • Improving all the time - http://www.nvda-project.org/ 19
  • 20. Screen reader examples 1.BBC News with NVDA – medium speed 2.BBC News with NVDA – faster speed 20 Refreshable Braille Display http://www.youtube.com/watch?v=R6XAPkiQMtw at approx 2:06 in
  • 21. iPhones, iPads and blindness • Many accessibility features built in • Eg Voiceover – screen reader • Speech recognition • The result is that many blind users swear by their iOS devices 21
  • 22. Coolfields Consulting www.coolfields.co.uk @coolfields How Can Accessibility be Improved? It‟s not rocket science.
  • 23. WordPress sites Accessibility is influenced by three groups of people 23 Theme Developers Plugin Developers Content Authors
  • 24. So what can we do? • Remember, disabilities and impairments are not absolutes • Few websites are totally impossible for those with impairments to use. • But most websites are difficult for some people with disabilities and impairments • Every accessibility step that you take will make life easier for someone 24
  • 25. Simple things we can do - 1 Images – correct use of alternate text (alt attribute) • Describe what image shows or what it represents • If a link, describe destination • If decorative, leave blank (alt=“”) 25 Relevant for:
  • 26. Simple things we can do - 2 Links • Ensure that destination is clear from the link: My blog post: Read more rather than My blog post: Read more • If link opens new tab or window inform the user 26 Links list from JAWS screen reader Relevant for:
  • 27. Simple things we can do - 3 Use headings properly • Semantic elements • Often used as navigation mechanism by screen reader users • Signpost content 27 Headings list from JAWS screen reader Relevant for:
  • 28. Simple things we can do - 4 Keyboard focus and operation • Focus should be easily visible • Tab order should make sense • Ensure all functionality accessible by keystrokes 28 Relevant for:
  • 29. Simple things we can do - 5 Text • Good colour contrast • Should allow itself to be resized without breaking layout (initially) • Use of colour alone to convey meaning 29 How not to do it Relevant for:
  • 30. Simple things we can do - 6 Mark up forms correctly • Use labels for input fields • Fieldset for grouping controls • Clear display of errors and use text • Don‟t use CAPTCHAs 30 Relevant for: <label for="yourname">Your name:</label> <input type="text" name="yourname" id="yourname" value="" /> <input type=“checkbox" name=“legal" id=“legal" value="" checked=“checked”/> <label for=“legal">I have read the legal page</label>
  • 31. Simple things we can do - 7 WAI-ARIA • Roles/Landmarks help signpost parts of web pages • Live regions for dynamic content • More advanced roles for AJAX sites and apps – including mobile apps 31 Relevant for:
  • 32. Coolfields Consulting www.coolfields.co.uk @coolfields When Should I Think About Accessibility?
  • 33. Implementing accessibility • Accessibility is a lot harder and more expensive to retrofit. • So it needs to be designed in from the start • Think of it as another requirement – one which may not be explicitly asked for. 33
  • 35. Resources 1 • WCAG Guidelines - http://www.w3.org/TR/WCAG/ WARNING: Not all easy reading, but use the „Understanding WCAG‟ section • Accessibility sites and blogs (including my own) • Webaim - http://webaim.org/ • Accessify Forum - http://www.accessifyforum.com/ • WebAxe - http://webaxe.blogspot.com/ • Coolfields (my own) - http://www.coolfields.co.uk/blog/ (including many guides to correct markup of forms, text for screen readers only, etc) 35
  • 36. Resources 2 • Validators and accessibility tools • Markup validator - http://validator.w3.org/ • Wave - http://wave.webaim.org/ • Colour contrast analyser - http://www.paciellogroup.com/resources/contrast- analyser.html • NVDA - http://www.nvda-project.org/ • Useful Firefox Add-ons • Fangs (screen reader emulator) • HTML Validator • Web Developer toolbar There is no tool that can fully test for accessibility automatically – so much is about context. 36
  • 37. Resources 3 • Other Useful sites • Keyboard accessible dropdowns – http://blakehaswell.com/lab/dropdown/deux/ • HTML5 and Accessibility - http://www.html5accessibility.com/ • Subtitle Horse - http://subtitle-horse.com/ • Amara (Universal Subtitles) - http://www.amara.org/en/ 37
  • 38. Resources 4 YouTube Videos • American blind woman demos JAWS – (slow start) http://www.youtube.com/watch?v=si1_iR5lbyg • ARIA - live regions http://www.youtube.com/watch?v=9nZnTdSAkH0 • Leonie Watson on ARIA regions http://www.youtube.com/watch?v=IhWMou12_Vk • MS User and Dragon Naturally Speaking http://www.youtube.com/watch?v=BsZo1p_5-o4 • Build your own assistive technology – (Don‟t) try this at home http://www.youtube.com/watch?v=1LR11wDFMcA 38
  • 39. Thanks for listening – any (more) questions? graham.armfield@coolfields.co.uk @coolfields 39

Hinweis der Redaktion

  1. PWD = People with disabilityAlso, many people with impairments that affect how they use the internet would not consider that they have a disability.
  2. PWD = People with disabilityAlso, many people with impairments that affect how they use the internet would not consider that they have a disability.Tesco – accessible site no longer exists as a separate entity. The techniques used were included in the main Tesco online site.Most of my clients are small businesses who are selling products or services. They want to maximise their reach within potential customers.
  3. TypesVisualBlindness (total/partial), colour blindness low visionMotor Restricted use of limbs/handsParkinsonsetcMany cannot use a mouse or struggle to use one with sufficient precisionHearingPartial to full deafnessSensitivity to background noiseEpilepsyCognitiveDyslexiaAttention deficitAutismLinguistic impairmentsEtc
  4. Those with impairments are unlikely to be using Google Chrome – it doesn’t expose as many useful accessibility features and doesn’t follow all useful web standards – eg in-page link focus.
  5. I have a visual impairment – I’m shortsighted. My assistive technology is a pair of glassesAssistive technology can be software based – magnification or screen reader or speech recognition softwareOr hardware based – braille reader, various switches
  6. Continue spectacles analogy – my short range prescription is now so far from my long range prescription that I need bifocals. These are significantly more expensive than standard lenses.Same is true for ATJaws is the industry standard screen reader. How much do you think it costs? And for upgrades too? How much is a refreshing braille display?Fortunately NVDA is available for free. It’s not quite as good as JAWS but is improving all the time. JAWS is much better for non-browser based applications like Word, Excel etc
  7. Accessibility is influenced by three groups of people
  8. Imagine you need to dec=scribe the image to someone over the phoneBackground imagesNo alternate textWill not be voiced so meaning is not conveyed
  9. It is possible to hide verbose messages from sighted users but have them available for screen readers
  10. Good to add all contact in semantic waysSemantic elementsOften used as navigation mechanism by screen reader usersBreak up content into more manageable chunksTry to nest correctlyAlso good for SEONavigation mechanism – think about newspapersBreaking up content – helps those with attention deficit issues and other cognitive impairments
  11. Show example of church website
  12. Basically it needs to be easy to readResizing text is not the same as zoomingLayouts should be resilientAvoid justification
  13. HTML5 Prompt attribute is not yet supported in all AT
  14. ARIA is a huge areaARIA landmarks can be used to jump around the pageScreen reader users are learning to look for them in web pages nowStill really useful despite more semantic HTML5 elements