4 Tips for Web Accessibility

Driving a car, walking a flight of stairs, or watching a movie are activities people without a disability do without a second thought. These activities can present barriers to people living with a disability but can be overcome when steps are taken to provide accessibility. Similarly, the worldwide web needs to provide information that is accessible to all users, regardless of their ability to see, read, hear, or interact with a machine.

Web accessibility is a practice focused on ensuring information from a website is accessible by all users. A barrier to information can be caused by a disability, physical or situational, or it may be socio-economic meaning that a user has limited bandwidth.

Web accessibility should be considered by developers throughout the planning, design, and implementation of an application because everyone deserves to have access to information that is largely held on the worldwide web.

In this post I’ll cover four ways to make a website more accessible. To illustrate these four tips I'll build a form to register dogs in a neighborhood. This form will incorporate each tip to create a website available for all users.

1. Clear Layout

Helpful for: screen readers

People with visual ability can gain context by looking at a website and determining the order in which information is meant to be delivered. For users who have a visual disability or no sight use screen readers to interpret information. Screen readers describe the text and user-interface options to a user.

If the DOM elements are not placed in an order that matches visual components, it can create a barrier for the user. In addition to the order, labels and headers should properly describe the content.

Here we have our form for the neighborhood dog registry website.

The HTML looks like this

The text starts at the top with an H1 tag that indicates a title followed by an h2 tag. Every input has a label describing the input and an input tag describing what type of input is expected.

2. Text Alternative

Helpful for: users with partial sight, color blindness, older users

Interacting with a website involves text, images, buttons, and inputs. These interactions may use features such as color to indicate an action or missing information. For example if the input is required, the input may be highlighted red. For a user with partial sight or color blindness, this distinction might not be obvious. This problem can be solved with a text alternative.

Adding a text indicator such as the keyword ‘required’ or an icon can let users know the input is required. Images should also incorporate text alternatives to describe the image to users.

Users without a vision disability may be able to garner that the red box means it's required. For others, it's important that we have a text alternative.

In our HTML we use the keyword 'required' which gives us a pop-up that states the input is required as well as prevents the form from being submitted. A screen reader will identify the input as required and translate to the user.

3. Non-Text Color Contrast

Helpful for: users with partial sight, older users, color blindness

Brands put a lot of energy into making sure their product or service is unique and the color is a large part of marketing. If color contrast is overlooked in this process, a website can leave users with a visual disability unable to distinguish content on the page.

The contrast ratio is the contrast in brightness between two colors. The minimum contrast a website should use is 4.5:1. For reference, white text on a white background has a ratio of 1:1. You can use a contrast checker like the one provided by webaim.com. Exceptions to the best practice for color contrast are large text (over 18pt), logotypes, or incidental text that isn't needed for context.

A color contrast checker will tell us what ratio our color contrast is. Now we can apply this color to our button and h2 header.

4. Keyboard Options

Helpful for: people with no vision, speech input software, scanning software, mobility impairments

Without planning, a website can be created to only interact with mouse events meaning a user has to click on buttons to perform actions. Clicking, selecting, and moving items on the screen should be operable through a keyboard or an alternate keyboard allowing for hands-free interaction. A user should also be able to traverse DOM elements by using the up and down arrows on a keyboard.

Using jQuery we can use both a click function and a keypress function to allow a user to submit a form by clicking the button or pressing enter.

When we click the button or press enter, we get the corresponding message in the console.

Building an Accessible Website

Our end form now has

• Clear structure, with descriptive labels and headings
• Inputs with text alternatives stating information is required
• Color contrast with 4:5:1 ratio
• The ability to press enter to submit the form

This post only covered four ways that a website can be more accessible meaning there are numerous ways to make sure a website is created with all users in mind. It can be easy to forget to incorporate these practices when you are not living with a disability but the world wide web should not create any barriers to knowledge.

If you have any suggestions on how to improve accessibility on a website, drop them in the comments!

Resources Used
Web accessibility - wikipedia.org
Contrast Checker - webaim.org
W3.org