セマンティックでアクセシブルなHTML講座（UXライティング編）

初めに

デザイン&リサーチ ポカリ（Poca11y）チームのSUGI(@blindsoup2p1)。

ポカリチームでは定期的にアクセシビリティ勉強会を開催していきます。
勉強会告知スレッドやアクセシビリティ事務連絡で告知していきますので、お誘いあわせの上ご参加お願いします。

アクセシビリティに関する質問・相談は以下へお願いします。

• @アクセシビリティ へメンション
• アクセシビリティの質問・相談

勉強会の概要

アクセシビリティの観点を意識した文言の考え方・付け方

機能を生かすのも殺すのも文言次第。
文言が適切で、適格に伝われば、より多くの人に届くアクセシブルなウェブコンテンツになります。

ページタイトル・ボタン・画像の代替テキスト・リンクテキストについて紹介します。

コンセプト

誰に：プロダクトライターの方々
何を：文言を検討するときのアクセシビリティの観点を知れた、普段から意識してみよう、と思って欲しい

誰に：HTML にかかわるエンジニア・ウェブ制作者の方々
何を：文言の重要性がわかった、文言のさまざまな付け方がわかった、といって欲しい

Agenda

• 文言の基本的な考え方
• 基本編
  • ページタイトル
  • ボタンのラベル
  • 画像の代替テキスト
  • リンクテキスト
• 応用編
  • デザイン上文言を画面に表示させられない時
  • 状態が切り替わるトグルボタンの時
• まとめ

文言の基本的な考え方

前提として、タイトル・ボタン・画像・リンクの文言を取り扱う。

考え方：テキストが最もアクセシブル。テキストを提供する。

1. 可能な限りテキストで文言を提供する（アイコンとの併用も可）
2. アイコンのみで示す場合
   1. そのアイコンが直感的でわかりやすいのか留意する
   2. ツールチップなどで文言を提供する
   3. ↑ が達成できない場合、画面には表示されない隠しテキストで文言を提供する（スクリーンリーダーで読めるため）

基本編

ページタイトル

ページタイトルの付け方

• どんなウェブページであるかがわかる
• ページ全体でページタイトルが一位に定まる
• どのドメインに属するかをページタイトルの最後に明記する

サイボウズの事例

• NG 例（Garoon/kintone)
  • 「ポータル」 ← どの製品だっけ？
  • 「仕事」 ← どの製品？ポータルってこともわからないな
• 良い例（サイボウズ Office）
  • 「トップページ - サイボウズ Office」
  • 「スケジュール（グループ週表示 - サイボウズ Office」

ボタン

ボタン文言の原則

• ボタンにはテキストで文言を提供する
• ボタンが押されるとどんなことが起きるかユーザーが推測できる

サイボウズの NG 事例

• kintone ヘルプ
  • 検索ボタンに文言が設定されていない

画像の代替テキスト

代替テキストの付け方

• img タグの alt 属性に画像の説明を記述する
• alt 属性を空欄（alt=""）にすると画像を読み上げなくなる

※alt 属性そのものを省略すると、スクリーンリーダーがファイル名を読み上げたり「ラベルのない画像」と読み上げるので注意

画像の説明の仕方

＜文字画像の場合＞

• 画像に書かれている文字を過不足なく記述する

＜写真・イラスト・グラフなどの場合＞

パラグラフライティングの容量で、最初に主題を、その後徐々に詳細度を上げていくように書き下す。

• 最初にその画像の種類を一言で表す
  • 例：写真・グラフ・図・画面キャプチャ
• その後「：」に続けて画像の主題を簡潔に表す
• それ以降、画像で伝えたいことを補足していく

例：画面キャプチャ：kintone のレコード編集画面。「スプリント」のドロップダウンがハイライトされている。

＜装飾用画像＞

• 単なる装飾の場合は alt=""とする

※装飾であっても、イメージや情報を伝えたい場合は代替テキストを設定することもある。

サイボウズの NG な事例

• 新入社員白書
  • グラフ画像が alt=""になっていて説明されていない（重要な情報が伝えられていない）
• kintone ヘルプ
  • ロゴ画像の alt が省略されている（画像のファイル名などを読み上げる）
• サイボウズ Office のカスタムアプリ名
  • 画像リンクで alt とリンクテキストを２重に読んでいる

リンク

リンクの文言の付け方

• リンクテキストでリンク先が特定でき、ユーザーがリンクをたどるか判断できるようにする
  • リンクとページタイトルが一致する、または類似したものにすること
• リンクテキスト単体で上記が達成できない場合は、以下の組み合わせで特定できるようにする
  • リンクが含まれる分
  • リンクが含まれる段落
  • リンクが含まれるリスト項目
  • リンクが含まれるテーブルのデータセルと、対応する見出しセル
  • 見出しテキストと、見出しの後に配置されたリンクのテキスト

サイボウズの NG 事例

• kintone 製品サイト
  • 「もっと詳しく」というリンクが乱立している

応用編

デザイン上文言を画面に表示させられない時

アイコンフォントや背景画像（background-image）で示し、文言を画面に表示させないことが多々ある。

しかし、その場合、アイコンや画像を見ても理解できない人・スクリーンリーダーユーザーに情報が伝わらない。

以下の 3 つのうちどれかひとつ実装し、文言を提供する。

• title 属性：ホバーするとツールチップがでる、スクリーンリーダーも読み上げる
• aria-label 属性：リンクやボタンにスクリーンリーダーが読み上げるための文言を提供する
• visually-hidden CSS：アイコンフォントのテキストなどにスクリーンリーダーが読み上げるための文言を提供する

状態が切り替わるトグルボタンの時

状態が切り替わったことを以下のいずれかで伝える。

• 文言を切り替える
• aria-pressed 属性の真偽値を排他的に変更する

まとめ

テキストが最もアクセシブル

画面に表示しない場合でもいずれかの方法で文言を提供すること。

• title 属性
• aria-label
• visually-hidden

文言は（可能な限り）それ単体で機能を推測できること。