Accessibility Testing for MHV on VA, Medications, Filtering and Med Info

[BobbyBaileyRB]

Product information

• Team name, product name, and feature name have been added to the title of this issue.
• Team label, product label and feature label (if applicable) have been added to this issue.

Who completed the use of color and color contrast test?

BobbyBaileyRB

Use of color and color contrast checks

• All text of 20px or smaller has a 4.5:1 contrast ratio to its background (or better)
• All text of 20px or larger has a 3:1 contrast ratio to its background (or better)
• Non-text elements have a 3:1 contrast ratio to their background and to neighboring elements (or better)
• Color is not the only way to distinguish links from other text (eg. links are underlined)
• Any charts, maps, infographics, and tables convey all information without only relying on color
• Content does not refer to color, especially when providing user instructions (eg. "Click the blue button")

How did color testing go?

Good. No color contrast issues. Good use of color.

Who completed the axe scans?

BobbyBaileyRB

axe checks

• Each page has been scanned using axe (results shared below)
• axe is integrated into your end-to-end testing

axe DevTools scan results

Filtering

Med Info

How did axe testing go?

Good. No issues from Axe.

Who completed the content zoom and reflow test?

BobbyBaileyRB

Content zoom and reflow checks

• All page elements are readable and usable at 200% zoom
• All page elements are readable and usable at 300% zoom
• All page elements are readable and usable at 400% zoom

How did content zoom and reflow testing go?

Filter Medication List

This issue appears when viewing on Windows Google Chrome with 200% - 400% zoom.

There is room for improvement in focus state management reflow. When a Veteran selects a filter option with no results, such as "Recently requested (0)", the focus correctly shifts to the "We didn’t find any matches for this filter" message. However, if the Veteran then selects a new filter option with results, like "Active (13)", the focus doesn't shift to the filtered results, such as "Showing 1 - 13 of 13 active medications, alphabetically by status."

This is being worked on as of 11/22/2024. The development team is aware of it and fixes are coming soon.

Who completed the keyboard navigation test?

BobbyBaileyRB

Keyboard navigation checks

• Each link, button, form input, checkbox, radio button, select menu, and custom element can receive keyboard focus
• Each link, button, form input, checkbox, radio button, select menu, and custom element responds to expected keys
• All elements under focus have a visible focus indicator
• The order of [Tab] stops made sense and was appropriate for completing tasks

How did keyboard testing go?

Known VADS issue for Radio Buttons will/might experience this while testing on NVDA and JAWs.

Do you have any other results to share?

1. Brand Medication Names

The main issue here is the lengthy text listing the medication brands (as shown in the image). Currently, the entire element is wrapped in a strong tag, which is not appropriate. Instead, it should be structured as a p tag, with strong tags applied only to specific parts that need emphasis. Excessive bold text and the current structure can create challenges for individuals with reading disabilities. Whenever possible, adhere to proper HTML structure and organize the content to enhance clarity and accessibility. Consider another structure to help the readability.

2. Download alerts

No success or failure alerts when a Veteran downloads a PDF or TXT

3. Table tags

Using a table for this content isn’t ideal because it’s narrative, not tabular data. Tables can confuse screen readers and hinder accessibility. Instead, use semantic HTML like headings and paragraphs for better readability and accessibility.