【译】アクセス可能な Web コンポーネントの開発

原文： http://www.zcfy.cc/article/320

这篇文章的审校工作是由Mallory van Achterberg完成的。谢谢所有SitePointer的审校者，因为你们，SitePointer才能提供如此优质的内容。

在 上一篇文章 中，我演示了如何创建一个有多选功能的Web组件。读者在评论区域提到了Web组件无障碍这个重要的话题。毋庸置疑地，如今Web无障碍非常重要。所以，让我们来看看无障碍的含义，以及如何提高Web组件的可访问性（通过一个真实的例子）。

本文中的代码示例将基于上一篇文章中的代码。你可以从 GitHub仓库 复制一份，也可以查看本文结尾的 例子 。

提高Web组件可访问性的必要条件

组件的可访问性通常涉及以下方面：

1. 标签语义化
2. 键盘支持
3. 视觉无障碍

让我们更深入地了解各个方面。

标签语义化

你应该听说过屏幕阅读器。屏幕阅读器通过大声播放屏幕上展示的内容，帮助盲人或弱视群体使用应用。现在有很多屏幕阅读器，例如Windows的 NVDA 和 JAWS ，Chrome的 ChromeVox ，以及OS X的 VoiceOver 。

当元素获得焦点时，屏幕阅读器会将该元素的相关信息朗读给用户听。因此，当浏览器的焦点落到 e67338802192d7bd5294b2aa965c9bc5 时，用户能通过视频阅读器了解到他们正在应对一个文本输入框（可以输入内容的东东）。但如果焦点落到了一个空的 <div> 上，那么屏幕阅读器不会报道任何信息。

为了解决这个问题，我们可以参考 WAI-ARIA （Web无障碍标准计划 - 无障碍富互联网应用），通过添加特殊的ARIA属性提高组件标签的语义化。这些额外语法能帮助阅读器分辨界面上的属性、关系和状态。ARIA的详细使用说明可以在 WAI-ARIA开发实践 找到。

键盘支持

我们对键盘支持的目标是可以完全通过键盘使用组件。WAI-ARIA为 许多UI控件 定义了行为和键盘交互方式。如果想知道组件应支持什么按键，可在文档中寻找并参考类似组件。例如，多选组件与 组合框 类似。

除了支持键盘操作，我们还应主动提示用户如何使用按键操作组件（例如，在应用中提供指引）。

视觉无障碍

这里会介绍组件的视觉无障碍问题。请保证你能对以下问题回答“是”：

• 所有元素和文字都足够大，能被看清楚吗？
• 组件在高对比模式下是否能清晰传达信息？
• 若组件没有颜色，是否能被正常使用？

记住，并不是所有有视力障碍的用户都 完全看不见 。有相当一部分用户是弱视或色盲。

提高多选Web组件的可访问性

现在，我们将通过前面提到的方法，提高多选组件的可访问性。以下是具体的步骤：

• 扩展标签语义
• 添加键盘支持
• 验证视觉可访问性

别忘了，你可以在文章的底部查看组件示例，或者通过 GitHub仓库 下载代码。

所有的代码片段都可以通过 multiselect.html 获取

扩展标签语法

经验表明，我们最好优先使用原生HTML元素，而不是自定义组件。如果你可以使用内置无障碍功能的原生HTML控件，那么就尽量使用它。万不得已时，再自定义组件并使用ARIA属性。 在HTML页面中使用WAI-AIRA避免冗余 中有更详细的说明。

在这个例子中，多选组件是一个自定义组件，因此，我们需要使用ARIA属性。首先，让我们在 ARIA文档 中找到类似的组件。貌似多选组件与复合框组件比较相似。那么，根据 复合框描述 ，看看我们需要添加哪些ARIA属性。

根据指引，我们需要添加以下角色：

1. role="combobox" 组件的根元素
2. role="listbox" 选项列表
3. role="option" 下拉列表中的每一项

需要添加的ARIA状态属性：

1. aria-expanded="true/false" 为根元素添加该状态，以表明组件是打开还是关闭状态
2. aria-selected="true/false" 为下拉列表的每一项添加该状态，以表明选项是否被选中

我们可以直接将 combobox 和 listbox 角色添加到组件的标签中：

<div class="multiselect" role="combobox">  <div class="multiselect-field"></div>  <div class="multiselect-popup">    <ul class="multiselect-list" role="listbox">      <content select="li"></content>    </ul>  </div></div>

各オプションにオプションの役割を追加するには、refreshItems メソッドでオプションを反復処理する必要があります。このメソッドは、コンポーネントの作成時に呼び出されます。

multiselectPrototype.render = function() {  this.attachHandlers();  this.refreshField();  this.refreshItems();};multiselectPrototype.refreshItems = function() {  var itemElements = this.itemElements();  for(var i = 0; i < itemElements.length; i++) {    var itemElement = itemElements[i];    // set role and aria-selected property of an item    itemElement.setAttribute("role", "option");    itemElement.setAttribute("aria-selected", itemElement.hasAttribute("selected"));  }};multiselectPrototype.itemElements = function() {  return this.querySelectorAll("li");};

togglePopup メソッドのコントロールに aria-expanded 属性を追加できます。このプロパティは、リストを表示するか非表示にするかを決定します。

multiselectPrototype.togglePopup = function(show) {  this._isOpened = show;  this._popup.style.display = show ? "block" : "none";  // set aria-expanded property  this._control.setAttribute("aria-expanded", show);};

また、各オプションの aria-selected プロパティを、選択されたプロパティに基づいて初期化します。 aria-selected 属性は、オプションの選択状態を示すために使用されます。この状態は、selectItem メソッドと unselectItem メソッドを通じて更新できます。

multiselectPrototype.selectItem = function(item) {  if(!item.hasAttribute("selected")) {    // set aria-selected property of selected item    item.setAttribute("aria-selected", true);    item.setAttribute("selected", "selected");    this.fireChangeEvent();    this.refreshField();  }  this.close();};multiselectPrototype.unselectItem = function(item) {  // set aria-selected property of unselected item  item.setAttribute("aria-selected", false);  item.removeAttribute("selected");  this.fireChangeEvent();  this.refreshField();};

ARIA 属性が追加されました。次のステップはキーボード操作のサポートです。

キーボード サポートの追加

標準ドキュメントを開いて、「キーボード インタラクション」セクションを読んで、どのような操作をサポートする必要があるかを確認してください。

キーボードを使用して複数選択ボックスを操作するために必要な基本キーは次のとおりです。

Alt + Up/Down ArrowEscUp/Down ArrowEnterBackspace

コンポーネントをフォーカス可能にする

キーボード操作をサポートするための最初のステップコンポーネントへの注目をサポートすることです。これを実現するには tabindex 属性を設定する必要があります。この属性の動作はその値によって異なります。

• 正の属性値は、フォーカスされたコンポーネントの順序を定義します
• 0 -要素の取得 フォーカスの順序はブラウザによって決定されます
• -1 - ユーザーはキーボードから要素を選択できませんが、開発者は Javascript の focus() メソッドを使用して要素を選択できます

カスタムコンポーネント ページ上で要素がフォーカスを取得する順序を知る方法がないため、tabindex は -1 または 0 である必要があります。したがって、複数選択コンポーネントの tabindex を 0 に設定します。

<div class="multiselect-field" tabindex="0" aria-readonly="true"></div>

次のステップは keydown イベントを処理することです:

multiselectPrototype.attachHandlers = function() {  this._control.addEventListener("keydown", this.keyDownHandler.bind(this));  ...};

keyDownHandler event.that に従って、特定のキー ハンドラー関数を呼び出します。

multiselectPrototype.keyDownHandler = function(event) {  switch(event.which) {    case 8:  // Backspace      this.handleBackspaceKey();      break;    case 13: // Enter      this.handleEnterKey();      break;    case 27: // Escape      this.handleEscapeKey();      break;    case 38: // Up Arrow      event.altKey ? this.handleAltArrowUpKey() : this.handleArrowUpKey();      break;    case 40: // Down Arrow      event.altKey ? this.handleAltArrowDownKey() : this.handleArrowDownKey();      break;    default:      return;  }  // prevent native browser key handling  event.preventDefault();};

ユーザーがキーを押すと、event.preventDefault() によってデフォルトの動作が防止されます。

キーボードを使用してドロップダウン ボックスを開閉します

ユーザーは、Alt + 下矢印キーの組み合わせで複数選択ボックスを開き、複数選択ボックスを閉じることができます。 Alt + 上矢印と Esc:

multiselectPrototype.handleAltArrowDownKey = function() {  this.open();};multiselectPrototype.handleAltArrowUpKey = function() {  this.close();};multiselectPrototype.handleEscapeKey = function() {  this.close();};

開くメソッドと閉じるメソッドは togglePopup を呼び出します:

multiselectPrototype.open = function() {  this.togglePopup(true);};multiselectPrototype.close = function() {  this.togglePopup(false);};

キーボード経由でオプションを参照

まず、タブインデックスを設定します各オプションを -1 にして、それらに焦点を当てることができます。

multiselectPrototype.refreshItems = function() {  var itemElements = this.itemElements();  for(var i = 0; i < itemElements.length; i++) {    var itemElement = itemElements[i];    ...    // 设置选项的tabindex属性    itemElement.setAttribute("tabindex", -1);  }  // 初始化聚焦选项的索引  this._focusedItemIndex = 0;};

_focusedItemIndex プロパティは、フォーカスされた項目のインデックスを保持します。

ユーザーは上矢印と下矢印を使用してオプションを参照できます。このコードは、現在フォーカスされているオプション インデックスを更新することにより、ブラウジング機能を実装します。

multiselectPrototype.handleArrowDownKey = function() {  this._focusedItemIndex = (this._focusedItemIndex < this.itemElements().length - 1)      ? this._focusedItemIndex + 1   // go to the next item      : 0;                           // go to the first item  this.refreshFocusedItem();};

ユーザーがリストの下部にある下矢印を押すと、リーダーは最初のオプションに注目します。

ユーザーがリストの上部で上矢印を押すと、リーダーは最後のオプションに注目します。

multiselectPrototype.handleArrowUpKey = function() {  this._focusedItemIndex = (this._focusedItemIndex > 0)    ? this._focusedItemIndex - 1        // go to the previous item    : this.itemElements().length - 1;   // go to the last item  this.refreshFocusedItem();};

freshFocusedItem メソッドは、インデックス _focusedItemIndex を持つオプションに焦点を当てます:

multiselectPrototype.refreshFocusedItem = function() {  this.itemElements()[this._focusedItemIndex].focus();};

最後に、open メソッドと close メソッドを変更する必要があります。これにより、複数選択ボックスが開かれると、リーダーは _focusedItemIndex に対応するオプションに自動的にフォーカスされ、複数選択ボックスが閉じられると、リーダーは複数選択ボックスのコンテナーにフォーカスします。

multiselectPrototype.open = function() {  this.togglePopup(true);  this.refreshFocusedItem();};multiselectPrototype.close = function() {  this.togglePopup(false);  this._field.focus();};

CSS を追加して、フォーカスされたオプションをより目立つようにすることができます:

::content li:focus {  outline: dotted 1px #333;  background: #efefef;}

キーボードでオプションをチェック/チェック解除します

ユーザーは Enter キーで選択できます現在フォーカスされているオプション。複数選択ボックスが開いている場合は、フォーカスされたオプションを取得し、selectItem メソッドを通じて選択できます。

multiselectPrototype.handleEnterKey = function() {  if(this._isOpened) {    var focusedItem = this.itemElements()[this._focusedItemIndex];    this.selectItem(focusedItem);  }};

ユーザーは Esc キーを使用して最後の選択をキャンセルできます。現在選択されているオプションがある場合は、unselectItem メソッドを使用して最新の選択をキャンセルできます。

multiselectPrototype.handleBackspaceKey = function() {  var selectedItemElements = this.querySelectorAll("li[selected]");  if(selectedItemElements.length) {    this.unselectItem(selectedItemElements[selectedItemElements.length - 1]);  }};

必要なキーボード操作をすべてサポートするようになり、ユーザーはキーボードからコンポーネントを完全に操作できるようになりました。

ビジュアル アクセシビリティ

コンポーネント サイズ

複数選択ボックスでは相対単位 em が使用され、そのサイズはコンテナのフォント サイズによって異なります。したがって、コンポーネントのフォント サイズは柔軟であり、必要に応じてフォント サイズを簡単に増やすことができます。

ハイ コントラスト モード

ロービジョンまたはその他の視覚障害のあるユーザーは、ハイ コントラスト モードを使用することがあります。 OSX システムのユーザーは設定でハイ コントラスト モードを有効にすることができ、Windows システムでもハイ コントラスト テーマが提供されます。さらに、Chrome 拡張機能 High Contrast も、ユーザーがブラウザでハイコントラスト カラーを使用できるようにします。

ハイ コントラスト モードでコンポーネントがどのように見えるかを見てみましょう:

見た目は問題ありませんが、問題があります。選択したオプションが他のオプションと異なって見えます。オプション あまり違いはありません。したがって、選択したオプションの色をわずかに調整して、この問題を解決できます。

色なし

色のアクセシビリティは、視覚的なアクセシビリティの重要な側面です。インターネット界には色盲のユーザーがたくさんいます。したがって、重要な情報を伝えるために色だけに頼るべきではありません。グレースケール モードでコンポーネントを検査できます (通常、オペレーティング システムまたは一部のソフトウェアがこの機能を提供します)。複数選択コンポーネント自体はグレーなので、この手順は省略できます。

例

上記の最適化後の最終コードは次のとおりです:

CodePen 上の SitePoint ( @SitePoint ) による Web コンポーネントの複数選択

概要

コンポーネントのアクセシビリティを向上させるために、次の点を確認する必要があります:

• スクリーン リーダーなどの支援ツールがユーザーによるコンポーネントの使用を支援できるように、タグをセマンティックにします。ネイティブ HTML コントロールを使用してみてください。コントロールをカスタマイズする必要がある場合は、意味のある ARIA 属性を追加してください。

• コンポーネントはすべてキーボードで操作できます。 tabindex を介してコンポーネントをフォーカス可能にします。キーボード操作を実装するには、ARIA 実践ガイドを参照してください。

• コンポーネントはハイ コントラスト モードおよびカラーレス モードで通常どおり表示される必要があります。

読んでいただきありがとうございます。どなたでもコメントして、Web コンポーネントのアクセシビリティに関する経験を共有していただけます。

タグ: アクセシビリティ , キーボード アクセシビリティ , 複数選択コンポーネント , ポリマー , Web コンポーネント , X-Tag

英語原文: https://www.sitepoint.com/accessible-web -コンポーネント/?utm_source=html5weekly&utm_medium=email