AccessibilityTeam Training

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.

Types of Disabilities

There are four different types of disabilities that can affect the way people use and interact with websites.

Visual Auditory Mobility andDexterity

Cognitive

Types of DisabilitiesSomeone 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

Common Accessibility IssuesHere 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

Linear Flow -- Site ArchitectureThe 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

Linear Flow -- ContentSimilarly, 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.

Linear Flow -- Examples

Linear Flow -- ContentFor 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.

Linear Flow -- Content

Linear Flow -- FormsSame 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

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.

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.

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.

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).

Device Dependent Content --Examples

Slider can be moved through the mouse or keyboard

Attributions and SourcesWebAIM - 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=37944Brain by iconsmind.com from the Noun Project - https://thenounproject.com/search/?q=brain&i=69182Embed by Tick Tack London from the Noun Project - https://thenounproject.com/search?q=html&i=5484Contrast by Edward Boatman from the Noun Project - https://thenounproject.com/search?q=contrast&i=546