This page covers the content that does not meet accessibility regulations on the news content management system used by staff at Imperial to publish news stories on the main news website.

Last updated: 28 August 2020


Non-text content (images and video)

All of the decorative thumbnail images in the news listing have generic alt text - 'News image' or 'Preview image' . The alt text shuold be blank so that screen readers ignore them.

Info and relationships

  • For the modal windows used on most pages, they make use of semantic html to define regions, however this is only partially complete with some anonymous sections used, such as section#main which should either use the <main> tag.
  • On the login page, the username/password box (#news_login) uses <fieldset> but does not describe the set using a <legend> tag.
  • On the editor dahboard  a <table> tag is not used to markup the main listing structure, aria labels should be added to identify each region of content, such as the table column headings and rows.
  • On the news feeds section the heading structure skips h2, moving directly from h1 to h3.

Identify input purpose

On the login page,  autocomplete attributes should be added to the username (#username) and password (#password) fields to enable assistive technologies to identify and complete them more easily.

Use of colour

Colour contrast

  • The rich-text editor used in the article editor uses styling from the Imperial News pages to provide a wysiwyg (what you see is what you get) editing experience. This means the link text colour does not have enough contrast to meet the requirement.

Resize text

When text is resized without assistive technology up to 200 percent there are the following issues:

  • On the news dashboard, there are several elements which break with text overlapping other text or controls. Most notably in the header, but also in the navigation and main listing.
  • On the article editor (key information),  quite a few icons are out of place and the remove button (button.remove) for authors and comment moderators is obscured.
  • On the article editor (content tab) the text labels on the buttons to add and remove categories (button.add, button.remove) are slipping outside of their container and obscuring the text.
  • On the news feeds page, the page heading contains overlapping text and is unreadable.
  • On the tags page, the 'remove' text on the buttons (button.remove) expands out of their container, partially obstructing the text.

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 news editor application is not responsive to screen sizes lower than 768px wide. Most elements do not reflow when checked at 320px width or equivalent zoom and require both horizontal and vertical scrolling or overlap/obstruct other content.

Keyboard access

  • On the article editor, it is not possible to select days in the drop down calendar using the keyboard. It also does not disappear when the focus moves onto the next field, obstructing it.
  • On the article editor, the switch elements cannot be controlled with keyboard and contain no focus styling to let you know whether they are selected or not.
  • The switch element at the bottom of the feed listing cannot be controlled with keyboard and contain no focus styling to let you know whether they are selected or not.
  • When tabbing through the sidebar navigation accross the application, the menu items which contains submenus don't expand and the label disappears, meaning there is no way to tell what element has focus. 

Navigable

Bypass blocks

  • On all pages, there is no bypass block or 'skip to' link to allow quick access to the article listing without needing to go through the navigation.
  • On the news feeds page, there is no link to go directly to the other sections of the page, such as article listing and permissions.

Focus order

The modal dialogs when triggered are not created after the triggering element, this means they do not appear next in the tab order and the user is required to tab through all of the rest of the elements on the page before getting to the modal.

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:

  • The text labels on the buttons to edit articles is repetative and gives no context, an assistive technology going through the buttons on screen would not be able to associate them with the article title.
  • There are repeated button labels for browse and remove functionality which aren't given context programatically.
  • There are many repeated button labels for add, remove and browse functionality which aren't given context programaticallyor an labellelby aria attribute.
  • There are many repeated button labels for edit and remove functionality within the article listing and permissions list which aren't given context programatically, these should be given descriptive titles.

Multiple ways (to locate a page)