Skip to main content
website accessibility

Making Your Website More Accessible: Common Mistakes To Avoid

Brian Whelan's avatarBrian Whelan31st Oct 2024
AccessibilityUser ExperienceWeb Development
Inclusive digital spaces are not just a legal requirement, they’re a necessity for all users.

The European Accessibility Act has now been signed into law and with plans to start enforcing it from June 2025 it’s paramount for any content creators to make sure the posts they write are accessible to all users.

The EAA is a directive aimed at ensuring that products and services across the EU are accessible to all individuals, including those with disabilities. It covers a wide range of areas, from digital services like websites and mobile applications to everyday products such as ATMs and ticketing machines.

Its goal is to remove barriers and ensure equal access for everyone in the digital world. With the enforcement of the Act set to begin in June 2025, businesses and content creators alike are urged to prioritise accessibility.

Please trust us when we say that this will come around faster than you think

While your developer can make sure the main structure of your site is accessible, most will be built using a CMS and posts will be written using a rich text or WYSIWYG editor. These editors allow users to add different HTML tags to their content such as heading levels, paragraphs, lists and links.

As a developer myself, I see many of the most common issues on a day-to-day basis so let’s take a look at the most common few…

Headings order

The first is people using website editors but not using the heading levels correctly.

When writing a post people might decide to use the wrong heading level because it looks more visually appealing but it’s important that we keep our headings in sequential order. Adding headings in the wrong order can cause confusion for users who use screen readers and make it much harder for them to understand your post.

But what is heading sequential order and why is it important for accessibility?

website headers

WCAG 1.3.2 Meaningful Sequence: When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.

This means that the order of content on a website is not only visual but can also be determined by screen readers etc.

Headings on a webpage are ranked from levels 1-6. A level one heading or H1 is the most important title on the page or post and is usually reserved for the page or post title. There should also be only one H1 title on a page so we should never use the H1 tag within the main post content.

The second Level 2 heading is the next most important level and should be used as the heading for each section of the post. We must use the H2 heading here for each section instead of a lower level as we shouldn’t skip from a H1 to a H3 or H4 as this will then break your order and cause confusion for screen readers.

If your section is further broken down into subsections we can now use a H3 heading level and so on.

Here is an example layout of the correct heading sequence.

H1 Page/Post heading

–H2 section heading

—-H3 Subsection

—-H3 Subsection

——H4 Further Subsection.

–H2 Section heading

So when writing any content for your website be sure to keep your headings concise and relevant to the content they are for and follow the correct structure. This will ensure that your content is easily understandable to all users on your website.

Alternative Text for Images

Alternative text for images is another common place where people can make mistakes. Not adding alt tags to images can mean that users using screen readers can be missing out on content on your site. Similarly adding an alt tag to every image on your site can add a lot of bloat to screen readers. So when is it best to add alternative text to your images? If you can answer yes to any of the following questions then an alternative text is needed.

  • Does the image contain text?
  • Is the image used as a link or a button, and would it be hard to understand what the link or button does without the image?
  • Does the image contribute meaning to the current page or context?

If the answer is no to all 3 questions then the image is more than likely just decorative and an empty alt text is sufficient.

When writing an image alt text there is no need to add the word “image” as the screen reader will do this automatically. Always use correct grammar and be as descriptive as you can. If the image contains text make sure this text is in the alternative text.

Lack of Descriptive Link Text

Any link on your website should have clear descriptive text as to where the link leads to. It’s very common to see a link with the text “click here” or “learn more” added beside content that may make sense visually but to a user using a screen reader adds no context as to where it leads. When adding links to your page or post make sure to be as descriptive as you can with the link text using words like “contact us” or “learn about accessibility here”.

Ensuring your website content remains accessible is not only about compliance, it’s also about making the digital space more inclusive for everyone. By properly structuring headings, adding meaningful alt text to images, and using descriptive link text, you can improve the experience for users who rely on screen readers and other assistive technologies.

As enforcement of these regulations is set to begin in 2025, now is a perfect time to refine your content creation practices, ensuring they align with accessibility standards and enhance usability for all visitors. It will also help your SEO efforts while you’re at it.

Making your content accessible isn’t just about meeting regulations – it’s about fostering an inclusive digital experience where everyone can engage, no matter their abilities.

Get in touch with Friday to start refining your practices and lead the way in website accessibility.

Brian Whelan's avatar

Brian is a UX Developer here at Friday. He is passionate about all things web development, in particular the latest in frontend coding, performance and accessibility standards.

Previous post

Mastering TikTok
Gavin Duff's avatarGavin Duff25th Oct 2024
Mastering TikTok: A Guide to Ireland’s Fastest-Growing Platform
MarketingStrategyTikTok

Next post

A split-view of a living room contrasts a cozy, well-kept space against a dilapidated version
Karen O'Sullivan's avatarKaren O'Sullivan18th Nov 2024
Beyond the Numbers: The Limitations of A/B Testing
InsightsUser Experience