Accessibility has been one of the central pillars in the web developer’s thinking, including regular audits of the site whilst building. The following has been implemented to support users whilst on the site:
Descriptive Names for Links
The site uses descriptive text for links across the site to ensure that the purpose of the link is clear to users viewing the site with the help of assistive technology.
Use of ARIA Labels
In instances where text isn’t available to the user (the navigation icon, for example), a combination of ARIA Labels and hidden screen reader only text has been used, to ensure that these elements and their functionality are identifiable to screen readers and assistive technologies.
Adjustable Text Sizing
Typography has been implemented in a way that allows the user to scale text as required using the zoom feature within their browser or keyboard shortcuts (CTRL and +/CMD and +). This helps users to increase the legibility of text independently in cases where the default sizing is tricky for users to read.
Semantically Defined Page Structure
Each major region on the page uses semantic HTML to flag page sections to screen readers. Areas such as headers, footers, navigation, images and image captions are all defined to help assistive devices understand the content it’s reading and how it relates to other content on the page. These considerations are also present on features such as lists and forms, with each form field having a label attached to it so that the purpose of each field is clearly defined for screen readers.
This approach to page structure is one of the fundamental requirements for good accessibility on the web, so it forms a key part of the site design.
Image Alt Tags
Every image on the site can provide users with alternative text that can be used by screen reading software to describe the content to visually impaired users. A few instances of this are hardcoded into the website’s template (the hero images, logo etc), but everything else can be customised through WordPress.
Tab Navigation
Content is navigable using the keyboard only, with content being highlighted as it is tabbed through within the browser. Highlighted links can be opened using the enter/return key.
Basic Meta Info
Every page has basic information programmatically added to it that aids accessibility. Titles are generated for each page and the use of UK English for the text content is defined on each of them. Defining the latter helps screen readers and assistive technology to announce text correctly to users.
