Keyboard navigation order for website navigation area

[ravicodelabs]

Bug description

Please refer to the live website here for an example: https://datascijedi.org/

Starting at the top left image (or starting with the navigation landmark), the screen reader flows from the JEDI Outreach Group image and heading, then skips all the way right to the search icon, and finally traverses the individual page navigation links. I think it would be better if the screen reader flowed to the page navigation links before the search icon, matching what is seen visually. Furthermore, the search icon takes three screen reader moves to get past (starting with entering a "combo box"), whereas only one would be ideal.

The skip to the search icon seems to be a result of the way Quarto is generating the HTML, and in particular, the ordering of the elements in the header.

Steps to reproduce

Any Quarto website with a header navigation with search icon should suffice, but you can use the JEDI Outreach Group website as a live example: https://datascijedi.org/

Expected behavior

• The screen reader should flow left to right in the header navigation items.
• The screen reader should only "stop" at the search icon once, rather than take three clicks to move past it.

Actual behavior

See bug description.

Your environment

Mac/Linux

Quarto check output

Quarto version: 1.4.388 (however, it also occurs on earlier versions)

[cscheid]

@jooyoungseo Do you know what the best practices are here? I'd love to fix this but I'm out of my depth. Thank you!

[jooyoungseo]

@cscheid -- I assume @ravicodelabs is talking about tabindex order, which can be easily fixed via tabindex attribute.

[cscheid]

@jooyoungseo Thanks. The problem, I think, is that we would want tabindex to correspond to some sensible ordering, but CSS makes that hard because the document layout doesn't match document layout.

Or, to ask differently. Is there a way for us to know what is an appropriate tabindex order is for screen readers, etc?

[ravicodelabs]

Hi, just a few more thoughts. It may be helpful to split my original post into two separate problems:

Problem 1) The ordering is not what is desired when using a screen reader, e.g. the search box precedes the web pages in the navigation.
Problem 2) The search box takes a few clicks to get through with a screen reader currently, whereas one would be ideal.

For Problem 1, in my tests it seems that tabindex does not seem to correspond to the way in which a screen reader (on Mac OS X at least) goes through the content of the website. And, I agree that using tabindex can get more complicated as well. On the other hand, adjusting the order of the DOM elements in the generated HTML works just fine. Hence, if feasible, a fix for this might be to just have the <div id="quarto-search" class="type-overlay" title="Search">...</div> block be the next sibling node after the <div class="collapse navbar-collapse" id="navbarCollapse">...</div> block; I can confirm that this fixes the screen reader ordering issue.

For Problem 2, it may take a bit of playing around/refactoring of the search box button, but using aria-hidden="true" on the some of the elements and possibly rearranging might do the trick.

I appreciate you looking into this!