Making our website more accessible

Accessibility Roadmap for Earlham Institute

This accessibility statement applies to https://earlham.ac.uk/

High Priority

Document language missing. [Audit issue: 1]

The language of the site is not identified. Identifying the language of the page allows screen readers to read the content in the appropriate language. It also facilitates automatic translation of content. See WCAG 3.1.1

SOLUTION: Ask developer to add lang attribute inside the <html> tag e.g. <html lang="en">

TARGET DATE: November 2020

Complete January 2021

No option to skip repeated content. [Audit issue: 2]

A means of bypassing blocks of content that are repeated on multiple web pages must be provided, e.g. the main navigation. For keyboard and screen reader users it can be frustrating to get to the main content of a page because you have to tab through all the main navigation elements every time you visit a new page. By implementing a skip link (also known as skip to content link), those users can skip all these elements and jump right into the content. See WCAG 2.4.1

SOLUTION: Discuss with developer means of achieving this. The “skip to content” link should be the first focusable element on the page. The link can, but doesn’t have to be, visible all the time for all users. If the link is visually hidden at first, it should be visible when keyboard focus moves to the link. If the link is clicked, it should move focus to the main content below the site navigation.

TARGET DATE: November 2020

Complete January 2021

Elements not highlighted on focus. [Audit issue: 3]

Using keyboard navigation it is important that the focused component can be visually identified. If the focused component is not somehow highlighted, the user cannot be sure which component has focus. Make sure that user interface elements, that can receive keyboard focus (hyperlinks and form fields and buttons), are highlighted on focus. See WCAG 2.4.7

SOLUTION: Discuss with the developer how to highlight all navigation elements on focus. Check with the developer that the submenus in the main navigation bar are accessible via keyboard navigation. If not, devise an accessible method to reach the items contained within these submenus.

TARGET DATE: November 2020

Complete January 2021

Two image links in header/footer are missing alternative text. [Audit issue: 4]

Earlham Institute logo in header and Athena Swan logo in footer are missing alternative text stating the purpose of the link. See WCAG 2.4.4.

SOLUTION: Ask developer to enable addition of appropriate alternative text that presents the content of the image and/or the function of the link.

TARGET DATE: November 2020

Complete January 2021

Missing alt attribute for majority of images [Audit issues 9, 12, 15, 18,19, 20, 23, 28, 29, 30, 31, 32, 35, 37, 39, 43, 47]

Image alternative text is not present. This is occurring frequently throughout the website. It occurs within the ‘latest updates’ and ‘related reading’ section amongst other areas. Each image must have an alt attribute. Without alternative text, the content of an image will not be available to screen reader users or when the image is unavailable. See WCAG 1.1.1

SOLUTION: Add an alt attribute to the images. The attribute value should accurately and succinctly present the content and function of the image. If the content of the image is conveyed in the context or surroundings of the image, or if the image does not convey content or have a function, it should be given empty/null alternative text (alt="").

TARGET DATE: November 2020

Complete January 2021

Medium Priority

Search form is not fully accessible to screen reader users. [Audit issues: 5 and 8]

A button is empty or has no value text. When navigating to a button, descriptive text must be presented to screen reader users to indicate the function of the button. Two form controls do not have a corresponding label. If a form control does not have a properly associated text label, the function or purpose of that form control may not be presented to screen reader users. Form labels also provide visible descriptions and larger clickable targets for form controls. See WCAG 2.4.4 and WCAG 3.3.2

SOLUTON: Ask developer to place text content within the <button> element or give the <input> element a value attribute. If a text label for a form control is visible, use the <label> element to associate it with its respective form control. If there is no visible label, either provide an associated label, add a descriptive title attribute to the form control, or reference the label(s) using aria-labelledby.

TARGET DATE: December 2020

Complete January 2021

Empty links within the social media menus. [Audit issues: 6, 25, 36, 38, 40, 45, 48]

These errors are caused by the items in the social media menus in the header and footer. Plus some pages have additional social media menus within the main content area. A link without text does not convey the function or purpose of the link and this can introduce confusion for screen reader users. See WACG 2.4.4

SOLUTION: Ask developer to place text content within each social media link that describes the functionality and/or target of each link.

TARGET DATE: December 2020

Complete January 2021

Empty HOME link. [Audit issue 7]

This is the link on the HOME icon at the beginning of the breadcrumb. If a link contains no text, the function or purpose of the link will not be presented to the user. This can introduce confusion for keyboard and screen reader users. See WACG 2.4.4

SOLUTION: Ask developer to place text within the link that describes the functionality of the HOME link.

TARGET DATE: December 2020

Complete January 2021

Low Priority

Link colour contrast is insufficient. [Audit issues 11, 14, 22, 26, 34, 41, 46, 49, 50]

Very low contrast between foreground and background colours. This applies to the “Science”, “Scientific Training”, “Technology” and “Learning” tabs, where the contrast ratio are below the required 4.5:1 recommended ratio. Adequate contrast is necessary for all users, especially users with low vision. See WCAG 1.4.3

SOLUTION: Agree a new colours for these tabs that meet AA minimum requirement of 4.5:1 contrast ratio with the page background. Ask developer to make appropriate changes to the CSS.

TARGET DATE: December 2021

Contrast Errors. [Audit issues 27, 42]

Low contrast between foreground and background colours. This applies to the black text on a red background, where the contrast ratio is only 3.6:1 which is below the required 4.5:1 recommended ratio. Adequate contrast is necessary for all users, especially users with low vision. See WCAG 1.4.3

SOLUTION: Increase the contrast between the foreground (text) colour and the background colour.

TARGET DATE: December 2020

Complete January 2021

Incorrect ARIA tag references [Audit issues 10, 13, 17, 21, 24, 33, 44]

aria-describedby reference exists, but the target for the reference does not exist. This is occurring in the ‘Related reading’ section of the page. ARIA labels and descriptions will not be presented if the element referenced does not exist in the page. See WCAG 4.1.2

SOLUTION: Ensure the element referenced in the aria-describedby attribute value is present within the page and presents a proper label or description.

TARGET DATE: December 2020

Complete January 2021