Getting Started

Visual Accessibility

5 min read
Share

The primary sense most websites are designed around is, almost exclusively, vision. Issues arise when it is assumed that every visitor sees in the same way—at full color, in full resolution, with full contrast—creating barriers for a significant share of active or potential users.

What visual accessibility is

Vision, and visual disabilities, are not binary. In reality, a wide spectrum of vision exists—including people with no vision, partial vision, differences in color perception, and age-related changes. The variations in vision are so common that most people with visual conditions don’t even identify as disabled, but they may still rely on tools or device settings to aid them.

Ultimately, visual accessibility means ensuring that your website is able to be perceived by people no matter their vision. It’s important to be aware of the accessibility aids that people employ to correct their vision which may include corrective glasses or contact lenses, page magnification, and screen readers.

Who is affected by visual accessibility

Designing for visual accessibility benefits anyone whose vision is not perfect under ideal conditions—which will apply to most people at some point in their life. The CDC reports that 4.2 million United States adults aged 40 or over have uncorrectable vision impairment, an amount expected to double by 2050.

Blindness

As defined by the Cleveland Clinic, blindness is the inability to see or a lack of vision. While cases of complete blindness—the inability to see or detect any light—are very rare, approximately 1 million people within the US are considered legally blind.

These individuals often rely on screen readers as a way to access and interact with websites. For these users, a website’s visual design (or user interface) is mostly irrelevant—their experience is centered around the underlying content structure and whether the website code is structured to convey critical context to the screen reader. Common accessibility barriers for screen reader users include:

  • Images with no alt text.
  • Unlabeled buttons.
  • Illogical reading order.
  • Inaccessible PDFs.

Low vision

Low vision, or partial vision, refers to any other loss of vision that cannot be fully corrected. Low vision is extremely common and accounts for the largest segment of visual disabilities. It is not uncommon for individuals with low vision to rely on assistive technology depending on their individual needs and level of visual acuity—these tools may include screen magnification, increased text size, and high contrast modes. Common accessibility barriers for low vision users include:

  • Small text that does not resize based on browser settings.
  • Layouts that can’t be zoomed, or that break the layout.
  • Low contrast between text and background colors.

Color blindness

An incredibly common condition, color blindness affects roughly 1 in 12 men and 1 in 200 women. While color blindness can present in a number of ways, it most commonly affect a person’s ability to distinguish reds and greens. Common accessibility barriers for users with color blindness include:

  • Red error and green success messages that are only signified via color.
  • Charts that use color as the only way to separate or distinguish data.

Vision rarely stays consistent throughout a person’s life. In addition to generally worsening low vision, age introduces additional visual conditions that accessibility can improve—contrast sensitivities, focus, and color differentiation can all decline with age. Aging users often struggle with low contrast, small text, and cluttered layouts. The same considerations that assist users with blindness, low vision, and color blindness will also benefit aging users.

Light sensitivity and visual processing conditions

Some users have conditions that make them susceptible too, or have symptoms triggered by, factors like high brightness, flashing content, or certain color combinations. Conditions like migraines, photophobia, and other neurological conditions can affect these user’s ability to process and tolerate visual content. In these cases, common barriers to accessibility include:

  • Auto-playing video
  • Flashing animations
  • High-contrast, visually aggressive, color combinations

Common accessibility issues

1. Poor color contrast

Color contrast issues have one of the highest failure rates on small business websites—but are also one of the easiest areas to resolve. To a certain extent low contrast can negatively affect all users, but it is especially impactful for older adults, and users with low vision or color blindness. Make sure to check that the contrast between text color (foreground) and background color is great enough to remain readable for users with mild to major visual disabilities.

2. Missing alt-text

Alt-text is the written description of an image within a website—required for both SEO and accessibility purposes. Ignoring alt-text creates an information gap for screen reader users; any visual asset or meaningful image becomes meaningless.

3. Embedding text in images

We see this often in things like promotional banners and some web graphics; making text a physical part of an image should be strongly avoided.

Not only is it bad for your SEO, embedding text into images makes it impossible for browsers to resize or recolor it based on a user’s accessibility settings, and hides it from being read by screen readers.

4. Fixed font sizes

Many users have settings applied to their device or browser that automatically increase the size of text displayed on websites across the internet. When website developers define font styles in a way that prevent them from being increased by a browser it can prevent users from being able to read and interact with content.

5. Non-responsive zoom

When a user has magnification or increased font-size settings applied it’s important that the website adapts responsively without content overlapping or falling out of view. When a site does not respond correctly users are forced to scroll left or right to see information, and in instances where horizontal scrolling is disabled they may be blocked from using the website at all.

Situational examples of visual accessibility

While vision and age-related conditions are the constant and consistent ways users are impacted by visual accessibility, the benefits of supporting these capabilities improves user experience across the board. Many people, regardless of their level of vision can befit from the accessibility considerations. Some examples of situations that benefit from visual accessibility include the following:

  • Using devices in bright sunlight can create temporary contrast and visibility issues for any user.
  • Individuals with fully corrected vision may need to rely on device settings like magnification or contrast if their corrective lenses are lost or damaged.
  • Temporary eye conditions or procedures may impact an individuals ability to focus their vision or increase their contrast sensitivity.

Why visual accessibility matters for small businesses

Visual accessibility issues are some of the most straightforward problems to identify and address. They are also some of the most commonly identified and visible issues, and are most frequently cited in complaints and audits.

If you have a dedicated website designer or developer they should be evaluating planned changes and guiding you on the best practices of visual accessibility. If you do not have a dedicated website designer or developer, these issues are typically the easiest ones to evaluate and fix yourself—regardless of technical capabilities or the website builder used. Many changes, such as color contrast and alt-text can be addressed directly within a website’s CMS. Understanding how these issues may affect your users will help you identify problems and prioritize remediation before they become a bigger issue.