GSA / smartpay-training

Prototype for new GSA SmartPay training quizzes
8 stars 4 forks source link

BUG - Elements with visible text labels do not have matching accessible names. #441

Closed rebekahperillo closed 9 months ago

rebekahperillo commented 11 months ago

A bug was discovered when working on Story #431 where the developer widened the padding for the dark grey border and shortened the header to GSA SmartPay® Training to give the user's eyes more space around the header. The Accessibility score for this story was 96.

According to @JennaySDavis, "The accessibility score picked up everything on that page, not just inclusive of the Header change. I would suggest we create a bug ticket for the accessibility issue found on the page that affected the score. We can link it to this story for tracking purposes, as I would need to work with Dan to determine the development effort to fix the changes needed for the issue listed below. The issue with the page is the following: Elements with visible text labels do not have matching accessible names."

Related to #431

JennaySDavis commented 11 months ago

The ADA report for reference:

smartpay_training_431.pdf

CodyHinze commented 11 months ago

I see this being considered as a potential false positive. The automated scan follows the rule strictly.

The items flagged are the "Take the quiz" links on the page. These include an aria label with the more natural language of "Take the {business line} training quiz for the {course title}" Where the business line is the card type such as purchasing or travel.

Technically, this does not include the exact string of "Take the quiz," thus the reason it was flagged.

One option would be to change the standard pattern to "Take the quiz for the {business line} training: {course title}". This is slightly longer, but would also pass the rule in a strict sense.

brentryanjohnson commented 11 months ago

Our assessment (on the Service Delivery team) is virtually identical to ☝️ @CodyHinze. We can talk more next week about this specific issue (and accessibility more broadly), but this is very likely a false positive in Lighthouse. The flagged pattern passed both AMP (GSA's accessibility tool by Level Access) and pa11y.

rebekahperillo commented 10 months ago

@CodyHinze Let's take a look at Ryan's PR and determine if we'd like to use it to address the issue.

CodyHinze commented 10 months ago

Pull Request with potential change -- https://github.com/GSA/smartpay-training/pull/444

JennaySDavis commented 10 months ago

#232 Acceptance Criteria

Pass/Fail Description
Pass Aria labels updated

FROM: Take the quiz TO: Access the travel training

Comments/Additional Notes N/A

ADA Compliance (Automated scan via Chrome Lighthouse) This user story includes no new or modified interface features; additional accessibility validation is unnecessary.

Passed 11/28/23 - JSD

johnbeallgsa commented 10 months ago

@rebekahperillo @LoraBradford @JennaySDavis Moving to Done. Awesome win. Jenn showed us the result with a screen reader.