Accessibility Conformance Report for Audiom

Legend icons do not have alternative text

Problem

The toggle control for map display does not have any alt text, and is announced as a generic 'clickable' region or non-interactive control depending on the assistive technology's ability to detect that it is interactive.

Additionally, the image examples for each legend item do not have any alternative text. Screen reader users may have some degree of vision and may benefit from having the contents of the legend fully described.

Solution

The toggle control alternative text should distinguish the control from the ability to collapse the text below it. Presently, the UI is fairly confusing as there is a way to collapse the legend contents in addition to a way to hide map layers, but the both the visual design and the text labels do not make this distinction clear.

Consider exposing each graphic example as an image and attach alternative text to each legend option by using standard techniques. Alt text for a colored square might be something like "50% blue" or "medium blue". Alt text for a pattern may be something like "repeating chevron pattern".

Control panel is out of sequence

Problem

The control panel (present in the examples as a way to change the data displayed) is positioned in the top right corner. However, in the source order, this panel appears after the map information and credits. This has the potential to be very confusing for users, as the map credits imply that the map content is over.

Solution

Append the control panel before the map credits in the source order, consider adding the control panel as a custom control for greater control positioning.

Text cannot be resized independently of the content without causing overflow issues

Problem

When the browser font size is increased (note, this differs from zooming the whole page), text overflows the designated boundaries.

Solution

This can be approached in multiple ways. It would be good to rely more on relative units such as em and rem for sizing to ensure that elements and their containers scale proportionally. It may be necessary to use JavaScript to calculate the dimensions of various containers to make sure elements do not intersect.

Text lacks contrast

Problem

Legend text is #aaa on a #fff background, making the contrast ratio 2.32.

Map labels lack contrast in the default style used. The background of landmasses is #FCFCFD, whereas the text color is approximately #7C7D7E. This results in a contrast ratio of 4.02.

Solution

Bump up the text color to meet a contrast ratio of 4.5 to meet AA standards, or 7 to meet AAA standards.

Tooltips do not meet hoverable requirements

Problem

Tooltips do not meet the following requirements:

Dismissible: A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;

Hoverable: If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing

Both criterion are especially important for users who use screen magnification software, as the small size of the screen may leave them with less room to maneuver the cursor in a way that does not obscure the content they are trying to read.

Solution

Tooltips should be dismissed when the 'Escape' key is pressed, and remain in a singular static position, rather than following the cursor. See this guide by Sarah Higley for detailed guidelines on improving the accessibility of tooltips.

The toggle layer display button is not operable by keyboard

Problem

The toggle layer button is not accessible by keyboard. Presently, a div element is used. A div element has no inherent semantics and is not naturally exposed in the tab order. The markup is shown below:

<div class="toggler toggler--visible"></div>

Solution

Use a button element. The surrounding legend panel may need to be refactored to use aria roles instead, as button elements are invalid children of the summary element. Additionally, the button needs a label for screen reader users.

<button class="toggler toggler--visible" aria-label="Toggle data layer on map"></button>

Legend panes do not have focus styles

Problem

Each legend pane is currently marked up as a details element (this may pose issues if the toggle button is exposed later, as buttons cannot be nested), but the summary element has no focus style.

Solution

Add a focus style to the summary element.

Many controls are too small

Problem

Numerous controls do not meet the 44 * 44 pixels minimum required for interactive elements that are not inline., including both custom controls as well as controls styled by Mapbox.

Solution

Increase the size of elements so that they meet the minimum size requirements. In some cases, the design may not need to be altered by using padding to increase the target size instead of margin. Custom styles may need to be written to override Mapbox's own styles.

Inputs do not have an associated label

Problem

Inputs do not have a label associated with them. Both the control that allows the user to change what type of layer is displayed as well as the border width control are not programatically linked to a label. This may be an inherited issue from material-ui.

Select control markup:

<div class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiSelect-root css-9ddj71-MuiInputBase-root-MuiOutlinedInput-root">
  <div tabindex="0" role="button" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="outlined-choose-stats-label choose-stats" id="choose-stats" class="MuiSelect-select MuiSelect-outlined MuiOutlinedInput-input MuiInputBase-input css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input">Cases</div>
  <fieldset aria-hidden="true" class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"><legend class="css-186xcr5"><span>Choose a Statistic</span></legend></fieldset>
</div>

Solution

Associate the inputs with a descriptive label to inform screen reader users. A wide variety of techniques, including proper use of the <label> element or the aria-label and aria-labelledby roles.

In the select markup, there is a hidden label contained within a fieldset element, but this is not a valid technique for linking a label to a control. Furthermore, the aria-hidden attribute on the fieldset appears to never be removed, so the label is never exposed.

Control is styled as a select dropdown but behaves in a non-standard way

Problem

The select dropdown does not have the appropriate semantics. It appears as a styled select element, but is missing the combobox role and doesn't match the standard behavior of a select. For example, on a standard select, pressing escape on a selection will select the currently highlighted option, while collapsing the dropdown. This behavior is not replicated in this implementation. More significantly, it is completely inoperable when a screen reader is active. This appears to be an inherited problem from the parent library, material-ui, as there are open Github issues.

Solution

This component could be replaced with a native HTML select that is lightly styled. Due to the complexity of replicating native select behavior, most existing select libraries suffer from problems that would cause major barriers to users of assistive technology.

Legend panes can overlap map controls

Problem

If the map height is too small, the legend panes overlap the map controls, covering the zoom and rotation controls completely.

Solution

Detect if there is enough space for the panels to be displayed, otherwise stack them differently or implement scrolling.

Consider not using all capital letters for styling

Problem

Screen readers sometimes have difficulty differentiating between acronyms and words when styling text in all capitals. For example, the text "MOST POPULAR ACCESSORIES IN AMONG US" may cause screen readers to announce the word "us" as U.S.

Solution

Consider removing text-transform: uppercase as a default style for greater accesibility.

Support human-readable labels

Problem

There are several areas which a label is displayed in a format typically associated with programming (ie. snake case, camel case). This can be hard to process for people with cognitive disabilities and may be read inconsistently by screen readers.

Solution

It is recommended to always allow for an author to provide an additional human-readable label.