Page content is structured with heading levels. The relationship between background images and nearby paragraphs is not clear, and this has been mentioned under #324
table layout on resources page
on mobile, this ends up being too wide for the screen even though it changes column size, such that it cannot be read without scrolling the screen. This seems to be because there is a right side boarder to the white rectangular text block - that then requires the text block itself to be scrolled horizontally.
this may be more navigable with assistive tech if there was a row header cell defined (all row cells are currently td, no th except in the header itself). The first column: 'name', which is also a link to the resource in question and therefore unique would seem to be a good candidate for becoming a row header.
is this really a data-table within the meaning of the WCAG or is it a layout preference and so shouldn't be done as a table?
meaningful sequence
Reading sequence on screen-reader mostly matched that of visible layout, more on this in Screen Reader Issues #325
sensory characteristics
While visuals are used to show layout and headings, aria labels and document structures have been used to provide the equivalent scaffolding for assistive technologies.
orientation
The layout adapts to differing screen widths, working on portrait and landscape mode screens. This works well, but the navigation menu is displayed in a different order when it becomes a hidden menu (the search bar is at the top, while it is one of the last items at larger widths). As people may use it in different layouts on different devices, consistency is important so it would be preferable for the order to remain the same regardless.
identify input purpose
Text inputs need reviewing. The placeholder and the aria label are identical but they serve different purposes. For example in the input for email signup for the news letter:
The aria-label should identify that this is input is for an email address for signing up for the newsletter and the placeholder may be better as an example of an email address.
Summary
Required Action
355
356
246
357
Context
This audit considered:
Audit Results
info and relationships
general
Page content is structured with heading levels. The relationship between background images and nearby paragraphs is not clear, and this has been mentioned under #324
table layout on resources page
meaningful sequence
Reading sequence on screen-reader mostly matched that of visible layout, more on this in Screen Reader Issues #325
sensory characteristics
While visuals are used to show layout and headings, aria labels and document structures have been used to provide the equivalent scaffolding for assistive technologies.
orientation
The layout adapts to differing screen widths, working on portrait and landscape mode screens. This works well, but the navigation menu is displayed in a different order when it becomes a hidden menu (the search bar is at the top, while it is one of the last items at larger widths). As people may use it in different layouts on different devices, consistency is important so it would be preferable for the order to remain the same regardless.
identify input purpose
Text inputs need reviewing. The placeholder and the aria label are identical but they serve different purposes. For example in the input for email signup for the news letter:
The aria-label should identify that this is input is for an email address for signing up for the newsletter and the placeholder may be better as an example of an email address.