HTML5 accessibility/ARIA: 我应该在一篇文章中扮演什么角色进行翻译？

Question

我想改进我正在处理的博客的可访问性。该博客是双语的，默认情况下以匈牙利语显示。单击标志会触发语言更改（JavaScript 使用 class=js-en 从 div 中删除 nodisplay class 并使用 class=js-hu 添加到 div）。

我想把每篇文章的两个部分分开。我考虑过使用 <aside>，但它并不准确（当以英文查看时，它也是主要博客内容）。

你有什么建议来提高可访问性，使用有效的标签和 ARIA 角色？

帖子看起来像这样：
[编辑：将 <div class="js-en nodisplay"> 更改为 <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>

Answer 1

这不就是lang属性的作用吗？

从好的方面来说，您可以使用 :lang pseudo-class.

根据语言设置内容的样式

Answer 2

虽然 lang 属性是通信的重要组成部分，但它并不代表您问题的答案。

为了传达可访问性的变化，您将使用 WAI-ARIA state，而不是 role。在这种情况下，每个元素要更改的状态是 aria-hidden 属性。

但是，使用 html hidden 属性可以为您做到这一点。根据 W3C 的 ARIA in HTML 规范草案，aria-hidden 状态自动反映 hidden 属性。因此，由于您已经在使用隐藏属性，因此无需进一步更改。

HTML5 accessibility/ARIA: 我应该在一篇文章中扮演什么角色进行翻译？

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

html

translation

accessibility

wai-aria