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.
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.
