0

Here basic example of what I'd like to do:

HTML:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li hidden>Item 4</li>
  <li hidden>Item 5</li>
  <li hidden>Item 6</li>
  <li hidden>Item 7</li>
  <li hidden>Item 8</li>
</ul>
<button type="button">load more</button>

JS:

// Pseudo code
button.on('click').then(loadThreeMoreItems());

From the logic it's kind of easy and it would work fine with keyboard usage. But I'm not sure how get this more accessible for screenreaders, so the get noticed when new items are added to the list.

Does anyone have an option/kickstart of how to do this the right way?

In my search I found nothing. Maybe I look for the wrong keyword.

Thank you!

closed as off-topic by Madalina Taina, Michael Lai Aug 15 at 2:34

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – Madalina Taina, Michael Lai
If this question can be reworded to fit the rules in the help center, please edit the question.

  • Are all items already loaded but just not yet visible, or are they retrieved from the server when the button is clicked? – jazZRo Aug 14 at 15:35
  • Currently only hidden. AJAX loading might be a future option. – vaxul Aug 14 at 15:40
  • Please edit your question to be more UX focused, with fewer code references. Question about implementation are not encouraged here and could be hard to understand by all the UX specialists. – Madalina Taina Aug 15 at 1:47
  • 1
    Hi, as you can see it was my first post here. My thought was, that accessibility is a topic for UX, even if a solution may be programmatically. – vaxul Aug 15 at 4:29
2

Since all items are already loaded, the "load more" function is there probably only for visual clarity and not for performance. When using a screen reader, there is no benefit in having to load more items, as this function only exists to have a nicer overview for people who can see. If this is true, all items can be made directly accessible for screen reader users but the "hidden" items can be made only visually hidden. Like this:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li class="sr-only">Item 4</li>
  <li class="sr-only">Item 5</li>
  <li class="sr-only">Item 6</li>
  <li class="sr-only">Item 7</li>
  <li class="sr-only">Item 8</li>
</ul>

The sr-only class can be something like this:

.sr-only {
    display: block !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
  • Wow, thanks. I never thought in this direction. Do you know a way, when I have to do AJAX loading to announce new items to screenreaders? – vaxul Aug 15 at 4:30
  • You can add the aria-live="polite" attribute to the <ul> and just load the items in the list. But also aria-describedby that points to some help text (or the button if its label is clear enough). – jazZRo Aug 15 at 7:29
  • Thank you for this hints. – vaxul Aug 15 at 7:37

Not the answer you're looking for? Browse other questions tagged or ask your own question.