如何使用 ARIA 使屏幕阅读器可以访问交互式活页夹？

Question

我的学校在 class 页面上使用 W3Schools flip card code 进行交互，添加了一些 JavaScript 以在单击或点击时保持卡片翻转。但是，我认为屏幕阅读器无法访问它们。看起来他们需要一些 ARIA 代码，而我对 ARIA 还很陌生。如何确保使用屏幕阅读器的学生可以使用翻页卡片？

我添加了一些 ARIA 代码，但我不确定它是否正确或有用。正面控制背面，反之亦然吗？我还使用 JavaScript 在翻转卡片时在 true 和 false 之间切换 aria-expanded。

<div class="flip-card">
<div class="flip-card-inner" tabindex="0">
<div class="flip-card-front" role="button" aria-expanded="true" id="flip-card-front_4" aria-controls="flip-card-back_4">
<p>Front of card</p>
</div>
<div class="flip-card-back" role="button" aria-expanded="false" id="flip-card-back_4" aria-controls="flip-card-front_4">
<p>Back of card</p>
</div>
</div>
</div>

Answer 1

您实际上不需要任何 ARIA，这很好，因为 first rule of ARIA 是不如果可以的话，请不要使用 ARIA。

我对 the example 做了两个小改动，它可以用键盘工作，用屏幕也能正常阅读 reader。

我变了

.flip-card:hover .flip-card-inner {

至

.flip-card:hover .flip-card-inner, 
.flip-card:focus .flip-card-inner {

这样您就可以在鼠标悬停或键盘焦点时获得翻转动画。

然后我将 tabindex="0" 添加到翻转卡片，以便您可以 tab 到它。

<div class="flip-card" tabindex="0">

使用屏幕 reader 运行，当您使用 Tab 键切换到翻页卡片时，您会听到卡片中的所有文本内容。对于 NVDA，我听到：

“头像图形 John Doe 标题 1 级建筑师和工程师我们喜欢那个人”

JAWS 相似但略有不同：

“化身 John Doe 建筑师和工程师我们喜欢那个家伙图形”

iOS 上的画外音效果不是很好。您可以滑动到图像，然后双击将其翻转，但它只会显示“头像”。但是，如果您继续滑动，则可以听到姓名和职位。你只是不知道卡片在你点击它时翻转了。

缺少的可用性部分是卡片的角色。用户如何知道卡片在收到键盘焦点时将要翻转？没有 standard role that fits this behavior so you might have to use `aria-roledescription' 来给它一个像样的描述。

<div class="flip-card" tabindex="0" aria-roledescription="flipping card">

也看看这个card design pattern。我不确定他是否在谈论翻转卡片，但它有一些很好的信息。

如何使用 ARIA 使屏幕阅读器可以访问交互式活页夹？

How to make interactive flipcards accessible to screen readers with ARIA?

html

javascript

css

accessibility

wai-aria