Language and text direction are not editable in the visual editor

[karlgroves]

Language and text direction are not editable in the visual editor

• Severity: Medium
• Affected Populations:
  • Blind
  • Low-Vision
  • Cognitively Impaired
• Platform(s):
  • All / Universal
• Components affected:
  • Block Editing
  • Title Block

Issue description

Users who need to add content in multiple languages cannot set the
lang or dir attribute for a block using the visual editor.
Instead, users must manually switch to the HTML editor.

In the HTML editor, adding a dir or lang attribute brings up an
error and the offer to resolve the error by either removing the dir
and lang attributes or converting the block to HTML. This allows
users to manually add in these attributes, however the editor suggesting
that these are errors may lead users to believe they cannot use these
attributes at all. It also requires users to be familiar with HTML.

Remediation Guidance

Add the ability to define lang and dir attributes in the visual
editor (probably via the block editing options), ideally with
user-friendly options such as choosing from language names and then
choosing between "left to right", "right to left" or "vertical".

Relevant standards

• 3.1.2 Language of Parts (Level
  AA)

Note: This issue may be a duplicate with other existing accessibility-related bugs in this project. This issue comes from the Gutenberg accessibility audit, performed by Tenon and funded by WP Campus. This issue is GUT-111 in Tenon's report

[afercia]

While Gutenberg seems to correctly parse, for example, <span> tags with lang and dir attributes within a block content...

<!-- wp:paragraph -->
<p>Hello this is some <span lang="it">testo</span> to test the lang and <span dir="rtl">dir</span> attributes.</p>
<!-- /wp:paragraph -->

...it doesn't provide any user interface to add these attributes. Worth noting this isn't new, as the Classic Editor doesn't provide any user interface as well, at least by default.

Worth also noting there may be the need to set these attributes to the whole block, for example a paragraph, a list, a quote, etc.:

<!-- wp:paragraph -->
<p lang="ar" dir="rtl">العربية</p>
<!-- /wp:paragraph -->

It would be great for Gutenberg to provide this functionality, maybe via the Format API?

[kjellr]

We discussed this ticket in the weekly #design chat today. This would be very cool to include! I've definitely heard feedback from users about this friction point.

Since this was also not part of the classic editor by default, it seems to me that it'd be great to have this be part of a plugin to start with. That way, the whole writing experience could be fully considered through the lens of users writing multi-language posts. This would allow us to address tickets like #15350 alongside this one as a complete solution.

[enriquesanchez]

Here's a quick mockup that proposes how to address this from the block settings:

What this setting would do is add lang="en-US" to the block html.

I would much prefer to explore ways of having this setting on the block toolbar, I however don't feel this should be a first-level toolbar item and also feel that nesting this inside a sub menu would not be ideal.

That being said, if we could figure out how to have this setting in the block toolbar, we could have the lang attribute applied to a particular text selection, instead of the whole paragraph block, similar to how a link is applied.

See #15350 for a document-level exploration of this same setting.

[mapk]

This looks good 👍 @enriquesanchez! Because the user would be in the "Block Settings" I think it's okay to drop the word "Text" from the label and just use "Language" like in #15350.

Should we also say in the helper text, "Set the block's language attribute." ? I ask because maybe this can apply to more than just the Paragraph block, like the Media + Text block.

[enriquesanchez]

This issue was discussed during an accessibility bug scrub in Slack.

Because of the complexity and number of language localizations, a concern was raised about not being able to list all the localizations in a dropdown selector.

A text input could probably be a better alternative. That being said, knowing the exact parameter to enter seemed like an advanced option, and we weren't sure if this would also be a good idea either.

This issue needs more feedback and research.

[oldrup]

As a Gutenberg user, I'd personally find it satisfactory if a language selector for text blocks (inkl blockquote etc), would allow me to select a language from the ones installed under **General Settings > Site Language **.

Screenshot:

It is possible to switch to the HTML editor, adding the lang attribute manually like shown below. But if block is switched back to the visual editor, for editing content, the attribute is being removed.

Screenshot:

It appears to me, that there is no currently no feasible way to choose a different language for a block, even if you are willing to add the lang attribute manually. I would surely appreciate such an option.

[supernovia]

This came up in a support request in the WordPress.com forums:
https://wordpress.com/forums/topic/use-multiple-languages-in-one-post-e-g-poetry-translation/

It would be nice if the block at least accepted a lang="" parameter when someone sets it manually with HTML, but better still if it were an option in every text block's settings.

Or, perhaps under Advanced where one can add a class, allow people to add other parameters there.

[joedolson]

It would be great to see some progress on this issue! We should be able to set the language of a block or the language of a specific string of text within a block. This is a fairly significant accessibility issue, so I'd love to see something move forward with this again.

Is it possible that we could do language detection to limit the number of items suggested for content? Obviously, that would only work when applying a language after content has been written, but it would be an interesting way of narrowing the options.

As a minimum solution, I agree with @supernovia that having a field equivalent to the 'class' field where somebody can add a lang value would be helpful, though a language selector helps ensure that we can pass a valid language code.

[oldrup]

Living in a non-English country, most of my content is not in English, however I often quote English articles, and in the current state, the Gutenberg editor does not allow me to set the lang attribute on a block or inline level.

That really messes up screen readers, as they read aloud English texts as if they were Danish. It sounds fun to me, as I can read the actual text myself, but it's less fun to my sight impaired friends.

Here's an article that describes the problem better than I do:
https://www.craigabbott.co.uk/blog/using-the-language-attribute-to-make-your-website-accessible

Does anyone have a solid and future-proof workaround to this problem?
Bjarne

[swissspidy]

Does anyone have a solid and future-proof workaround to this problem?

It should be trivial to create a small plugin that adds this to the Paragraph block. I might take a stab at it if nobody beats me to it.

[oldrup]

Does anyone have a solid and future-proof workaround to this problem?

It should be trivial to create a small plugin that adds this to the Paragraph block. I might take a stab at it if nobody beats me to it.

On my quest to create websites, accessible for everyone, I was evaluating all the screen readers and updating my habits when creating content accordingly.

The largest, single hurdle now - to me - is that I'm unable to set the language attribute of a paragraph. In theory, it SHOULD be simple, it's just an attribute, just like the font size, weight and I would go through the trouble adding it manually to the HTML, if I had no other options - and - if it weren't for Gutenberg sanitizing (removing) the attribute.

Trivial? To you, maybe. I'd be happy to help test any proposed solution or workaround. 🤞

[swissspidy]

Just realized that an option to set the text direction already exists:

But it's only shown if you're currently using an RTL locale 🙃

So that partially addresses the dir part of the issue, not the lang part.

[joedolson]

That option should definitely be available in both RTL and LTR. Odd bias, that RTL authors might want to use LTR, but not the reverse. Extending a related option to also set language would be a huge win!

[swissspidy]

Here's a quick and dirty plugin I just whipped up:

https://github.com/swissspidy/gb-lang-dir

[John001-alt]

Here's a quick and dirty plugin I just whipped up:

https://github.com/swissspidy/gb-lang-dir

hey @swissspidy !
I've just installed your posted plugin and ty btw for the effort, but I can't find such option on your screen shot on Gutenberg editor, Can you help me out showing me where to find those option?

[swissspidy]

@John001-alt You'll need to build the plugin first (npm install && npm run build). If it still doesn't work, create an issue on that repository and I can take a look.

[John001-alt]

@John001-alt You'll need to build the plugin first (npm install && npm run build). If it still doesn't work, create an issue on that repository and I can take a look.

@swissspidy Thank you for your kind reply, Unfortunately I'm a newbie at coding I just downloaded the files and added the .zip file as a new plugin to my WordPress, because this is a critical need for my website :( I couldn't find a way to fix it as it seems Gutenberg doesn't support RTL inline text so far.
If you have a ready to use plugin for this issue I would appreciate if you can suggest me .
Thank you

[swissspidy]

In the meantime, @audrasjb has published a similar plugin to WordPress.org: https://wordpress.org/plugins/lang-attribute/

[druxstr]

Doesn't the PR #49985 partially solve this issue ?

[Mamaduka]

@joedolson, @swissspidy, can we close this now that #49985 is merged?

[swissspidy]

I guess so 👍

[oldrup]

An option to set the lang attribute on an existing element (p, h1, blockquote) would be preferable. It appears, the a <bdo> element is added when changing language.

Current implementation:

Example of lang attribute usage on MDN:

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang

[audrasjb]

An option to set the lang attribute on an existing element (p, h1, blockquote) would be preferable

I disagree @oldrup since the text can be a small fraction of a paragraph.

For example, this would be a valid implementation:

<p>In French, <span lang="fr">c'est la vie</span> means “that's life,” borrowed into English as idiom to express acceptance or resignation, much like Oh well.</p>

[oldrup]

@audrasjb I don't disagree, of course we should be able to set the language for at part of a paragraph using span.

I'm arguing that we shouldn't be forced the <bdo> element when setting the language of an html element.

In fact, as far as the current implementation goes, your exact example would probably not be possible to re-create in the block-editor.

Or am I missing something?

Is there a way to achieve <h2 lang="en">WordPress rocks!</h2> today?

[geoffreycrofte]

I agree with @oldrup on this, the lang and direction should be put on both inline and block elements, since they are global attributes.

Also, I would argue on the use of instead of , but maybe I'm missing something.