This accessibility roadmap applies to https://quadram.ac.uk

Read the accessibility statement for Quadram Institute

High Priority

  1.  No option to skip repeated content. A means of bypassing blocks of content that are repeated on multiple web pages must be provided, 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: October 2020
  2.  Elements not highlighted on focus. With keyboard navigation it is important that the focused component can be visually 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, it is important to devise an accessible method to reach the items contained within these submenus.
    TARGET DATE: October 2020
  3. Colour contrast is insufficient for top menu in header. Very low contrast between foreground and background colours in the header menu. The light grey menu at the top right of the page (containing people/vacancies and social media links) results in a very low 1.55:1 contrast ratio, well below the required 5:1 ratio for smaller text. See WCAG 1.4.3
    SOLUTION: Quadram will agree a new colours for this menu that meet AA minimum requirement of 4.5:1 contrast ratio with the page background. The developer will be asked to make appropriate changes to the CSS.
    TARGET DATE: October 2020
  4.  Link colour contrast is insufficient. Very low contrast between primary link text colour used across the website and the default white background This effects almost all pages on the site. The primary colour used for links across the site is #b5bd00 and the default background #f7f7f7 resulting in a low contrast ratio of 1.91:1, well below the required 4.5:1 ratio. See WCAG 1.4.3
    SOLUTION: Quadram to agree a new colour to be used as the primary link that meets AA minimum requirement of 4.5:1 contrast ratio. The colour chosen should also contrast with the main text colour (#263038). Adding an additional non-colour indicator such as underlining to links within text would aid accessibility and reduce the need for contrast between links and text. Ask the developer to change the CSS to use this new link colour and to investigate adding link underlining.
    TARGET DATE: October 2020
  5.  Duplicate/non-descriptive link text. Link text such as “View” is used widely throughout the site. Link text should be unique within a page, should be meaningful when read out of context, and should help users to know something about their destination. Link text such as “Click here”, “View” and “More” fail to meet these criteria. See WCAG 4.4
    SOLUTION: Ask a developer to add the descriptive text/title to a WAI-ARIA label for each link containing duplicate or non-descriptive link text. This will make it clear that the links lead to different destinations. Assistive technology, such as screen readers, use aria labels to catalogue the links in a document so that users can easily navigate between them. This option would result in no noticeable difference to the look of the website while solving the accessibility issue. See https://www.w3.org/WAI/GL/wiki/Using_aria-label_for_link_purpose for an explanation of the use of aria-label.
    TARGET DATE: October 2020

 Medium priority

  1. Colour contrast is insufficient for navigation panel in footer. Very low contrast between foreground link text and background colour in the Navigation panel in the See WCAG 1.4.3.
    SOLUTION: Quadram will agree a new colour for this menu that meets AA minimum requirement of 4.5:1 contrast ratio with the page background. The developer will be asked to make appropriate changes to the CSS.
    TARGET DATE: October 2020
  2. Very low contrast between foreground and background colours in the sections of the page using the green background combined with white text. See WCAG 4.3. This colour combination occurs within quoted text boxes, and within featured links on pages throughout the site.
    SOLUTION: Quadram will agree a new colour for this menu that meets AA minimum requirement of 4.5:1 contrast ratio with the page background. The developer will be asked to make appropriate changes to the CSS.
    TARGET DATE: October 2020
  3. Colour contrast is insufficient in video section of home page. Very low contrast between text and background colour in the section housing the The background combined with the white text results in a contrast ratio of 3.33:1, below the required 4.5:1 ratio for smaller text. Also the blue heading used for each video only has a contrast ratio of 3.76:1, again below the minimum requirement. See WCAG 1.4.3
    SOLUTION: Quadram to choose a colour combination for this section that meets AA minimum requirement of 4.5:1 contrast ratio. The issue with the heading colour could be resolved by making the headings a larger font size which results in the contrast ratio requirement reducing to 3:1. Once colours are agreed, ask the developer to change the CSS to use an appropriate colour and size combination.
    TARGET DATE: October 2020
  4. Non text content in video section of home page. Images in video section without alt description. All images linked to a video should have alt text added as they link to a specific video. See WCAG 1.1.1
    SOLUTION: Ask the developer to add the video title to the alt text for the corresponding video image.
    TARGET DATE: October 2020
  5. Colour contrast is insufficient on research leader and people profile pages. Very low contrast between all turquoise text in the header area and the white background. Combination has a contrast ratio of 3:48:1, below the required 4.5:1 ratio for smaller See WCAG 1.4.3
    SOLUTION: Quadram to choose a colour combination for this instance that meets AA minimum requirement of 4.5:1 contrast ratio. Once colours are agreed, ask the developer to change the CSS to use the desired colour combination.
    TARGET DATE: October 2020
  6. Colour contrast is insufficient on News Index. Very low contrast between all text and background colour combinations used within the news navigation section both at the top and bottom of this page. The same styling is also used on the events index page https://quadram.ac.uk/events-listing/ and will also need amending. All combinations of colours used are well below the required 4.5:1 ratio for smaller text. See WCAG 1.4.3
    SOLUTION: Quadram to choose a colour combination for this instance that meets AA minimum requirement of 4.5:1 contrast ratio. Once colours are agreed, ask the developer to change the CSS to use the desired colour combination.
    TARGET DATE: October 2020
  7. Colour contrast is insufficient. Very low contrast between the right-side navigation panels title “Past News:” and the background colour. Same styling is used on https://quadram.ac.uk/events-listing/ for the heading “Past events” and will also need amending. This results in a contrast ratio of 1.91:1, well below the required 4.5:1 ratio for smaller text. See WCAG 1.4.3
    SOLUTION: Use tools like https://contrastchecker.online/ to choose a colour combination for this instance that meets AA minimum requirement of 4.5:1 contrast ratio. Once colours are agreed, ask the developer to change the CSS to use the desired colour combination.
    TARGET DATE: October 2020
  8. Colour contrast is insufficient in selected tab content. Very low contrast between text and background colour for the selected tab headings in the main text area. Tabs occur across the site on pages such as staff profiles, research area pages, and targets page. The lime background combined with the blue/green text results in a contrast ratio of 1.74:1, well below the required 4.5:1 ratio for smaller text. See WCAG 1.4.3
    SOLUTION: Quadram to choose a colour combination for this instance that meets AA minimum requirement of 4.5:1 contrast ratio. Once colours are agreed, ask the developer to change the CSS to use the desired colour combination.
    TARGET DATE: October 2020
  9. Non Text Content in Images in footer without alt description. The UKRI and NNUH logos should have alt text as both contain hyperlinks to the organisational websites. See WCAG 1.1.1
    SOLUTION: Ask a website admin to add alt text to these images using the wordpress backend under: Options > Global > Footer
    TARGET DATE: September 2020

 

Low Priority

  1. Element ID is not unique. ID #s occurs twice within the code of the page. This is part of the search form and appears to be due to separate coding for the search facility needed on mobile and on desktop. In reality only one occurrence of the search form is accessed, the version depending on whether you are viewing the page on mobile or desktop. Whether this will cause issues with the various accessibility tools is not clear. See WCAG 1.3.1
    SOLUTION: Ask the developer to use a unique ID for the mobile version of the search form.
    TARGET DATE: November 2020
  2. Link purpose missing. The “NHS Patient Info” image in the header doesn’t have an appropriate alt It currently contains “Quadram Institute” but should be reworded to “View NHS Patient information”. See WCAG 2.4.4
    SOLUTION: Ask the developer to amend the coding for the header so the alt text states “View NHS Patient information”
    TARGET DATE: November 2020
  3. Home page links identified only by colour. The two links within the Guardians of the Gut section of text do not meet criteria for links identified by colour If links in blocks of text are identified only by colour, the colour contrast ratio between the link text and the surrounding text needs to be at least 3:1. This is not the case here. See WCAG 1.4.1
    SOLUTION: Quadram to choose a colour for the link text that ensures that links have a contrast ratio of at least 3:1 with surrounding text. Remember that the text colour and link colour also needs sufficient contrast from the background colour. Ask developer to amend CSS.
    TARGET DATE: November 2020
  4. Missing alt text in featured pages section. Images in featured pages section have no alt attribute. The featured pages section occurs commonly throughout the Although the images are purely decorative they should still have the code alt=”” assigned to them. See WCAG 1.1.1
    SOLUTION: Ask developer to add the alt=”” code for this section.
    TARGET DATE: November 2020
  5. Inappropriate alt text for news items. In the related news section, news items which have no featured image are displayed with a default image. The alt text entered for this default images is “awaiting image” which is not an appropriate description in this context. The related news section appears on many pages including research area pages, people profile pages, and target pages. As these images are purely decorative it would be acceptable to have the alt text set to “”. See WCAG 1.1
    SOLUTION: Ask developer to amend the code for this section so the alt text is set to alt=”” when the noimage image is used for a news story.
    TARGET DATE: November 2020
  6. Colour contrast is insufficient on vacancies page. Very low contrast between the introductory text and the background colour of this section. Issue includes the colour of the link text and includes the navigation below the last vacancy, towards the bottom of the page. All combinations of colours used are well below the required 4.5:1 ratio for smaller text. See WCAG 1.4.3
    SOLUTION: choose a colour combination for this instance that meets AA minimum requirement of 4.5:1 contrast ratio. Once colours are agreed, ask the developer to change the CSS to use the desired colour combination.
    TARGET DATE: November 2020
  7. Colour contrast is insufficient on vacancies page. Very low contrast between the Job Type header text and background colour. All combinations of colours used are well below the required 4.5:1 ratio for smaller text. See WCAG 4.3
    SOLUTION: choose a colour combination for this instance that meets AA minimum requirement of 4.5:1 contrast ratio. Once colours are agreed, ask the developer to change the CSS to use the desired colour combination.
    TARGET DATE: November 2020
  8. Colour contrast is insufficient on vacancies page. Very low contrast between the “SUPPORT” and “STUDENTSHIP” job category label text and their background colours. These colour combinations are well below the required 4.5:1 ratio for smaller text. See WCAG 4.3
    SOLUTION: choose a colour combination for this instance that meets AA minimum requirement of 4.5:1 contrast ratio. Once colours are agreed, ask the developer to change the CSS to use the desired colour combination.
    TARGET DATE: November 2020
  9. Colour contrast is insufficient on newsletter page. Very low contrast with the “subscribe” button and the background colour on the ‘newsletter’ page. Both well below the required 4.5:1 ratio for smaller text. See WCAG 1.4.3
    SOLUTION: choose a colour combination for these instances that meets AA minimum requirement of 4.5:1 contrast ratio. Once colours are agreed, ask the developer to change the CSS to use the desired colour combination.
    TARGET DATE: November 2020
  10. Non text content on newsletter page. First two newsletters have images without alt text. These should have alt text as both contain hyperlinks to a newsletter PDF document. See WCAG 1.1
    SOLUTION: Ask a website editor to add alt text to these two images using the wordpress editor.
    TARGET DATE: November 2020
  11. Colour contrast is insufficient on contact form. Very low contrast between text within the form fields and background colour. Also very low contrast with the “Submit” button and the background colour. Both well below the required 4.5:1 ratio for smaller text. See WCAG 4.3
    SOLUTION: choose a colour combination for these instances that meets AA minimum requirement of 4.5:1 contrast ratio. Once colours are agreed, ask the developer to change the CSS to use the desired colour combination.
    TARGET DATE: November 2020