WCAG: Adaptable

[StephDriver]

Summary

Required Action

• Resources Page Table Layout Accessibility improvements #355
• Differentiate placeholder and aria labels for text input fields #356
• non-obvious placeholder text for filters #246
• Make navigation bar order consistent #357

Context

This audit considered:

1. info and relationships
2. meaningful sequence
3. sensory characteristics
4. orientation
5. identify input purpose

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

• 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:

<input class="
        bg-blue border-white
        text-white cursor-white placeholder:text-white
        max-lg:placeholder:text-md lg:placeholder:text-lg
        max-lg:text-md lg:text-lg
        border-t-0 border-r-0 border-b-1 border-l-0
        focus:outline focus:outline-white focus:outline-offset-0
        focus:ring-transparent focus:border-b-transparent" 
    id="email" 
    type="email" 
    name="EMAIL" 
    value="" 
    aria-label="Your email" 
    placeholder="Your email">

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.