News editor
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)
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
The sidebar navigation is the only way to navigate between pages.
Focus visible
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
Issues
- When tabbing through the sidebar navigation, the menu items which contains submenus don't expand and the label disappears, meaning there is no way to tell what element has focus
- The filters for the article listing do not have focus styling unless they are expanded. Suggest automatically expanding the drop down when focused.
- The link to return to the dashboard which replaces the logo (.logo .dashboard-link) does not display when tabbed to.
- The switch elements have no focus styling to let you know whether they are selected or not.
- When tabbing through the sidebar navigation, the menu items which contains submenus don't expand and the label disappears, meaning there is no way to tell what element has focus.
Language of the page
Pages within the news editor do not specify a language using the 'lang' attribute of the html tag.
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
- There are several parsing errors on all pages due to third-party scripts injected with Google Tag Manager.
- The relative time indicator uses a <time> tag (time.relative), but is not providing the datetime attribute in a valid format.
- Duplicate id found (#content) in DOM.
- There are also numerous validation errors caused by the rich-text editor.
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
- Modal dialogs should be correctly marked up with aria role and states to allow assistive technologies to use them correctly
- On the dashboard, feeds and tags pages, he expand/collapse menus in the sidebar are not correctly labelled with aria states.
- On the artice editor, the date picker using the third-party flatpickr component does not correctly use aria attributes to identify itself and its state.
Status mesages
On the article editor tabs and news dashboard, validation errors on screen created using the third-party library (protip) do not contain an aria role=alert attribute to allow assistive technologies to alert the user.