Making HSE digital services inclusive - Things to avoid
Don’t rely on accessibility widgets or overlay tools
Accessibility overlay tools or widgets are an extra layer of controls that can be added to websites to provide the illusion of accessibility. They sit as a script on top of webpages. As a result, they do not actually fix any issues with the semantic code or markup of the website.
Sometimes the controls of accessibility overlay tools are inaccessible to the people they were built to serve. For example, a button that enables the content to be read aloud is not keyboard or screen reader accessible. Sometimes the control to enable a high contrast version of a site will have colours that are not colour contrast compliant.
We should avoid accessibility overlay tools because they are often owned and operated by non-EU companies. They adhere to different web accessibility standards than we do.
As a third-party script, they can be heavy to implement and may make the page loading time longer.
In 2023, the European Disability Forum (EDF) and International Association of Accessibility Professionals (IAAP) signed a joint statement cautioning the implementation of accessibility overlay tools on websites.
EDF and IAAP joint statement on accessibility overlays - edf-feph.org
Avoid customising elements as much as possible
If you design or publish content it’s important to use the templates and components within our Design System. It is best practice to avoid adding any inline CSS to the components. It will override the accessibility considerations that have been designed into it.
If you need to add custom components, it’s important to use semantic elements or markup wherever possibNon semantic markup, such as a le.
Semantic markup (semantic HTML) is the use of HTML tags that describe the meaning and the role of the content within the tags. <header>, <footer>, and <article> are examples of semantic tags used for page structure that clearly indicate the role of the content within.
Non semantic markup, such as a <div> or <span>, are generic and give no indication of the meaning of the content within or the role of the content on the page.
Using semantic markup means understanding the purpose and hierarchy of the content. It ensures both humans and machines (like screen readers and SEO crawlers) can read the information and accurately communicate it to the user.
Writing semantic markup is essential if you want your content to be accessible.
Example of bad practice
Using a <span> to display text and visually styling it with CSS to appear as a heading level, for example a <h2>.
Do not publish in PDF
If you’re creating content for the public then it should be published as a webpage, in HTML. This provides a better user experience for everyone.
It’s important to be aware of the serious barriers to access PDFs can create for some people. Although PDFs are easy to create, they are usually not the most accessible option.
Remember, if you have no option but to publish a PDF, they must be accessible and adhere to the WCAG v.2.1.
Making accessible PDFs is a very time-consuming process. Every time a PDF is updated with new information, the whole process of ensuring it is accessible needs to be followed again.
If you’re unsure, contact digital@hse.ie for advice.