Designing for people who are blind
When designing products and services, we often think in terms of their visual appearance. However, some people use digital content without being able to see it. This means we need to design interfaces that remain understandable, navigable, and controllable even when people are unable to perceive layout, colour, and spatial clues.
By doing so, we ensure designs provide a comparable experience so that people who are blind can complete tasks in a way that suits their needs without undermining the quality of the content.
If you haven't already, dip into other posts in our Designing for disabilities series:
People we are designing for
Blindness is a seeing disability and refers to the partial or total inability to detect light, which affects a person's ability to form a visual representation of their surrounding environment.
People who are blind often access and interact with digital content using a software application called a screen reader, which converts visual on-screen content into synthesised speech such as when browsing with a desktop screen reader or browsing with a mobile screen reader.
Design considerations
The following design considerations focus on making it easier for people who are blind to access and use digital content, and to complete related tasks, using a screen reader.
It's not a complete list, but it highlights areas that can make the biggest difference in terms of providing a supportive user experience.
While the Web Content Accessibility Guidelines (WCAG) provide essential technical direction when designing for people who are blind, we look beyond basic compliance and consider the more thoughtful, human-centred steps we can take in our design, something we discuss in more detail in our article designing for people with disabilities.
Consider content organisation
Designers often organise and arrange content in certain ways to help people access content. A typical web page, for example, will usually include a header and footer, a main content area, and one or more navigation blocks. Headings within these sections are often distinguishable from surrounding text because they use a larger font. Lists are often identified either by bullet points, or through the numbering of individual list items. Sighted people can quickly build a mental model of how this content is structured based on how sections and user interface elements within those sections are positioned and styled.
However, people who are blind aren't able to appreciate these visual design decisions. Without alternative ways of communicating this structure to them, they may find themselves having to read everything sequentially from start to finish, with no way of understanding the page's underlying layout or hierarchy.
Recognising how content is organised is therefore one of the key foundations of accessible content design, as people who are blind can then use features built into their screen reader to give them a more comparable experience for identifying and navigating between different types of content. Examples include identifying page landmarks, headings, and lists. By considering content organisation at the early design stage, for example by annotating your designs to indicate the appropriate landmarks, headings, lists, and so on, you can identify if the design is likely to support blind people before development actually takes place.
That said, be strategic when thinking about content organisation. For example, too many headings can be just as disruptive as too few headings. Too many headings can clutter navigation and, ironically, can prevent people who use a screen reader from accessing the content they require.
Prioritise content
Sighted people reading left-to-right (LTR) scripts typically scan left-to-right and top-to-bottom. Without explicitly using navigation shortcuts, people using screen readers will also expect to hear the same information linearly when listening to this content. They will expect to hear content at the top of the page first, followed by all other content until they reach the end of the page.
Prioritising content in the page layout is one way of helping people who are blind to focus on key tasks and information, and to filter out features that may not be relevant to them or which are secondary in nature. This approach aligns with one of the seven inclusive design principles: prioritise content, which emphasises that putting the most important tasks, features, and information high up in the content order helps people more easily complete what they originally set out to do:
Help users focus on core tasks, features, and information by prioritising them within the content and layout.
To illustrate, the following screenshot shows the home page for the Scotrail website. This page prioritises content by:
- Immediately indicating where there are potential problems on the railway at the top of the main content section, allowing people to review this information before continuing with their journey
- Displaying a form for the user to book their journey immediately after the above information
- Using the rest of the page to provide sundry and less important or critical information, such as current offers and the latest news
Design for consistency
Consistency is a key aspect of good content design, and is especially important for people who are blind. A user interface that adopts consistent naming conventions helps people who are blind to navigate with confidence, builds familiarity with your product, and reduces cognitive load.
This aligns with the inclusive design principles' be consistent principle, which emphasises that people are more comfortable with well-established patterns and follow expectations, and our designs should actively support that:
Use consistent web and platform design patterns to help build familiarity and understanding.
A problem that people who are blind often encounter occurs when icon-based controls that perform the same action across different pages or screens aren't announced consistently by screen readers when they receive focus. For example, consider an icon-based Back button that appears at the top of each screen in an app. Let's say that, in all cases, activating this control takes people back to the previous screen.
Let's imagine that the button is announced as follows when it receives focus:
- On some screens, the button is announced as "Back"
- On some screens, the button is announced as "Close"
- On some screens, the button is announced as the name of the screen that will appear when the button is activated, for example "Home"
While each of these text alternatives is subjectively correct, people who are blind may be confused by the different terminology, and may think that the actual functionality is different in each case. People may also find it difficult to find the control they are looking for. For example, if they expect the text alternative to be "Back", they may think the control they are looking for is missing if the actual control has a text alternative of "Close". Indeed, they may think that control performs a different action altogether, for example to close the app.
Annotating your designs with consistent text alternatives can help to prevent this issue.
Design for predictability
People who are blind find it easier to use digital content when it follows easily recognisable design patterns. They often rely on their existing familiarity with common user interface elements, and how they are conveyed by their screen reader. Problems can also arise when introducing novel elements that may require people to use custom keystrokes or gestures, or whose functionality may be difficult to conceptualise in a non-visual environment. Designing non-standard or unfamiliar user interface elements won't necessarily make the content inaccessible, but it can have a negative impact on the user experience.
Using common design patterns that have robust support for accessibility can help to prevent issues from arising. Again, this aligns with the be consistent principle covered previously.
For example, the layout of many iOS and Android apps follows the same general principle, regardless of the type of app. A typical screen is often laid out as follows:
- The top app bar that contains:
- A Back button or hamburger menu button
- A screen title
- A set of common controls, such as a search button and/or an options button
- The main content section that contains functionality for that specific screen
- The bottom navigation bar that contains links to the primary landing screens within the app
The BBC News app follows this common layout pattern:
Be concise
Screen reader verbosity can be a significant usability challenge for people who are blind. Long and overly wordy text can be overwhelming and add to cognitive load.
To prevent this, content should be:
- Clear: use appropriate language everyone can understand
- Concise: lead with your most important point and cut out unnecessary words
- Useful: make sure every word has a purpose
It is good practice to prioritise keywords so that they are the first thing that people using screen readers hear when they encounter the related content. Most screen readers allow people to press the Escape key to temporarily stop announcing content. By putting keywords at the start of a heading or link, people won't miss out on important information if they feel the rest of the announcement is becoming too overwhelming.
For example, avoid "More about the benefits of this policy" and use "Policy benefits".
Help people navigate
Providing ways to ensure that people who are blind know where they are within a complex website or process helps them to understand their current location, the options available to them, and how to navigate between parts of the website.
The type of wayfinding you provide will depend on the depth and complexity of your website or application. While not all approaches are necessary, using them where appropriate can be highly beneficial and will improve the user experience.
Main headings
Make sure that all individual pages and screens have a main heading. On websites, the main heading is typically the first element within the main content section. On iOS and Android apps, the main heading is typically located within the top app bar. Providing a descriptive main heading helps people who are blind to quickly identify their current location without having to read the remainder of the page or screen content.
The following image shows headings on the TetraLogical services page, with the headings highlighted using Accessibility Insights.
Breadcrumbs
Breadcrumbs are a series of links that show people their location within a website's hierarchy, and allow them to navigate between levels. The last breadcrumb item usually represents the current page, although it may sometimes be omitted.
Breadcrumbs can be helpful for people who are blind, particularly when they are navigating large websites that have multiple pages and sub-pages. Their hierarchical layout means that people can quickly navigate back up one or more levels if they have trouble orienting themselves, without navigating all the way back to the home page by trying to find an appropriate link in a navigation menu.
It is good practice to position breadcrumbs immediately after the main heading for the page. This means that, when navigating into the main content section, people using screen readers will hear the main heading followed by the location of the page within the website. Sometimes, and from a visual perspective, breadcrumbs can appear above the page's main heading, but they should always be included in the main content section, and you should annotate in your page designs that the main heading should be announced by screen readers before the breadcrumbs.
Navigation menus
Complex websites with multiple sections and thousands of pages may use navigation menus to help people locate the information without feeling overwhelmed by the amount of content. Overly complex navigation menus can become a source of frustration or confusion. This is particularly concerning for people who are blind and who can't perceive the menu's visual layout, particularly if it tries to cover too many pages. Well-designed navigation menus, on the other hand, help everyone to understand the main parts of a website or app, and to more easily access the content they require.
When designing a navigation menu, limit the number of main navigation links to only the primary landing pages or screens for your website or app. By limiting the number of links, you reduce the amount of elements that a blind person needs to remember and to navigate through. If links to sub-pages must be included, apply a submenu containing each of these links to the relevant main menu items.
The following screenshot is taken from Tesco's website. Here, the main navigation menu only includes links to the primary landing pages of the site.
However, there is also a separate "All Departments" control that, when expanded, displays a list of all sections of the website:
By providing both options, the designers have offered people navigation choices that suit their personal preferences.
Search functionality
Search functionality allows people to quickly locate specific content by entering keywords and filtering results. It provides a fast, direct, path to the information needed.
People who are blind may find it easier to use search than to navigate through multiple links to find the information they require.
When designing search functionality for people who are blind, make sure that the field has an appropriate label. This is particularly important if the field supports a specific type of searching. For example, if the field supports site-wide or app-wide searching, a label of "Search" or "Search website" is sufficient. Here's an example a search field that appears on all pages of the Tesco website:
However, if the field only supports searching for specific content, such as an address, use a label of "Search for your address" instead.
Offer choice
Offering choice is an important factor in making digital content more usable, particularly in cases where the original content is complex, non-standard, or is by design not accessible for people who are blind. The inclusive design principles' offer choice principle emphasises the need to provide multiple different ways for people to complete the same task, particularly when the task is complex, unfamiliar, or requires specific interactions:
Consider providing different ways for people to complete tasks, especially those that are complex or non-standard.
For example, when placing an order on the McDonald's app, people are provided with a map overlaid with pins representing nearby McDonald's restaurants:
People who are blind often find it difficult to access interactive maps. However, as shown in the following screenshot the designers of the app have provided an alternative way of choosing a nearby restaurant. Here, people can choose their preferred restaurant from a list, without needing to access the map.
Resources
- Guide to the Inclusive Design Principles
- W3C Web Accessibility Initiative: Accessibility Fundamentals - Clear Layout and Design
- Meet Andre: a music producer and blind screen reader user
Next steps
For more information about the Web Content Accessibility Guidelines, read our WCAG primer or find out more about how our assessments can help you identify issues in your websites, mobile applications, design systems, and other products and services.