Week 2: Designing an Accessible User Experience

What are some 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.

What is an 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 two examples of ineffective web accessibility design?

- No semantic markup: - Poor color contrast - Form validation with visual cues only - Custom widgets without proper keyboard focus management - Custom widgets without ARIA markup - No semantic markup

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.

What are some 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

What are 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

What are some 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.

What are the 6 types of accessibility design failure? (name at least 3)

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

What do WebVTT captions do?

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.

Describe the Size and Space for Approach and Use design principle

Appropriate size and space is provided for approach, reach, manipulation, and use, regardless of user's body size, posture, or mobility.

What is the Robust principle of web accessibility?

Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

What is the Perceivable principle of web accessibility?

Information and UI components must be presentable to users in ways they can perceive.

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.

Describe the Perceptible Information design principle

The design communicates necessary information effectively to the user, regardless of ambient conditions or the user's sensory abilities.

Describe the Equitable Use design principle

The design is useful and marketable to people with diverse abilities.

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

The semantic structure

True or False: Designing for edge cases is a more inclusive design approach than designing for the statistical normal distribution of users.

True

True or false: You can create a website that complies fully with the WCAG accessibility guidelines, but which is not fully accessible.

True

What is the Operable principle of web accessibility?

UI components and navigation must be operable (functional, etc)

Describe the Simple & intuitive Use design principle

Use of the design is easy to understand, regardless of the user's experience, knowledge, language skills, or current concentration level.

What is the concept of perceivable affordances?

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

What is an exclusive design pattern?

designs that cause unnecessary limitations for people with disabilities

What is an affordance?

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

What are two examples of incomplete web accessibility design?

- An inaccessible trigger for an accessible widget - Applying aria-hidden="true" to otherwise accessible objects - Adding tabindex to focusable elements to fix bad tab order - An inaccessible custom JavaScript widget

What's an example of Equitable Use on the web?

A site that creates a single design that works well for users who are sighted as well as for users who are blind.

What is the difference between objective and subjective accessibility guidelines?

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

What are the four WCAG principles of web accessibility?

(POUR) perceivable, operable, understandable, robust

What are two examples of Inconvenient or Stigmatizing web accessibility design?

- A lesser pr stripped-down "accessible version" of the website, usually text-only - Accessible version "available on request" or which asks the user to contact the site owner - Clunky fallback interaction patterns in widgets - Text-only explanation of widgets that aren't accessible

What's an example of bad web practices with respect to the Low Physical effort design principle?

- A sign-up process on a web site requires typing a large amount of information, which can lead to fatigue in people with motor disabilities. - A web site is designed with many links in the header and navigation section, and no headings, landmarks, or "skip to main content" link to allow users to jump to the main content.

What is the most important design consideration for users with speech disabilities?

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

True or false: To create accessible user-generated content, you should require users to delete and re-post content that has accessibility errors

False

Error messages should always provide what?

Enough information for users to correct their error.

For users with memory loss, it's important to provide what feature across pages?

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.

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.

What is 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

What are the 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)

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

What's an example of good web practices with respect to the Tolerance for Error design principle?

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

What are some ways to make a site more 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

Data tables should always have what two accessibility features?

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

What are the Universal Design Principles? (name at least 4)

1. Equitable Use 2. Flexibility in Use 3. Simple & Intuitive Use 4. Perceptible Information 5. Tolerance for Error 6. Low Physical Effort 7. Size & Space for Approach & Use

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

What is the minimum color contrast for accessible design?

4.5 to 1 (3 to 1 for large text)

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.

What is the difference between accessibility and 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.

What does an "accessibility first" mindset mean, with respect to website and app development?

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

True or False: As long as all website components are accessible individually, the entire user experience will always be accessible.

False

True or False: It's a good idea to create two versions of a website, the standard one and the accessible one.

False

True or False: Open captions (rather than closed captions) are a good choice to accommodate all users.

False

True or False: The design-centric approach to accessibility focuses on a person's limitations.

False

True or False: WCAG provides extensive and detailed guidelines for designing for users with cognitive disabilities.

False

True or False: When designing accessible solutions, it's helpful to think of disabilities as binary; either they are there or not there.

False

True or false: Screen reader users usually navigate pages by listening to the entire page being read from start to finish.

False

What is the Understandable principle of web accessibility?

Information and UI operation must be understandable or comprehensible.

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.

Describe the Flexibility in Use design principle

The design accommodates a wide range of individual preferences and abilities.

Describe the Low Physical Effort design principle

The design can be used efficiently and comfortably and with a minimum of fatigue.

Describe the Tolerance for Error design principle

The design minimizes hazards and the adverse consequences of accidental or unintended actions.

Link text should always have what accessibility feature?

They should describe the purpose or destination of the link.

What's an example of the Size and Space for Approach and Use principle when applied to the web?

Trick question: 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.

True or False: Designing for people with disabilities has collateral benefits for all users.

True

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

True

What is the most important question that you can ask when considering exclusion?

What in the design of the environment that led to this person's exclusion?

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