26 Questions
What is a common misconception about design and accessibility?
Accessible products are often ugly, boring, or cluttered
What is the role of designers in ensuring accessibility?
To partner with research teams and accessibility teams
Who should designers design for?
The diverse set of users who will interact with their products
What can knowledge of accessible design increase?
Opportunities for innovation and design consistency
Why should designers consider diverse users?
To ensure all users can enjoy using their products
What happens when designers exclude accessibility-focused constraints?
They knowingly exclude people from their products
What should designers do with accessibility guidelines?
Embrace them as they would any set of design constraints
What is the relationship between design and accessibility?
They are partners with a shared goal
What type of icons do not add any relevant information or functionality?
Decorative icons
Why should screen readers skip over decorative icons and images?
Because they add unnecessary verbosity
What should be added to an image to force screen readers to skip over it?
An empty alt tag
What type of icons convey important information that the surrounding text doesn’t?
Informational icons
What should be written in the alt description of an informational image?
What the icon does
Why is the icon in the example (Account icon with adjacent text) considered informational?
Because it indicates the object type
What is the goal of design and accessibility?
To ensure that all users enjoy using products
What is the purpose of including text alternatives for images in design?
To provide a better user experience for users with disabilities
What do users typically do when they first view a website or web application?
Visually skim the page to get the general layout
What is the purpose of headings in a webpage?
To help screen reader users navigate the page
What do semantic HTML landmarks help users identify?
Where they are on a page
Why are clear landmarks important for users with cognitive disabilities?
It helps them to understand the page's hierarchy
What is the purpose of a logical heading structure?
To help users understand the outline of a page's content
What do screen readers handle differently?
Decorative and informational icons
Why is it important to have a good page structure?
So users can navigate the page more easily
What happens when a screen reader user requests a list of all the headings on a page?
The screen reader reads out the list of headings
What do designers need to communicate to engineering teams?
The clear landmarks and headings
What do blind users rely on to gain a holistic understanding of a page?
A good page structure that incorporates headings and landmarks
Study Notes
Accessibility in Design
- Accessibility is a catalyst for innovation, not a barrier to it, and can lead to more consistent and usable products for all users.
Designing for Users
- Designers should consider diverse users with different ways of interacting with products and receiving information, including:
- People who are blind, color-blind, or have low vision
- Those who are deaf or hard of hearing
- People with low mobility, which may be temporary or permanent
- People with cognitive disabilities
- Designers should also consider users of different ages, power users, casual users, and those who just enjoy a quality experience.
Understanding User Interface (UI)
- Sighted users visually skim a page to get the general layout and decide where to start
- Blind users rely on a good page structure with headings and landmarks to understand a page
- Clear landmarks and headings are important for users to understand the page's hierarchy, especially for those with cognitive disabilities.
Layout and Structure
- Headings (h1-h6) create a structure for a webpage, helping users understand the content outline
- Screen reader users can navigate by headings using shortcut keys
- Logical heading structure helps users understand the page's content
- Engineers should use semantic HTML landmarks to help users identify page regions
Icons and Images
- Decorative icons and images should not be read out by screen readers and should have an empty alt tag
- Informational icons and images convey important information and need assistive text or an alt description
- Examples of informational icons include icon buttons and stand-alone avatars
This module debunks the myth that accessibility in design leads to ugly or cluttered products, and instead shows how it can improve consistency and usability for all users.
Make Your Own Quizzes and Flashcards
Convert your notes into interactive study material.
Get started for free
