Search code examples
htmlaccessibilitywai-ariavoiceover

How to group a set of divs for accessibility

I wanted some help with accessibility: How can we group a set of divs so they are read out as a single group in screen reader mode?

Example:

Sample layout

Here you can see that there are two rows; how can I make each row be read out with all the details?

Solution

  • One option is to set an aria-label on the parent div and hide the child divs using aria-hidden="true".

    Based on your example image, the aria-label would have the format:

    aria-label="<TIME> <DESCRIPTION> <CITY>"

    e.g. aria-label="10:31am Package left FedEx location Memphis, TN"

    The screen reader should announce the aria-label on the parent div and ignore the child divs.