w3c / tr-design

CSS used by W3C specs (this repo is not about the w3.org/TR index page)
https://w3c.github.io/tr-design/src/README
Other
64 stars 28 forks source link

TOC numbers not in proximity with text #82

Open shawna-slh opened 8 years ago

shawna-slh commented 8 years ago

In the TOC, the space between the numbers and the text makes it difficult to associate them. This is significant for some people with low vision and some types of cognitive disabilities. For example, some people with tunnel vision and some people using a high level of magnification will not be able to see the number and the text at the same time.

(draft related info: https://rawgit.com/w3c/low-vision-a11y-tf/FPWD/requirements.html#proximity-of-related-information)

fantasai commented 8 years ago

Okay, so, I'm still trying to think through this change. I definitely want us to have the most usable and elegant ToC design we can, but there's some conflicting factors here. For example, I want to somehow keep the stacking effect of the numbers, because I think it's easier to scan looking for a particular section number when they're stacked like they are in the current design. I'm also not 100% sure that the association of numbers to headings in the ToC is that important. You're generally either looking for a number -- in which case scanning straight down the left margin is easier than tracking indentation -- or you're looking for words, in which case you're scanning the words and might care about nesting (which is represented in the indentation) but don't care about numbers. I think the number of times you're trying to figure out which title is associated with which number is pretty small compared to these other two cases, so optimizing for them seems more important. And you can always click through to the section itself to see that, once you've found it (either by number-scanning or word-scanning). We could maybe adjust the :focus/:hover highlight effect to work across the gap, though, which would help in this last use case.

What do you think?