All content on the page/screen must be readable and understandable to users.
Hierarchy & Layout
Show a page title
Ensure all pages and screens have a title that accurately represents the content of the page/screen the user is viewing.
Structure & element order
When designing, think of the intended order of the elements. Align with developers what should be the correct order of the items so that users who use screen readers can understand the right order and context of the read elements.
Grouping sections
When designing, aim to have distinctive groups of items, each with its own heading. If the group doesn’t have a visual heading, align with developers on the different sections of your design, or mark it in your design file. That way, when using screen readers, users can understand all the different groups and sections of the designed page/screen more easily and decide which section to skip if needed.
Content Understanding & Readability
Language selection
If the content of your product has the option to support multiple languages, then make sure language selection is presented upfront before the user can continue interacting with the product.
Do not change context without user confirmation
The context of the page/screen shouldn’t be changed without the user confirming it somehow. Before any change happens, the user must have a clear question and an option to choose from. If there is no question, then the user needs to have a clear confirmation action before any context changes.
Clearly identify errors
Clearly indicate where and what type of error has taken place. Focus on the element in question, provide an error text next to it, and describe the issue.
Provide labels and cues to avoid mistakes
Avoid user mistakes by adding simple instructions or cues, so users understand what is asked of them. Also, don’t avoid using labels, as they help users clearly understand the form they are filling out.
Simplify content
Use simple sentences and communicate in a conversational tone, friendly and polite. Don’t confuse users with too much information and complicated words or descriptions. By using simple sentence formulation, content is understood faster and more easily.
Use visual support for complex information
Use images, colors, and shapes as support to visually help users digest complex graphs or blocks of information. But do not rely solely on it.
Don’t rely solely on sensory characteristics
Don’t rely only on the shape, color, size, visual location, orientation, or sound of an element for users to understand its intent, as visually impaired users will not be able to understand or perceive it. Use clear instructions or labels that provide meaning to users.
Support scalable UI
Be aware that users can increase or decrease font sizes on their browsers or devices. This may impact the readability of elements. Make sure your UI can adapt to these changes. Consider designing your elements for scenarios where font size is increased by its maximum and decreased to its minimum.