Design Accessibility Improvements

[anphira]

For people with Irlen syndrome, too high a contrast is an issue. Using #000 with #fff is not recommended as large groups of users (especially older) complain about the harshness on their eyes. Recommend softening the blacks to #222.

On the links in post meta information - the post author and post category, recommend adding underline to show that they are links. While technically you can meet success criteria with a 3:1 ratio on the link text to surrounding text, it is strongly recommended to use clear underlines to make identification of links easier and more consistent. Additionally in the footer, in the "Designed with WordPress" where "WordPress" is the link, underline the link.

While WCAG does not specify a minimum font size, the generally agreed minimum recommended size is 14px. Please replace all 12px text with 14px. Especially with relation to the large h2 font size, the 12px feels particularly small.

Part of #3

[MaggieCabrera]

@iamtakashi can you have a look at this feedback, see what kind of design changes we should make to address it?

[joedolson]

I'll also note that underlined links in content regions is a requirement for the accessibility-ready tag in the theme directory. Regions like post meta data are a bit ambiguous on that point, but in my opinion they aren't obvious groups of navigation elements, which makes them more like content.

[MaggieCabrera]

I'll also note that underlined links in content regions is a requirement for the accessibility-ready tag in the theme directory. Regions like post meta data are a bit ambiguous on that point, but in my opinion they aren't obvious groups of navigation elements, which makes them more like content.

When are links "allowed" not to be underlined? Because commonly the header links are rarely ever underlined unless it's a specific design decision, for example. I think it would be better to have a blanket rule of "underline links everywhere except here and here", do you agree? also @melchoyce for your opinion here

[joedolson]

Any link that's in a clearly demarcated region of navigation where there other affordances that indicate that the links are interactive is a candidate for non-underlined. It's not a firm guideline of what qualifies and doesn't qualify, because it's highly context and design sensitive.

Links must be underlined when they're embedded within other text, such as within the body content of an article or comment. Areas like main navigation almost never require a link. Areas such as post meta data can fall into a broad spectrum of importance, depending on other clarifying indicators. I think we, as WordPress developers, tend to automatically identify post meta items such as author and category links as links, because we know internally how these are structured and what kind of content is there. Whether the design supports that is much more subjective.

I'm not sure what the reference context for this issue is, exactly, so it's hard to make more specific comments.

[MaggieCabrera]

@joedolson that helps, we can come back to this refering to specific cases. Thank you for clarifying!

[richtabor]

While WCAG does not specify a minimum font size, the generally agreed minimum recommended size is 14px. Please replace all 12px text with 14px. Especially with relation to the large h2 font size, the 12px feels particularly small.

Noting there is a level of subjectivity to this, and rarely does a "select all/replace" solution work holistically across design. We still need to think through how type fluidity works across the design system, but let's definitely keep this in mind.

[beafialho]

Thank you for the feedback! I suggest we make the following adjustments based on the issues raised by @anphira:

• Switch Contrast One from #000000 to #222222
• Underline Post Author Name and Category

In my opinion, we should stick with 0.8 rem for the smaller footer text which is technically 12.8px. There are sections, such as the sidebar, that will require text to be smaller. In which case, I recommend we stick with the original export.

I also believe that navigation links should not be underlined by default, just as they weren't in other default themes.

[afercia]

In my opinion, we should stick with 0.8 rem for the smaller footer text which is technically 12.8px.

I'm not sure that would be ideal. Making text so small is likely the best way to make it unreadable for many users. A font size of 13 pixels and less was likely good years ago, when the average screens size and resolution was smaller / lower. Today, the vast majority of desltop screens are very big. Same for laptops, where the very high screen resolution makes a font size of 13 pixels or less very small. On mobile, 13 pixels is very small on the vas majority of devices. I'd strongly recommend to revisit the font size hierarchy and make it start from no less than 14 pixels.

0.8 rem ... which is technically 12.8px.

A quick technical note. I'm not against using rem but, when it computes to an actual value of pixels with decimals, it is worth reminding that decimal pixels only work on operating systems and hardware that support subpixel rendering / antialiasing. It will work on a shiny new machine, but it will not work on old / cheap hardware, where a pixel can't be split in subparts.
Also, using a decimal value impacts also on the computation of the line-height. Browsers do have rounding mechanism but they work differemtly. It is likely that using decimals would actually render different line-heights in different browsers. As such, I'd recommend to use rem values that compute to whole numbers without decimals. Tpyically, in some browsers, that requires a rem value with several decimals. For example, with Google Chrome:

0.8rem        = 12.8px
0.81rem      = 12.96px
0.812rem    = 12.992px
0.8125rem = 13px

In my experience, other values may require up to 8 decimal numbers.
Ideally, also the line height values should compute to whole numbers.

[anphira]

I concur with @afercia - the general minimum is considered 14px, but in nearly all design work I do, especially in accessibility remediation, I don't allow any text under 1rem/16px. It doesn't matter how aesthetically pleasing a certain ratio is if people can't easily read it. When working with audiences with lower vision (or just generally older) I use 1.25rem/20px as the minimum font size.

In a recent study on US adults, 79% need some form of vision correction. It's over 92% when dealing with older adults.

[afercia]

@anphira thanks for your ping and thoughts.

In a recent study on US adults, 79% need some form of vision correction. It's over 92% when dealing with older adults.

When you have a chance, could you please point me to some resource about tha study? It would be very useful for the WordPress Accessibility team to include it in some documentation.

[richtabor]

Noting that I’ve bumped minimum sizes for body text to effectively 17px, and the “small” preset to effectively 14px in #268. Appreciate the feedback and thanks for helping out!

Next we’ll need to comb through patterns to ensure the right sizes are applied throughout.

[anphira]

@afercia some links I used from my presentation at WCUS: https://easya11yguide.com/learn/recipe-for-accessibility/

The 79% of adults: https://www.visionmonday.com/business/article/the-vision-council-releases-consumer-insights-q1-2022-report/ I didn't use the 92% in my presentation, and of course now I can't find the link.

[beafialho]

Noting that I’ve bumped minimum sizes for body text to effectively 17px, and the “small” preset to effectively 14px in #268.

That sounds good, thank you!

[luminuu]

I've been checking on things mentioned in this issue and the only thing that is left is the underlining of the post meta links. I've just created a PR for this.

[luminuu]

Since post meta doesn't need to be underlined as by feedback in the PR, all mentioned topics have been covered. Closing this issue now.

[afercia]

@anphira (late) thanks for the links!