2.3非テキストコンテンツのマシンリーダビリティ
マシンリーダブルとは
マシンリーダブル（機械可読）であることはアクセシビリティの根幹である。マシンリーダビリティを担保するのはテキストデータとセマンティクスである。
テキストデータ以外のデータも画像認識の技術の向上により可能にはなってきているが、正確では無いのでテキストデータが最適と言える。
webアプリケーションを構成するのはテキストデータだけではなく、グラフやチャート、図版や入力のためのUIも非テキストコンテンツである。 こうしたものに代替テキストを付与することでアプリケーション全体をマシンリーダブルかつアクセシブルにすることが可能である。
よくある事例
事例１:代替テキストが付与されていない画像
悪い例1 代替テキストがないimg要素
コード
<img src="/image/pic1.svg"/>
img要素にはalt属性により代替テキストを付与できる。alt属性はスクリーンリーダユーザのためだけでなく次のような利点もある。
- ・画像検索エンジンがコンテンツを理解する助けになる。
- ・画像のリソースの取得に失敗した場合のフォールバックとして機能する。
改善例:画像に代替テキストを付与する
img要素にはalt属性により代替テキストを付与する。装飾の画像の場合でも、値が空のalt属性をつけることによって装飾であることを伝えられる。
コード
<img src="/image/pic1.svg" alt="猫"/>
悪い例2 代替テキストがないsvg要素
コード
<svg>
<path d="M0,0 L320,0 320,160 0,160" fill="#3F51B5"></path>
</svg>
HTML内にsvg要素で画像を表示する際も画像の代替テキストを提供する必要がある。
改善例:svg要素にtitle要素を用いて代替テキストを付与する
svg要素は現状ブラウザによってアクセシビリティオブジェクトモデルのRole」プロパティの値が変わるため、role=imgを用いてRoleプロパティをimgに固定する。
コード
<svg role="img">
<title>検索</title>
<path d="M0,0 L320,0 320,160 0,160" fill="#3F51B5"></path>
</svg>
または、直接aria-label属性を用いても良い。
コード
<svg role="img" aria-label="検索">
<path d="M0,0 L320,0 320,160 0,160" fill="#3F51B5"></path>
</svg>
事例２:アクセシブルな名前のないUI
アクセシブルな名前、つまりアクセシビリティオブジェクトモデルのNameプロパティがないUIは、操作した時に何が起こるか、何を入力するべきかが視覚情報からしかわからない。たとえば代替テキストのないアイコンのみのを使用したボタンは、スクリーンリーダにはボタンであることしか伝わらず、何の操作をすれば良いかがわからない。
悪い例1 アクセシブルな名前がないボタン
コード
<button type="button">
<svg width=100 height=40></svg>
</button>
改善例
コード
<button type="button">
<svg width=100 height=40></svg>
追加
</button>
最も簡単な方法は、UIとなる要素にテキストを内包させることである。テキストを追加することで、アイコンのみより動作の意味が明確になる。また他言語への翻訳を考えると、最もアクセシブルな方法である。
他にも次のような改善例がある。
コード1 img要素を用いたとき
<button type="button">
<img src="./image/button.svg" alt="追加"></svg>
</button>
コード2 svg要素とWAI-AREAを用いたとき
<button type="button">
<svg role="img" aria-label="追加" width=100 height=40></svg>
</button>
悪い例2 アクセシブルな名前がない入力欄
コード
<label>
<input type='text'/>
</label>
何を入力するべきところなのかが判別できない。
改善例 テキストを内包できない要素にlabel要素を用いてテキストと関連付けする
コード
<label>
検索
<input type='text'/>
</label>