Staff Professional Web Pages (PWPs)
This section covers content that does not meet accessibility regulations on the professional web pages (PWPs), which are personal College web pages written by Imperial staff and found under www.imperial.ac.uk/people/ section of the website.
Last updated: 3 August 2021
Non-text content (images)
- The profile images on staff profiles have poor automated alternative text that neither describe the contents or purpose of the images.
- The decorative placeholder images have alternative text. This should be blank so that screen readers ignore them.
- The search input (#keywords) does not have an associated label tag on the publications page.
Info and relationships
- Some content in the profile headers and footers may be obscured from assistive technologies due to unidentified container tags in the code.
- The heading hierarchy is invalid on the profiles, as a heading 2 (h2) has been skipped leaving the page template traversing from the heading 1 (h1) to heading 3 (h3).
- Accordions on research pages are controlled by pressing an image rather than a link or button.
- The search input (#keywords) does not have an associated label tag on the publications page.
Use of colour
The default link styling within the content area of all pages provides no enhancement or visual clue on hover for example underline or bold.
Non-text contrast
The visual presentation of the following User Interface Components and Graphical Objects Parts do not have enough colour contrast (3:1) against adjacent colour(s):
- The controls used to expand and contract the research areas do not meet the contrast requirements for icons at 1.55:1, should be 3:1
- The button to perform a publication search (#search-submit) and the arrow to proceed to the next or previous page of results (.pagination a.icon) both do not meet contrast requirements for icons.
Resize text
The following issues occur when the browser window is zoomed to 200%:
- The sidebar headings (h3) do not scale well, causing the text to leave the background and become unreadable.
- Some of the text falls outside the footer making part of it unreadable.
- The Close button is not visible on the citation window accessed from the publications listings
Reflow (scrolling)
Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:
- Vertical scrolling content at a width equivalent to 320 CSS pixels;
- Horizontal scrolling content at a height equivalent to 256 CSS pixels;
Issues
- The twitter feed in the sidebar is displayed even when the sidebar section is 'collapsed', this causes it to overlay the footer text making it unreadable.
- On the publications page, the layout breaks when the page is loaded on a small or heavily zoomed screen, with the sidebar content appearing above the other text on screen and obscuring it.
- On the public engagement page, overlapping text in mobile view obscures text and makes it unreadable.
Text spacing
When the changes to the text formatting are made,
- Line height (line spacing) to at least 1.5 times the font size;
- Spacing following paragraphs to at least 2 times the font size;
- Letter spacing (tracking) to at least 0.12 times the font size;
- Word spacing to at least 0.16 times the font size.
Issues
The following aspects do not meet the guidelines:
- When the changes to the text formatting are made, as per the guidelines, the location section in the sidebar becomes obscured by its heading.
- In the citation dialog the button on the publications page, switching to 'RIS format' fails to expand with the text and causes the text to become obscured.
- The assistant sidebar section on the honours and memberships pages fails in the same way as the location section, causing the heading to obstruct the content.
Navigable
Bypass blocks
Bypass blocks or 'skip-to' links are not implemented on the page template.
Page titles
When interacting with the publications filters or search on the publications page, the page title is lost or overwritten, leaving just the website url to be read out by assistive technology
Focus Order
When using keyboard navigation to trigger the citation dialog on the publication page, the code is added at the end of the DOM, meaning it does not receive focus until all other links on the page have been cycled through. The modal code should ideally be inserted immediately following the link to fix the tab order flow.
Link purpose
The purpose of each of the following links cannot be determined from the link text alone or from the link text together with its programmatically determined link context:
- In the selected publications section, the links for each publication are given without context, so by reading the link text alone it is impossible to know to what it refers.
- In the publication listing the links associated with each ('cite', 'et al.' 'summary' etc.) give no programmatic context as to which publication they relate to.
There are also examples where editors of profiles have used vague link text such as click here and read more as well as raw URLS for link text which do not describe the link destination to a human-being.
Multiple ways (to locate a page)
There must be more than one way to locate a page within a set of pages except where the Web Page is the result of, or a step in, a process.
Issue
Only the top navigation is provided to be able to navigate the pages.
Focus visible
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
Issues
On the research page, when using keyboard navigation to go through the page elements, the content contained in the collapsed research areas is still focusable. Because the areas are not expanded, there is no highlight for this, and it is difficult to know where you are on the page.
Language of the page
The language is not defined as part of the template.
Labels or instructions
The search input (#keywords) does not have an associated label to programmatically identify its purpose on the publications page.
Parsing
In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features.
Issues
- In the head of the template a meta tag is used to show compatibility with versions of Internet Explorer (https://docs.microsoft.com/en-us/openspecs/ie_standards/ms-iedoco/380e2488-f5eb-4457-a07a-0cb1b6e4b4b5), this has been defined incorrectly and is also obsolete.
- The portrait image markup contains an invalid attribute on all pages of a profile.
- Some legacy APEX code remains in the page markup and is invalid.
Name, role and value
For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
Issues
- Some links on the publications listing acts as a form of accordion and should contain the appropriate aria role.
- The accordion research sections aria role and states are missing.
- The filter drop down for publications is missing the appropriate aria role.
- The citation dialog on the publications is missing an aria role to identify it as a dialog box.