Kevin Powell - Community•6mo ago

revealed content not starting at desired point

Hey, i have 6 paragraphs, 3 of which are hidden that become revealed when pressing a button. When scrolling through with a screen reader and pressing the button, you have to scroll up to read out the newly revealed items as scrolling down just moves on. In terms of this example, would there be a way to put the focus on paragraph 4 after pressing the button (or at the start of the revealed content) so everything can be read out smoothly and in order. Is this a common practice to do with things like this? I'm new to js so any recommendations are most certainly welcome for that too haha (i notice the hidden content flickers when reloading so maybe that's something that could be improved perhaps), thanks in advance. https://codepen.io/deerCabin/pen/KKLOQbY

CodePen

screen reader query

...

8 Replies

snxxwyyOP•6mo ago

Is anybody able to help out?

Kevin Powell•6mo ago

I like how you're thinking about this! It's great to see someone trying to make content more accessible! A few notes: aria-expanded in this case doesn't really help, because it doesn't tell the user what is expanded. If you have a button that's causing an interaction like this, it should have an aria-controls as well, which points to an ID on the element it's "expanding", which does mean it should only be controlling one element. Generally with something like this, you'd wrap the extra elements in a div, and then that could be what the button is targetting, plus then you also don't need a loop, you just need to select that one element to hide/show it. As far as you're question in terms of reading order, it's a really good question. I feel like having the button before the text that it ads makes more sense semantically, and then the other content will appear after it. Of course, this raises the question of the read less version... and I almost feel like it makes sense to have two buttons, one to expand the div, and then another to shrink it, instead of relying on one button. Something like this:

<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
<button onclick="revealItems()" aria-expanded="false" aria-controls="more-content">Show More</button>
<div id="more-content">
  <p>paragraph 4</p>
  <p>paragraph 5</p>
  <p>paragraph 6</p>
  <button onclick="hideItems()">Show Less</button>
</div>

<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
<button onclick="revealItems()" aria-expanded="false" aria-controls="more-content">Show More</button>
<div id="more-content">
  <p>paragraph 4</p>
  <p>paragraph 5</p>
  <p>paragraph 6</p>
  <button onclick="hideItems()">Show Less</button>
</div>

And you hide the show button when the more content is visible... I think that's how I'd approach it anyway, and then ask a screen reader user or two if the experience makes sense.

snxxwyyOP•6mo ago

Thank you for appreciating it! All of that information is extremely useful and makes a lot of sense, thank you, it’s much appreciated.

clevermissfox•6mo ago

Are you aware of any testing or web spaces to find users that user screen readers regularly that will test your site for usability ?

Kevin Powell•6mo ago

I don't know of any, no :\

snxxwyyOP•6mo ago

is it not detectable with javascript or a library for someone using a tool on your website? you could then store the data if so oh, sorry i forgot to ask, is this the only type of scenario where you'd need to utilize aria-controls, or are there others too?

Kevin Powell•6mo ago

I can't think of any others... it's to say "this element you're interacting with controls this other element over here" Also, pretty sure there's no way to detect if a user is using a screen reader, since it's one level removed from the browser. It has no idea.

snxxwyyOP•6mo ago

ah okay i see, thank you. oh that's unfortunate.

Gaming

Programming

revealed content not starting at desired point