We want as many people as possible to be able to use our website.
We’re committed to making our website accessible, in accordance with the Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018.
The following components make up our website to meet the Web Content Accessibility Guidelines (WCAG) 2.1 AA standards.
These components will make our website content accessible to people with disabilities, including visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities. This also applies to people with a temporary disability and changing abilities which could be due to aging.
Every image should have an Alt description applied to it. Alt text is crucial for accessibility because it provides visually impaired individuals with essential information about images, enabling them to understand and engage with online content effectively.
You should describe the image as best possible to give the user a sense of what’s included. If the image is a graph or infographic, describe in detail what it shows.
Remember to translate Alt text for images in the Welsh copy of the website.
For help with drafting Alt text please get in touch with a member of the Communications team.
ARIA, or Accessible Rich Internet Applications, is a set of attributes that should be used to add to HTML elements to enhance the accessibility of dynamic and interactive content for individuals using screen readers or assistive technologies. ARIA attributes help bridge the gap between the native semantics of HTML elements and the complex interactions found in modern web applications.
When applying ARIA in web accessibility, it's essential to keep the following guidelines in mind:
It is imperative that all Audit Wales applications work correctly using assistive technology and screen readers. All Audit Wales applications should be thoroughly tested to ensure that they meet Web Content Accessibility Guidelines (WCAG) 2.1 AA standards.
Colour contrast should be tested throughout all Audit Wales applications and must meet the minimum requirements outlined within the WCAG 2.1 AA accessibility standards.
Applications can be tested for accessibility using the Wave evaluation tool
There must be a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders).
While every endeavour should be made to consistently comply with these requirements, it is acknowledged that certain situations may arise where adherence is not feasible, such as in the case of images containing irreplicable text or logos.
Elements that are purely decorative, redundant, or part of a visual layout but have no semantic importance should be hidden to assistive technologies such as screen readers. This is so that elements which do not convey meaningful information or serve a specific purpose do not interfere with the experience on a screen reader or assistive device. This can be achieved using the Aria label aria-hidden="true". This approach is essential because it prevents screen readers from announcing irrelevant content, reducing cognitive load and ensuring a smoother browsing experience for individuals who rely on these technologies.
The importance of graceful degradation in web design lies in ensuring that all Audit Wales applications remain functional and accessible to users, even when their browsers or devices may not fully support the latest features or technologies.
All elements that have the ability to be focused should have a clear focus style. Use the colour #ffdd00 for background colour of focused items with black text. All links should have a black border bottom of 3px. All buttons should have a black border of 3px.
Accessibility in web forms is crucial to ensure that all users, including those with disabilities, can effectively interact with and submit information on a website.
Semantic HTML: Use semantic HTML elements like <form>, <input>, <label>, and <fieldset> to create a clear and well-structured form that can be easily interpreted by assistive technologies.
Labeling: Provide clear and descriptive labels for form fields using the <labell> element. Labels should be associated with their corresponding input elements using the for attribute or by wrapping the input element within the <label>.
Placeholder Text: While placeholder text can be helpful, it should not be relied upon as the sole means of conveying information, as it disappears when users start typing. Always use labels in addition to placeholders.
Error Handling: Ensure that error messages are clear, concise, and located near the problematic form field. Use ARIA roles and attributes like aria-describedby to associate error messages with their respective fields.
Keyboard Navigation: Test the form's usability with a keyboard alone, ensuring that users can navigate through form fields, checkboxes, radio buttons, and submit buttons easily without encountering keyboard traps.
Focus Styles: Provide a visible and distinctive focus indicator for form elements so that keyboard users can identify where they are in the form and which field currently has focus.
Fieldset and Legend: Use the <fieldset> and <legend> lements to group related form fields together and provide a clear and accessible structure, especially in longer forms.
Aria Roles: Use ARIA roles and attributes like aria-required, aria-invalid, and aria-describedby to convey additional information about form fields to screen reader users.
Where possible, all Audit Wales web applications should function without JavaScript. This guarantees that users who rely on assistive technologies or have JavaScript disabled can still access and interact with your content.
All Audit Wales web application should be able to be navigated via a keyboard.This ensures that users who rely on keyboard input, such as those with motor disabilities or certain vision impairments, can access your content effectively.
Maintaining a logical order of focusable elements in your web pages is essential. Users should be able to navigate through interactive elements, links, and form fields in a predictable and intuitive sequence. This logical order ensures that users can understand and interact with your content sequentially, making it easier for them to complete tasks or gather information.
Additionally, avoiding keyboard traps, commonly known as "keyboard traps" or "focus traps," is vital. A keyboard trap occurs when a user becomes stuck in a particular section of a web page and cannot navigate away using only the keyboard. This can be frustrating and confusing for users who rely on keyboards, as they may be unable to access other parts of your website.
The link text should clearly describe the target or the function of the link. Where this is not possible, hidden Aria labels should be used for this function.
All content and images should adjust for mobile devices and tablets. Full user testing on a variety of screen widths and devices should be completed before launching any Audit Wales web application to ensure full compatibility on all devices.
Where possible, web applications for Audit Wales should be designed from a mobile first perspective.
All HTML markup for any Audit Wales web application should be semantically structured. There should only be one h1 per page. H3 elements should follow H2’s. H4 elements should follow H3’s etc.
All HTML should be fully validated on all pages of the web application using Wave and W3G. These services will highlight any issues with HTML and it is important that all errors are rectified (where possible) before any Audit Wales web application is deployed.
To meet minimum accessibility requirements, Audit Wales web applications should be fully functional when the browser is zoomed to 200%. This should be fully tested throughout before any Audit Wales web application is deployed.