Skip to content

Latest commit

 

History

History
87 lines (72 loc) · 4.9 KB

3.1 Accessibility.md

File metadata and controls

87 lines (72 loc) · 4.9 KB
Raw

Accessibility- A11y Overview

Source: Accesibility - Udacity Front End Web Development Nanodegree

Table Of Contents:

1. A11y Overview

GOALS:

  • a. Accessibility: What is accessibility?
  • b. User experience: Explore diversity of user experience with web and apps.
  • c. Screen readers: How to use screen readers practically?
  • d. Inclusive webexperiences: How to build webexperiences for all users?

a. DEFINITION: What is accessibility?

  • Good accessibility("a11y"):_to ensure all users can access the content in web and apps_.
  • Site content needs to be available to everyone.
  • Site functionality needs to be operable to everyone. Acessibility= to make sure "content" and "websites" created are usable to people with various imparements or abilities.
  • Note:
  • "a11y" is a shorten word for "accessibility"(=there's 11 letters between the "A" and "Y" in the word "Accessibility").
  • "i18n"is a shorten word for "internationalization".
  • " l10n"is a shorten word for "localization".

b. USER EXPERIENCE: Explore diversity of user experience with web and apps

  • Consider accessibility ("a11y") from the start of your process, as it affects all users:
  1. Users with _disabilities_: (issues due to human disability.)
  • a. Vision impairment
    • vision disability: (blind or have significant difficulty seeing even with glasses)
    • refractive error: (a visual impairment which may be corrected with glasses if mild enough)
    • color vision deficiency:(difficulty to distinguish colors)
  • b. Hearing impairment
    • hearing disability:(deaf or have significant difficulty hearing even with hearing devices)
  • c. Cognitive impairment
    • cognitive disability: (difficulty remembering, concentrating, or making decisions)
  • d. Motor impairment
    • physical disability: (part of the body does not work optimal)
  • Note: These impairments can be Temporary, Permanent, or Situational.)
  1. Users _without disabilities_: (issues due to bad design)
  • unresponsive design
  • lack of color contrast
  • lack of keyboard navigation
  • lack of visual or sound alternative
  • lack of zoom-in option
  • lack of minimal design(to minimize distraction)

Sources:

c. SCREEN READERS/VIEWERS

A Screen viewer = software that allows blind people to hear the information displayed on a screen, via text-to-speach-syntiziser.

  • How to use a Screenreader?
  • Enable ChromeVox Lite via the "Enable ChromeVox Lite" button or press TAB once.
  • The controls for ChromeVox Lite will appear once it is enabled:
  • "Voice" drop-down: to choose alternate voices
  • "Speech rate" drop-down: to make speech faster or slower
  • "Navigate"buttons: to move ChromeVox's focus to non-focusable items on the page (e.g. Headers)
  • "Volume control": to fine-tune ChromeVox's volume.

Sources:

d. Web Content Accessibility Guidelines:

Web Content Accessibility Guidelines make your website and app

  • "POUR" (4 core principles):
  • Percievable: to make sure ALL users can "percieve" content. (Is the content "visual, audio, text, keyboard, touch!- ready?)
  • Operable: to make sure users can "work" with the content. (Can users use your components and navigate the content?)
  • Understandable: to make sure users "understand" the content & the interface. (Can users understand your content?)
  • Robust: to make sure ALL users (Is the content "robust" enought be be consumed by a wide variety of ages?)
  • Note: Although the below guidelines are a great resource, what actually matters is "the users experience".

Sources:

Cheatsheets

Cources: