Website Accessibility Fission Team Training

Embed Size (px)

Text of Website Accessibility Fission Team Training

  1. 1. Accessibility Team Training
  2. 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. 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. 4. Types of Disabilities Someone with low vision or blindness may have partial or no access to a websites 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. 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. 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. 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. 8. Linear Flow -- Examples
  9. 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. 10. Linear Flow -- Content
  11. 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. 12. Conveying Information Whenever possible, its 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 cant see it-- just like a series of audio instructions wouldnt be useful for someone who cant hear them. With images, alt attributes/text partially address this issue, but generally its good practice to avoid conveying information in only one form.
  13. 13. Conveying Information Content and visual information should not be hard to see, confusing, or ambiguous. Its 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. 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 dont need to be long, they just need to convey whatever the image is representing. Similarly, all forms should include tags.
  15. 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 doesnt 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 wouldnt be accessible to someone navigating a site through the keyboard only, so whenever possible its 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. 16. Device Dependent Content -- Examples Slider can be moved through the mouse or keyboard
  17. 17. Attributions and Sources WebAIM - Foundations of UX: Accessibility Wheelchair by Kristian Bannister from the Noun Project - Deaf by Daniele Catalanotto from the Noun Project - Assistance-Dog by Sam Garner from the Noun Project - Hide-Preview by Joshua Stearns from the Noun Project - Zoom by Megan Mitchell from the Noun Project - Hands by Waselle Kwan from the Noun Project - Brain by from the Noun Project - Embed by Tick Tack London from the Noun Project - Contrast by Edward Boatman from the Noun Project -