Images & Alt Text
A purely decorative swirl used as a page divider conveys no information. When a screen reader encounters it, this is what it should do
What is skip over it / ignore it?
A button that only displays a magnifying glass icon has no visible text. A screen reader user needs this announced when they land on it
What is the button's purpose or label (e.g., "Search")?
A webpage has a block of links for navigating the site. To help screen reader users jump to it quickly, this is what that region should be identified as
What is a navigation landmark?
A text input box sits on a page with no visible title above or beside it. This is the accessibility problem that creates for screen reader users
What is they don't know what information the field is asking for?
A keyboard-only user is tabbing through a webpage but cannot tell which element is currently selected. This is the experience that has been broken
What is the visible focus indicator (the highlight or outline showing where you are on the page)?
When an image is the only content inside a link, the alt text must fulfill this role
What is describing the link destination/purpose?
A screen reader user navigates to a button labeled "Main Menu." Before pressing it, they need to know this about the menu it controls
What is whether the menu is currently open or closed (expanded or collapsed)?
A page has two navigation regions — one for the site and one for the current page. Screen reader users need this to tell them apart
What is a distinct, descriptive label for each (e.g., "Main Navigation" and "Page Contents")?
SC 3.3.1 requires that when an input error is detected, this must be conveyed to the user
What is a text description of the error (not color alone)?
SC 2.1.1 requires that all functionality available by mouse also be available using only this
What is a keyboard?
This is the general rule that requires every image on a webpage to have a text-based description available for people who cannot see it
What is providing a text alternative for non-text content?
This WCAG criterion (2.4.6) requires that headings and labels be this quality so users understand their purpose
What is descriptive?
A form submission fails validation. Rather than waiting for the user to go looking, this type of region announces the error message to a screen reader user immediately and urgently
What is a live alert region (that automatically announces updates)?
Placeholder text alone fails as a label because it does this when the user starts typing
What is disappears (making the purpose of the field unclear)?
After a modal dialog opens, keyboard focus must be moved to this location
What is the first focusable element inside the dialog (or the dialog itself)?
For a complex chart, a short alt text alone is insufficient; this must also be provided nearby or linked
What is a long description (or equivalent text alternative)?
A user presses a "Mute" button. Beyond the label changing visually, a screen reader must announce this so the user knows the action took effect
What is the current state of the button (muted or unmuted / on or off)?
A password field shows the message "Must be at least 8 characters." A screen reader user filling out the field needs this relationship to be communicated so they hear the hint
What is the hint/description being programmatically associated with the input?
SC 3.3.2 requires that inputs expecting a specific format, like a date, provide this before submission
What is instructions or an example of the required format?
A modal dialog is open. A keyboard user keeps pressing Tab but cannot reach the "Close" button or any content behind the dialog. This describes what is happening and why it is intentional
What is focus being contained within the modal so users cannot accidentally interact with content underneath?
An image of a company logo used as a home-page link needs alt text that conveys this, not just "logo"
What is the function/destination of the link (e.g., "Acme Corp – Home")?
A "Show Details" section is currently collapsed. Without looking at the screen, a screen reader user needs to know these two things when they land on the trigger button
What is the button's label/purpose AND whether the content is currently hidden or visible?
A sidebar promotional banner is purely decorative and irrelevant to the page task. For screen reader users, the ideal treatment is this
What is hiding it from assistive technology entirely?
A form has several required fields. Beyond marking them with a red asterisk, users who cannot see color need this additional indicator
What is a text-based indicator that the field is required (e.g., the word "required" or an asterisk explained in text)?
SC 2.4.3 requires that when components receive focus in sequence, the order has this quality
What is logical and meaningful (preserving meaning and operability)?