Bug: lesson side navigation a11y issues about theodinproject HOT 3 OPEN

Thanks for the great write up @thatblindgeye 💪

I've noticed it switches to the mobile layout when zoomed to that level - the lesson content centers and the side nav is hidden. There likely won't be enough space beside the lesson content to show the side nav on that viewport. Repositioning above the lesson content may be an option though?

But, it might also be ok to keep hiding it on smaller view ports. There was a discussion a while back where some users indicated they thought the side nav was a "nice to have". We haven't got any feedback about users missing it on mobile which validates that to a degree.

Is it important to always have the lesson table of contents on all viewports for a11y purposes? if it is, its definitely worth the effort.

from theodinproject.

So my rationale is that if it's something we're providing at X viewport/zoom level, it's something we should provide at all viewport/zoom levels. I'd agree that a repositioning would be the best approach (though we'd also need to be sure to make it sticky so that it's always within view to interact with). Repositioning may actually be best in general, i.e. not just at X viewport/zoom level, which can be better explained when I get into keyboard navigation below.

I think the side nav is a little more than just "nice to have", more so in lessons that have more sections to parse. It's a quicker way to jump to a specific section than just scrolling or using the browser search to get to that section, as well as get an idea of the structure/contents of the page (kinda similar to how AT may be able to view all the headings on a page to garner similar info).

In terms of a11y, there's two examples to view it from. For someone like me, I typically need any site I visit to be zoomed at at least 125% so that the text is large enough to read (not just TOP, just basically any site I visit). Currently it basically becomes choosing between readable text or navigation within a lesson. Another scenario is mobile viewing, where it can be even more tedious to scroll through a lesson that has a lot of content just to get to a specific part.

Another PoV would actually be keyboard navigation (which I may need to make an edit to my original post now that I think about it). If I'm navigating via keyboard, there's potentially a lot of content I need to tab through in order to get to a specific section. The lesson navigation alleviates that a lot, though we also need to move the lesson navigation to be before the lesson content within the DOM (currently you'd have to tab through the entire lesson content just to get to the lesson nav)

I'd argue that there being no feedback about a lack of side nav on mobile isn't necessarily validation. It could be, but it could also as likely be that people don't know that a side nav even exists depending on their setup (I think I may have been shocked that there even was one 😆 ) , or they don't know where/how to bring it up.

from theodinproject.

Everything except the lesson content is a nice to have in my book 😆

Putting it before the content on smaller viewports seems to be the most practical way to go about it, and a fairly popular UI pattern.

Web.dev

Rails Guides

Educative do something a bit more interesting, they incorporate it into the lesson content itself, its kind of like what we have with our "what you'll learn in this lesson" list:

I'd push back on sticky being a hard requirement for this. The only way I think we'd be able to pull that off is with a select box - it'll likely be too distracting on smaller viewports. But, I'd be open to it if we can find a nice way of doing it. Do you know of any sites that have sticky TOC navs we could look at?

from theodinproject.