Add aria-label to code block

[CaitBarnard]

📝 Provide a description of the improvement

When you add a code block to the editor, there is a small label on the right that says which language the code block is. This is inaccessible as an assistive technology user may not necessarily be able to pick that label up.

Is it possible to have some sort of event listener on the code blocks which updates the aria-label on this element?

<pre data-language="Python" spellcheck="false" aria-label="python"><code class="language-python">Test code block</code></pre>

📃 Other details

This is a snippet of how I'm solving the issue currently. However it only fires on change and so doesn't provide an aria-label when loading a page that already has an editor with a code block. It's also not sensible to have a setTimeout which is there as the change trigger takes a moment to generate pre elements and prevents it being null before it's had a moment to update.

for (let id in editors) {
        editors[id].model.document.on('change', () => {
          setTimeout(() => {
            const preElements = document.querySelectorAll('pre');

            preElements.forEach(function (pre) {
              const code = pre.querySelector('code[class^="language-"]');
              if (code) {
                const language = code.className.replace('language-', '');
                pre.setAttribute('aria-label', language);
              }
            });
          }, 300);
        });
      }

• Browser: Chrome
• OS: Mac OS
• CKEditor version: 5
• Installed CKEditor plugins: …

---

If you'd like to see this improvement implemented, add a 👍 reaction to this post.

[Mati365]

Hi @CaitBarnard! Thanks for reporting the issue, I added aria-label attribute to the code element in this PR: #16056. Can you take a look and let us know if this solves the reported problem?

[CaitBarnard]

Hi @Mati365. That solves the issue perfectly. Thank you for sorting that.

[Mati365]

@CaitBarnard We checked docs, and it seems that aria-label is ignored in most of non-interactive elements (including code tag). Are you using these aria-labels with a specific screen reader that supports it? Which one should we use to test it?

[CaitBarnard]

@Mati365 My bad, that's a good point that I completely overlooked. I believe the pre element can have an aria label. Is it possible to add it there instead? I've seen a few examples where a pre tag has an aria-label but I've yet to test it myself.

Another possibility I've seen is wrapping the pre/code in a figure with a figcaption which gets read by the screenreader instead but that feels a bit more hacky.

What do you think?

[Mati365]

@CaitBarnard No problem. I'm not sure if we can do that using pre aria tags in a way that is respected by all screen readers. We discussed internally that the aria-live mechanism used in other plugins would be sufficient, and after testing it looks like it works.

[CaitBarnard]

@Mati365 Thank you. I had a look at the PR and it makes sense to me. Should be sufficient :)