すべてのコレクション
アクセシビリティ
STUDIO におけるアクセシビリティ
STUDIO におけるアクセシビリティ
Awaya avatar
対応者:Awaya
一週間前以上前にアップデートされました

アクセシビリティとは

一般にアクセシビリティとは、アクセスのしやすさを意味します。

転じて、製品やサービスの利用しやすさという意味でも使われます。

似た意味をもつ言葉にユーザビリティがありますが、アクセシビリティはユーザビリティより幅広い利用状況、多様な利用者を前提とします。

ウェブアクセシビリティとは

ウェブのアクセシビリティを言い表す言葉がウェブアクセシビリティです。

ウェブコンテンツ、より具体的にはウェブページにある情報や機能の利用しやすさを意味します。

さまざまな利用者が、さまざまなデバイスを使い、さまざまな状況でウェブを使うようになった今、あらゆるウェブコンテンツにとって、ウェブアクセシビリティは必要不可欠な品質と言えます。

HTMLとアクセシビリティ

アクセシビリティは大きく次の2つに分類できます。

  • ヒューマンリーダビリティ:
    人間が目で見てわかりやすい、読みやすい、操作しやすい

  • マシンリーダビリティ:
    機械にとって意味が理解できる→支援技術が解釈してユーザーに伝わる形に変えられる

STUDIOにおいては、ヒューマンリーダビリティはWebサイトに掲載するコンテンツ(ライティング)やサイトのデザインを通じて、マシンリーダビリティはHTMLの設定を適切に行うことで、それぞれアクセシブルなWebサイトを実現していくこととなります。

HTMLは、内容に対してタグを選択することで意味付け(マークアップ)をする言語です。そして、ユーザーエージェント(ウェブの内容をユーザーに届けるソフトウェア。ブラウザが代表例)はHTMLにタグによって、その要素の意味を理解しています。

たとえば、SEOの文脈で「HTMLを適切に書こう」と言われるのは、「Googleのクローラー」というユーザーエージェントがHTMLを解釈できるためです。

もうひとつの典型例にスクリーンリーダーがあります。これは、画面がまったく見えなくても、音声でいまの画面内容や操作状況を伝えることで、OSやブラウザを使えるようにするしくみのことです(具体的な利用例は下記の動画をご覧ください)。

※見えている人に向けてページの内容を読み上げる「音声読み上げ機能」とは異なります。

上記の動画でご覧いただいたように、スクリーンリーダーは、ブラウザに表示されたウェブページにおいて、たとえばh1要素を「見出しレベル1」、a要素は「リンク」、ul・li要素は「リスト5項目」といった形で読み上げます。

ページの構造や内容に対して、適切にHTMLのタグを選択し属性を記述することで、画面が全く見えなくても、そのページの構造や操作対象がわかり、ウェブサイトを利用できるようになります。これは、ウェブアクセシビリティを担保する上で重要なポイントのひとつです。

アクセシビリティ向上に役立つSTUDIOの機能

STUDIOでは、HTMLタグの設定だけでなく、Webサイトのアクセシビリティを向上させる機能をいくつか提供しています。

こちらの回答で解決しましたか?