News

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” Tim Berners-Lee, Director of the W3C and inventor of the Web

An accessible website is one that can be used by all its intended visitors, taking into account their differing capabilities. Inaccessible websites pose significant barriers to people with disabilities, which is approximately one in five Americans or more than 50 million individuals, according to the U.S. Census Bureau.

At MCD Partners we not only design and build websites to be accessible by all but also audit websites for compliance with the Americans with Disabilities Act (ADA), Section 508 and the Web Content Accessibility Guidelines (WCAG). While ADA and Section 508 are federal accessibility guidelines required by companies serving federal employees, WCAG was established by the World Wide Web Consortium (W3C) to serve as an international standard of web accessibility. In our accessibility audits we often notice core web accessibility mistakes. For Global Accessibility Awareness Day (GAAD) here are the five most common web accessibility mistakes we encounter that also have the bonus of being relatively easy to correct.

Font and background color combinations with low contrast can be a problem for people with low vision or color blindness. This can include older people who lose contrast sensitivity from aging and people with reading disabilities, such as dyslexia.

The current version of WCAG (WCAG 2.0) level AA requires a contrast ratio of 4.5 to 1 for normal text and 3 to 1 for large text. Large text is defined as 14 point (typically 18.66 pixels) and bold or larger.

Most often, providing insufficient color contrast is simply an oversight. Yet, it can also result from the belief that visually accessible websites cannot be uniquely branded. That doesn’t have to be the case. Many well-known companies have accessible sites that clearly present their brand identity; for example, USA.gov and Apple.com—although Apple's site does have some minor color contrast issues.

Keep in mind, text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, that are part of a picture that contains significant other visual content, as well as, text that is part of a logo or brand name do not need to comply with the contrast requirements.

By default, browsers display a visible outline, such as a blue or dotted line, around a content element that currently has keyboard focus. You can see this when you use the tab key while on a web page. Not providing this visual indication of keyboard focus is the second most common web accessibility mistake.

Keyboard accessibility is one of the most important aspects of web accessibility. Many users with motor disabilities, blind users and screen magnification users rely on a keyboard. Accessible websites enable people to access all content and functionality (e.g., links, forms, media controls) through a keyboard. Visual indication informs keyboard users of their location on the page.

In many cases, website creators disable the default indicator for design aesthetic. This is to be avoided. Keyboard focus should be visible and follow a logical order through the page.

For people that are blind or with low vision the day may soon come when screen readers—software that converts text to speech—will be able to ‘view’ an image or photo and speak a description of it. Until that day arrives, a description of each image must be provided for the screen reader. We repeatedly audit websites where images don’t have descriptions or they are inadequate.

An image description can be added via alternative text (‘alt text’) on the IMG ALT attribute, provided in text adjacent to the image or within the page containing the image.

For a site to be accessible every image must have an ALT attribute. When determining the ALT attribute for an image, context is everything. The description for one image may differ based upon the context and location of the image. To determine an image’s description decide if it has a function and if it presents content. Usually, an image has a function when it links or serves as a button. Determining if the image presents content can be difficult. If the content is presented within text in the surrounding context of the image, then a description is not required and the attribute can be populated as blank (i.e., alt="").

Website users who rely on assistive technology, such as screen readers, often quickly navigate from link to link, skipping the text in between. Tabbing from link to link is a way of skimming web content, especially if users are trying to find a particular section of a website. Meaningful links help users choose which links to follow without requiring complicated strategies to understand the page.

Many times, we find link text does not provide enough detail to allow for an understanding of the link’s purpose out of context. In addition to being meaningful out of context, link text should be unique within a page and help users know something about the destination when they click it. For example, link texts such as “Click here” or “Read more” are ambiguous.

If you are concerned with a website’s visual design and require repeated non-unique links, additional link text can be added via attributes that can be read specifically by screen readers. Adding aria-label, aria-describedby or aria-labelledby attributes are acceptable to make these links accessible.

People with visual impairments often increase the size of text in order to read and understand it fully without the use of assistive technology, such as a screen reader. In many of our audits, we find that when site text is resized to 200%, twice the height and width, there is either a loss of important site information or the content overlaps, which makes it difficult to read.

The text should reflow to fit the available viewing area without overlap. As all modern browsers allow for resizing text, a website based on good HTML and CSS should comply. It should be noted that most modern browsers can zoom a page in addition to resizing text.

When you incorporate web accessibility as a component of your site development cycle, starting with correcting the most common accessibility problems, you will make a real impact in many people’s lives.

To learn more about MCD’s accessibility capabilities, contact us today.