Accessibility Fundamentals - Disabilities, Guidelines, and Laws

Question 1

What are the types of Disabilities

Answer 1

• Blind
• Low Vision
• Color-blind
• Deaf
• Deafblind
• Motor Disabilities
• Speech Disabilities
• Cognitive Disabilities
• Reading Disabilities
• Seizures
• Multiple Disabilities

Source: https://dequeuniversity.com/class/fundamentals/personas/

Question 2

What do screen readers do?

Answer 2

They convert the text on the web page into spoken words

Source: https://dequeuniversity.com/class/fundamentals/personas/blind

Question 3

What are the design considerations for Blindness?

Answer 3

• All content must be presented in text or via text equivalent
• Information must not be conveyed by visual atrributes alone
• All functionality must be available using only the keyboard
• The content must use markup with good structure and semantic
• All custom controls must have the corret name/label, role, and value, and must change value when appropriate
• Users must receive immediate feedback after all actions, via their screen reader.
• Videos require audio descriptions if the video’s original audio track does not explain everything that a person who is blind would need to know to understand the video
• On mobile devices:
  
  • All feature require a click action
  • Custom sqipe actions on web pages will not work with the screen reader turned on

Source: https://dequeuniversity.com/class/fundamentals/personas/blind

Question 4

Design Considerations - Why?

All content must be presented in text or via a text equivalent

Answer 4

Screen readers cannot read non-text content (e.g images) directly, but they can read alt text that you provide

Source: https://dequeuniversity.com/class/fundamentals/personas/blind

Question 5

Design Considerations - Why?

Information must not be conveyed by visual attributes alone

Answer 5

Not all visual information is available to screen readers. Even the visual attributes which are available to some screen readers , such as text color, are typically not announced by default.

Source: https://dequeuniversity.com/class/fundamentals/personas/blind

Question 6

Design Considerations - Why?

Information must not be conveyed by visual attributes alone

Answer 6

Not all visual information is available to screen readers. Even the visual attributes which are available to some screen readers , such as text color, are typically not announced by default.

Source: https://dequeuniversity.com/class/fundamentals/personas/blind

Question 7

Design Considerations - Why?

Design Considerations - Why?All custom controls (e.g., expand/collapse buttons, media player volume control, dialogs, etc.) must have the correct name/label, role (either with HTML or with ARIA), and value, and must change value when appropriate (e.g. aria-expanded=”false” changes to aria-expanded=”true” after activating the button).

Answer 7

Unlike native HTML elements, custom controls have no semantic parts natively, so screen readers can’t tell users what the widget is and can’t update users on the properties of the widget unless you supply that information via ARIA names, roles, states, and properties.

Source: https://dequeuniversity.com/class/fundamentals/personas/blind

Question 8

Design Considerations - Why?

Users must receive immediate feedback after all actions, via their screen reader. Silence after activating a feature is always bad!

Answer 8

Examples of feedback: Expanded/collapse region, value changed on a control (e.g., on a slider, successful/unsuccessful form submission, notification that a new “page” has loaded in single-page applications, etc.).

Source: https://dequeuniversity.com/class/fundamentals/personas/blind

Question 9

Design Considerations - Why?

Videos require audio descriptions (additional narration of visual content) if the video’s original audio track (dialog, sounds, narration) does not explain everything that a person who is blind would need to know to understand the video.

Answer 9

Users who are blind can hear the dialog, narration, and other sounds in videos, but they can’t see the visual parts of a video. So, if the visual parts convey important information, those parts will need to be described out loud for blind users to understand them.

Source: https://dequeuniversity.com/class/fundamentals/personas/blind

Question 10

Design Considerations - Why?

On mobile devices:
* All features require a click action.
* Custom swipe actions on web pages will not work with the screen reader turned on.

Answer 10

When a blind screen reader user is on a mobile device, swipe actions are used by the screen reading software. All features (controls, widgets) on a mobile web page require a click action to work at all.

Source: https://dequeuniversity.com/class/fundamentals/personas/blind

Question 11

List some low vision characteristics

Answer 11

• Blur
• Blur with low contrast
• Cataracts
• Diabetic Retinopathy
• Glaucoma
• Hemianopia
• Macular Degeneration
• Retinal Detachment

Source: https://dequeuniversity.com/class/fundamentals/personas/low-vision

Question 12

Web Accessibility options for Low Vision

Answer 12

• Screen magnification
• Screen Readers
• Color Customization

https://dequeuniversity.com/class/fundamentals/personas/low-vision

Question 13

What are the design considerations for low vision

Answer 13

• The pinch-to-zoom feature must not be disabled (avoid <meta></meta>).
• All text must pass contrast guidelines against the background (verify using Deque’s axe DevTools accessibility browser extension or a similar tool).
• Links, buttons, and controls must have a visible :focus state and should have a visible :hover state.
• The user interface should provide a clear visual distinction between content (e.g., text) and controls (e.g., buttons, links, etc.).

https://dequeuniversity.com/class/fundamentals/personas/low-vision

Question 14

Design considerations - why?

The pinch-to-zoom feature must not be disabled (avoid <meta></meta>).

Answer 14

When zooming is disabled on a web page, which the parameter user-scalable=no does, low vision users who use screen magnifiers to read content may be unable to properly see information on a web page.

Question 15

Design considerations - why?

All text must pass contrast guidelines against the background (verify using Deque’s axe DevTools accessibility browser extension or a similar tool).

Answer 15

Some users who have low vision may see in low contrast. So, text, borders, and other elements may appear as the same or similar shades of brightness to them. Textual elements that are too close in brightness to background colors may be extremely difficult to read for these users.

Question 16

Links, buttons, and controls must have a visible :focus state and should have a visible :hover state.

Answer 16

Some low vision users may use a keyboard or a mouse, or both, as input methods. Having visible :focus and :hover states helps users to know where the keyboard/mouse focus is on a web page. The default browser :focus state is acceptable per the WCAG guidelines, but users with low vision benefit greatly from enhanced CSS :focus and :hover states.

Question 17

What is a design consideration for color blindness?

Answer 17

All information must be understandable without needing to distinguish between colors. Reds and greens are especially problematic when used as the only way to convey information.

https://dequeuniversity.com/class/fundamentals/personas/colorblind

Question 18

What are some design considerations for deafness?

Answer 18

• All videos must have captions
• All audio only content must have transcripts
• Sign language interpretation of videos can be very helpful

https://dequeuniversity.com/class/fundamentals/personas/deaf

Question 19

What are some design considerations for deaf blindness?

Answer 19

• All of the considerations for blindness apply
• All of the considerations for deafness apply.
• In addition, a transcript must be provided for audio and video content

Question 20

What are some design considerations for motor disabilities?

Answer 20

• All functionality must be available using only the keyboard.
• Links, buttons, and controls must have a visible :focus state and should have a visible :hover state
• With session time-outs, warn users before the time expires (e.g an accessible dialog or alert), and give them the option to extend the session. Ensure the warning itself allows for slow responses. A recommended minimum response time is 2 minutes.
• Provide large click targets (links, buttons, controls) for users who have movements that are difficult to control.

Question 21

What are some different types of speech disabilities?

Answer 21

• Stuttering
• Cluttering
• Apraxia
• Dysarthria
• Speech sound disorders
• Non-vocal

Question 22

What is a deisgn consideration for speech disabilities?

Answer 22

Don’t depend on voice input

Question 23

What are some design considerations for users with lower comprehension?

Answer 23

• Simplify the interface as much as possible
• Simplify the content as much as possible
• Keep videos and audio as short as possible
• Limit the number of choices on the screen
• Provide help features.
• Design for ease of use.
• Test the usability of the interface with actual users, preferably including users with cognitive disabilities

Question 24

What are some design considerations for users with memory loss?

Answer 24

• Retain information across screens, and within a path
• Provide help features

Question 25

What are some design considerations for users with distractibility?

Answer 25

• Reduce or eliminate distractions (be careful with ads, carousels, intrusive audio, intrusive video, etc.)

Question 26

What are some design considerations for reading disabilities?

Answer 26

• Supplement text with illustrations, videos, audio, etc.
• Avoid the highest level of contrast for text against background (e.g black on white) but be sure to stay within the contrast range that people with low vision need

Question 27

What are some design considerations for seizure disorders?

Answer 27

Don’t nclude videos, animations or transitions with flashing light sequences of 3 times or more per second.

Question 28

What are the 4 main accessibility principles identified by WCAG?

Answer 28

1. Perceivable: Information and user interface components must be presentable to users in ways they can perceive. [Ensure content is accessible to people who are blind and/or deaf.]
2. Operable: User interface components and navigation must be operable. [Make sure all features are accessible by keyboard; not just by mouse.]
3. Understandable: Information and the operation of user interface must be understandable.
4. Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

These principles form an acronym POUR.

Question 29

Perceivable Guidelines

Answer 29

• Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
• Provide alternatives for time-based media.
• Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
• Make it easier for users to see and hear content including separating foreground from background

Question 30

Operable Guidelines

Answer 30

• Make all functionality available from a keyboard
• Provide users enough time to read and use content.
• Do not design content in a way that is known to cause seizures.
• Provide ways to help users navigate, find content, and determine where they are.
• Make it easier for users to operate functionality through various inputs beyond keyboard.

Question 31

Understandable Guidelines

Answer 31

• Make text content readable and understandable.
• Make web pages appear and operate in predictable ways.
• Help users avoid and correct mistakes.