search

GSA / 889-tool

Web service for determining 889 compliance of vendors
1 stars 0 forks source link

Interactive elements indicate their purpose and state #185

Open JennaySDavis opened 5 months ago

JennaySDavis commented 5 months ago

The following issues were found when testing tickets: 160,161, 163, 167.

1) Interactive elements indicate their purpose and state: The blue “download” buttons use incorrect HTML syntax. They have an aria-labelledby attribute that should be changed to aria-label. The aria-labelledby attribute takes an ID and not a string. Since this currently includes a nice string, we should change it to “aria-label.” :failed: 2) Interactive elements indicate their purpose and state: The green checkmarks and the red warning icons also incorrectly use aria-labelledby. The content of the labels is not accessible by screen readers. These should be removed, and the “title” attribute on the icon wrapper span should changed to aria-label.

JennaySDavis commented 5 months ago

Image

Image

JennaySDavis commented 1 week ago

#185 Acceptance Criteria

Pass/Fail Description
Pass Interactive elements indicate their purpose and state: The blue “download” buttons use incorrect HTML syntax. They have an aria-labelledby attribute that should be changed to aria-label. The aria-labelledby attribute takes an ID and not a string. Since this currently includes a nice string, we should change it to “aria-label.”
Pass Interactive elements indicate their purpose and state: The green checkmarks and the red warning icons also incorrectly use aria-labelledby. The content of the labels is not accessible by screen readers. These should be removed, and the “title” attribute on the icon wrapper span should changed to aria-label.

Comments/Additional Notes Best Practice score may be improved based on the findings with ticket #162

ADA Compliance (Automated scan via Chrome Lighthouse)

Criteria Score
Performance 99
Accessibility 100
Best Practices 93

Passed 06/24/2024 - JSD

johnbeallgsa commented 1 week ago

Thank you for showing this in Demo. Moving to Done.