Creating Accessible Websites, Part 1:For Web Designers

Are you developing your website for many types of users, or are you primarily developing for people who access websites in much the same way as you do? Do you know how dyslexic users, people who are colorblind, people with impairments and others navigate the web? Users can have disabilities, reading difficulties, visual impairments, color blindness, or age related issues or may be using different platforms. In all of these instances, this can result in accessibility problems. As a web designer, several accessibility criteria are especially important to help you ensure as many users as possible can use your web application. In three separate blog posts, website accessibility will be covered from role-based standpoints: Web designers, web developers, and web editors, respectively. This first contribution is meant for web designers, and provides concrete tips on how to create an accessible web design.

Consistent design

Some users may not be accustomed to using the Internet at all, and other users may have a disability that makes it difficult to get an overview of a webpage or navigate a website. Therefore, it's important that the navigation is consistent across all your web pages, and global elements like menus and help facilities are in the same order across the site. It's also important that elements with identical functions (such as icons and references) are ordered in the same way on every page (Success criteria 3.2.3 and Success criteria 3.2.4).

Navigation

In order to make it easy for users to locate the information they need from your web pages it's important to have more than one way of finding specific content. A user can find content on a page by navigating through the intended page hierarchy, but it should also be possible to find the content in alternative ways, such as through a sitemap, an index, or a search function (Success criteria 2.4.5).

Headings

When designing the look, feel, and architecture of a website, it's important to keep in mind that some users cannot get a visual overview of a web page. They have to do this structurally. Make sure pages are divided into logical sections with each given a descriptive heading (coded as an <h> tag), so that assistive technologies can render them as section headings (Success criteria 1.3.1 and Success criteria 2.4.6).

Use of color

In order to make sure that all users are aware that an element on a web page has a certain function or status, it is important not to give information solely by the use of color. For users who cannot see colors, that information can be lost. An example of conveying information through colors could be to show links within a text by giving links a different color than the text. Be sure to supplement this with a non-color specific way of indicating the links (such as underline, a symbol etc.) (Success criteria 1.4.1).

In order for visually impaired users to be able to read all the text on web pages it is important that the color of the text and the color of the background are in sufficient contrast to each other. This can be ensured by conforming to the requirement of keeping a

contrast ratio of 4.5:1 for regular text and 3:1 for large text. There are a number of tools available to quickly assist in measuring the contrast ratios on your web pages (Success criteria 1.4.3).

Links

When an element on a web page is to be a link or something clickable, it's important that the element text/description makes sense when read out of context. Part of this is ensured by the technical implementation but the design should consider using descriptive link texts also. Link texts such as: 'Read more,' 'here,' 'Click here,' and 'publication' are examples of poor link text if read out of their context (Success criteria 2.4.4).

Interactive elements

When designing for interactive elements, i.e. content that the user can interact with, there should always be a clear explanation of what is to be entered/chosen/checked. The design should make sure that when text fields, drop downs, check boxes and radio buttons are used, they have text connected to them describing their purpose (Success criterion 2.4.6 and Success criterion 3.3.2).

Want more information on how to get started with web accessibility? Download our

web accessibility checklist.