Accessibility Basics: Designing for the Visually Impaired (2023)

accessibility for all

Today's web should be accessible to everyone, regardless of a person's ability or disability.

"Accessibility ensures that people with disabilities can access the same information from a system as everyone else and also receive the same benefits"

As described in aprevious article, there is a wide range of deficiencies from five notable areas:

• auditory
• Cognitive
• Neurological
• Physically
• Red
• Visual

This guide focuses on designing for visual impairments, which can be quite common and range from mild to severe. In fact,Cathy O´Conner(designer and author of Smashing Magazine) estimated that around 200,000 of the two million online shoppers would benefit from more visible designs.

That's a fair estimate, especially considering how everyone can develop visual impairments as they age.

types of visual impairment

Common visual impairments may include:

color blindness

Color blindness involves difficulty perceiving or distinguishing colors and sensitivity to color brightness. Approximately 4.5% of the total world population is affected.

Bad vision

Visual impairment can include partial vision in one or both eyes, low vision (blurred vision), tunnel vision, loss of central vision, and blurred vision. It affects 246 million people or about 4% of the world's population.

blindness

Blindness is the significant loss of vision in both eyes of a person. It affectsabout 39 million people, or 0.6% of people.

People perceive the web differently

The different nature of these impairments can mean that people with different visual abilities perceive websites very differently. As discussed above, many people have vision problems, so we need to make sure they can access and interpret all features equally.

View of the Tumblr home page for the visually impaired

As an example, consider the Tumblr home page, where the page background is set to a large image (created by its users):

Depending on the type and degree of visual impairment of a person, the place can be perceived in different ways (here simulated with thesin cafechrome extension):

The examples above show different types of visual impairments and also some examples of color blindness. Resume:

• Tunnel vision (see image 1) is a type of blocked peripheral vision that reduces the amount of visible items on the screen. The user only sees the core elements.
• Loss of visual acuity or blurred vision (see image 3) makes it difficult to read the text, making it blurry for the user.
• Color blindness (see image 5) reduces the number of colors a user can see, making it more likely that items will look similar.

Fluctuations in perception affect usability

Due to these perception differences, key elements of a given website may become less accessible (and therefore less usable), depending on the user's level of visual impairment.

inaccessible resources

For example, vision loss (blurred vision) can cause the search bar on the Tumblr website to almost fade into the background. The same applies to the login button:

Compare the search bar in the image on the left with the one on the right; on the right, the search bar has disappeared into the background and is barely visible.

colors lose importance

Far from the Tumblr example, consider a person with red/green color blindness (protanopia). On a Google search results page, color is used to representcurrent results pageseems less important to a colorblind user, potentially making it a bit less meaningful:

The contrast of red and yellow is less obvious to a color blind user and more like a light green against a dark green.

content presentation

The two examples above show how different perceptions can affect the usability of core features. Fortunately, people with such visual disabilities can change the way content is presented, making the elements more accessible and usable for them. This can be done by:

• 🔍 Increase text size
• 🎨 Adjust color contrasts
• 👁‍🗨 Use of screen readers (blindness)
• 🎞 Subtitles or subtitles on videos
• 📝 Alternative legend to describe the images

These adjustments can be made through the default settings in a web browser. In addition, advanced changes have been made available through browser accessibility enhancements. For example, Google has developed several accessibility plugins for visually impaired users:

• ExtensiónAccesibilidad developer tools– Add an accessibility checker and accessibility sidebar panel to the Elements tab of your Chrome dev tools.
• High contrast- Browse the web with your choice of multiple, high-contrast color filters designed to make text easier to read.
• cromo vox- Brings the speed, versatility, and security of Chrome to vision-impaired users.

For example, High Contrast allows users to vary the contrast of a website, making the text more readable. Here it is in action on the Spotify home page:

As seen above, the browser extension can:

• increase contrast
• Set to grayscale
• Inverted colors
• invert grayscale
• wear yellow on black

With all the different visual impairments,miWith so many tools for changing the way content is presented, it's clear that we can't always control how web pages are displayed.operceived by people.

As content can appear in many ways, we need to take into account how our content is structured,autoat the coding level. This is because it becomes important to maintain a clear hierarchy of information, as people may use different media to present this information. Now let's take a look at some best practices to ensure our content is always accessible no matter what it looks like:

recommended course of action

Here's a list of six best practices you can use to improve your vision-impaired designs.

1. Separate content and structure

It is important to ensure that web content is independent of its underlying structure. When changes to the presentation may include the size of elements (for example, text and images), the spacing between elements, or whether the elements are visible (blind users may not see the images), it becomes clear that the developer is not doing this. how the content is displayed at any given time.

As specified by the W3C, for various navigation methods to work (such as using screen readers or keyboard navigation), developers must ensure that their code provides presentation-independent structure:

"Developers must ensure that the presentation of web content is independent of the underlying structure" -W3C

A strong structure also provides relevant semantic tags such as headings, paragraphs, and list item tags to ensure that a screen reader, for example, can interpret the information and present it in alternative ways:

2. Offer text alternatives

As explained above, certain structural elements, especially images, may not be visible to some users. For example, blind people who use assistive technology (such as screen readers) to interpret websites hear theOptions textattributed to image reading instead of actualverthe picture. If this text is missing or not descriptive enough, you may not perceive the information as intended.

Here's an example from the University of Leicester that displays accurate alt text, giving the user more context:

habilidade.netProvide five golden rules for its use.alternativeUse tags (text alternatives) correctly to make a site more accessible:

1. One<Photo>must have aalt=""Attribute
2. Describe the information, not the image.
3. Live images require descriptive alt text
4. Images containing information require descriptive alt text
5. Decorative images must have empty alt text

3. Avoid using colors to convey information

Color is not the best way to convey information, as the following example shows. Below that, incorrectly filled out form fields are highlighted with a red border. Consequently, if a user is color blind, they will not be able to see this screen, making it difficult to understand which fields have errors:

Using icons and labels to indicate which fields are invalid better conveys the information to a color blind user:

This example shows that color should not only be used to convey information, but only to complement existing information.

4. Use textures instead of colors

Color blind users may also have difficulty distinguishing between certain colors. For example, green, red, and brown can look very similar:

Therefore, when using colors in tables and charts, it can be useful to apply standardized overlays to spot colors to provide users with a clearer way to distinguish between elements. This not only helps colorblind people, but makes it easier for everyone. Consider Trello tags as an example of applying textures:

5. Try Monochromatic Color Schemes

Monochromatic color schemes use only single-tone colors. Here is an example created withpaleton.com:

By only using shades of a single shade, any additional meaning that may have been introduced by different shades is removed.

Contrast and tonal variations can be used to give meaning or importance to elements and draw the user's attention to different areas. Meaning here can also be more easily conveyed to color-blind users, as shown in the following example of a monochrome website.

big sound buzzis a website that uses a monochrome color scheme:

A color blind user sees the same tones and contrasts, but in a different tone:

6. Use contrasting colors for better readability

Contrast is the difference between the lightest color (for example, the background) and the darkest color (for example, the text). For example, consider this contrast sensitivity chart:

The top left corner (letter A) has the highest contrast, and as we move to the right, the contrast decreases as the difference in brightness between the background and the foreground decreases. Eventually, depending on a person's sensitivity to contrast, he may no longer be able to tell the text from the background.

Therefore, to ensure that the text is readable by the visually impaired, the WCAG has issued a Contrast Ratio Guideline. They suggest that there should be at least a 4.5:1 contrast ratio between a text and its background. This ratio drops to 3:1 for larger text (24px or 29px bold).

An example of this relationship is shown in the following examples.accesibilidad.psu.edu:

Inclusive design makes the product better for everyone

In general, it almost always makes the final product better for everyone else by incorporating the most extreme shortcomings first.

For example, the design for people withno visioncan lay a great foundation for those whoI couldto see. Because it allows us to ensure that the structure of the site is independent of the way it is presented and can be interpreted by assistive technologies.as well aslike people. If the presentation changes for other reasons, the structure of the site remains accessible.

Also, making sure that color is only used to emphasize what is already visible is another big step in building a website that is highly accessible and therefore usable. Therefore, a useful design process can be to design initial iterations of a product in grayscale, and then apply color at the end.

Further reading and resources

You don't have to reinvent the wheel when creating accessible designs; There are many design systems and guidelines that can help you.

• Google Material Design Accessibility Guidelines
• ColorSafe.co: create accessible color palettes
• NoCoffee Extension for Chrome: to simulate visual impairment in the browser

• CSS Tips to Improve Color and Contrast AccessibilityAnna MonusFeb 4, 2020
• Colorblind Design With Chrome DevTools (In Just 4 Clicks)Anna MonusOctober 5, 2020
• Top 5 Figma Plugins for Color ManagementKezz Bracey30. September 2019
• How to use the contrast checker in Chrome DevToolsKezz Bracey22. October 2018