This page covers content on the news section of the website that does not meet accessibility regulations.

We will update this list as we address these issues. There is also a separate page covering non-accessible content for the news editor interface used by staff accross Imperial to publish the news stories.

Last updated: 28 August 2020


Non-text content (images and video)

  • The search area label is styled with display:none, this makes it invisible to screen readers. 
  • The news summary is output on image alt tags (.featureImage), as well as later as part of the heading for news stories. This causes screen readers to read it out twice.
  • The decorative image for the shadow under the image frames should have an empty alt tag, so that screen-readers don't read out 'shadow'. This multiple images accross all pages.
  • The placeholder image for related media on stories is purely decorative and should not have alt text.
  • Some stories include twitter embedd with images of text which cannot be interpreted by screen readers.

Video captions and audio descriptions

  • Captions are not provided for all prerecorded audio content in synchronised media.
  • An alternative for time-based media or audio description is not provided for prerecorded videos used in stories or in embedded twitter feeds. 

Info and relationships

  • The footer for all pages contains two lists of links, those for social media as well as the generic College links. These are not grouped into unordered lists so screen-reader users cannot skip over these if they require.
  • The main content area of each page is not specified programmatically, div.main is used which would not be picked up by assistive technology.
  • The sidebar (div.sidebar) is not landmarked correctly.
  • On all pages, the <article> and <section> tags are used, often without headings or aria attributes to identify them.
  • On the main news landing page and news subsection pages there are some issues with the heading order of this page, skipped headings e.g. heading 1 (h1) to heading 4 (h4), without a h2 or h3.
  • On the Tags page, the alphabetical link navigation for the listings are not labelled as navigation <nav> elements.
  • On the Tags page, the tag cloud itself isn't labelled as an ordered list of links to indicate it is an alphabetical listing.
  • On the Tags page, the main listing of links to tags are not separated into ordered lists for each or grouped by headings, making navigation between groups of links more difficult.
  • On the Tags page, the main body area does not use headings to separate the various sections, so there is an issue with missing headings in the heading map.
  • The tags on the bottom of all stories are not labelled as an unordered list structure.
  • Each comment on an article is contained in an <article> tag, however no heading is used to identify each <article>.
  • There is an issue with skipped headings in the author information box (.reporterInfo) under each article, meaning a heading (h2) skips directly to a heading 4 (h4).
  • On the search results page, search navigation is grouped into a <section> tag, instead of a <nav> tag.
  • On the search results page, each search result is wrapped with an <article> tag, however there is no heading within the tag.

Identify input purpose

  • The inputs for name and email on the comments form, and the report incorrect content forms on all news stories do not have autocomplete attributes to make it easier for users or user-agents to pre-fill content.

Use of colour

Colour contrast

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

  • The contrast between the link and text for the author and date (p.byAuthor) on all stories is not enough to make it obvious the text is a link (1.91:1 currently, 3:1 required).
  • A number of elements in the sidebar and footer do not have sufficient contrast.
  • All story teasers (h4.teaser), dates (time), column titles (h3.column-title), story type tags (p.storyType) on the main news landing page.
  • The tag cloud and other links on the Tags page.
  • The single letter headings which separate the list (div.tagLetter) on the Tags page.
  • All links and pull quotes on all stories.
  • The name and date in comments (article.commentBubble) on all articles.
  • The required text in the comment form (#commentForm .required), disclaimer (#commentForm .disclaimer), character limit (#comment_chars) and submit button (.submitComment).
  • The validation message that appears when trying to submit the comment form on stories without the required fields.
  • Navigation links on search results page.

Non-text contrast

  • On the main news landing page, the controls for the Features slider in the sidebar showing features do not have the required contrast against the background.
  • On the main news and sub section landing pages, the icon used to show how many comments on articles (.commentCounter) does not have enough contrast against the background.
  • The video play button on stories is totally white, meaning when placed on an image with white in the middle it becomes invisible.

Resize text

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

  • The backgrounds for the numbers on the most popular stories in the sidebar don't scale with the text on all pages.
  • Othe Tags page the backgrounds for the white text 'headings' for each alphabetical section of the list (.tagLetter) do not scale to match the text size, and the text becomes white on white.

Images of text

  • On the main news landing page the top sidebar link (Imperial Events) is an image containing text.
  • On the sub section pages e.g. Engineeringthe top sidebar link is an image containing text.

Navigable

Bypass blocks

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

Focus visible

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

Issues

  • Several elements in the page template are missing any kind of hover styling; header search button (#searchSubmit), footer subscribe button (#itSubmit), footer links (.campus-address a).
  • On the main news and sub section langing pages, the hover styling for article links on the landing page layouts is a very subtle lightening of the image, heading and text. This provides no alternative visual clue other than the subtle colour change and should be improved, perhaps by adding an underline to the teaser text.
  • On the sub section lading pages e.g. Engineering, the link to show more stories from the faculty (a.landing_more_link) has no hover styling.
  • Othe Tags page, the alphabetical navigation links and 'back to top' links (a.scroll) are missing hover styling.
  • On all stories, the author link (.byAuthor a), arrow to expand and collapse the authorbox and the button to submit a comment (.submitComment) are missing hover styling.
  • On the search results page, the navigation links (.results-navi a) do have a hover and focus style, however the hover style is so subtle it is almost impossible to see. 

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

  • On the main news landing page, he slider in the sidebar for featured events should contain the appropriate aria role.
  • On the Tags page the list of links is not marked up with semantic html or aria roles.
  • On all stories, the expandable box with author information (.reporterInfo) does not have an aria role.

Status mesages

For the comment form at the bottom of all stores, if a required field is missed then a message appears. The message does not include the aria role=alert attribute. This also applies to the message that appears after a succcessful form submission.