2

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>
unor
  • 92,415
  • 26
  • 211
  • 360
c0derabbit
  • 33
  • 7

2 Answers2

4

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.

Knu
  • 14,806
  • 5
  • 56
  • 89
  • Hm, I didn't think about that. It might be just what I'm looking for. `:lang` will be useful too. Thanks for that! – c0derabbit May 18 '16 at 04:02
1

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.

Alohci
  • 78,296
  • 16
  • 112
  • 156
  • 1
    `lang` attribute is the perfect answer to the question *"What do you suggest to improve the accessibility?"*. Indisputably. You won't communicate the change of language by relying solely on the `hidden` attribute. – Adam May 18 '16 at 09:25
  • 1
    @Adam - true, which is why I said that the lang attribute was important. But setting the hidden attribute communicates the *change*, which guides the AT to tell the user the newly visible text. – Alohci May 18 '16 at 09:38