Web accessibility

Petr Benda

0
0
 Content of presentation
• Introduction to Accessibility
• Why Web Accessibility is Important
• Why to make accessible Web sites
• Types of disabilities

0
 ac·ces·si·bil·i·ty
Noun

The quality of being easy to obtain, use,

understand, reach, or enter.
We need to make
every single
thing accessible
to
every single
person
with a disability.
- Stevie Wonder
 What is ‘Web Accessibility’

• The inclusive practice of removing barriers

that prevent interaction with, or access to,
websites by people with disabilities.

Web accessibility - Wikipedia

Web accessibility refers to
the inclusive practice of
removing barriers that
prevent interaction with, or
access to, websites by
people with disabilities.
 Introduction to Accessibility

• Millions of people have disabilities that affect

their use of the Internet.

• Most Web sites and web software have

accessibility barriers that make it difficult or
impossible for many people with disabilities to
use the Web.

• These problems are very important at

University scene, because any government-
issue institute can’t diskriminate anyone.
0
 Why Web Accessibility is Important

• Web accessibility benefits people without disabilities.

• Also benefits people without disabilities .

• For the creation of accessible Web site is necessary observe basic

premises of accessibility, which are:

– Understanding, what users with various disabilities uses Internet.

– Understanding, what are their specific needs, which they can not pass.
– These specific needs fill in the creation of Web sites.

0
 Why to make accessible Web sites?

• More business opportunities

• Accessible web is visible much better

• Goodwill expansion

• Legality
• etc.

0
 Types of disabilities

• Vision impairment

• Mobility impairment

• Auditory impairment

• Cognitive impairment

• Users with alternative visual arrangement

0
 Visual Disabilities

• Low vision
– Partial sight
– Poor acuity
– Tunnel vision
– Clouded vision
• Color blindness
• Blindness
 Examples of Good Practice for Visual
Disabilities
• Images & controls should have equivalent text
alternatives
• Text, images & page layouts can be resized without
losing information.
• Video content has text or audio alternatives, or audio-
description track.
• Text and images have sufficient contrast between
foreground and background color.
• Provide consistent, predictable navigation.
• Avoid using color alone to identify links or controls.
All non-text content needs a
text equivalent to help
convey information to those
with sensory disabilities
If color is the only method for conveying a link:

Web accessibility means that

people with disabilities can

perceive, understand,

navigate, interact with, and

contribute to
the Web.
The link is invisible to those who can’t see blue:

Web accessibility means that

people with disabilities can

perceive, understand,

navigate, interact with, and

contribute to
the Web.
If a different color AND an underline is used:

Web accessibility means that

people with disabilities can

perceive, understand,

navigate, interact with, and

contribute to
the Web.
Then the link would become visible:

Web accessibility means that

people with disabilities can

perceive, understand,

navigate, interact with, and

contribute to
the Web.
The purpose of all links /actions
should be determined from
the text alone and its context.
In other words:

Never use “click here”.

Pages should have
<proper heading structure>
in order to be readable without
a stylesheet for those who do not
navigate visually.
 Auditory Disabilities
• Hard of hearing
• Deafness
Examples of good practice
for auditory disabilities
• Audio content, including videos, provide
captions or transcripts.
• Media players provide volume controls.
• Media players provide options to adjust
caption text size and colors.
• No interactions that rely on using voice
only.
 Examples of Physical
Disabilities
• Amputation
• Arthritis
• Fibromyalgia
• Rheumatism
• Muscular dystrophy
• Repetitive stress injury
• Tremors and spasms
• Quadriplegia
 Good practice for physical
disabilities
• Provide full keyboard support
– All links, menu items, controls accessible via
keyboard (Tab, Shift+Tab, & Return keys)
– No keyboard traps
• Provide sufficient time to complete tasks.
• Provide consistent, predictable, simple
navigation and page functions.
• Link targets, buttons should be of sufficient
size.
All site functionality should
be available using the keyboard
for persons who do not use a
mouse.
 Examples of cognitive
disabilities
• Attention deficit hyperactivity disorder
(ADHD)
• Autism spectrum disorder (ASD)
• Memory impairments
• Multiple sclerosis
• Perceptual or learning disorders
• Seizure disorders
 Good practice for cognitive
disorders
• Provide simple navigation and page layouts that
are easy to understand and use.
• Avoid, when possible, complex sentences that
are difficult to read or unusual words.
• Avoid moving, blinking, or flickering content. Or
provide method to disable.
• Video, animations, or audio content can be
paused or stopped.
• Simple text is supplemented by images, graphs,
or illustrations.
Accessibility > Compliance

Your site can be compliant, yet inaccessible.

 UC Berkeley Removes Online lectures

In its review, the department looked at videos on UC-Berkeley’s

YouTube page, finding that automatically generated captions
weren’t complete or accurate, a barrier for those with hearing
disabilities. Some videos also had issues that made them
challenging for those with vision disabilities, such as low color
contrast.
The department [DOJ] found that the university was in violation of
the federal disabilities law because “significant portions of its online
content are not provided in an accessible manner when necessary
to ensure effective communication with individuals with hearing,
vision or manual disabilities.”

Source – Why UC-Berkeley is restricting access to thousands of

online lecture videos
 Assistive Technology

• Any item, piece of equipment, or product system, whether

acquired commercially off the shelf, modified or customized,
that is used to increase, maintain or improve functional
capabilities of individuals with disabilities.

• Examples:
– Screen Readers
– Pointing devices
– Switches
– Alternate keyboards
– Siri, Amazon Echo, etc.
 Alternate Access Methods

• Alternate keyboards
• Single button mice
• Trackballs / Joysticks
• Head pointing devices
• Pointing / Typing aides
• Head mice
• Switches / Onscreen keyboards
• Touch windows
• Eye gaze
 Low tech pointing devices
can include:
• Head / Chin pointers
• Styluses
• Adapted hand pointers
• Mouth sticks
 Example of accessible web page

● Web page view with turned-off CSS and JavaScript technology

0
Store vs. E-shop

0
 Reasons for creating
accessible web pages
• Number of disabled users is significant
– USA 18,7% of population
– EU 10% až 15% of population (over 50 milions)
– ČR 9,87% of population (1 015 548 persons)
• Demand of assistive technologies
• 2010 in EU – over 232,4 mil EUR
– Prognosis 2020 in EU – about 320 mil EUR
• Estimation of the EU - the number of users with disabilities
will increase twice in 2050 compared to 2010

0
While not an official standard,
responsive web design is
important to ensure your site can
be viewed on assistive devices of
various sizes.
Another important consideration
is download speeds/order
to ensure those who don’t have
access to high speed Internet
can consume your information.
ARIA (Assistive Rich Internet

Applications) Was created

to improve accessibility of
applications by providing
extra
information to screen readers via
HTML attributes.
 Rules and methodologies of
Accessibility
– Web Content Accessibility Guidelines 1.0
– Web Content Accessibility Guidelines 2.0 (WCAG 2)
– Section 508 – ADA

0
 Web Content Accessibility
Guidelines (WCAG) 2.0
• (WCAG) 2.0 defines how to make Web content more
accessible to people with disabilities. Accessibility
involves a wide range of disabilities, including visual,
auditory, physical, speech, cognitive, language,
learning, and neurological disabilities. Although these
guidelines cover a wide range of issues, they are not
able to address the needs of people with all types,
degrees, and combinations of disability. These
guidelines also make Web content more usable by
older individuals with changing abilities due to
aging and often improve usability for users in
general.
• Web Content Accessibility Guidelines (WCAG) 2.0
 WCAG 2.1
• 28 additional success criteria are proposed
that will be added to existing WCAG 2.0.
• Scheduled to be implemented in 2018

• Web Content Accessibility Guidelines

(WCAG) 2.1
- protanopie (can not see red color)
- deuteranopie (can not see green color)
- tritanopie (can not see blue color)

– normal vision, protanopie, deuteranopie

normal vision, protanopie, tritanopie

0
 Severe visual impairment

• voice output
– Screen reader
– Voice synthesis

• touch output
– Braille display

0
0
0
• Cataracts 0
• Simulation of poor contrast vision - age 60-70 0
• Glaucoma 0
• Diabetic retinopathy 0
• Macular Degeneration 0
WCAG 2.0 vs WCAG 1.0

0
0
 How to check accessibility?

• automatic check

• Manual check

➢ Complex audit

0
Automatic check - Wave

0
 Testing
Automatic check
– http://juicystudio.com/services/image.php
– http://juicystudio.com/services/linktest.php
– http://juicystudio.com/services/readability.php
– http://juicystudio.com/services/colourcontrast.php
– http://dev.wave.webaim.org/index.jsp
– http://www.cynthiasays.com/
– http://www.yellowpipe.com/yis/tools/lynx/lynx_viewer.php
– http://www.q42.nl/demos/colorblindnesssimulator/colors.html?
http%3A%2F%2Fwww.czu.cz
– http://ncam.wgbh.org/richmedia/media/flicker_demo.html
– http://www.visionaustralia.org.au/info.aspx?page=1569

0
Thanks for your attention…

Petr Benda bendap@pef.czu.cz

0
0