You’ve built your website, and the site is looking pretty good. It may be accessible to those users that can use the mouse and have excellent vision. Have you taken into consideration those that do not have those abilities whilst you were creating the site?

Did you know that in a 2024 study by WebAIM, of the top one million homepages, over 56 million distinct accessibility errors were detected? That’s an average of 56.8 errors per page. This highlights the growing need for accessible web design. While a website might look great and be easy to use with a mouse, it’s important to consider those who have different needs or use assistive technologies.

Our top 7 tips for accessible coding.

Accessible coding is key to ensuring your website can be used by everyone. Here are some fundamental practices to keep in mind when creating or updating your site:

  1. Start with semantic HTML. Semantic HTML uses specific tags to describe the meaning and role of content, for example <img>, <table> and <article> . It’s always a good idea to use semantic HTML from the start. This helps assistive technologies, like screen readers, understand the structure of your page and identify elements such as links, buttons, and headings. It also helps keyboard users, as native HTML tags like have built-in keyboard accessibility.
  2. Use ARIA when needed. ARIA, which stands for Accessible Rich Internet Applications, is a tool that helps make websites more accessible for people who use assistive technologies, like screen readers. Think of it as a translator for complex website elements. If you have something on your site, like a custom button built with JavaScript, that a screen reader can’t understand, you can use ARIA roles and attributes to explain what that element is and what it does. The most important thing to remember is this: don’t use ARIA if you don’t need to. It’s always better to use standard HTML elements like <button> or <nav> because they have built-in accessibility. Using ARIA incorrectly can sometimes break the user experience and actually make your website less accessible than if you hadn’t used it at all.
  3. Ensure text content is coded correctly. To make sure assistive technologies can understand your website’s content, you need to use the correct code for its structure. Instead of simply making text bold or italic to emphasise it, you should use the proper HTML tags. Using <em> for emphasis and <strong> for strong importance is the best way to highlight text. While some screen readers can tell if text is bold or italic, not all of them can, so it’s better to use these specific tags.
  4. Structure content with headings. Headings are crucial for people who use screen readers because they provide a sense of the page’s structure. To create a heading, you should always use the correct HTML tags, from <h1> for the main heading down to <h6> for the lowest level. It’s also important to use these headings in the correct order without skipping any levels, for example, don’t follow an <h1>with an <h3>.
  5. Write descriptive links. Make the text of a link clear and descriptive so users know where it will take them before they click. This helps people decide if they want to visit that page. You should avoid using the actual web address (URL) as the link text.
  6. Alt Text for images. All images on a website should have alternative text, known as “alt text,” to describe the image. If an image is a link, the alt text should describe where the link goes. If an image is just for decoration and doesn’t add any information, you can hide it from assistive technologies by using an empty alt text, like alt=””, and making sure it doesn’t have a title or an ARIA label.
  7. Use tables correctly. Layout tables are used for arranging content on a page. If you use a table for this purpose, you should code it with role=”presentation”. This tells a screen reader to ignore the table’s structure, so it doesn’t get confused. Data tables are used to show relationships between different pieces of information. These tables should use the correct code for their cells, such as <tr>, <td>, and <th>. For more complex data tables with multiple headers, specific markup is needed to properly connect the data and header cells.

These simple coding changes can make a significant difference to how accessible a website is for people with impairments or those who rely on assistive technologies.

How accessible is your website? Find out with our free snapshot! Visit our website or contact Accessibility-Services@Shaw-Trust.org.uk.