Page MenuHomePhabricator

Increase font size for links at the bottom of the screen
Open, MediumPublic

Description

The font size of the footer links is very small on small smartphone screens about 10.5px. We need to check if it complies with the accessibility rules.

image.png (1×640 px, 210 KB)

Event Timeline

@Volker_E - any thoughts from your side? Can we confirm it's an accessibility issue?

Correct, a minimum of of 12px equivalent is the smallest font size guidance.

ovasileva triaged this task as Medium priority.May 10 2021, 2:53 PM
ovasileva moved this task from Incoming to Triaged but Future on the Readers-Web-Backlog board.
LGoto added a subscriber: LGoto.

This task was closed as part of backlog upkeep. If you believe it was closed in error, please respond on the ticket.

stjn added a subscriber: stjn.

Reverting undiscussed silent close. Visual bug that still needs to be fixed.

Thanks @stijn, this is a valid accessibility issue and the font size should be bumped (slightly) to align to our DSG and accessibility level AA requirements.

Jdlrobson added a subscriber: Jdlrobson.

What font-size should be bumped to? Patch welcome.

13 px equivalent is the minimum font size defined in DSG and also the WCAG recommendation.

The font size for that text is defined in resources/skins.minerva.mainMenu.styles MainMenuItem.less as font-size: @font-size-minerva-small;. minerva.variables.less has

@font-size-browser: 16; // Assumed browser default of `16px`.
...
@font-size-minerva-small: unit( 14 / @font-size-browser, em ); // Equals `14px` at `16px` browser default.

The CSS that gets generated follows that same assumption:

#mw-mf-page-left ul li a span {
    font-size: 0.875em;
    font-weight: bold;
    vertical-align: middle;
}

However, my browser renders the font at 10.5px. What gives!? Well, these two <span>s are each inside a <li>, that has its own styles.

#mw-mf-page-left ul.hlist li {
    background-color: transparent;
    border: 0;
    margin: 0;
    font-size: 0.75em;
}

That sets the font size in those <li>s to 12px, not the 16px that had been assumed. And because em is relative to the font size of the parent element, it compounds.

The solution? Use rem. It's an em relative to the font size at the root of the document, so @font-size-minerva-small will be the same size everywhere in the document.

I've prepared a patch that chages @font-size-minerva-small and -smallest to use rem instead of em everywhere. I think this is better because it prevents accidental compounding issues that are likely to result in too-small text. The only question is if there is anywhere in MobileFrontend where the em font-size compounding behavior was intentional. I looked with codesearch but didn't find anything of concern, though it is difficult to tell just from stylesheets whether a particular element will have a parent with a larger font-size and I didn't find every usage "in the wild". The only possible problem I noticed was the changeslist styles in minerva.mixins.less, but any compounding there would also result in too-small text.
If this does end up being a problem, the 0.875rem value can be hard-coded into MainMenuItem.less.

Change 705034 had a related patch set uploaded (by AntiCompositeNumber; author: AntiCompositeNumber):

[mediawiki/skins/MinervaNeue@master] minerva.less: use rem instead of em for browser-relative font sizes

https://gerrit.wikimedia.org/r/705034

For clarity, the font size for the links will be 14px with a default font size of 16px.

image.png (448×399 px, 20 KB)