この記事の目的
Webの世界は日進月歩で進化していて、便利で新しい技術がどんどん登場しています。
その進化に伴い、新たな用語も年々増えています。
私たちが提供する「ホームページ制作サービス」の観点から専門用語を抜粋して分かりやすくお伝えします。
この記事の対象読者
Web制作を始めたばかりの人。
Webデザインを行なっているが、言葉の定義を再確認したい人。
自社でWeb担当を任されたが専門用語についていろいろ知りたい人。
など、Webに限らずDXに携わるすべての方に。
WAI-ARIA（ウェイアリア）とは
Webコンテンツにおける情報アクセシビリティを確保した実装方法の名称です。
「Web Accessibility Initiative – Accessible Rich Internet Applications」の略で、「ウェイ・アリア」と読みます。
WebアプリケーションやWebサービスがより複雑で動的なものになると、新しいアクセシビリティの機能と問題が明らかになってきます。
単なるHTMLコーディングだけではなく属性を指定した実装をすることにより、Webコンテンツに触れている障害を持つ方に対して、適切な情報を伝えられるようになります。
具体的には、スクリーンリーダー（画面情報の読み上げ音声ソフト）などの支援・補助技術による音声出力や点字表示に必要な役割、状態、プロパティ、イベントなどの情報を、HTML要素に対して付加的に記述します。
これにより、視覚障がい者や聴覚障がい者などのユーザーが、より簡単かつ自然な方法でWebアプリケーションを操作することができるようになります。
関連する情報アクセシビリティに関する法令
「障害を理由とする差別の解消の推進に関する法律（障害者差別解消法）」が2016年4月1日に施行されました（2013年6月26日公布）。
法令の内容については、障害を理由とする差別の解消の推進に関する基本方針に触れられており、「障害を理由とする差別を解消するための支援措置」についても取り上げられています。
また、JIS X 8341-3:2016（正式名称『高齢者・障害者等配慮設計指針−情報通信における機器，ソフトウェア及びサービス−第3部：ウェブコンテンツ』）も同時期（2016年4月7日）に公開されています。
アクセシビリティを理解する
「アクセシビリティ」というものが体感的にはよくわからない場合は、まずはPCでスクリーンリーダーを一度使ってみると良いでしょう。
Windowsでは「ナレーター」という機能が標準搭載されています。
また、Macに標準搭載されているVoiceOver機能では、トレーニング（チュートリアル）もついているので一度触ってみて、どのように画面が読み上げられるのか、障害を持つ方はどのように操作をしているのか、などを少しでも学ぶことは、Web制作者として大事な心掛けです。
VoiceOverを学ぶまでの手順
- 画面左上のアップルのマークを選択する
- 「システム環境設定…」を開く
- 環境設定パネルにある13項目の「アクセシビリティ」を選択
- 概要パネルにある「VoiceOver」を選択
- 「VoiceOverトレーニング…」のボタンを選択
この後は画面表示に従って、進めてみてください。少なからず今後の制作における要件定義や、コーディング作業において大事な考慮材料になることと思います。
WAI-ARIAの仕様
WAI-ARIAには様々な仕様が用意されていますが、おもに下記の2つの属性が定義されています。
・これは見出しなのか、セクションなのかなどコンテンツの役割を表すためのrole属性
・表示されている／隠れているなどコンテンツの状態や、どこから参照されるのかなど性質を表すためのaria属性
コンテンツに役割や性質、状態を明確に指定することで、コンテンツを読み取る支援技術はWebページやアプリケーション内の文脈を理解することができます。よってユーザーに情報を的確に提供する材料となりアクセシビリティが高まります。
Webページやアプリケーションが「だれもが情報にたどり着くことができる」、「より多くの人に使ってもらえる」コンテンツになるかは制作者の力量次第になっていきます。
実装上の注意点と一覧
role属性（ロール）
role=”**”
要素の「役割」を定義します。
たとえば「フレームワークの仕様でdivタグしか使えない」といったような、適切なHTMLが使用できないときに効果があります。
<div role=”navigation”>サンプル</div>
また、HTMLタグだけでは実現できない役割もあります。たとえばroleの属性値にalertを設定することで「今のタイミングで重要な情報」という役割を付与できます。
<div role=”alert”>入力内容はエラーです。</div>
aria-label属性
aria-label=”**”
要素に「ラベル付けする文字列」を定義できます。ボタンや画像の意味・要素のラベルを設定します。
<button aria-label=”閉じる” class=”js_btn”>X</button>
<svg role=”img” aria-label=”画像の説明”>…</svg>
aria-labelledby属性
aria-label属性が値にラベルテキストを取ることの反対に、aria-labelledby属性はラベルになる要素のidを指定できます。
aria-expanded属性
要素、もしくは要素のグループが展開されているか、折りたためられているかの状態を示します。展開されている場合の値は「true」、折りたためられている場合は「false」になります。アコーディオンのときに使います。
aria-controls属性
要素が制御するidを値に指定し、制御する要素を明示します。今回だとアコーディオンの中身のidを指定できます。
aria-hidden属性
要素が表示であるか非表示であるかの状態を示します。表示されている場合の値は「false」、非表示の場合は「true」になります。
tabindex属性
要素がtabキーで選択できるかどうか制御します。
tabindex=”0″でタブ移動が可能となり、tabindex=”-1″でタブ移動ができなくなります。
注意点
必要以上にrole属性を指定せず、HTMLで解決できるのであればHTMLで対応しましょう。必要以上に設定しないことで実装効率が過度に下がるということはありません。
現代ではWebサイトやWebアプリケーションの構造は昔に比べて複雑なものが多くなりました。レスポンシブ化は当たり前のことですが、スマホなどの小さな画面に、ドロップダウンメニューやカルーセルを目にするようになりましたし、Ajaxでコンテンツを後から追加することもあります。
適切にWAI-ARIAを理解することで「誰でも」「簡単に」情報にアクセスできるような制作・開発をしていきましょう。
弊社のホームページ制作サービス「ZIUS」の持つ強みをご紹介します！是非一度ご覧になって、その安さ・手軽さを実感してください！
2024年法改正 障害者差別解消法とアクセシビリティ
2024年4月に施行される障害者差別解消法の改正は、デジタルアクセシビリティの新たな基準を設け、障害を持つ人々、高齢者、一時的な障害を持つ人々を含むすべての人がデジタル情報に平等にアクセスできるようにすることを目的としています。この法改正は、情報技術の進展と社会のデジタル化に伴い、誰もが情報にアクセスしやすい環境を実現するための重要な対応です。
アクセシビリティは、すべての人がホームページやアプリケーションをスムーズに利用できるようにするための基本的な設計原則であり、デジタル空間の平等性を高める社会的責任でもあります。障害者差別解消法の改正により、ウェブコンテンツのアクセシビリティ基準に準拠し、障害を理由とした情報アクセスの障壁を取り除くことが求められています。
ホームページのアクセシビリティを向上させることは、法的義務を超え、すべてのユーザーへのコミットメントを示す行動です。アクセシビリティポリシーの策定、WCAG 2.1への準拠、アクセシビリティ評価ツールの活用など、具体的な対応策が提案されています。これらの対応策を実施することで、ホームページはより多くの人々にとって使いやすいリソースとなります。
ZIUSでは、アクセシビリティをウェブデザインの中心に据え、すべての人が情報に平等にアクセスできるデジタル環境の実現を目指しています。障害者差別解消法の改正を受け、障害のある人々を含むすべてのユーザーが直面する可能性のある障壁を理解し、これを解消するための具体的な対策を講じています。
こちらに詳細な内容をまとめたコラムがありますので、ぜひ読んでいただければと思います。
