Digital Accessibility for Everyone
D
I
G
I
T
A
L
A
C
C
E
S
S
I
B
I
L
I
T
Y
O
V
E
R
V
I
E
W
Prashant Ranjan Verma
A
g
e
n
d
a
•
Digital Accessibility: What and whom does it affect?
•
How persons with disabilities access information in
digital formats
•
Common digital accessibility barriers
•
Accessibility Guidelines
•
Accessibility testing tools
•
Inclusive Publishing
•
Design vs Accessibility. Usability vs Accessibility
•
Maintaining accessibility
•
Questions
S
c
o
p
e
Focus on creation of documents and websites usable
by everyone including persons with different
disabilities.
The concepts and the techniques discussed in this
presentation are also applicable to:
•
Digital publications
•
Computer software
•
Mobile apps
W
h
y
t
h
i
n
k
a
b
o
u
t
a
c
c
e
s
s
i
b
i
l
i
t
y
?
•
Persons with disabilities may be facing difficulties in
using documents and websites created by you.
•
The digital creations contain hidden obstacles that
can sometimes deny or restrict access to users with
disabilities particularly persons with
•
Blindness,
•
Low vision,
•
Colour blindness,
•
Reading disabilities and
•
certain Mobility impairments.
T
h
e
r
e
i
s
d
i
v
e
r
s
i
t
y
i
n
t
h
e
u
s
e
r
s
•
Content created by you will be consumed by people
in different ways.
•
If you don’t consider this variety while creating the
content, millions of people will find it hard or
impossible to use your creations.
“In the Information Age, access to
information is a fundamental human right”
- George Kerscher - DAISY Consortium
D
i
g
i
t
a
l
A
c
c
e
s
s
i
b
i
l
i
t
y
–
h
o
w
m
a
n
y
a
r
e
a
f
f
e
c
t
e
d
?
•
World Health Organization estimates that about
•
15% of the world’s population lives with some form
of disability
•
Significant number of people are likely to be denied
the right to information if the content is not in a
format which they can adapt as per their own needs
for reading.
•
It is the right thing to do,
•
Digital accessibility is also a regulatory requirement
as per many international and domestic
conventions/laws.
P
W
D
s
a
c
c
e
s
s
D
i
g
i
t
a
l
i
n
f
o
r
m
a
t
i
o
n
d
i
f
f
e
r
e
n
t
l
y
•
Read Aloud using Text-To-Speech software
•
Read it on Refreshable Braille Devices
•
Magnify the text and change the foreground and
background colour
•
May be able to use the keyboard only and not
mouse
•
Others may be using touch, voice commands, a
modified mouse, Head Stylus or even Eye Tracking
technology.
Disabilities and Digital Access
Disabilities and Digital Access
Demos of common
digital barriers
A
c
c
e
s
s
i
b
i
l
i
t
y
S
t
a
n
d
a
r
d
s
•
There are globally accepted standards and best
practices for creating accessible digital content.
•
WCAG
•
Section 508
•
EPUB 3
•
PDF/UA
C
h
e
c
k
i
n
g
f
o
r
c
o
m
p
l
i
a
n
c
e
t
o
g
u
i
d
e
l
i
n
e
s
When to check
•
Accessibility should be incorporated in the planning of the project
•
It is best to include accessibility requirements in the RFPs and
Tender documents
•
During the development of the website, accessibility testing
should be done continuously
•
Retrofitting websites & documents for accessibility may be
expensive and time-consuming
How to check for accessibility?
+
Automated Tools
(Eg: Wave/ FAE)
Manual Testing
(Eg: Screen Reader)
C
o
m
p
l
i
a
n
c
e
t
o
a
c
c
e
s
s
i
b
i
l
i
t
y
g
u
i
d
e
l
i
n
e
s
H
o
w
t
o
t
e
s
t
d
o
c
u
m
e
n
t
s
•
Use Microsoft Accessibility Checker
•
Fix all issues
•
Use one assistive technology tool – NVDA
recommended to test the document and fix all
issues
How to check websites
•
Use Axe, WAVE and other automated tools
•
Fix all accessibility flagged by the checkers
•
Test complete functionality with keyboard alone
•
Use NVDA screen reader (Windows)
•
`Use Voiceover (Mac)
H
o
w
t
o
t
e
s
t
o
n
m
o
b
i
l
e
p
l
a
t
f
o
r
m
•
Accessibility Scanner from Google for Android
https://play.google.com/store/apps/details?id=com.google.an
droid.apps.accessibility.auditor&hl=en_US
•
IBM Accessibility Checker for both Android and iOS
https://www.ibm.com/able/mobile-accessibility-checker.html
•
Use Talkback screen reader on Android
•
Use Voiceover on iOS
W
H
A
T
T
O
T
E
S
T
?
C
o
m
m
o
n
p
r
o
b
l
e
m
s
o
n
w
e
b
p
a
g
e
s
-
K
e
y
b
o
a
r
d
i
n
a
c
c
e
s
s
i
b
i
l
i
t
y
•
When pages are not totally accessible from the
keyboard, it creates barriers for users with visual
impairment & mobility impairments who cannot
use the mouse
•
Examples of keyboard inaccessible components of
webpage
•
Drop down menus
•
Form fiels
C
o
m
m
o
n
p
r
o
b
l
e
m
s
o
n
w
e
b
p
a
g
e
s
-
I
n
a
c
c
e
s
s
i
b
l
e
i
m
a
g
e
s
•
When there is no text description for images on
the pages, it becomes inaccessible to people who
use assistive tools such as Screen Readers.
C
o
m
m
o
n
p
r
o
b
l
e
m
s
o
n
w
e
b
p
a
g
e
s
-
N
o
n
-
S
t
r
u
c
t
u
r
a
l
M
a
r
k
u
p
•
Heading markup should be used for giving
structure to pages
•
This makes pages more scanable and less
restrictive for voice input users, screen reader,
refreshable Braille display users as they don’t have
to navigate content linearly, which can be very
time consuming.
C
o
m
m
o
n
p
r
o
b
l
e
m
s
o
n
w
e
b
p
a
g
e
s
-
N
o
n
-
c
o
n
t
e
x
t
u
a
l
L
i
n
k
t
e
x
t
•
Poor link names or captions such as “Click here” &
“More” create barriers for assistive technology
users
“Click here”
“click here”
“Read more”
“Read more”
Available at this
“link”
C
o
m
m
o
n
p
r
o
b
l
e
m
s
o
n
w
e
b
p
a
g
e
s
-
P
o
o
r
M
a
r
k
u
p
•
Tables used for text placement, as a design element.
This is misleading for assistive technology users.
•
Examples of good use of tables
http://www.usability.com.au/resources/tabletest.cfm
W
C
A
G
G
u
i
d
e
l
i
n
e
e
x
a
m
p
l
e
CAPTCHA
Completely Automatic Public Turing Test
to Tell Computers and Humans Apart
Link leads to another
method that allows a
vision impaired user
to verify that s/he is
human
I
m
p
o
r
t
a
n
t
c
o
n
s
i
d
e
r
a
t
i
o
n
s
:
Image
descriptions
•
To make your product accessible you need to provide textual
description of all non-visual content
•
Ask the authors or content writers to provide text
descriptions, transcripts, captioning of the photos,
inforgraphics, videos, audio created by them.
•
If not, the descriptions will have to be written by vendors
who may take up the accessible format conversion job
I
m
p
o
r
t
a
n
t
c
o
n
s
i
d
e
r
a
t
i
o
n
s
:
Alternate formats:
•
Plan for creation of accessible formats of the files to be uploaded
e.g. reports, publications on the website.
•
Consider formats that are all inclusive such as EPUB
•
Specialized formats like DAISY or BRF (Braille) may also be
provided if the audience is likely to consist of a good number of
persons with disabilities
•
In place of the regular PDF file, a well tagged and accessibility
validated PDF file may be uploaded.
•
Note that PDF even if certified to be accessible is not preferred by
users who need to adapt the visual display - Low Vision, Dyslexic
I
m
p
o
r
t
a
n
t
c
o
n
s
i
d
e
r
a
t
i
o
n
s
:
Accessibility atraining
& disability sensitization
•
Arrange training of staff so that the content is born
accessible and does not require much retrofitting
•
Accessible Word and PDF files can easily be created by team
members
•
If the source documents are accessible, the conversion to
specialized formats like EPUB, DAISY is quick and inexpensive
D
e
s
i
g
n
v
s
A
c
c
e
s
s
i
b
i
l
i
t
y
•
There is no need to compromise on visual display to make
the product accessible
•
Accessibility benefits everyone
W
h
a
t
d
o
e
s
t
h
i
s
a
l
l
m
e
a
n
f
o
r
u
s
a
b
i
l
i
t
y
?
Accessibility
Usability
U
s
a
b
i
l
i
t
y
v
s
A
c
c
e
s
s
i
b
i
l
i
t
y
M
a
i
n
t
a
i
n
i
n
g
a
c
c
e
s
s
i
b
i
l
i
t
y
•
Websites are updated regularly, in doing so accessibility can
get compromised
•
Developers should keep the guidelines in mind while making
the updates
•
The website should be checked regularly for accessibility
T
H
A
N
K
Y
O
U
E
m
a
i
l
:
p
r
a
s
h
a
n
t
.
r
v
@
g
m
a
i
l
.
c
o
m
A
c
c
e
s
s
i
b
i
l
i
t
y
T
e
s
t
i
n
g
T
o
o
l
s
&
T
e
c
h
n
i
q
u
e
s
H
T
M
L
V
a
l
i
d
a
t
i
o
n
W3C validators
•
https://validator.w3.org/nu/
– for webpages
•
http://jigsaw.w3.org/css-validator/
– for CSS
A
c
c
e
s
s
i
b
i
l
i
t
y
T
e
s
t
i
n
g
-
A
u
t
o
m
a
t
e
d
•
aXe:
http://www.deque.com/products/axe
•
WAVE
–
http://wave.webaim.org/
Available as a web service and also as a Chrome
extension
•
Tota11y
http://khan.github.io/tota11y/
•
Achecker
http://achecker.ca/checker/index.php
M
o
r
e
t
o
o
l
s
•
FAE
https://fae.disability.illinois.edu/
•
Comprehensive list of Testing Tools
http://www.w3.org/WAI/ER/tools/
•
Tips for reporting problems
http://www.w3.org/WAI/users/inaccessible#overview
M
a
n
u
a
l
A
c
c
e
s
s
i
b
i
l
i
t
y
T
e
s
t
i
n
g
•
Use TAB key to navigate
the web page and
check the TAB order
in links and form elements
•
Check if all links and functionality is available with keyboard alone
•
Flash content should also be tabbable
M
a
n
u
a
l
T
e
s
t
i
n
g
w
i
t
h
A
s
s
i
s
t
i
v
e
T
e
c
h
n
o
l
o
g
y
•
Screen Readers
•
NVDA –
http://www.nvaccess.org/
•
JAWS for Windows –
http://www.freedomscientific.com
•
Screen Magnifiers
•
ZoomText Xtra –
http://www.aisquared.com
•
Dolphin Supernova –
http://www.yourdolphin.com
•
Alternate Input devices –
•
Track ball and switch –
http://www.ablenetinc.com
•
Dragon Naturally Speaking
•
http://www.nuance.com
•
Talkback– Built-in screen reader for Android devices
•
Voiceover – Built-in screen reader for iOS devices
T
e
s
t
i
n
g
w
i
t
h
S
c
r
e
e
n
R
e
a
d
e
r
-
N
V
D
A
•
Testing a web page with screen reader helps in determining
accessibility for visually impaired users as well as for those who
use only the keyboard or alternative input devices
Some useful NVDA keystrokes for webpages
M
o
r
e
m
a
n
u
a
l
t
e
s
t
i
n
g
•
Check the effect of text resizing (IE)
- whether all text on the webpage increases or
decreases in size uniformly
- good example http://www.bbc.co.uk
•
Check the effect of colour contrast
- the background and foreground of the whole page
should change (except images)
•
Consult assistive technology users
•
Basic tips -
http://www.w3.org/WAI/eval/preliminary.html
Further information
•
Website Accessibility Conformance Evaluation Methodology
http://www.w3.org/WAI/eval/conformance.html
•
Web Accessibility Evaluation Tools List
http://www.w3.org/WAI/ER/tools/
•
Selecting Web Accessibility Evaluation Tools
http://www.w3.org/WAI/eval/selectingtools.html
Explore the importance of digital accessibility in reaching a diverse audience, including people with disabilities. Learn about common barriers, accessibility guidelines, testing tools, and inclusive design practices to ensure inclusive access to digital content. Consider the impact on individuals with varying disabilities and the regulatory requirements for ensuring accessibility.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
DIGITAL ACCESSIBILITY DIGITAL ACCESSIBILITY OVERVIEW OVERVIEW Prashant Ranjan Verma
Agenda Agenda Digital Accessibility: What and whom does it affect? How persons with disabilities access information in digital formats Common digital accessibility barriers Accessibility Guidelines Accessibility testing tools Inclusive Publishing Design vs Accessibility. Usability vs Accessibility Maintaining accessibility Questions
Scope Scope Focus on creation of documents and websites usable by everyone including persons with different disabilities. The concepts and the techniques discussed in this presentation are also applicable to: Digital publications Computer software Mobile apps
Why think about accessibility? Why think about accessibility? Persons with disabilities may be facing difficulties in using documents and websites created by you. The digital creations contain hidden obstacles that can sometimes deny or restrict access to users with disabilities particularly persons with Blindness, Low vision, Colour blindness, Reading disabilities and certain Mobility impairments.
There is diversity in the users There is diversity in the users Content created by you will be consumed by people in different ways. If you don t consider this variety while creating the content, millions of people will find it hard or impossible to use your creations. In the Information Age, access to information is a fundamental human right - George Kerscher - DAISY Consortium
Digital Accessibility Digital Accessibility how many are affected? affected? how many are World Health Organization estimates that about 15% of the world s population lives with some form of disability Significant number of people are likely to be denied the right to information if the content is not in a format which they can adapt as per their own needs for reading. It is the right thing to do, Digital accessibility is also a regulatory requirement as per many international and domestic conventions/laws.
PWDs access Digital information PWDs access Digital information differently differently Read Aloud using Text-To-Speech software Read it on Refreshable Braille Devices Magnify the text and change the foreground and background colour May be able to use the keyboard only and not mouse Others may be using touch, voice commands, a modified mouse, Head Stylus or even Eye Tracking technology.
Disabilities and Digital Access Disability Difficulty Assistive Technology Cannot see. Cannot use the Mouse. Cannot perceive graphical content Cannot see clearly. Difficulty with colours and contrast Blind Screen Readers (NVDA, JAWS) Partially Sighted Magnifiers and Screen Readers Difficulty in using the hand or fingers. May not be able to use the standard keyboard & Mouse. Mobility Impaired Track Ball, Modified Keyboards, Switches, Voice commands
Disabilities and Digital Access Disability Difficulty Assistive Technology Cannot see or hear. Cannot use audio-visual content. Difficulties using audio-visual content. Deaf and Blind Refreshable Braille Displays Hearing Impaired Generally do not need specialized hardware or software. Need accommodations in content Difficulties in comprehension, in dealing with complex layouts Cognitive disabilities Generally do not need specialized hardware or software. Need accommodations in content
Demos of common digital barriers
Accessibility Standards Accessibility Standards There are globally accepted standards and best practices for creating accessible digital content. WCAG Section 508 EPUB 3 PDF/UA
Checking for compliance to guidelines Checking for compliance to guidelines When to check Accessibility should be incorporated in the planning of the project It is best to include accessibility requirements in the RFPs and Tender documents During the development of the website, accessibility testing should be done continuously Retrofitting websites & documents for accessibility may be expensive and time-consuming
Compliance to accessibility guidelines Compliance to accessibility guidelines How to check for accessibility? + Automated Tools (Eg: Wave/ FAE) Manual Testing (Eg: Screen Reader)
How to test documents How to test documents Use Microsoft Accessibility Checker Fix all issues Use one assistive technology tool NVDA recommended to test the document and fix all issues
How to check websites Use Axe, WAVE and other automated tools Fix all accessibility flagged by the checkers Test complete functionality with keyboard alone Use NVDA screen reader (Windows) `Use Voiceover (Mac)
How to test on mobile platform How to test on mobile platform Accessibility Scanner from Google for Android https://play.google.com/store/apps/details?id=com.google.an droid.apps.accessibility.auditor&hl=en_US IBM Accessibility Checker for both Android and iOS https://www.ibm.com/able/mobile-accessibility-checker.html Use Talkback screen reader on Android Use Voiceover on iOS
WHAT TO TEST? WHAT TO TEST?
Common problems on web pages Common problems on web pages- - Keyboard inaccessibility Keyboard inaccessibility When pages are not totally accessible from the keyboard, it creates barriers for users with visual impairment & mobility impairments who cannot use the mouse Examples of keyboard inaccessible components of webpage Drop down menus Form fiels
Common problems on web pages Common problems on web pages- - Inaccessible images Inaccessible images When there is no text description for images on the pages, it becomes inaccessible to people who use assistive tools such as Screen Readers.
Common problems on web pages Common problems on web pages- - N Non on- -Structural Markup Structural Markup Heading markup should be used for giving structure to pages This makes pages more scanable and less restrictive for voice input users, screen reader, refreshable Braille display users as they don t have to navigate content linearly, which can be very time consuming.
Common problems on web pages Common problems on web pages- - Non Non- -contextual Link text contextual Link text Poor link names or captions such as Click here & More create barriers for assistive technology users Click here click here Read more Read more Available at this link
Common problems on web pages Common problems on web pages- - Poor Markup Poor Markup Tables used for text placement, as a design element. This is misleading for assistive technology users. Examples of good use of tables http://www.usability.com.au/resources/tabletest.cfm
WCAG Guideline example WCAG Guideline example CAPTCHA Completely Automatic Public Turing Test to Tell Computers and Humans Apart Link leads to another method that allows a vision impaired user to verify that s/he is human
Important considerations: Important considerations: Image descriptions To make your product accessible you need to provide textual description of all non-visual content Ask the authors or content writers to provide text descriptions, transcripts, captioning of the photos, inforgraphics, videos, audio created by them. If not, the descriptions will have to be written by vendors who may take up the accessible format conversion job
Important considerations: Important considerations: Alternate formats: Plan for creation of accessible formats of the files to be uploaded e.g. reports, publications on the website. Consider formats that are all inclusive such as EPUB Specialized formats like DAISY or BRF (Braille) may also be provided if the audience is likely to consist of a good number of persons with disabilities In place of the regular PDF file, a well tagged and accessibility validated PDF file may be uploaded. Note that PDF even if certified to be accessible is not preferred by users who need to adapt the visual display - Low Vision, Dyslexic
Important considerations: Important considerations: Accessibility atraining & disability sensitization Arrange training of staff so that the content is born accessible and does not require much retrofitting Accessible Word and PDF files can easily be created by team members If the source documents are accessible, the conversion to specialized formats like EPUB, DAISY is quick and inexpensive
Design vs Accessibility Design vs Accessibility There is no need to compromise on visual display to make the product accessible Accessibility benefits everyone
Usability vs Accessibility Usability vs Accessibility What does this all mean for usability? What does this all mean for usability? Accessibility Usability
Maintaining accessibility Maintaining accessibility Websites are updated regularly, in doing so accessibility can get compromised Developers should keep the guidelines in mind while making the updates The website should be checked regularly for accessibility
THANK YOU THANK YOU Email: prashant.rv@gmail.com Email: prashant.rv@gmail.com
Accessibility Testing Tools & Accessibility Testing Tools & Techniques Techniques
HTML Validation HTML Validation W3C validators https://validator.w3.org/nu/ for webpages http://jigsaw.w3.org/css-validator/ for CSS
Accessibility Testing Accessibility Testing - - Automated Automated aXe: http://www.deque.com/products/axe WAVE http://wave.webaim.org/ Available as a web service and also as a Chrome extension Tota11y http://khan.github.io/tota11y/ Achecker http://achecker.ca/checker/index.php
More tools More tools FAE https://fae.disability.illinois.edu/ Comprehensive list of Testing Tools http://www.w3.org/WAI/ER/tools/ Tips for reporting problems http://www.w3.org/WAI/users/inaccessible#overview
Manual Accessibility Testing Manual Accessibility Testing http://img.ehowcdn.com/article-new/ds-photo/130/106/fotolia_2655886_XS.jpg Use TAB key to navigate the web page and check the TAB order in links and form elements Check if all links and functionality is available with keyboard alone Flash content should also be tabbable
Manual Testing with Assistive Technology Manual Testing with Assistive Technology Screen Readers NVDA http://www.nvaccess.org/ JAWS for Windows http://www.freedomscientific.com Screen Magnifiers ZoomText Xtra http://www.aisquared.com Dolphin Supernova http://www.yourdolphin.com Alternate Input devices Track ball and switch http://www.ablenetinc.com Dragon Naturally Speaking http://www.nuance.com Talkback Built-in screen reader for Android devices Voiceover Built-in screen reader for iOS devices
Testing with Screen Reader Testing with Screen Reader - - NVDA NVDA Testing a web page with screen reader helps in determining accessibility for visually impaired users as well as for those who use only the keyboard or alternative input devices Some useful NVDA keystrokes for webpages Function Keystroke Navigate by headings H Navigate by graphics G Navigate by form fields F List of links, form fields INS + F7 Change voice INS + CTRL + S Voice settings INS + CTRL + V NVDA menu INS + N
More manual testing More manual testing Check the effect of text resizing (IE) - whether all text on the webpage increases or decreases in size uniformly - good example http://www.bbc.co.uk Check the effect of colour contrast - the background and foreground of the whole page should change (except images) Consult assistive technology users Basic tips - http://www.w3.org/WAI/eval/preliminary.html
Further information Website Accessibility Conformance Evaluation Methodology http://www.w3.org/WAI/eval/conformance.html Web Accessibility Evaluation Tools List http://www.w3.org/WAI/ER/tools/ Selecting Web Accessibility Evaluation Tools http://www.w3.org/WAI/eval/selectingtools.html
