4 ' Easy Wins' That Will Make Your Website More Accessible

When talking to business owners about digital accessibility, they always want to start with the 'easy wins' to make their own website more accessible. So here are four things you can do to a webpage to make it more accessible for everyone.

Use image descriptions appropriately and consistently

Everyone loves to add photos to a webpage, sometimes to further build on an idea and other times for decoration to make the page more visually appealing. Knowing when and how to describe your images can change a user experience from poor to outstanding.

If an image adds value to the page content, it should be described through alt text, captions, and long descriptions. Keep in mind that alt text should be brief and informative while long descriptions and captions provide the supporting details as to how the image adds value.

If the image does not add value, it should not be ignored by the designer, it should be given a null attribute to indicate to accessibility APIS that the image is not important. The easiest way to accomplish this is to put open and closed quotation marks in the alt text field.

When adding alt text or descriptions to images that add value, be sure to explain the image in relation to the content, sometimes a literal description is not very useful.

Structure pages in a way that makes sense to everyone

Structuring your page properly can dramatically improve its accessibility for all users, especially users with visual and cognitive disabilities. A page that has a clear title, good heading structure, and proper labels provide an experience that is easy to follow and makes the goal of the page easy to complete.

When it comes to titling a page, keeping things short and simple while providing an overarching topic to the content should be the goal. A quick example would be for an about page, instead of titling the page about, consider putting the company/person's name after the word “about”. This explains right from the beginning who the page is talking about.

When it comes to heading structure, a page should have a single heading level 1 (H1) which should be very similar to the page title. Heading levels 2-6 should be used to break the main topic into smaller sections. For example, say we had a page talking about the solar system. Solar System would be our heading 1. A heading 2 would be a specific planet such as Earth. If we dive into smaller topics with the heading 2, we would use heading 3 followed by a smaller section with a heading 4.

Label interactive elements in a clear and concise way

Interactive elements like links, buttons, and form fields need to have a clear label. For links and buttons, it is a good rule of thumb to make the label the same as the page title or heading 1 of the destination.

Form fields are a bit more tricky as they could be collecting a wide range of information. The rule of thumb here is to provide the user with all of the needed information to fill it out correctly the first time. If you are collecting a phone number, include the format the phone should be entered in and any other conditions that have been set.

Check for colour contrast and resizing

Having sufficient colour contrast is often overlooked and assumed that if the designer can read it, it must work for everyone. However, users with low vision or colour blindness would disagree with this assumption. Making text easy to read from the background is one of the most important things to consider when looking at colour contrast.

The WCAG guidelines suggest a 4.5:1 ratio for small text below 18 point font and a 3:1 ratio for fonts larger than 18 points. User interface components like links and buttons should follow the same suggestion as large text. This is not to imply that black text on a white background is the only option, it is a matter of testing your colour combinations to see what meets or exceeds the ratios set.

Colour combinations can be evaluated using various different tools. My preference is the Colour Contrast Checker by WebAIM.

What will you incorporate?

At the end of the day, whether you are making changes to improve accessibility, sending this article to your web team, or bringing in a third party provider, accessibility is essential to meeting the needs of your customers, especially those with disabilities.

Accessibility is not expensive, it doesn’t take a ton of time, and it certainly is not something that should get less priority than other components of the project. Accessibility should be considered and incorporated from the first phase of the project through completion and managed moving forward to ensure it remains functional and usable.

When accessibility is done properly (implemented by internal teams, tested by real assistive e-tech users, and managed over time) it does not add time, financial commitment, or energy to the scope of any project.

If you are someone who doesn’t make the edits yourself, send them this article. If you do edit your own website and are having a hard time implementing some of these changes, call an accessibility specialist for support. It is always better to get assistance than to guess you did it right. It is even better if you can get feedback from users with disabilities who are using assistive technologies. They can tell you first hand if your changes have helped improve the experience.