This section covers content that does not meet accessibility regulations on the editor interface for professional web pages (PWPs) - www.imperial.ac.uk/personalise/, which enables Imperial staff to edit and publish their PWP profiles.

Last updated: 28 August 2020


Non-text content

  • The label entitled 'Username' contains an incorrect 'for' attribute, referring to a field which doesn't exist.
  • The file upload input (input#fileToUpload) is missing an associated label to identify its purpose
  • The modal dialog to upload a CV contains an input field (input#uploadfile) without an associated label.
  • The button to refresh symplectic data (input#refreshSymplectic) does not have an aria label or value, so cannot be identified programmatically.
  • When editing the research area heading, an input is created when the heading is clicked (input#heading-input-1), there is no associated label with this.
  • When editing the navigation title and page title an unlabelled input is created.
  • When modifying the content heading the input which is added to the DOM does not have an associated label.

Info and relationships

  • A container (div#main) is provided, however this has no semantic role
  • The login page has no h1 tag on the page, heading level starts at h2
  • The footer element contains a list of links (footer a) which are output as part of a paragraph rather than an unordered list. 
  • The help section, when activated contains a list of links. These are marked up as anonymous divs instead of an unordered list of links.
  • On the editors screen,  rhe main content of this page is a multi-select box containing hundreds of entries, visually organised into a tree structure. For assistive technologies this is just a very long, non-hierarchical single group of options and would be very difficult to quickly navigate.
  • When an item is selected, a section containing an unordered list of users is created. The section is labelled, however the label refers to the unordered list which is invalid use of html.

Meaningful sequence

When the help 'presentation' is triggered, boxes are added visually near the elements they are referring to. However these are added after the main body content, rather than as a sibling of the element they relate to. This means an assistive technology would have no idea to what element they were providing help for. 

Sensory characteristics

The help icon throughout the editor has no textual description to indicate that it exists or is clickable, it is purely reliant on visual identification.

Identify input purpose

 Autocomplete attributes are missing from the login form, these aid some assistive technologies to automatically input the correct details without requiring user input.

Use of colour

Colour contrast

The following elements do not have sufficient colour contrast between the background and the text:

  • Several reused components do not contain sufficient contrast to meet the guidelines, specifically headings (h2), navigation (header nav a) and success buttons.
  • The user identifier (span.quiet) in the editors list does not meet contrast requirements

Non-text contrast

  • Icons used to show the editable areas do not meet contrast requirements of 3:1
  • Icons used in the Data Sources area do not meet contrast requirements.

Resize text

The following issues occur when the browser window is zoomed to 200%:

  • The white footer text expands beyond its darker container and ends up on a light background making it unreadable.
  • The PWP editor was not built to be used on a mobile or heavily zoomed viewport, and thus critical functionality such as the ability to edit or publish content is hidden by styling and unusable.

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:

  • The username label is obstructed by the input area when text is spaced according to the guideline requirement.
  • The modal dialog to upload an image (#changePortraitModal .modal) has overflowing text on the main two buttons when the text is spaced according to the guideline requirement. 
  • When text is spaced according to the guideline requirement, the add buttons become visually disassociated with the user to which they are related.

Keyboard access

  • It is not possible to focus the editable areas (.editable) to modify display name or content with only keyboard navigation.
  • It is possible to trigger the modal to replace the portrait image, however it malfunctions causing the crop tool to be loaded immediately, obstructed by the other modal.
  • It is not possible to focus the help icon (div#getHelp) using only keyboard navigation.
  • It is not possible to focus the yes/no switches (div.sliderButton) using keyboard only navigation.
  • It is not possible to focus the editable areas (.editable) to modify display name or content with only keyboard navigation.
  • It is not possible to focus the remove icon button (input#deleteContentArea1) using only keyboard navigation.
  • It is not possible to focus the navigation title (span#resource-name) or page title (span#resource-title) controls using only keyboard navigation.
  • It is not possible to choose a department to trigger the user listing using keyboard only navigation.

Navigable

Bypass blocks

Bypass blocks or 'skip-to' links are not implemented on the page template.

Focus order