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
282 stars 203 forks source link

[COGNITION]: VAOS Scheduler - Edit links would benefit from aria-labels #2845

Closed 1Copenut closed 4 years ago

1Copenut commented 5 years ago

Description

A number of pages have Edit links that do not provide full context for assistive tech. Users must listen to nearby text/headings to understand what they are editing. We can improve this by adding aria-labels to each edit link.

I've bundled this as a single issue ticket because it's more expedient to fix all instances than have several tickets that are closely related, but could drift if fixed at different times.

Point of Contact

VFS Point of Contact: Trevor

Acceptance Criteria

Environment

Listing all page URLs affected:

Possible Fixes (optional)

I've specced an aria-label for a pending appointment. This is the format to add an aria-label regardless of button or link.

<a
  aria-label="View details of Audiology (hearing support)
  class="vads-u-font-weight--bold vads-u-text-decoration--none" 
  href="/vaos/appointments/pending/8a48dea06c84a667016c867b1ac00011"
>
  View details
  <i aria-hidden="true" class="fas fa-angle-right"></i>
</a>

WCAG or Vendor Guidance (optional)

Screenshots or Trace Logs

Screen Shot 2019-10-29 at 9 22 39 AM


Screen Shot 2019-10-29 at 9 24 46 AM


Screen Shot 2019-10-29 at 9 31 41 AM

jbalboni commented 4 years ago

Based on some design changes, I think we only have this issue on the review page now.