Considering Accessibility in Web Design: What You Can Do To Make Your Design Accessible

Since 1991, when the first website was introduced, websites have evolved from being purely content driven to becoming increasingly focused on their visual experience. While there is no argument that having a clean, cool, professional-looking, website is important it isn’t everything, especially when it comes to Accessibility.

There is a popular misconception that implementing accessible design into your site means having to sacrifice its aesthetics. This couldn’t be further from the truth. In fact, many of the design applications related to Accessibility are not visible on screen. In a sense, one could argue that incorporating accessible design practices could improve your existing design, not just for users with disabilities, but for users overall. In spite of this, it is apparent when looking at many websites today, that Accessibility was not included as part of the initial design process.

With so much information available on the subject, it is understandable that incorporating accessible elements into design can feel overwhelming.  Nevertheless, there are a few easy places to start. Below are some of the most common design issues that effect a website’s Accessibility:

1. Color contrast is insufficient-

Not only are some color combinations just downright hideous, they are not good for Accessibility either. For website content to be visible to all users it must have a color contrast ratio between the foreground and background of 4.5:1 according to WCAG 2.0 standards. Without this, users with vision or cognitive impairments may not be able to perceive content correctly. Improving this can also help develop the understanding that some color combinations, no matter how good they visually appear, should just never be user together.

2. Color alone is used to convey information to the user-

While using color to convey information to users is practical, it should not be used as the sole method to indicate an action or change in content. Whether it is required text shown in red, correct form entries shown in green, or hyper-links indicated in blue, using color to provide functional context needs to have additional visual cues for users with visual or cognitive impairments. These visual cues could come in the form of symbols or additional text such as ‘Required field’ text with asterisks, check mark symbols for correctly submitted information, or lines below hyper-links.

3. Headings levels are not used for heading text-

Applying heading levels to your website content helps communicate the organization of your page structure. Assistive technology users, such as those using screen reader, will use heading levels to quickly navigate the page in search of relevant topics. If heading levels are not applied, or applied incorrectly, this could affect a user’s ability to find the information they are looking for causing confusion and frustration, even leading a user to leave the page. This issue not only effects non-sighted users, but also those who use assistive technologies as a supplemental form of understanding a site’s content.

4. Unclear or inconsistent navigation options-

Let’s say you are driving and suddenly the road comes to an end with no indication. You decide to turn back, although you know this route is taking you in the opposite direction. On your way back, you look for an alternate route that could lead you to your destination, but in searching you are not able to do so. This example is very similar to websites that do not have clear and consistent navigation options. Users with disabilities often rely on consistent patterns within a website’s content to predict its behavior. This applies to elements such as links, buttons, or forms, to name a few. Not only does this apply for Accessibility reasons, but also helps ensure your website design is harmonious across all pages.

5. Alternative text for images and media are not applied-

Providing alternative text for images and media has several benefits. Alternative text can be added for elements such as images, graphics, and icons to offer additional context to assistive technology users. This means screen readers can relay this information to help users further understand a website’s content and functionality. Alongside this, media alternatives can be added to elements such as videos to visually substitute the need for sound. Having transcripts of audio or providing visible links to audio described versions of videos, not only benefits those with auditory impairments but can also improve a website’s overall usability.  This design feature makes videos easier to watch discretely, say for instance on a crowded subway.

As the old saying goes, implementing accessible design into your site is better done late than never. By keeping Accessibility in mind when designing, you will ensure your website is inclusive and available to all users while improving your overall design. For more information on Accessibility, and additional design criteria, please visit https://www.w3.org/WAI/design-develop/.