search

anjia / blog

博客，积累与沉淀
106 stars 4 forks source link

WAI-ARIA Authoring Practices 1.1 #71

Open anjia opened 4 years ago

anjia commented 4 years ago

https://www.w3.org/TR/wai-aria-practices-1.1

这篇文档描述了如何使用 WAI-ARIA，包括规范里可能不明显的注意事项，以及使用 WAI-ARIA 的 roles, states 和 properties 开发小部件/导航/行为的方法。

WAI, Web Accessibility Initiative ARIA, Accessible Rich Internet Applications AT, Assistive Technologies

功能上，ARIA 的 roles, states 和 properties 类似于辅助技术的 CSS。对屏幕阅读器而言，ARIA 控制着它们的非视觉体验的渲染。

在正式开始之前，先了解两个原则： 原则1：role 是个承诺。eg.role="button"意味着开发人员用JS提供了键盘交互，让这个元素用起来就是个按钮。不同于 HTML 的input元素，ARIA roles 不会让浏览器自动提供键盘行为和样式。 原则2：ARIA 提供了可访问性语义，是把双刃剑

这篇指南的目标之一就是：为每一个 ARIA role 定义预期的行为。

FE 要做的

  1. 合理使用 WAI-ARIA 的 roles, states 和 properties
  2. 实现键盘支持，让 ARIA role 表现符合预期

当然之前需要了解辅助技术的互操作性。可查看文章入门 #60 #62

目录

  1. 设计模式和部件（枚举了预期行为，并附代码例子）
  2. Landmark Regions
  3. 提供可访问的 Names 和 Descriptions
  4. 开发键盘接口
  5. Grid 和 Table 相关的 Properties
  6. role="presentation"
  7. 自动隐藏语义的 Roles，通过控制后代的显示
anjia commented 4 years ago

1. 设计模式和部件

Alert

role="alert" 非模态的。旨在给用户个提醒（重要&时间敏感的信息），但不中断用户的当前工作。

键盘交互，无。

大多数屏幕阅读器会自动读出动态渲染的 alert 框，在有的操作系统里还会发出通知的声音（如果页面还没加载完，屏幕阅读器可能不会通知用户来了个 alert 框）。

在设计 alert 时，需注意：

role="alert" 默认会有这两个属性（不用显式声明）

https://www.w3.org/TR/wai-aria-practices-1.1/#alert https://www.w3.org/TR/wai-aria-1.1/#alert

Alert 和 Message Dialogs（Modal）

role="alertdialog" 是个模态框。它会中断用户的当前工作，传达重要信息并需要响应，eg.确认提示、错误消息确认。

键盘交互，同 Dialog 的。

WAI-ARIA 的 role、states 和 properties：

role="alertdialog"需要写这三个属性：

  • aria-modal 比 aria-hidden 的优先级高
  • aria-modal 比较新，个别设备可能会不支持

eg.

<div role="alertdialog"
     aria-modal="true"
     aria-labelledby="dialog_label"
     aria-describedby="dialog_desc">

    <h2 id="dialog_label">确认</h2>
    <div id="dialog_desc">
        <p>确定要丢弃所填内容？</p>
        <p id="word_count">50个字将被删除</p>
    </div>
    <div>
        <button type="button">否</button>
        <button type="button" aria-controls="notes">是</button>
    </div>
</div>

键盘支持：

https://www.w3.org/TR/wai-aria-practices-1.1/#alertdialog https://www.w3.org/TR/wai-aria-1.1/#alertdialog

Dialog（Modal）

role="dialog" 模态框。模态在主窗口或者另一个 dialog 窗口。

可访问性特性：

role="dialog"需要写这三个属性，同role="alertdialog" 键盘支持，同role="alertdialog"

https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal https://www.w3.org/TR/wai-aria-1.1/#dialog

anjia commented 4 years ago

Link

链接，提供一个超链接，可以是其它页面、网页内锚点、文件、邮箱、电话等。

键盘交互：

例子：

说明：尽可能使用<a>创建链接，因为浏览器自带了一些有价值的功能，例如，在新窗口中打开目标、将目标URL复制到系统剪贴板

Button

role="button"，允许用户触发一个 action 或者 event，比如提交表单、打开对话框、执行删除操作。 另外，若是激活对话框的按钮，有个约定，就是按钮文案后面跟 "..."，比如“另存为...”，文件的“浏览...”

除了普通的按钮之外，WAI-ARIA 支持另外两种类型的按钮：

说明：按钮和链接提供的actions类型，明显不同。所以，部件的UI和role要和它提供的功能匹配，这点很重要。然而，真正的页面上，这两种UI的混用还是很常见的。即长的像A，表现却是B。在这种场景下，我们可以通过role="button"来给辅助技术提供无歧义的元素功能。

键盘交互：当按钮获得焦点

WAI-ARIA, Role + State + Properties

若按钮是<div>或者<span>模拟的，则还需要

示例

// 操作按钮，keydown
function actionButtonKeydownHandler(event) {
  // space 键
  // 在 keyup 时会激活按钮，但是它的默认操作已经在 keydown 上触发了
  // 需防止在激活按钮之前停止滚动页面。
  if (event.keyCode === 32) {
    event.preventDefault();
  }
  // enter 键，keydown 时激活按钮
  else if (event.keyCode === 13) {
    event.preventDefault();
    activateActionButton();
  }
}
// 操作按钮，keyup
function actionButtonKeyupHandler(event) {
  // space
  if (event.keyCode === 32) {
    event.preventDefault();
    activateActionButton();
  }
}

// toggle 按钮
// 1. 点击了之后，切换状态
// 2. space 是 keyup 激活
// 3. enter 是 keydown 激活（space keydown 时会触发）
anjia commented 4 years ago

Menu Button

菜单按钮，可以打开一个menu。UI 上一般有向下箭头或三角形，以此表示激活按钮之后会显示个菜单。

键盘交互：

WAI-ARIA Roles、States 和 Properties

menu 元素其它更多的 roles, states 和 properties，详见 Menu 或 Menu bar