Upgrade to Pro — share decks privately, control downloads, hide ads and more …

アクセシビリティ

 アクセシビリティ

Cybozu
PRO

July 13, 2023
Tweet

More Decks by Cybozu

Other Decks in Technology

Transcript

  1. サイボウズ
    開発運⽤研修 アクセシビリティ
    杉崎 信清
    開発本部
    アクセシビリティエンジニア

    View Slide

  2. 杉崎 信清
    視覚障害(全盲) スクリーンリーダー・キーボードネイティブ
    • 2020年 新卒⼊社→アクセシビリティチーム
    • アクセシビリティの啓発
    • 開発チームの⽀援
    • 2022年 kintone Design Team(兼務) デザインテクノロジスト
    • デザインシステムの開発、保守、普及
    趣味︓ワイン、読書、⿃と遊ぶこと
    ⾃⼰紹介

    View Slide

  3. この講義で学ぶこと
    復習
    • アクセシビリティとは︖
    • マシンリーダブル・ヒューマンリーダブルを理解する
    • アクセシビリティ確保の基本を理解する(7項⽬)
    • アクセシビリティを検証する⽅法を知る

    View Slide

  4. 講義のコンセプト
    サイボウズに新しく⼊社した社員の⽅に
    誰に
    何と⾔ってほしい
    「アクセシビリティを⾼める考え⽅がわかった。
    意識しながら取り組んでいこう︕」と⾔ってほしい

    View Slide

  5. アクセシビリティとは︖
    復習

    View Slide

  6. アクセシビリティの定義
    「すべての⼈」が⽀障なく
    製品・サービス・情報を利⽤でき、⽬的を達成できること

    View Slide

  7. すべての⼈=多様な環境・ツール・特性
    環境
    ▌ ࡏ୐ۈ຿
    ▌ ւ֎ۈ຿
    ▌ ෭ۀ
    ▌ ࣌୹ۈ຿
    ▌ ిंͷத
    ▌ ޻৔ͷத
    ▌ ਤॻؗ
    ▌ ΧϑΣ
    ▌ ԰֎
    ▌ ໷ؒ
    ツール
    ▌ PC
    ▌ スマートフォン
    ▌ タブレット
    ▌ モニター
    ▌ マウス
    ▌ キーボード
    ▌ トラックパッド
    ▌ ⾳声⼊⼒
    ▌ スクリーンリーダー
    ▌ 拡⼤鏡
    ▌ リアルタイム字幕
    個⼈の特性
    ▌ 年齢
    ▌ 性別
    ▌ 国籍
    ▌ ⼈種
    ▌ 能⼒
    ▌ スキル
    ▌ ⾊覚多様性
    ▌ 視覚障害
    ▌ 聴覚障害
    ▌ 肢体不⾃由
    ▌ 精神障害
    ▌ 発達障害

    View Slide

  8. ユーザ サイボウズ製品 チーム

    View Slide

  9. サイボウズにとって、アクセシビリティとは
    「ユーザがチームにアクセスできる能⼒」

    View Slide

  10. アクセシビリティを確保することは
    「チームに参加したい」という
    ユーザのねがいを尊重すること

    View Slide

  11. アクセシブルなウェブコンテンツを届けるには

    View Slide

  12. コンテンツがユーザに届くまで
    制作者 ユーザ
    ハードウェア
    (PC・スマホ…)
    ソフトウェア
    (ブラウザ・⽀援技術)
    ⼊出⼒
    機器
    感覚情報
    (視覚・聴覚・触覚…)
    Webコンテンツ
    (HTML・CSS・JS…)

    View Slide

  13. アクセシビリティを⾼める2つの要素
    制作者
    マシン
    リーダブル
    ヒューマン
    リーダブル
    ユーザ

    View Slide

  14. ヒューマンリーダブルにする考え⽅
    多様な感覚特性を想定する
    ⾊を⾒分けにくい
    まぶしい、暗い
    ⾳が出せない
    ⾳が聞こえない
    細かい作業が苦⼿
    記憶が困難
    多様な操作⽅法を想定する
    マウス操作
    タッチ操作
    キーボード操作
    拡⼤・縮⼩
    印刷

    View Slide

  15. ⾒た⽬と構造を分離して考える
    打倒なHTML要素で構造をマークアップする
    CSSで⾒た⽬を表現する
    マシンリーダブルにする考え⽅

    View Slide

  16. アクセシビリティ確保の基本

    View Slide

  17. アクセシビリティ確保の基本(7項⽬)
    1. 情報を伝える⾊の使い⽅に注意する
    2. ⽂字を拡⼤しても情報が正しく伝わるようにする
    3. キーボードで操作できるようにする
    4. ⾒出し・ランドマークなどの⽂書構造をマークアップする
    5. 画像に代替テキストを付ける
    6. リンクテキストはリンク先がわかる⽂⾔にする
    7. フォームフィールドにラベルを関連づける

    View Slide

  18. 役⽴つ⼈・役⽴つ場⾯
    情報を伝える⾊の使い⽅に注意する
    ⾊のみに依存しない表現にする
    ⾊同⼠のコントラストを⾼くする
    • ロービジョンの⼈・さまざまな⾊覚の⼈
    • ⽩⿊印刷した場合・屋外で閲覧した場合・プロジェクター
    • 初めて閲覧するサイト、⽂化圏の異なるサイトを⾒る場合

    View Slide

  19. ⾊のみに依存しない表現
    • ⾊以外の別の視覚情報を組み合わせる(テキスト、アイコン、記号など)

    View Slide

  20. ⾊のコントラスト
    • 2つの⾊の違いを「コントラスト⽐」で表すことができる
    • ⽂字⾊と背景⾊のコントラスト⽐には 4.5:1 以上を推奨
    21 : 1 4.5 : 1 1 : 1
    A A A A A A A A A A

    View Slide

  21. ⾊のチェックツール
    • Spectrum
    さまざまな⾊覚を再現できるChrome拡張
    • Color Contrast Analyzer
    2つの⾊のコントラスト⽐を測定できる

    View Slide

  22. やるべきこと (情報を伝える⾊の使い⽅に注意する)
    デザイン • ⽩⿊や⾊覚再現フィルターで表⽰して確認する
    • ⽂字⾊と背景⾊のコントラスト⽐を4.5:1以上に

    View Slide

  23. 役⽴つ⼈・役⽴つ場⾯
    ⽂字を拡⼤しても情報が正しく伝わるようにする
    拡⼤が必要な⼈・閲覧環境でも情報が正しく伝わる
    • ロービジョンの⼈・視⼒が低い⼈
    • スマホなど⼩さい画⾯で閲覧しているとき

    View Slide

  24. ⽂字を拡⼤する⽅法
    • 拡⼤する⽅法は主に3種類
    • OSの拡⼤機能を使う(拡⼤鏡など)
    • ブラウザのズーム機能で拡⼤する
    • ブラウザのフォントサイズを変更する
    • 200%まで拡⼤でき、情報が⽋落しないようにする

    View Slide

  25. 拡⼤に強くするには︖
    • 位置が固定された要素に要注意(ヘッダー・フッターなど)
    • フォントサイズ・フォントサイズに連動して変化する箇所には
    相対値(%, em, rem)を使う
    header
    footer
    header
    footer

    View Slide

  26. やるべきこと (⽂字を拡⼤しても情報が正しく伝わるようにする)
    デザイン • 200%拡⼤したときの動作を決めておく
    実装 • フォントサイズに連動して変化する箇所には
    相対値(%, em, rem)を使う

    View Slide

  27. 役⽴つ⼈・役⽴つ場⾯
    キーボードで操作できるようにする
    マウスが使えない⼈・閲覧環境でもキーボードで操作できる
    • 怪我をしている⼈・視覚障害の⼈・肢体不⾃由の⼈
    • 作業を効率的に進めたいとき、急いでいるとき

    View Slide

  28. キーボード操作についての注意
    • HTML標準のインタラクティブ要素はキーボードで操作できる
    • button, select, input要素など
    • 以下は⾃分でキーボード操作を実装する必要がある
    • 独⾃のUIパーツを作る場合
    • マウスに依存する操作を提供する場合(ホバー、D&Dなど)
    • キーボードフォーカスしたときのスタイルをつける

    View Slide

  29. やるべきこと (キーボードで操作できるようにする)
    デザイン • キーボード操作の⽅法を考えておく
    • キーボードフォーカススタイルを決める
    実装 • キーボード操作できるHTML要素を選ぶ
    • キーボードフォーカススタイルをもれなくつける

    View Slide

  30. 役⽴つ⼈・役⽴つ場⾯
    • 全盲の⼈/ロービジョンの⼈/ディスレクシアの⼈
    ⾒出し・ランドマークなどの⽂書構造をマークアップする
    ウェブページがマシンリーダブルになるよう構造化する
    スクリーンリーダーは⾒出し・ランドマークなどの⽂書構造を読む
    構造ごとに「読み⾶ばす」こともできる

    View Slide

  31. ユーザごとの⽂章構造の把握⽅法
    • 眼で確認するユーザー
    • ⼤きな⽂字や領域で「⾒出し」「ランドマーク」を把握する
    • 必要な箇所に視線を移動する
    • スクリーンリーダーを使うユーザー
    • マークアップで「⾒出し」「ランドマーク」を把握する
    • 必要な箇所に「ジャンプ」する

    View Slide

  32. ⾒出し・ランドマークはどう読まれる︖

    View Slide

  33. デザイン
    実装
    やるべきこと(⾒出し・ランドマークなどの⽂書構造をマークアップする)
    デザイン
    • ⾒出しはh1...h6要素でマークアップする
    • header, footer, nav, aside...を使う
    • モックの段階で⾒出しにする箇所を決める
    • モックの段階でランドマークにする箇所を決める

    View Slide

  34. 役⽴つ⼈・役⽴つ場⾯
    画像に代替テキストを提供する
    代替テキストとは、画像が伝えたいことを説明するテキスト
    • スクリーンリーダーは代替テキストを読み上げる
    • 画像のダウンロードに失敗すると代替テキストが表⽰される
    • 画像検索でヒットするようになる
    • 視覚障害の⼈
    • 低速回線(画像のダウンロードに失敗した場合)、SEO

    View Slide

  35. • img要素にalt属性をつける
    • 装飾的な画像、画像の横にテキストがある場合にはalt=""をつける
    • alt属性そのものを省略しない
    代替テキストの提供⽅法


    View Slide

  36. やるべきこと (画像に代替テキストを提供する)
    デザイン • 画像の近くに説明のテキストをつける
    • 画像の代替テキストを決める
    実装
    • 意味のあるimg要素には、alt属性をつける
    • 装飾的なimg要素には、alt=""をつける

    View Slide

  37. 役⽴つ⼈・役⽴つ場⾯
    リンクテキストはリンク先がわかる⽂⾔にする
    • 急いでいる⼈・全盲の⼈・ロービジョンの⼈・ディスレクシアの⼈
    • リンクがおおいウェブサイト、初めて訪問したとき、SEO
    リンク先が理解できる、説明的なリンクテキストにする
    「こちら」「ここをクリック」などのあいまいな⽂⾔を使わない
    流し読みしているユーザー、スクリーンリーダーのユーザーが
    リンクを押すべきか瞬時に判断できる

    View Slide

  38. あいまいなリンクテキスト、説明的なリンクテキスト

    View Slide

  39. やるべきこと (リンクテキストはリンク先がわかる⽂⾔にする)
    デザイン • 不明瞭なリンクテキストを使わない
    「ここをクリック」「さらに表⽰」「詳細はこちら」

    View Slide

  40. 役⽴つ⼈・役⽴つ場⾯
    フォームフィールドにラベルを関連づける
    クリック・タップ領域が広がる
    ⾳声⼊⼒でフォームをアクティブにできる
    スクリーンリーダーは、フォームにフォーカスしたときに
    対応するラベルを読み上げる
    • 視覚障害の⼈、肢体不⾃由の⼈
    • タッチ操作、⼩さいデバイスを使うとき、⾳声⼊⼒、⼤量のフォーム
    を⼊⼒するとき

    View Slide

  41. ラベルを関連づける⽅法
    label要素で関連づける
    ユーザー名

    View Slide

  42. やるべきこと (フォームフィールドにラベルを関連づける)
    デザイン • フィールドの近くに可視のラベルをつける
    実装 • フィールドとラベルをlabel要素で関連づける

    View Slide

  43. (発展)マシンリーダブルにするためのHTMLの仕様

    View Slide

  44. ⾚字でエラー…error要素がない
    タブを作りたい…tab要素がない
    div要素とCSSで⾒た⽬を整えることはできるけど…
    標準のHTML要素で表現できないとき

    View Slide

  45. HTMLのセマンティクスを補う属性群
    role属性と、aria属性がある
    lrole属性︓役割を決める
    l ボタン、タブ、ツリー、メニュー
    laria属性︓ふるまいを決める
    l 選択状態、チェック状態、エラーかどうか
    WAI-ARIAでセマンティクスを補う

    View Slide

  46. マシンリーダブルなエラー
    構造︓エラー、⾒た⽬︓⾚
    名前 (必須)

    .error {
    color: red;
    }

    View Slide

  47. エラーをマシンリーダブルにすると
    スクリーンリーダーは、エラーのフィールドに差し掛かると、エ
    ラーであることを読み上げる

    View Slide

  48. マシンリーダブルなタブ
    構造︓タブ・選択状態、⾒た⽬︓選択を表すデザイン上の変化

    タブ1
    タブ2
    タブ3


    [role=“tablist”] {
    display: flex;
    }

    View Slide

  49. タブをマシンリーダブルにすると
    スクリーンリーダーはタブであることを読み上げる
    選択状態を読み上げる

    View Slide

  50. アクセシビリティを検証する

    View Slide

  51. eslintのアクセシビリティルールセットを使う
    eslint-plugin-jsx-a11y
    https://www.npmjs.com/package/eslint-plugin-jsx-a11y
    eslint-plugin-vuejs-accessibility
    https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility
    コードレベルの検証

    View Slide

  52. ⾃動チェックツールで検証
    axe DevTools

    View Slide

  53. ページの状態が変わるごとにチェックする
    ポップアップが開く、トグルボタンを押すなど
    機械的に検出できる問題は全体の3割程度でしかない
    ⾃動チェックにpassしたからアクセシビリティOKではない
    ⾃動チェックツールの注意事項

    View Slide

  54. アクセシビリティツリーで検証
    HTML
    CSS
    DOMツリー
    CSSOMツリー
    アクセシビリティ
    ツリー
    ⽀援技術
    (スクリーンリーダー等)

    View Slide

  55. • Name︓識別する呼び名
    ボタンテキスト、フォームのラベル、など
    • Role︓どのような役割か
    ボタン、チェックボックス、コンボボックスなど
    • State︓どのようなふるまいか
    選択状態、チェック状態など
    アクセシビリティツリーの⾒かた
    インタラクティブ要素にName、Role、Stateが設定されているか確認

    View Slide

  56. ボタンのアクセシビリティツリー
    HTML
    アクセシビリティ
    ツリー

    View Slide

  57. タブのアクセシビリティツリー
    HTML
    アクセシビリティ
    ツリー

    View Slide

  58. DevTools→Elementsパネル→Accessibilityペイン
    →Enable full-page accessibility treeにチェック
    (参考)DevTools の新機能 (Chrome 98)
    アクセシビリティツリーの表⽰⽅法(Chrome)
    チェック
    ツリーを表⽰

    View Slide