Blog | Conversion Crew

Make your website accessible? This is how you do it!

Written by Saar Speksnijder | 28 July 2022

Making your website accessible is not easy! If you have ever looked into it, you already know that it can be quite overwhelming. Are you unsure about what an accessible website is? This blog briefly explains what it means. When you know how important accessibility is, you would want to start optimizing as soon as possible. Below I have prepared a step-by-step plan for you, so that your website becomes a lot more accessible! 

Automatic testing

There are various tools that help you map out your pitfalls. For example, the Ax Scan and Google Lighthouse. Let the tools do their job and save the results so you can look back on them later.

A lot of information comes from these scans. Some areas for improvement will be technical, leave these improvements to your website builder. Fortunately, there are also “quick wins” that you can adjust yourself:

  • Adjust color contrasts. Make sure there is enough contrast everywhere so that everything on your site is easy to read. Check your contrast here . 
  • Adjust alt tags. Ensure that all images have appropriate alternative text.
  • Adjust headings. Make sure that headings always end with one.
  • Use descriptive links. Make sure the links describe where they lead. For example not: Click here , but: Read about us here.
  • Do not use autoplay. Make sure that no videos play automatically, that can be found annoying for screen readers. 

After implementing these points, you can test your website again and see how your website has already been improved! 

 

Keyboard testing 

Keyboard testing can be described as testing the keyboard functionalities on your website. This functionality is put into place for people who only use their keyboard to navigate the web. 

  1. Test this by clicking on tab. To navigate back use tab + shift. Check here which elements have an outline and which do not. Additionally, check that there are no places where you get stuck, such as a pop-up that you can no longer click away. That can be frustrating for the user. 
  2. Create a design for a clear outline or color change. Then ask your website builder to implement these points on your website. 

Screen reader testing 

Screen readers are important for people who cannot visually view the content. Always keep this in mind when testing! The screen reader is built in as a standard on Mac computers. There are several free screen readers available for Windows such as NVDA . 

How does this work? Start testing by pressing Command + F5 . This activates Apple's voice-over. To start using NVDA's voiceover use Control + Alt + N .

When running a test, you go through different elements of your website to check whether they are being read correctly. Pay particular attention to whether forms are read out correctly and whether it is clear what must be completed here. Below is an overview of shortcuts to make testing easier. Are you stuck somewhere? Then ask your website builder for help.

Action

Apple

NVDA

Turn off voice over 

Command + F5 (2x)

Insert + Q

Pause and resume

Control

Control

Voice over help 

Control + Command + H

Insert + 1

Click on link

Control + option + space

Enter

 

Zoom test

A zooming test is done specifically with people who zoom into their screen a lot, to make the text easier to read in mind. 

To test this, zoom in via the browser. Check if:

  • No elements overlap
  • Content is still legible
  • Whether the keyboard navigation and screen reader still work. 

After all these steps, your website should be a lot more accessible! Can't figure something out? We are happy to help you, please feel free to contact us .