How can I make a testimonials page more accessible for users of screen readers?

Question

The page has one heading up top, followed by quotes from users, their organization's logo and a link to their homepage, and their name and position.

Right now, the outline for screen readers has a single heading in the main part of the page. I think ideally, there should be subitems for each testimonial, preferably identified by organization (but then, I'm new to this accessibility deal). But I can't find an appropriate ARIA role to add.

There'll also be a 'show more' button at the bottom.

The other solution I was think of is throwing some <h2>s in there, but, I have no idea if that could be good practice or not.

The questions:

• Should a subitem for each testimonial appear on screen readers?
• If so, is there an ARIA role that would be appropriate?
• If not, is there an alternate solution, or should I let it go?

Thank you.

Answer 1

You are not required to make each testimonial a subitem. If you do so, you don't need an ARIA role at all: make it just an h2.
But you may choose another way of proceeding: make each of your users quotes a blockquote or, if it is not suitable for some reason, an article (either as a <div role="article"> or as a <article> HTML 5 semantic mark-up tag).

Answer 2

Try to envision (no pun intended) how a screen reader user would navigate the comments. Headers are very useful for navigating. I can hit '1' or '2' or '3' to jump to each H1, H2, H3, respectively. Or I can use 'H' to navigate to each header regardless of the level.

For example, with a google search, each result is an H3. It's very easy to move to the next search result.

You'll have to decide what text should be the H3 (or H2 or whatever level you decide). Should it be the organization name, user name, the testimonial itself? That's kind of a design question.

If you don't use the native html header tag (H1, H2), then make sure you specify the proper aria tags:

   <div role='heading' aria-level='2'>