1 out of 5 people have some kind of disability, and although not all disabilities make it difficult to use and access the web, many do. We should keep this in mind when designing and developing websites.

1. Accessibility
Team Training

2. Statistics
1 out of 5 people have some kind of
disability, and although not all
disabilities make it difficult to use and
access the web, many do. We should
keep this in mind when designing and
developing websites.

3. Types of Disabilities
There are four different types of disabilities that can affect
the way people use and interact with websites.
Visual Auditory Mobility and
Dexterity
Cognitive

4. Types of Disabilities
Someone with low vision or blindness may have partial
or no access to a website’s visual information
A user with an auditory disability has partial or no access
to information conveyed through audio or video
Mobility and dexterity disabilities may prevent access to
content designed be accessed only through the mouse
Cognitive disabilities may hinder the ability of a user to
navigate complex, content-heavy pages or multi-step
forms

5. Common Accessibility Issues
Here are some common issues people with disabilities face
when surfing the web:
- Non-linear order or flow of page elements
- Visual and auditory information not represented in a non-visual or non-
auditory way; in general, information conveyed only in one way
- Visual information that is hard to see or confusing--e.g. low contrast
- Small targets, such as buttons
- Related content not located in close proximity--e.g. popup forms
- Content not reachable through the keyboard
- Lack of progress bar or indicator on multi-step process, like a survey
- Forms with disappearing labels or other disappearing elements
- Device-dependent event handlers

6. Linear Flow -- Site Architecture
The pages of a website should follow in the logical order they are designed to
be accessed. Anyone, not just users with disabilities, will have difficulty
accessing a site if its navigation is hard to follow or out of order. Breadcrumbs,
which tell a user where she is relative to other pages in the site, are good
practice.
Confusing web of links--bad
Organized and logical navigation--better

7. Linear Flow -- Content
Similarly, HTML elements should be
organized in the logical order they are
designed to be accessed. For instance,
in the HTML/PHP of a Wordpress
template the order should be:
● Header
● Content
● Sidebar
● Footer
Moreover, each element within each
section should follow in the order it is
designed to be accessed.

8. Linear Flow -- Examples

9. Linear Flow -- Content
For example, the code for a pop-up email signup form that is linked to from the
content should be placed, in the HTML/PHP, inside of the main content, as
opposed to at the end or beginning of the code.
● Header
● Content
○ Pop-up
● Sidebar
● Footer
For users navigating the page through the
keyboard only, it would make no sense
having to navigate to the beginning end of
the document to access the form.

10. Linear Flow -- Content

11. Linear Flow -- Forms
Same thing with forms. Each element of the form should follow in the order in
which the form is designed to be filled out. If the fields are out of order or the
Submit button somewhere other than at the end of the form, this could be
confusing for someone navigating it with the keyboard.
Name:
Email:
Phone:
Comments:
SUBMIT

12. Conveying Information
Whenever possible, it’s good practice to try to
convey important information in more than one way.
So, videos and audio should ideally have captions
or include a link to transcriptions. Also, essential
visual information should be conveyed through text.
A “Contact Us” link that is only a mail icon, for
instance, is no good for someone who can’t see it--
just like a series of audio instructions wouldn’t be
useful for someone who can’t hear them. With
images, “alt” attributes/text partially address this
issue, but generally it’s good practice to avoid
conveying information in only one form.

13. Conveying Information
Content and visual information should
not be hard to see, confusing, or
ambiguous. It’s good practice to avoid
conveying information through color, and
images as well as backgrounds should
have enough contrast to be easily
distinguishable. This would especially
benefit users who may be color-blind or
have low vision.

14. HTML Attributes
Descriptive HTML attributes are
also good practice, in particular
“alt” attributes for images. In fact,
every image should have an “alt”
attribute. Descriptions don’t need
to be long, they just need to
convey whatever the image is
representing. Similarly, all forms
should include <label> tags.

15. Device Dependent Content
All content should be accessible through the keyboard, in particular links
and menus. Just because a part of the site can be accessed through the
mouse, it doesn’t mean that it is accessible through the keyboard. This is
important since it leaves potentially significant content out of reach for
certain users.
This is something to be particularly aware of when using device dependent
Javascript handlers, such as onMouseOver, onClick, onChange, onFocus,
etc. This functionality wouldn’t be accessible to someone navigating a site
through the keyboard only, so whenever possible it’s better to use device
dependent handlers (can be accessed through both the keyboard and
mouse), as opposed to device independent ones (some of which can only
be accessed through the mouse).

16. Device Dependent Content --
Examples
Slider can be moved through
the mouse or keyboard

17. Attributions and Sources
WebAIM - http://www.webaim.org/
Lynda.org Foundations of UX: Accessibility
Wheelchair by Kristian Bannister from the Noun Project - https://thenounproject.com/term/wheelchair/29554/
Deaf by Daniele Catalanotto from the Noun Project - https://thenounproject.com/term/deaf/55779/
Assistance-Dog by Sam Garner from the Noun Project - https://thenounproject.com/term/assistance-dog/10190/
Hide-Preview by Joshua Stearns from the Noun Project - https://thenounproject.com/term/hide-preview/82416/
Zoom by Megan Mitchell from the Noun Project - https://thenounproject.com/term/zoom/1669/
Hands by Waselle Kwan from the Noun Project - https://thenounproject.com/search?q=hands&i=37944
Brain by iconsmind.com from the Noun Project - https://thenounproject.com/search/?q=brain&i=69182
Embed by Tick Tack London from the Noun Project - https://thenounproject.com/search?q=html&i=5484
Contrast by Edward Boatman from the Noun Project - https://thenounproject.com/search?q=contrast&i=546