CODEWITHSUNDEEP
htmltranslationaccessibilitywai-aria
c0derabbit
c0derabbit

Reputation: 33

HTML5 accessibility/ARIA: What role should I use within an article for the translation?

I would like to improve the accessibility in a blog I'm working on. The blog is bilingual, and by default appears in Hungarian. A click on a flag triggers the language change (JavaScript removes nodisplay class from divs with class=js-en and adds it to divs with class=js-hu).

I would like to separate the two parts of each article. I have considered using <aside>, but it wouldn't be accurate (when viewed in English, it is also primary blog content).

What do you suggest to improve the accessibility, with valid tags and ARIA roles?

Posts look something like this:
[Edit: changed <div class="js-en nodisplay"> to <div class="js-en" hidden>]

<article>
  
  <div class="js-hu"> <!-- blog post in Hungarian -->
    <p>
      magyar szöveg, nem értenéd
    </p>
  </div>

  <div class="js-en" hidden> <!-- blog post in English -->
    <p>
      same text in English
    </p>
  </div>
  
 </article>

Upvotes: 2

Views: 149

Answers (2)

Alohci
Alohci

Reputation: 82976

While the lang attribute is an important part of the communication, it does not represent an answer to your question.

For communicating the change for accessibility, you would use a WAI-ARIA state, not a role. In this case, the state to change on each element is the aria-hidden attribute.

But, using the html hidden attribute does that for you. According to the W3C's ARIA in HTML draft spec, the aria-hidden state automatically reflects the hidden attribute. So as you're already using the hidden attribute, no further changes are necessary.

Upvotes: 1

Knu
Knu

Reputation: 15136

Isn't that more the role of the lang attribute?

On the plus side you will be able to style the content depending on the language using the :lang pseudo-class.

Upvotes: 4

Related Questions