In this talk we will go over the basics of accessibility and building it into your website. We will cover accessibility principles (POUR: Perceivable, Operable, Understandable, Robust), using screen readers, and approaches to achieving accessibility guidelines.
3. Accessibility is the practice of making your websites usable
by as many people as possible. We are all different, but we
are all human, and therefore have the same human rights.
Accessibility is the right thing to do.
3
Accessibility:
What and Why?
4. 4
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.
5. ▪ Visual - Low Level Vision, Blindness, Color
Blindness, Something in Your Eye, etc.
▪ Hearing - Low Level Hearing, No Hearing,
Situational, etc.
▪ Mobility - Limb Loss, Paralysis, Situational, etc.
▪ Cognitive - Depression, Dyslexia, ADHD, etc.
▪ Situational - broken limbs, low internet
speeds, holding a child, cognitive overload, etc.
5
6. Tools to Help with
Different Impairments:
▪ Visual - physical magnifiers, zoom, screen
readers, etc.
▪ Hearing - simple text transcripts, captions, etc.
▪ Mobility - head pointer, mouth stick, stylus,
etc.
▪ Cognitive - use plain language, organize
content properly, watch sentence/paragraph
length, etc. 6
7. 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.
7
8. 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.
8
10. 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.
10
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.
12. Checking
Color Contrast,
Sizing and Spacing
Color contrast is one of the most common accessibility
issues. A contrast ratio of at least 4.5:1 is recommended
for normal text. That along with spacing and sizing sets
the base accessibility for the site.
14. 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.
15. 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.
15
16. 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.
18. 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.
18
19. 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.
20. 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.
20
21. 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/
21
24. 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/
26. 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
28. 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.
28
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 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.