Understanding Accessibility, A Guideline For Web Designers

Accessibility is a concept which every web designer interprets differently. That is why we see a lot of different web designs when it comes to accessibility. World Wide Web Consortium (W3C) defines it in its Web Content Accessibility Guidelines (WCAG 2.0) as “a process of making websites more accessible to people with disabilities.” In this post we will try to explain how this simple definition stretches out to the content of a website and how each designer sees it differently. Moreover, we will discuss a couple of things that may help web designers to get a clear picture of the concept.

Why it is important

The web is basically designed to work for everyone. Regardless of their hardware, software, language, culture, location, or physical or mental ability. If a website is up to this task, we say it is accessible to people with a diverse range of hearing, movement, sight and cognitive abilities. It reduces the impact of physical disabilities on the web, because it removes barriers to communication and interaction that many people face in the physical world.

Let’s dig in to observe some good practices to create an accessible web design:

Start labelling your images and links

It is one of the best practices to label each image and link present in your web design. A visually impaired user may not be able to get any information from an unlabeled image and also may not encounter links in context. Ultimately, it is a user friendly practice for every type of users.

Images

A picture is worth a thousand words, is a famous saying. It means a lot on the web with some additional qualities. There are a lot of attributes associated with the image element that give a lot of necessary information to visually impaired users.

For example, consider the ‘alt’ attribute, which provides alternative text where the images are displayed. For instance: if the website for “Disney” uses an image for their logo at the top of every web page, a screen reader (a tool used by visually impaired users to browse websites) will read “image” if you left alt attribute empty. However, if you are a designer who consider accessibility a good design practice you will set your alt attribute to alt=”Disney” in the image tag. Thus, enabling the screen reader to read “Image: Disney.”

Add more information to your links

There are several ways a screen reader user faces and handle links in a website. First, there is the context of the page, then there is a list of all links on the page, and last but not the least via tabbing through the links and skipping the content between them.

For example, a design which does not consider accessibility, will represent the links to screen readers as “Click Here” and “More”. It would be out of context and would mean very little to the visually impaired readers. However, if you add meaning text to the links like “Click here to enter the sweepstakes” or “Learn more about AppleCare” it would be more accessible to the visually impaired users.

You can use the title attribute to add more information to a link. The title attribute can give a better description of where a link will lead the users. It is important to note that not all screen readers automatically read title attributes, so it is necessary to use both methods together to make links more useful.

Use the right tag for the right job

There is a common practice among designers to use a specific tag because it helps to display content the way they want. For example, a designer may use H1 (a level-1 heading tag in html) because it fits in the layout and design of the website, regardless of the text’s position in the overall content. It is very important to use the tags for their specific purpose. When you want a paragraph, use the P tag. When you want a bulleted list, use the UL tag. If you want the first paragraph of an article to be in large, bold type, use CSS to style it. Don’t use a heading tag just because it makes the text look the way you want it to. Screen readers notifies users to the types of elements they encounter. When a screen reader comes across an H1 tag it will announce: “Heading Level 1.” Elements like tables and forms require special tags in order for screen readers to interpret them correctly.

Wrap Up

There is more to accessibility than a guideline may suggest. Accessibility is not a fixed concept, yet these guidelines are used to help designers to create web designs with better accessibility. We have discussed a few things that can help designers to get a better grip on the concept. Feel free to share your understanding of the topic with us in the comments section below.