辻ちゃん・ウエちゃんのスクリーンリーダーで「Backlog」を使ってみる の巻

辻ちゃん・ウエちゃん

辻 勝利

植木 真
* コンセント社外フェロー質問：皆さんは「Backlog」をご存知ですか？

1. 日々の業務で使用している
2. 何度か使ったことがある
3. 名前は聞いたことがある質問：「スクリーンリーダー」をご存知ですか？

1. 自分で使ってみたことがある
2. 実際に読み上げを聞いたことがある
3. 呼び名や存在は知っていた
4. 知らなかった（初めて知った！）

スクリーンリーダーって何？

POINT キーボードだけで操作できるようにするスクリーンリーダーでググってみる！

漢字の詳細読み

鷹野 雅弘
 鳥の「鷹」
 野原の「野」
 雅やかの「雅」
 弓へんの「弘」

検索結果ページの使い方
 見出しのマークアップ（h3要素）を利用
 ページタイトルが分かりやすいかどうかも重要！

<h3>
<h3>
<h3>

POINT 見出しをきちんとマークアップする 使い慣れたページでは特定の見出しレベルを拾い読み アルファベットの［H］キー：h1～h6要素の見出し全て
 数字の［1］キー：h1要素でマークアップされた見出しのみ
 数字の［2］キー：h2要素
 数字の［3］キー：h3要素
 数字の［4］キー：h4要素
 数字の［5］キー：h5要素
 数字の［6］キー：h6要素

このタグはこんなふうに聞こえる♪

同じ文字列を聞き比べてみる

Webアクセシビリティの学校 特別授業
1. p要素（ただの文字列）

5. a要素（リンク）2. h1要素（見出しレベル1）

6. button要素（ボタン）3. h2要素（見出しレベル2）

7. ul, li要素（リスト項目）

4. img要素のalt属性（画像の代替テキスト）

文字列「Webアクセシビリティの学校特別授業」

1. <p>Webアクセシビリティの学校</p>
2. <h1> Webアクセシビリティの学校</h1>
3. <h2> Webアクセシビリティの学校</h2>
4. <img alt=“Webアクセシビリティの学校”>5. <a href=“abc.html”>Webアクセシビリティの学校</a>6. <button type=“button”>Webアクセシビリティの学校</button>
7. <li>Webアクセシビリティの学校</li>漢字の読み、これでいいの？

つじ “しょうり” うえき “しん”
人生の勝ち組みたい！

タイガー・ジェット・シン（誰）みたい！

POINT 漢字や記号はいつも通りに使ってOK スクリーンリーダーのおかしな読み上げは気にしなくていい ただし、記号で表記するときは、一貫性を持たせる 日付：「6/1」や「6.1」でもOK
 曜日：（日）（月）（火）（水）（木）（金）（土）でOK
 時刻：「15:45」のままでOK劇的 ビフォーアフター

Backlog、スクリーンリーダー向けアクセシビリティの改善を実施 — 視覚障がいを持つ方もより利用しやすい
サービスへ

https://nulab.com/ja/press-release/pr-1811-improving-accessibility-of-backlog/

動画：平尾さんからのメッセージ

ボタンのマークアップ
CASE STUDY 1.

メニューバーメニューバーボタンなのにdiv要素が …
<div id=“globalRecentProjectLink” ……>
プロジェクト</div>

BeforePOINT ボタンにはbutton要素<button type="button" ......>
プロジェクト</button>Afterボタンで開閉するパネル

aria-expanded属性値を動的に切り替え“false”（閉じている）⇄ “true”（開いている）<a aria-label="Google アプリ"
aria-expanded="false"
role="button" ......><svg ......>……
</svg></a>フォームコントロールのラベル
CASE STUDY 2.

課題を追加する課題を追加する①「件名」を入力②「詳細」を入力

見た目には「詳細」というラベルがある

Beforeスクリーンリーダー：

textarea要素を 「エディット複数行」と読み上げるラベルなのに div要素

Before<div ......>詳細</div><textarea id=“descriptionTextArea” ......></textarea>

POINT label要素でラベルを関連付ける
After<label for="descriptionTextArea" ......>詳細</label><textarea id=“descriptionTextArea” ......></textarea>

フォームコントロールの見た目をカスタマイズ
CASE STUDY 3.

優先度を設定する

「優先度」を設定する
スクリーンリーダー：

select要素を 「コンボボックス」と読み上げる
 コンボボックスは［C］キーで見つけられるはずが…

select要素 に display: none;<select style="display: none;" ......>……
</select>

BeforeCSSをオフにして、 display: none; を無視する裏技！
スクリーンリーダーは、
display: none; の指定を無視して、素のHTMLを解釈して読み上げるようになる
select要素［C］キーで見つけられる！

A11Y STYLE GUIDE
フォーカス時選択時

https://a11y-style-guide.com/style-guide/section-forms.html

諸事情(?)から ”トリッキーな” 実装で対処<button type=“button” role=“combobox”

After

aria-live=“polite” aria-haspopup=“listbox”
aria-owns=“sel4BU_chzn-list” aria-expanded=“false“
aria-labelledby=“priorityLabel” ……><span class=“chzn-single__item”>中</span></button>select要素が使えれば、role属性やaria-*属性は不要なのだが …

アイコンの代替テキスト
CASE STUDY 4.

ボタンのSVGアイコン

多発する「ボイドゼロ」の謎
 ボタンにSVGアイコンを使用

これが「ボイドゼロ」の正体

Before<a href="javascript:void(0);" ......><svg class=“icon -medium” ......>……
</svg></a>a要素内のsvg要素（画像）に代替テキストがない img要素にalt属性がないのと同じ状態

POINT 画像には代替テキスト* img要素ならalt属性

After<button type="button" aria-label="私が担当" ......><svg class=“icon -medium” ......>……
</svg></button>

リンクではなく、ボタンとして実装しなおした
 代替テキストはaria-label属性で提供

動的に変化する数字
CASE STUDY 5.

スターを付ける「スターを付ける」とは？

数字だけの意味不明なリンク<a href="#" ......>……
<span ......>7</span></a>

BeforePOINT リンクではなくボタンに & ラベルも提供<button type="button" ......>……
<span ......>スター</span><span aria-live="polite" ......>9</span></button> WAI-ARIAのライブリージョン

Afterスクリーンリーダーで使えるための基本の「キ」

スクリーンリーダーで使えるようにするには？
1. キーボード操作
2. 文書構造のマークアップ
3. フォームコントロールのラベル
4. 画像の代替テキスト
5. リンク/ボタンのマークアップとラベル辻ちゃん・ウエちゃん

見出しは「身だしなみ」
辻 勝利

スクリーンリーダーで使えるようにするには？
1. キーボード操作
2. 文書構造のマークアップ
3. フォームコントロールのラベル
4. 画像の代替テキスト
5. リンク/ボタンのマークアップとラベル辻ちゃん・ウエちゃん

アクセシビリティは「対応」するものではなく「高める」もの。
辻 勝利

辻ちゃん・ウエちゃんのスクリーンリーダーで「Backlog」を使ってみる の巻

THE END
出演：辻 勝利植木 真
音楽：植木 順子