開発

開発・運用

パーツやコンポーネントは、ウェブページのUI（User Interface ユーザインタフェース）を構成する部品で、ユーザーとコンテンツの間に存在する操作可能な部分全般を指します。 ウェブサイトのレイアウトや文字、メニュー、ボタン、フォームの入力欄などのようなユーザとの接点を担っており、UIがアクセシブルであるかそうでないかはUX（User Experience ユーザーエクスペリエンス）に大きな影響を与えます。

開発にあたっては、次の点に注意します。

• キーボード操作を可能にする
• 支援技術に適切にアクセシビリティツリーを提供する
• HTMLの標準にある要素・コンポーネントをなるべく活用する
• 結果が予測できるインタラクションを提供する

情報設計やビジュアルデザインを経た内容に基づいていても、実際に開発を行う際に条件の組み合わせや技術的な観点から問題が発見される場合もあります。そのような場合はデザインや設計の双方を見直し、根本的解決に努めるようにしてください。

また、開発では常にアクセシビリティチェックを行うようにしてください。バリデーションチェックなどと同様にツールによるチェックをCI/CD（Continuous Integration / Continuous Delivery 継続的インテグレーション/継続的デリバリー）の開発工程に組み込むことで、問題の早期発見・早期解決につながります。

スクリーンリーダーなどの支援技術では、コンテンツの情報とあわせてアクセシビリティに関する情報を受け取ることができます。 見出しの箇所が<h1>や<h2>が用いられていれば、「見出し」であることを、リンクに<a>が用いられていれば「リンク」といったように読み上げます。視覚で得ているウェブページの構造やコンテンツの種類などの情報に応じた要素を選択し、支援技術に適切なアクセシビリティ情報が提供されるようにする必要があります。 このようにコンテンツの情報（意味）、構造や役割に応じた要素を用いて、セマンティックなマークアップを行うことがアクセシビリティでは重要になります。

コンテンツの情報（意味）、構造や役割に応じた要素を用いる上でもう一つ重要なことは、開発に用いる言語の技術仕様に従うことです。技術仕様に沿って開発することで、マシンリーダビリティも確保されます。 また、既にアクセシブルであることがわかっているUIパーツやコンポーネントを活用するのもよい方法です。

独自にUIパーツやコンポーネントの開発が必要な場合も、可能な範囲でHTML標準の要素を用いるようにします。 標準にない要素を用いると、アクセシビリティの情報の提供やキーボード操作への対応をはじめとして、テストやメンテナンスなど、将来の運用・品質管理までを見据えた計画が必要になります。

すべてのインタラクションの結果はユーザーが予測可能なようにします。インタラクションの結果、ユーザーが意図しない変化をもたらすことは、ユーザーのストレスや混乱をもたらし、目的の達成を妨げることになります。 HTMLの標準にない要素やコンポーネントを設計する場合は、特に留意してください。

代表的なアクセシビリティチェックツールには以下のようなものがあります。

• axe
  Deque Systems社によるアクセシビリティチェックエンジン。事実上のグローバルスタンダード。
• axe DevTools
  Deque Systems社によるアクセシビリティチェックツールのブラウザアドオン。Chrome, Firefox, Edgeなど各メジャーブラウザで利用可能（URLは各ブラウザのオフィシャルページを参照）。
• IBM Equal Access Toolkit
  IBMによるアクセシビリティチェックツール。ブラウザアドオンなど複数の形態がある。
• Markuplint
  HTML用のリンター。HTMLに関連するいくつかのアクセシビリティチェックが可能。
• Nu HTML Checker
  W3CによるHTMLのバリデーションチェックツール。

ツールによるチェックだけではWCAGやJIS X 8341-3:2016の達成基準に関する問題すべてを検出することは出来ません。開発工程の中で、定期的に専門家によるチェックを織り込み、開発工程の中で多くの問題を解決できると、実装工程からの手戻りを減らすことが出来ます。