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:
- 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
- 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?