In this talk we will go over the basics of designing, developing and testing for accessibility. Including: Color Contrast, Sizing & Spacing, Device Independent User Input, Page Structure, Headings, Testing Tools, Extensions, Testing with a Screen Reader.
7. Disability used to be defined as
something wrong with the human,
something broken or “impaired”. The
World Health Organization redefined
disability in 2011 as a mismatch between
the person and the environment they
are in – basically, a design challenge.
7
8. Inclusive Design is a
methodology, born out
of digital environments,
that enables and draws
on the full range of
human diversity.
Inclusivity
▪ ... with design
▪ ... with development
▪ ... with testing
▪ ... with everything!
8
9. Types of
disabilities or
situations to consider
There are a handful of disabilities to consider when building
for the web. Most of these cover a lot of what is needed for
a wide range of people to have access to the web.
9
10. People with Visual Impairments
▪ blindness
▪ low-level vision
▪ color blindness
▪ something in your eye
▪ went to the eye doctor
10
Types of disabilities or situations to consider:
11. The World Health Organization
estimates that "285 million
people are estimated to be
visually impaired worldwide:
39 million are blind and 246
have low vision."
11
12. Tools to Help with
Visual Impairments
▪ physical magnifiers
▪ software zoom capabilities
▪ screen readers
▪ and more...
12
13. People with Hearing Impairments
▪ low hearing levels
▪ no hearing at all
▪ using headphones
▪ kids running around crazy
13
Types of disabilities or situations to consider:
14. Hearing-impaired people also
represent a significant user base —
"466 million people worldwide have
disabling hearing loss", says the World
Health Organization's Deafness and
hearing loss fact sheet.
14
15. Tools to Help with
Hearing Impairments
▪ text alternatives to audio content
▪ simple text transcripts to text tracks (i.e.
captions)
▪ and more...
15
16. People with Mobility Impairments
▪ loss of limb or paralysis
▪ neurological/genetic disorders that lead to
weakness or loss of control in limbs
▪ This kind of disability can also be a result of
old age— some users might not have a mouse.
16
Types of disabilities or situations to consider:
17. In terms of statistics, a significant
number of people have mobility
impairments. The U.S. Centers for
Disease Control and Prevention Disability
and Functioning (Noninstitutionalized
Adults 18 Years and Over) reports the
USA "Percent of adults with any physical
functioning difficulty: 16.1%".
17
18. Tools to Help with
Mobility Impairments
▪ head pointer
▪ stylus
▪ mouthstick
▪ and more...
18
19. People with Cognitive Impairments
▪ Cognitive impairment refers to a broad range
of disabilities, from people with intellectual
disabilities who have the most-limited
capabilities, to all of us as we age and have
difficulty thinking and remembering.
19
Types of disabilities or situations to consider:
20. People with Cognitive Impairments
▪ depression and schizophrenia
▪ dyslexia and ADHD
▪ difficulty with understanding content,
remembering how to complete tasks, and
confusion caused by inconsistent layouts.
20
Types of disabilities or situations to consider:
21. Tools to Help with
Cognitive Impairments
▪ use plain language
▪ watch sentence and paragraph length
▪ organize content properly
▪ and more...
21
22. People with Temporary Disabilities
▪ broken limbs
▪ hand injuries
▪ short term impairments following surgery
▪ something in your eye
▪ went to the eye doctor
22
Types of disabilities or situations to consider:
23. People with Situational Disabilities
▪ low internet connection
▪ holding a child
▪ holding a phone
▪ loud volume
▪ cognitive overload
23
Types of disabilities or situations to consider:
24. Accessibility: How?
First thing we are going to look at are the Web Content
Accessibility Guidelines (WCAG). Then we will go onto talk
about Design, Development and Testing for Accessibility.
24
25. Web Content
Accessibility Guidelines
(WCAG)
WCAG guidelines are categorized into three levels of
conformance: A (lowest), AA (mid range), and AAA (highest).
Conformance at higher levels covers the lower levels.
25
27. Perceivable
Perceivability means the user can
identify content and interface
elements by means of the senses.
WCAG Principles
Operable
Operability means that a user can
successfully use controls, buttons,
navigation, and other necessary
interactive elements.
27
Understandable
Understandable technology is
consistent in its presentation and
format, predictable in its design
and usage patterns...
Robust
Robust things should be
standards-compliant, and designed
to function on all appropriate
technologies.
29. Design for
Accessibility
If you are a designer, or build websites, you should know
basic user experience principles, and that gets you on the
right track for accessibility by following similar principles.
29
30. 7 Principles of Universal Design
▪ Equitable Use
▪ Flexibility in Use
▪ Simple and Intuitive Use
▪ Perceptible Information
▪ Tolerance for Error
▪ Low Physical Effort
▪ Size and Space for Approach and Use
30
31. Checking
Color Contrast,
Sizing and Spacing
Color contrast is one of the most common accessibility
issues. That along with spacing and sizing sets the base
accessibility for the site.
4.
34. Semantic HTML
From a development perspective Semantic HTML is one
of the key things that will get your site accessible. If
used properly it will help your site immensely.
5.
35. Semantic HTML
When we write semantically correct HTML, we’re
letting the browser know what type of content it’s
dealing with and how that content relates to
other content.
▪ Use container elements for layout only.
▪ Use other elements properly: anchors,
buttons, lists, images, headers, paragraphs, etc.
35
36. Page Structure
and Headings
Doing proper structure and organization sets the base of
the coding for assistive technology to work properly. This
is part of having Semantic HTML, it is pretty important.
6.
38. Headings
▪ Use one H1 per page.
▪ Do not skip heading levels when increasing,
but you can skip levels when decreasing (h1,
h2, h3, h2, h3, h4, h2, h3, h4).
▪ The headings taken out of context should
logically represent the page content.
38
39. Add Meaning to Links
Links and other elements should have an clear cut
meaning, other than “read more” or “click here”. In
some cases it may be clear what I am reading more
about, but navigating a site via links or skimming and
the “read more” type links lose their meaning.
7.
40. Take it further with
ARIA
ARIA enhances accessibility of interactive controls, provides
content roles for identifying page structure, better support
for keyboard accessibility and interactivity, and much more.
40
41. Roles
ARIA roles define what an element
is or does: button, navigation, form,
dialog, etc.
ARIA
Properties
ARIA properties define just that:
required, label, labelledby, live,
haspopup, autocomplete, etc.
41
States
ARIA states are properties that
define the current condition of an
element: disabled, hidden, busy,
checked, pressed, etc.
...
ARIA roles, states, and properties
can be defined in markup or they
can be defined and dynamically set
and changed using scripting.
42. Testing for
Accessibility
There are some basic things you can do to test accessibility
that are really easy to do. These 2 things are an absolute
must in my opinion.
42
43. Device Independent
User Input
A main point for working with assistive technology is to
allow the website to be interacted with through a variety of
devices; for the most part, focus on being able to do
keyboard only testing and touch device testing.
https://webaim.org/techniques/keyboard/
43
8.
46. aXe
Accessibility Audit
There are a few extensions that help test accessibility,
one of the most robust and easy to use in Deque’s aXe.
https://www.deque.com/axe/
9.
48. Double check things
with a screen reader.
Actual testing with an assistive technology is one of
the best ways to test it! Do it yourself, or find a user.
VoiceOver Guide
10.
50. Team Roles
for Accessibility
Everyone on the team has to be responsible for accessibility.
Different roles need to focus on different things, but overall
accessibility, user experience and inclusive design principles
should be followed.
50
52. 10 Key Takeaways
1. Working on accessibility is the right thing to do.
2. Never assume! Be inclusive.
3. Don't forget POUR (Perceivable, Operable,
Understandable, Robust).
4. Check color contrast, spacing and sizing.
5. Code semantic HTML.
52
53. 10 Key Takeaways
1. Follow a proper page structure and
heading order.
2. Links should have meaning.
3. Websites should work device independently.
4. Run the axe tool to check your accessibility.
5. Double check things with a screen reader.
53
54. Bottom Line
The main thing to take away would be Web
Accessibility is everyone’s responsibility. Improving
Web Accessibility may be challenging, but it is not
as complicated as it seems. Every improvement,
even the tiniest one, counts.
54
We traditionally think of accessibility as being about people with disabilities, but the practice of making sites accessible also benefits other groups such as those using mobile devices, or those with slow network connections.
You might also think of accessibility as treating everyone the same, and giving them equal opportunities, no matter what their ability or circumstances.
In the same way that excluding someone from a physical building because they are in a wheelchair (modern public buildings generally have wheelchair ramps or elevators), it is also not right to exclude someone from a website because they have an impairment.
We are all different, but we are all human, and therefore have the same human rights.
It is part of usability, or user experience, in the physical and digital world.
We want to make it so people can access and do what they want independently.
People with disabilities are just as diverse as people without disabilities, and so are their disabilities.
The key lesson here is to think beyond your own computer and how you use the web, and start learning about how others use it — you are not your users.
Accessibility problems are the result of biased design decisions.
Exclusion is the result of design patterns that fail to take into account the full spectrum of people who will use the design.
These guidelines cover 4 high-level principles that describe functional accessibility. Accessible technology is Perceivable, Operable, Understandable, and Robust. In addition to websites, most other information technology can be made accessible by applying the POUR principles.
These guidelines cover 4 high-level principles that describe functional accessibility. Accessible technology is Perceivable, Operable, Understandable, and Robust. In addition to websites, most other information technology can be made accessible by applying the POUR principles.
Moving onto design, and the thing you need to think of when designing with accessibility in mind.
If you are a designer, or build websites, you should know basic user experience principles, and that gets you on the right track for accessibility by following similar principles.
Moving onto the development side of things.
There are some key things to do since you are creating the code that goes into the browser or app.
Everyone tests their sites when they are done with them, right?
Some people build tests right into the application through Test Driven Development.
There are some basic things you can do to test accessibility that are really easy to do.
First thing is to make sure that your website or app allows the user to interact independently of the device, making sure the mouse isn’t the only way to interact.
Simply run a quick test on being able to use the keyboard only to navigate the entire site by tabbing.
Can you tell where you are on the screen?
Can you tell where you are going?
Can you click Enter on a Link, Click spacebar on a button?
Do all the forms allow you to input things properly?
The second thing for testing for accessibility is to run the aXe Chrome/FF extension and see if you have any violations.
Take it a step further and run a screen reader on the website and make sure that you understand what is going on with everything.
You have VoiceOver on a Mac by default and NVDA is a free screen reader for Windows.