1

I'm working on improving an e-commerce site to incorporate better accessibility standards (WCAG 2.0 AA minimum). I'm trying to determine best practice for handling a listing of addresses that need to be clearly defined.

The Issue

In checkout I have a list of shipping addresses wrapped with <address>. One will be selected and is identified as such by just a colored outline and checkmark which is only visual so we need a way to clarify that to screen readers.

Possible Solution?

My solution so far is to set an aria-label="Selected Address" and aria-label="Nonselected Address". This seem to work well in Apple VoiceOver which reads it as a group with the label first making it very clear what it is. However, with JAWS, it is not reading it as a group nor reading the aria-label. I can fix that by assigning role="group" to each <address>. Since I understand that <address> has no aria role defined by default, my assumption is this solution will be fine. Is that correct or is there a better way to handle this?

Scruffy Paws
  • 1,219
  • 1
  • 21
  • 27
  • 2
    This is not opinion based, there are established patterns on how to make addresses etc. accessible and how to identify selected items to screen readers. – GrahamTheDev Jan 14 '21 at 21:51
  • 1
    Agreed. This is a well asked, specific question about accessibility. What’s with the quick “opinion” closure, thought that was discouraged these days. – steveax Jan 15 '21 at 03:02

0 Answers0