department-of-veterans-affairs / va.gov-team

Public resources for building on and in support of VA.gov. Visit complete Knowledge Hub:
https://depo-platform-documentation.scrollhelp.site/index.html
283 stars 205 forks source link

Accessibility Testing for MHV on VA, Medications, Filtering #97663

Open BobbyBaileyRB opened 6 hours ago

BobbyBaileyRB commented 6 hours ago

Product information

Who completed the use of color and color contrast test?

BobbyBaileyRB

Use of color and color contrast checks

How did color testing go?

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

Who completed the axe scans?

BobbyBaileyRB

axe checks

axe DevTools scan results

Image

How did axe testing go?

Good. No issues from Axe.

Who completed the content zoom and reflow test?

BobbyBaileyRB

Content zoom and reflow checks

How did content zoom and reflow testing go?

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

While not a major issue, 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."

Who completed the keyboard navigation test?

BobbyBaileyRB

Keyboard navigation checks

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?

Lack of Proper Structure

The filter is currently an H2, which suggests it’s a separate section to Medications List, which it isn't. Screen readers may interpret it as a standalone section, breaking logical navigation. Filter should be a feature of the Medications List, not a separate concept.

Recommendation for review Medications List (H2): The main section heading, clearly defining the purpose of the section. Make the Filter into an H3: This becomes a subheading under Medications List, indicating it’s a tool for interacting with the list. Sort (Non-Heading Element): Independent of the Filter but still functioning within the Medications List section. It is not subordinate to the Filter but remains a functional part of the list. Could been seen that it belongs to the filter and together are a whole.