w3c
TOC does not look like a nav
The table of contents does not look like a nav because there are no visual indicators that the section titles are links. I did not realize it was an interactive component until I accidentally moved my mouse over the section titles.
I think it's clear from the context: the heading is “table of contents”, and most web users are used by now to seeing a sidebar with a (clickable) summary of what's on the page (much like they're used to seeing breadcrumbs at the top, for example). Besides, I find it ugly (and I think it's less usable) when on an area of a page everything is a link and therefore everything is underlined: that's a lot of clutter. Context and the hover effect suffice here, I think. (For a11y, AT's can “see” all those links without problems, and the TOC is inside a <nav> anyway.)
Just my opinion :) Thanks for yours!
You make good points, but I'd like to counter that links don't need to be underlined to look like links. If you find it problematic that everything is a link in the TOC (and I agree that a wall of links can be overwhelming and and frustrating), then perhaps that should be addressed separately.
links don't need to be underlined to look like links
What do you suggest instead of underlining, then?
good question! There are so many options for links. I could go on and on, but here are some ideas to get started:
-
They can be highlighted with a background color.
-
A border could replace the underline, opening up styling options to make it more subtle or visually appealing.
-
Each section title could be followed by a cta to jump to that section, so that the entire title does not need to be a link. This gets at the point you made that the TOC is basically a wall of links.
-
a small indicator such as an arrow could be added to each title in order to convey that is it a link.
-
Color alone may also be used if it meets contrast requirements with surrounding text. (see this handy guide of color contrast and link states.)
-
Links can be bolded, although that alone might not be helpful for the TOC, since the entire TOC is a series of links. Again, we're getting back to the issue that the TOC is a wall of links. *sigh
-
You made the point earlier that people understand what a TOC is and how it should work, citing its common usage in rails. I actually find the rail very useful, since it can be positioned separately from the main content, and thus the user does not need to scroll back up to the top of the page every time they want to review the TOC. Moving the TOC into a rail might make it more readily understandable and functional.
Wow, so many ideas :)
Moving the TOC into a rail might make it more readily understandable and functional.
How would that “rail” be different from the current <nav> fixed at the left-hand side of the page?
Each section title could be followed by a cta to jump to that section, so that the entire title does not need to be a link.
Wouldn't that degrade a11y? Hyperlinks should be distinct and descriptive chunks text (not “click here” or a little icon)… or am I missing something?
Again, I think there isn't much need for changes here… But we definitely appreciate feedback and ideas.
If you still think it can be improved, I'd suggest you share a mock-up of a specific proposal (something quick will do; don't waste time). Or directly send a PR.
Sorry for the late response. It's probably not useful anymore, but I got slammed in the lead-up to the holidays.
It looks like the TOC was removed, so I would say that the rail nav made it unnecessary.
Although it's not relevant now, a jump link can include hidden text that screen readers can read out loud to users. But, another way to handle this might be to make it clear that each title is a link without necessarily underlining it. Even just adding an arrow can be sufficient indication.
At this point, I'm just speaking theoretically, but I felt like I had to respond anyway. :)
@MichellanneLi ... I'm pretty sure we didn't change anything over the holidays. Maybe try loading in a wider window? The sidebar doesn't trigger on narrow windows.
@fantasai Ah, yeah, thanks for pointing that out.
In that case, I still hold that the TOC doesn't read as an interactive component when it's not a sidebar.