Remove uppercase transformation from sidebar tab items for accessibility reasons

[hichemfantar]

Improved readability by removing the uppercase transformation from sidebar list items.

this solution even saves horizontal space

Important for accessibility

research:
https://www.a11y-101.com/design/capitalisation

https://accessibility.huit.harvard.edu/design-readability

Avoid using all caps. Readability is reduced with all caps because all words have a uniform rectangular shape, meaning readers can't identify words by their shape.

tldr: The best thing to do is to avoid uppercase letters

before

after

[github-actions]

📦 Docs artifacts are ready: https://github.com/elixir-lang/ex_doc/actions/runs/12873336798/artifacts/2457747428

[josevalim]

After rebasing this pull request with some other changes, I think the menu is not calling enough attention to it, especially the currently selected item:

I think we may need other changes to either the selected one or all of them, to make them standout more.

[josevalim]

FWIW, the vitepress plugin makes the font a bit darker, docusaurus changes the color of the selected item. We probably want to apply this here and to our regular tabsets. Another option is to bold the currently selected item.

[hichemfantar]

the menu doesn't call attention because it previously relied on uppercase to make up for the thin font (still bad in terms of a11y), but now without uppercase we need to bring back the font to a normal level so it looks visible enough

example

[hichemfantar]

also notice how vite and the new font weight are pretty much identical (further proof (besides the research i linked) it's the more correct weight to use because vitepress has a large team behind with lots of experience in building great web experiences)

[josevalim]

I tried the increased font-weight locally to all of them and I thought it was still too subtle. :( You can see in the image above vitepress is also changing other styles besides of only the border.

[hichemfantar]

i suppose we could slightly lower the opacity of inactive elements but that would be horrible for readability if we keep the light font.

[josevalim]

I agree. I will play with some ideas too. WDYT about bolding the current selection? I want to avoid changing the font color though, because that changes per theme and language, and it will be hard to guarantee all languages look good across all themes.

[hichemfantar]

bolding the current selection would cause a slight layout shift when changing selection and the light weight font would still be an issue since the recommended value is 500 which is the same in all documentation engines i've worked with

[josevalim]

Good point on bolding and there is no need to repeat the information we are discussing in the other issue, I am aware.

In any case, if we cannot make the tabs look better in isolation, then we may need to look for other approaches.

[hichemfantar]

i repeated the info for other participants in the other issue to be aware because it's related to the font issue

[hichemfantar]

Although i find the current implementation to be good enough in terms of visibility we could go with this approach which addresses the accessibility issues while calling the attention you feel is missing

[josevalim]

My recommendation for the tabs is to apply some font-color modification, similar to vitepress and docusaurus. Here is how it would like with the Nunito font of #2053 without changing the uppercase:

We could also apply it to the regular tabs too. Thoughts @hichemfantar?

[josevalim]

It is very subtle, but enough to improve the experience when showing what is selected and also on mouse hover.

[josevalim]

For regular tabs:

[josevalim]

We don't plan more changes here, thank you, but I did add some color contrast to active/hover tabsets to main.

[hichemfantar]

@josevalim this is an accessibility fix not aesthetic

[hichemfantar]

@josevalim I hope you reconsider and apply the reasoning shown here #2046 (comment) and not look at it from an aesthetic pov

[josevalim]

I did some research and it was clear that the biggest concern applies to long sequences of uppercase text and not using text-transform.

I am open to alterntives here but this changes makes it so the tabs are not visually distinct enough from the rest of the sidebar. It just feels like regular text.

[josevalim]

Source: https://www.boia.org/blog/all-caps-headings-are-they-bad-for-accessibility

[hichemfantar]

Personally the uppercase severely hinders my ability to comfortably read the tab titles, do you experience this or is it the same as lowercase text to you?