Using label and tabindex for non-selectable elements that give context about the page

Question

My work is developing a page to display a filterable list of mortgage products. As you can imagine mortgages are really complex, so there's a lot of extra information that a sighted user can simply read but a visually impaired user won't be able to.

My thought was to add a tabindex and aria-label/aria-description to these elements so they'd be read by the screen reader.

The page is structured like this:

• Blue - Decorative, non focusable text. It contains the user's mortgage information. (Your mortgage is X$ for a property worth Y$ for a term of $Z years)
• Pink - Filters, labeled and accessible
• Green - The mortgage products. These cards contain a ton of information and are quite confusing when read by voiceover. They contain:
  • Monthly payment amount
  • Initial rate value
  • Variable rate value
  • Fees
  • Overall cost

My questions are:

1. Can I make the Blue elements focusable and add a label containing the text displayed? For example, on focus it would read out:

Showing products based on your mortgage details of X$ for a property worth Y$ for a term of $Z years

2. Can I make the Green elements focusable and add a description containing a more conversational description of the product, on focus it would read out:

Mortgage product with a repayment mortgage amount of £122,010 over 13 years, representative APRC 7%. Total amount payable of £182,394 includes interest of £60,384 .

Is this more confusing? How do I convey this important information to someone using a screen reader?

Answer 1

No, non-interactive elements should not have a tabindex, and aria-label only works on certain roles.

It's a common misconception that tab is the only way to navigate a website using a screen reader. There are many, many ways to navigate using a screen reader. tab is just for interactive elements (links, buttons, form elements, etc).

Focus more on having a good page structure and using the right HTML elements for those structures.

I'm guessing each mortgage product probably has a main heading describing either the product itself or the bank that offers it. Make sure that heading uses a real heading element (<h2>, <h3>, etc).

Within each product, you might have a list of features for that product. If so, use a real list (<ul>/</li>).

When you use semantic HTML elements for your page structure, you allow the screen reader user to navigate by element. For example, H will navigate to the next heading. The heading does not need tabindex for this to work. To navigate to the next list, L can be used, or i for the next list item.

Answer 2

Yes, you can and you should.

Based on your description, the filter elements are the less important ones on the page. The real information is contained in the other elements, so I would focus much more on those elements rather than the filters.

Filters are a valuable feature and are certainly necessary in many cases, such as yours. However, they will never replace content and information.

You can have a website without filters. It might be annoying and difficult to use, but it is possible. But you simply can't have a website without content. And it's as simple as this: if you don't have content, what are you going to filter?

Now, I understand that you have content. However, a part of that content (the blue boxes) is only visible to users who can see. As a visually impaired user, I would really, really, REALLY like to know details like:

Showing products based on your mortgage details of X$ for a property worth Y$ for a term of $Z years

(By the way, I don't understand why you say this is decorative. It looks like the main information on the screen.)

The second option you mentioned (adding a more conversational approach) is not really necessary, but I think it's a nice-to-have feature, so I would go for it. Screen readers are robotic, so adding a bit more conversational tone may enhance the user experience.