2: Accessibility Fundamentals, Bonus Content: Designing an Accessible User Experience

Common ineffective designs on the web

- No semantic markup - Custom widgets without ARIA markup - Custom widgets without proper keyboard focus management - Poor Color Contrast - Form validation with visual cues only

Examples of subjective accessibility guidelines

- Use visual cues to focus the user's attention on the main purpose of the web page. - Ensure the font is easily readable. - Minimize the cognitive skills required to use the web page.

Data tables should always have two accessibility features:

- a caption (name/title) - columns / rows properly identified in the markup

6 types of accessibility design failure

1. Failure to Design 2. Ineffective Designs 3. Incomplete Designs 4. Bad Retrofitting 5. Inconvenient or Stigmatizing Designs 6. "Accessibility Rot" Over Time

Minimum color contrast for accessible design

4.5 to 1 (3 to 1 for large text)

Common web designs that are inconvenient or stigmatizing

A lesser "accessible version" Contact us for an accessible experience Accessible version "available on request" Clunky fallback interaction patterns in widgets (e.g. retro-fitted, non intuitive to just pass compliance) Text-only explanation of widgets that aren't accessible

What determines the audio-structural experience of a web page for a screen reader user?

The semantic structure

Link text should always have :

They should describe the purpose or destination of the link.

Principle Six: Low Physical Effort

The design can be used efficiently and comfortably and with a minimum of fatigue. Guidelines 6a. Allow user to maintain a neutral body position. 6b. Use reasonable operating forces. 6c. Minimize repetitive actions. 6d. Minimize sustained physical effort. Examples: - A web site has a "skip to main content" link at the top, allowing keyboard users to avoid tabbing through all of the links in the header and navigation. - A web site has good heading and landmark structure (importantly, the content starts with an <h1> heading, inside a <main> landmark, among others), allowing screen reader users to navigate by headings and landmarks to the part of the page they're interested in.

Principle Five: Tolerance for Error

The design minimizes hazards and the adverse consequences of accidental or unintended actions. Guidelines 5a. Arrange elements to minimize hazards and errors: most used elements, most accessible; hazardous elements eliminated, isolated, or shielded. 5b. Provide warnings of hazards and errors. 5c. Provide fail safe features. 5d. Discourage unconscious action in tasks that require vigilance. Examples: - On a financial web site, a script confirms "Are you sure you want to transfer funds?" before funds are transferred, in case users had pressed the button by accident, or before they were sure they wanted to do it. - A content management system places "deleted" items in a recycle bin and allows users to recover them later if they change their mind. - A search feature performs a spell check on submissions and suggests corrections.

Web accessibility

The qualities that make a web experience available to the widest possible group of users. Web accessibility refers to the end result of an inclusive design process.

Usability

The qualities that make a web experience intuitive and easy to use. A usable web design aligns with the purpose for which the web site was created.

True or false: to provide accessible content for deafblind users, you must ensure that everything is available in a machine-readable text format.

True

Concept of perceivable affordances

Users have to perceive the affordances of an element to be able to use it

Why are live events inherently problematic for blind users?

live captions are usually embedded in the video itself, as a visual element, with no actual text that a screen reader can access or read

Principle One: Equitable Use

the design is useful and marketable to people with diverse abilities Guidelines: 1a. Provide the same means of use for all users: identical whenever possible; equivalent when not. 1b. Avoid segregating or stigmatizing any users. 1c. Make provisions for privacy, security, and safety equally available to all users. 1d. Make the design appealing to all users. Example: A web site uses semantic markup in all the appropriate places (headings, landmarks, table structure, form labels, etc.) and creates a single design that works well for users who are sighted as well as for users who are blind.

What is an affordance?

the range of possible actions that someone can perform with a particular object (Gibson, 1977)

What are the three ways to implement accessible versions of a site?

- Add accessibility customization to the website itself - Add accessibility preferences to user profiles in the browser. - Add accessibility preferences to user profiles in the cloud.

Examples of objective accessibility guidelines

- All images must have an alt attribute. - All form input elements must have a label. - The header cells of a data table must be marked as header cells using <th>. - The page must have a title. - Color cannot be used as the only visual means of conveying information.

A possible solution to live caption issues for blind users

- Continuous AJAX updates which send text directly into the document - Create a "Load more live text" button to give users the ability to load text themselves

Two possible ways to ensure that accessible content production is possible

- Create authoring widgets that have a full set of built-in accessibility features. - Allow authors to customize the output (e.g. edit the HTML source)

Example of bad web design affordances?

- Editable text inputs that do not look editable - A custom link without link affordances for some users

What are at least 2 best practices for designing accessible pages for users with dexterity / motor disabilities?

- Functionality must be available using only keyboard - Time-out warnings that allow them to extend the session - Large click targets - Links / Buttons should have a visible :focus and :hover state

WCAG 2.1: Four principals (P.O.U.R)

- Perceivable - Information and user interface components must be presentable to users in ways they can perceive. - Operable - User interface components and navigation must be operable. - Understandable - Information and the operation of user interface must be understandable. - Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

There are 12 items on the web accessibility checklist for designers. Name 5 of those items.

1. Page Title 2. Headings 3. Navigation 4. Links 5. Color Contrasts 6. Magnification & Responsive Design 7. Images 8. Tables 9. Forms 10. Dynamic Content 11. Custom Widgets 12. Touch Screens

7 Principles of Universal Design

1. equitable use 2. flexibility in use 3. simple and intuitive use 4. perceptible information 5. tolerance for error 6. low physical effort 7. size and space for approach and use

Inclusive design

A design methodology that seeks to enable and to accommodate the full range of human diversity, including a wide spectrum of abilities and disabilities. The main goal is to create a unified approach to design that enables multiple methods to access to the same functionality.

How does accessibility rot apply to web development?

A team of designers and developers treat the site as a one-time project and fail to build accessibility into the process, creating accumulating accessibility errors.

Most important design consideration for users with speech disabilities

Don't depend on voice input, and provide alternate communication functionality (text chat, forms, etc)

Error messages should always provide:

Enough information for users to correct their error.

What are the three categories on the ability persona spectrum?

- Permanent: A defining characteristic of the person's body. - Temporary: An injury, sickness, or short-term impairment. - Situational: A condition or context that limits a person's ability.

For users with memory loss, it's important to provide:

- Predictability. - Information should be retained across screens, and pages should retain the same navigation and structure. If the user may have difficulty, provide a help page.

Methods of making multimedia content more accessible for deaf users

- Provide the captions as separate synchronized files - Provide captions in multiple formats - Provide WebVTT captions - Provide caption customization options in the media player

Accessible for users with cognitive disabilities

- Simplify the visual interface - Simplify the navigation - Simplify the content - Simplify the processes & tasks - Focus the user's attention - Provide alternate representations - Provide immediate feedback for success / error scenarios

Some ideal UX design features for a deafblind user

- Text-first design - Semantic structure - Simplicity - Control over timing, accommodating refreshable braille devices - Use common and expected wording to aid in text searches

What aspects can affect the experience of a website user with a disability?

- The person's technology literacy and experience - The amount of time the person has had the disability - The person's level of expertise at using their assistive technology

Accessibility vs. Usability

Accessibility includes qualities that make a web experience available to the widest possible group of users; usability refers to the qualities that make a web experience easy and intuitive to use.

"Accessibility first" mindset

Accessibility should be incorporated from the very start of the project all the way to the end.

WebVTT captions

Allow users can set their preferences for colors, size, and font at the operating system level, and supported browsers will honor those settings across all videos that the user plays.

Common incomplete web accessibility designs that fail completely

An inaccessible trigger for an accessible widget - users can never reach the widget since they can't activate it Applying aria-hidden="true" to otherwise accessible objects - Users can still tab to the focusable elements in those objects, but the screen reader will say nothing. Adding tabindex to focusable elements to fix bad tab order - won't fix bad reading order An inaccessible custom JavaScript widget - users won't be able to proceed beyond the broken widget

Principle Seven: Size and Space for Approach and Use

Appropriate size and space is provided for approach, reach, manipulation, and use, regardless of user's body size, posture, or mobility. Guidelines 7a. Provide a clear line of sight to important elements for any seated or standing user. 7b. Make reach to all components comfortable for any seated or standing user. 7c. Accommodate variations in hand and grip size. 7d. Provide adequate space for the use of assistive devices or personal assistance. This particular principle doesn't apply to the web quite so readily as the other principles do, because this principle is more relevant to hardware and physical environments than it is to virtual environments or interfaces.

Accessibility Rot

Ignorance, neglect, and a lack of accountability can break even the most accessible designs when people stop paying attention to accessibility, or when the responsibility is passed to people who don't understand accessibility.

What's the most important design consideration for a user with seizure disorders?

Not using content which flashes or blinks more than 3 times per second.

Difference between objective and subjective accessibility guidelines

Objective guidelines are easily testable, where subjective guidelines are not.

The strengths and limitations of guidelines

Strengths: - common vocab - objectively testable Limits - doesn't cover all - subjective is excluded (e.g. Ensure font is easily readable. - How do you define "easily?") - cognitive, low vision, and mobile/touch devices are lacking The category of disability most neglected in current guidelines is cognitive disabilities, because many of the measurements of cognitive disability access include some degree of subjective judgment.

Is it ever a good idea to create separate designs for accessibility purposes?

The answer is almost always no. Exceptions: - Users w/ cognitive disabilities can benefit from a separate design that simplifies things, focuses their attention better, and provides extra help when needed. - Screen reader accessibility features can occasionally encroach on visual design, and sometimes it's nice to be able to turn things on and off when you want.

Principle Two: Flexibility in Use

The design accommodates a wide range of individual preferences and abilities. Guidelines 2a. Provide choice in methods of use. 2b. Accommodate right- or left-handed access and use. 2c. Facilitate the user's accuracy and precision. 2d. Provide adaptability to the user's pace. Examples: - A JavaScript drag-and-drop widget is designed to work with any of the following: a mouse, a touchscreen, or a keyboard. - A bank web site warns the user 2 minutes before the session is about to expire and gives the user the option of extending the session. The warning itself is fully accessible to keyboard and screen reader users and is easy to respond to quickly.

Principle Four: Perceptible Information

The design communicates necessary information effectively to the user, regardless of ambient conditions or the user's sensory abilities. Guidelines 4a. Use different modes (pictorial, verbal, tactile) for redundant presentation of essential information. 4b. Maximize "legibility" of essential information. 4c. Differentiate elements in ways that can be described (i.e. make it easy to give instructions or directions). 4d. Provide compatibility with a variety of techniques or devices used by people with sensory limitations. Examples: - A tutorial on how to tie your shoes is presented in text, illustrations, and video with narrated instructions. - ARIA live announcements are used to announce to screen reader users the number of available options in a custom ARIA/JavaScript autocomplete drop-down list (e.g. "There are three cities that start with 'SAN.' Use the down arrow key to navigate the options").

Principle Three: Simple and Intuitive Use

Use of the design is easy to understand, regardless of the user's experience, knowledge, language skills, or current concentration level. Guidelines 3a. Eliminate unnecessary complexity. 3b. Be consistent with user expectations and intuition. 3c. Accommodate a wide range of literacy and language skills. 3d. Arrange information consistent with its importance. 3e. Provide effective prompting and feedback during and after task completion. Examples: - A news web site includes a simplified summary of the important points at the beginning of the story, to make it easy to get the main points without having to read the whole story. - A form validation script provides clear success confirmation messages when the form is submitted successfully, and clear error messages when there is a problem with the data. - The focus moves to the error messages, ensuring that keyboard and screen reader users get the full benefit of the messages. - A web site uses native HTML widgets that are familiar to users. - Content is organized with headings that clearly mark the important sections of content. - Advertisements are clearly marked as such and are placed out of the main flow of the content so they won't be confused with the content.

Exclusive design pattern is:

designs that cause unnecessary limitations for people with disabilities