Avoid partially hiding text

[t-hamano]

As far as I have investigated, the bottom of the text is hidden in the following two places:

• About Page: https://wordpress.org/about/
• Download Page: https://wordpress.org/download/

This may be intentional from a design perspective, but some users may not be able to understand the text at a glance, so I think it is undesirable from a usability and accessibility perspective. This issue may also depend on the locale.

For example, on the About page, the part below "2" is completely hidden (in my environment). You might know that this character is "2" because the numbers are consecutive, but I don't think what the character itself means should depend on the context.

Below is the English download page. The descender is hidden.

Below is the Chinese download page. The text is made up of complex lines, some of which are completely hidden.

[coffee2code]

See meta#7272 for an earlier Meta Trac ticket relating to this topic.

From that discussion, yes, the appearance was an intentional design decision. The numbers are a visual accent and not necessarily content.

And just a note that on the download page, each full word becomes visible on hover.

[t-hamano]

Thank you for letting me know about the ticket.

If this is intentional and a similar ticket exists on Trac, please feel free to close this issue.

[nukaga]

Thank you both! I think it is important to note that in Japanese, if one part of a character is not visible, it may appear to be a different character. I can see all the characters with hover, but not with the tab key. I feel that there is an accessibility issue for those who have difficulty reading text.

[ndiego]

@WordPress/meta-design thoughts?

[t-hamano]

I can see all the characters with hover, but not with the tab key.

I think this is a good point. This content on the download page is just a list; the full text is only visible on mouse hover. This means that users viewing the page using only the keyboard will not be able to see the full text.

[ryelle]

I can see all the characters with hover, but not with the tab key.

This means that users viewing the page using only the keyboard will not be able to see the full text.

This was intentional, the text here functions more as "decorative", so it was decided to not add another tab-stop for non-interactive content.

That said, it sounds like we have two reasons to change this

• Cut off English text can be hard to understand (accessibility issue, although not a WCAG violation)
• Cut off Japanese text might make characters indecipherable

[jasmussen]

There are options to visually refine this, i.e. find a different design. But this is a bit of a larger effort since a similar pattern is also used on the About page, so it would be nice if we could find an interim solution. Is that to simply allow tabbing through each item?

[ryelle]

I don't think so, personally, because the content is not actually interactive, so tabbing through would be confusing for keyboard users (generally buttons and links are tab stops, so these might appear to be broken links if you can tab to them). That also wouldn't fix the About page issue, which doesn't have the hover behavior (this issue is about both, this design pattern in general).

[t-hamano]

I don't think so, personally, because the content is not actually interactive, so tabbing through would be confusing for keyboard users

I also agree with this.

Additionally, as additional context for this issue, I think hiding some text is a fine approach, as long as the language of the text is immutable and the characters are fully understandable.

However, the text changes depending on the locale. In other words, the descender of the character changes and the hidden part also changes.

The screenshot below is a download page in Arabic with many descenders. Please note that this page has not been fully translated and is a temporary change made via a translation tool.

I don't understand Arabic, so I don't know how much of an impact this display will have, but I would expect it to look like this:

This seems to be possible by removing the height of the .is-style-features selector, but will this affect other sites and sections?

[miminari]

Hi, this is an exciting Issue. If this is a visual-only accent, shouldn't it be excluded from the accessibility tree? If we don't do that, this is contextual content. And if it is difficult for some to capture, how can we say that it is a design that should be on a page representing WordPress? Could this design potentially undermine the inclusive image of WordPress, a platform known for its diverse user base? Isn't an innovative yet inclusive design what WordPress deserves?