ウェブアクセシビリティ

トライデントコンピュータ専門学校 Webデザイン学科 業界研究授業

私

@masuP9のプロフィール写真。ますぴーとかかれた木製のバッジの写真 私のプロフィール写真その2。ビール片手のメガネに髭の丸顔の男性 桝田 草一(ますだ そういち) @masuP9

略歴

  1. 2003 ~ 立命館大学政策科学部
  2. 2007 ~ 株式会社構造計画研究所(営業)
  3. 2014 ~ デジパ株式会社(マークアップエンジニア)
  4. 2017 ~ サイバーエージェント
    (フロントエンドデベロッパー / アクセシビリティエバンジェリスト)

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

アクセシビリティ

accessibility

access + ability = アクセス可能性

アクセスできる

  • 知覚できる
  • 操作できる
  • 理解できる
  • 壊れない

知覚できる

隠しテキストとかもう世代的に通じ無さそう 今年34歳のボヤキ

操作できる

button

理解できる

আমি একটু অ্যাক্সেসযোগ্যতা দক্ষতা আছে

I have a little accessibility skill.
ワタシハアクセシビリティチョットデキル

壊れない

“このページ、あのブラウザで見ると崩れているので今日中にご確認お願いできますか？„

アクセシビリティのお隣さんたち

  • アベイラビリティ(availability)
  • ファインダビリティ(findability)
  • ユーザビリティ(usability)

明確に区別されず領域は重なる

ウェブをとりまく多様性

ユーザーの多様性

およそ14人に1人

  • 身体障害 - 29人に1人
  • 知的障害 - 111人に1人
  • 精神障害 - 32人に1人

平成30年版 障害者白書 - 障害者の状況 PDF

デバイスの多様性

This is not Web と映し出された古いディスプレイのデスクトップ
this is the web. by Brad Frost
This is the Web. Webと映し出された様々な大きなディスプレイ、ラップトップ、タブレット、スマートフォン、携帯電話
this is the web. by Brad Frost
This will be the Web. 様々な大きなディスプレイ、ラップトップ、タブレット、スマートフォン、携帯電話、冷蔵庫のディスプレイ、ゲーム機、プリンタ、時計、自動車。そして周りに多くの？
this is the web. by Brad Frost

閲覧環境の多様性

屋外
女性がスマートフォンのマップアプリで住所の確認をしているイラスト
電車の中
電車やバスのシートに座っている人たちが皆スマートフォンを使っている様子を描いたイラスト
料理中
お爺さんがキッチンで料理をしているイラスト
運転中
黄色いタクシーを運転をしている運転手さんのイラスト

〜づらいは誰にでも

見えづらい（ない）

  1. 全盲
  2. ロービジョン
  3. コンタクト外した
  4. 高齢者
  5. 後ろの方の席
  6. 眩しい環境

きこえづらい（ない）

  1. 失聴
  2. 難聴
  3. イヤホン忘れた
  4. 高齢者
  5. 授業中
  6. うるさい環境

操作しづらい（できない）

  1. 全身不随
  2. 四肢欠損
  3. 怪我した
  4. 高齢者
  5. マウスが壊れた
  6. 手袋している


誰かの使いにくいは、
誰かには使えない。

誰かの使えるは、
誰かには使いやすい。

多様であることの価値

  • 剣士
  • 剣士
  • 剣士
  • 剣士
  • 勇者
  • 剣士
  • 武闘家
  • 魔法使い

多様性の尊重

性別の設定欄のスクリーンショット。女性・男性・カスタムとあり、カスタムを選択すると記入式で設定でき、性別代名詞を選ぶこともできる。
https://www.facebook.com/

アクセシブルなウェブの作り方

HTMLをきちんと書く

ガチ本当のマジでマジ

  • 分かりやすい <title>
  • 見出しは <h1> ~ <h6>
  • リンクは <a href>、ボタンは <button>
  • <input>には<label>
  • <img>にはalt属性を書く

Read the HTML Living Standard

4 The elements of HTML

デザイン

  • 色に頼らない
  • 動くものは止められる

『いらすとや』の素材を色覚障がいの視点から見てみた | くろひつじのメモ帳

スクリーンリーダーを触ってみよう

  1. スクリーンリーダーとは
  2. macOS VoiceOver について
  3. スクリーンリーダーでウェブを読み上げてみる

スクリーンリーダーとは

コンピューターの画面を読み上げるソフトウェア

いろいろなスクリーンリーダー

Windows
ナレーター（標準）
NVDA（オープンソース）
JAWS for Windows
PC Talker（日本シェアNo1）
macOS/iOS
VoiceOver
Android
Android Accessibility Suite（旧TalkBack）

スクリーンリーダーの使われ方

アクセシビリティ - ストーリー - Apple（日本）

macOS VoiceOver

  • macOS 標準のスクリーンリーダー
  • 読み上げている箇所がハイライト（拡大）される
  • 読み上げている内容が表示される
  • HTML/DOMの知識が比較的求められる

macOS VoiceOverの起動

起動/解除
⌘ + F5
システム環境設定 👉 アクセシビリティ 👉 VoiceOver

VoiceOverの基本

VOキー (control + option) or caps

領域の移動
VO(control + option) + →|←
領域に入る/出る
VO(control + option) + ↓|↑
実行（クリック）
VO(control + option) + スペース

スクリーンリーダーでウェブを読み上げてみる

まずは操作になれる

学校法人 河合塾学園 トライデントコンピュータ専門学校のトップページからウェブデザイン学科のページに移動してみよう

トップページを開いてから起動すると楽

見出しジャンプ

次の見出し
VO(control + option) + ⌘(command) + h
前の見出し
VO(control + option) + ⌘(command) + shift + h

ウェブを読み上げてみる

最新の内定者情報でサイバーエージェントに内定した人はだれ？

目をつぶってやってみよう

まとめ

  • ウェブは多様な使われ方をするメディア
  • 多様な使われ方に耐える高品質なウェブを
  • HTMLをちゃんと書く