5

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:

enter image description here

  • 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

  1. 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?

Improve this question
2
  • 1
    Aren't you overthinking this? If you already use sementic elements the right way and have the document and content build up logically, everything should be accessible by keyboard and read by screen readers just fine. Why should only screen reader users benefit from the extra explanations/descriptions? Here's is a challenge: Try to make the document so that you need as few aria and tabindex attributes as possible, that will give you an idea how much complexity it takes away when you think about accessibility right from the start. Commented Jun 14, 2023 at 14:15
  • I'm not really using any semantic elements for the descriptive text at the top of the page. They're not accessible via keyboard because they're not really focusable. Voiceover just skips right past them and goes directly to the filters on the sidebar. Commented Jun 14, 2023 at 14:20

2 Answers 2

Reset to default
7

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.

Improve this answer
0

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.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.