search

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 204 forks source link

[Markup and meta data] HTML markup isn't valid. (09.01.1) #43521

Open shiragoodman opened 2 years ago

shiragoodman commented 2 years ago

General Information

VFS team name

Modernized Check-in

VFS product name

Patient Check-in

VFS feature name

Pre-check-in and mobile check-in

Point of Contact/Reviewers

Brian DeConinck (@briandeconinck) - Accessibility

*For more information on how to interpret this ticket, please refer to the Anatomy of a Staging Review issue ticket guidance on Platform Website.

Platform Issue

HTML markup isn't valid.

Issue Details

On both the "Start pre-check-in" and "Check in at VA" pages, when a user enters their fourth character into the last 4 SSN field, a <small> element appears beneath the field to remind users that the max number of characters is 4.

That <small> has an aria-live="polite" attribute on it, but is not announced by screen readers. Screen reader users never receive this extra announcement.

Link, screenshot or steps to recreate

  1. Create a staging appointment and follow the link provided to the "Check in at VA" page.
  2. Activate a screen reader. Recommend NVDA on Windows for testing. (I've also verified this behavior with VoiceOver on iOS but have not verified with VoiceOver on Mac... but I'm pretty sure you should get the same result.)
  3. Press Tab to move focus to the SSN field.
  4. Enter four or more digits.
  5. Note that the "(Max. 4 characters)" message appears on screen, but the message is not announced by the screen reader.

VA.gov Experience Standard

Category Number 09, Issue Number 01

Other References

WCAG SC 1.3.1_A

Platform Recommendation

I haven't verified this myself, but I believe this is happening because aria-live isn't being applied in quite the right way. As currently coded, the aria-live attribute is on a <small> element that doesn't exist in the DOM on page load. When the JS is triggered, the whole element is inserted into the page.

aria-live works by telling a screen reader "watch this space" on page load. Since the <small aria-live="polite"> element doesn't exist yet on page load, the screen reader doesn't know to watch for changes there.

Recommended fix: Add a <div aria-live="polite"> that wraps the <small> when it's inserted into the page. That div should be present and empty on page load. When the <small> message is inserted, it should announce.

Quick aside: I'm also not sure about the current behavior where the message appears after four characters are entered. That means the message will appear (and be announced) every time someone enters their last-four SSN, even if they know to enter just four digits and don't need the extra reminder. For sighted users it's easy to ignore, but getting that announcement every time might be annoying to screen reader users. Does it make sense to add the message on the fifth attempted character instead?

VFS Team Tasks to Complete

acrollet commented 2 years ago

This text and markup is actually part of the va-text-input DS component, c.f.:

https://github.com/department-of-veterans-affairs/component-library/blob/master/packages/web-components/src/components/va-text-input/va-text-input.tsx#L231 https://github.com/department-of-veterans-affairs/component-library/blob/292ec37b335fa15891fe0ffc8a525738e7fdcd8e/packages/core/src/i18n/translations/en.js#L4

loripusey commented 2 years ago

Just an FYI, we are replacing the identify verification using last 4 of SSN and replacing it with the DOB. We will be using the new Design System's Memorable Date control. It will be going live for a test run on 8/23 and will be available to everyone once we decide there are no issues.