Forum Discussion

KyleEgan-e53aae's avatar
KyleEgan-e53aae
Community Member
23 hours ago

RISE - Question numbers in quiz hidden to screen readers (Accessibility)

We have built a RISE course that uses the inbuilt quiz functionality not the quiz interaction. When we publish the course for testing the question number is not assessable to NVDA or JAWS. We test this in our LMS but we get the same result when we publish 'to web' 

When looking at the published code the question number 'Question 10/12' is set to aria-hidden="true" - 'quiz-card__step-label' if you are looking for it. Which tells me this is hidden on purpose. We have tried to find settings that change this, but it doesn't appear this is an option. We have explored putting the question number in the question, but we use random question selection from a quiz bank, so this is not an option if we want to keep this feature.

  • Is there a workaround to make the question number accessible to screen readers?
  • Why is this turned off? Surely the question number is important to non-sighted users.
accessibility
advice
e-learning development
Rise 360
  • KyleEgan-e53aae's avatar
    KyleEgan-e53aae
    Community Member
    3 hours ago

    Interesting... I was wondering what this hidden question text was. Thanks for this Sam. I had a read about this tabindex="-1" which makes the item non-tab-able. We have tested this, and you can backwards navigate to the question number from the question content in NVDA. I'm still thinking this should be tab-able and be the first item in the tab order. i.e. tabindex="1" (positive). Or removing the tab index to rely on the H1 as mentioned.

    Note: tabindex="-1" may be useful for elements that should not be navigated to directly using the Tab key, but need to have keyboard focus set to them. Examples include an off-screen modal window that should be focused when it comes into view, or a form submission error message that should be immediately focused when an errant form is submitted.

    • SamHill's avatar
      SamHill
      Super Hero
      3 hours ago

      Hi KyleEgan-e53aae that is the correct implementation. The only items that should be tab-able are interactive elements, such as buttons, links, form elements etc. When using a screen reader, the tab key is very rarely used. Users are more likely to navigate through content using the keyboard up/down/left/right arrow keys, maybe with a combination of the the CTRL key. The tab key is used more commonly by people who navigate websites with a keyboard, but without screen reader.

      tabindex="-1" is a method used when you would like to send the focus to an element using JavaScript but do not want to allow users to tab to the element, which you would not want if the element is not an interactive element.

  • SamHill's avatar
    SamHill
    Super Hero
    21 hours ago

    Hi there, just above the content you have highlighted in the screen shot is the version of the question number that is optimised for screen readers as "Question 1 of 12" rather than "Question 01/12" which works visually, but makes less sense to a screen reader user.

    You will see it is in a <H1> element. The element has a class of "visually-hidden-always", which hides it from the display layout, however, it is available to assistive technology.

    <h1 class="visually-hidden-always" tabindex="-l">Question 1 of 12</h1>

     

Related Content