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

他人事じゃないWebアクセシビリティ入門

 他人事じゃないWebアクセシビリティ入門

2024年4月に改正される障害者差別解消法により、民間企業にも合理的な配慮が義務付けられます。
この法改正に伴い、Webサイトやデジタルサービスについても、すべてのユーザーにとって「アクセス可能な仕組み」の整備が求められます。

アクセシビリティは障害のある方だけのものではなく、全ての人の「使いやすさ」に繋がります。
海外ではアクセシビリティ対応していないことで訴訟に発展するケースも出ており、もう他人事ではいられません。

このセミナーでは、Webアクセシビリティについて、どういった観点でチェックする必要があるのかを紹介します。

Arihiro Matsumura

March 29, 2024
Tweet

Other Decks in Design

Transcript

  1. アクセシビリティとは 能力や環境にかかわらず全員を同一に扱い、 同じ機会を与えること ”The Power of the Web is in

    its universality. Access by everyone regardless of disability is an essential aspect.” Tim Berners-Lee, W3C Director and inventor of the World Wide Web Webの力はユニバーサル性にある。障害の有無に関わらず誰でもアクセスできることがWebの本質である。 Copyright© 2024 dotD All Rights Reserved.
  2. 障害者差別解消法 障害者差別解消法(2024年4月改正) この法律では、下記の3つのことを求めています。 「不当な差別的取り扱い」 禁止 この法律では、国・都道府県・市 町村などの役所や、会社やお店な どの事業者が、障害のある人に対 して正当な理由なく障害を理由と して差別することを禁止していま

    す。 例)車椅子の方がレストランへの 入店を拒否される、など。 「合理的配慮の提供」 努力義務→義務 障害のある人から、社会の中にあ るバリアを取り除くために何らか の対応を必要としているとの意思 が伝えられた時に、負担が重すぎ ない範囲で対応すること。 例)車椅子の方が電車に乗車する 際に駅員にスロープを設置して乗 車の手助けをしてもらう 「環境の整備」 努力義務 行政機関や事業者に対して、合理 的配慮を的確に行えるようにする 「環境の整備」を努力義務として 定めています。 例)アクセシビリティを担保した ウェブサイトなどを作成する
  3. WCAG(Web Content Accessibility Guidelines) World Wide Web Consortium(W3C)が策定しているガイドライン。 1999年5月に初版となる「WCAG 1.0」を勧告(現在は廃止)。

    現在は2023年5月に勧告された「WCAG 2.2」が最新版となっている。 また、「WCAG 3.0」が策定中となっており、公開中のドラフト版ではWeb XR(拡張現実、仮想現実、複合現実)や 音声入力などの新しいテクノロジーをカバーされている。 アクセシビリティの基準・ガイドライン(1/4)
  4. アクセシビリティの基準・ガイドライン(3/4) 日本工業規格「JIS X 8341-3:2016」 国際規格になっている 「WCAG 2.0」の日本語訳に、日本語特有と思われる事項を追記したもの。 日本の公的機関や一般企業のWebアクセシビリティ方針では、 「JIS X

    8341-3:2016のレベルAAに準拠する」のように、目標が定められていることがある。 デジタル庁 ウェブアクセシビリティ https://www.digital.go.jp/accessibility-statement 函館市 ウェブアクセシビリティ方針 https://www.city.hakodate.hokkaido.jp/docs/2017033100056/ KDDIグループウェブアクセシビリティ方針 https://www.kddi.com/co r po r ate/s u stainability/society/accessibility/webaccessibility/
  5. WCAGの3つの適合レベル WCAGの達成基準には、A / AA / AAA の3つの適合レベルがある。 レベルA 最低レベルであり、この基準を満たすと、ユーザーが支援技術を駆使すればWebサイトにアクセス可能になるレベル。 逆に言うと、この基準を満たしていなければ、人によってはまったくアクセスできない場合がある。

    レベルAA 公的機関に求められるレベル。この基準を満たすと、ユーザーはコンテンツの内容の理解や操作にかかる時間が短くなり、 利用を諦めてサービスから離脱する可能性が低減する。 レベルAAA 「A」「AA」をさらに強化する項目。最も高いアクセシビリティを目指したレベルだが、コンテンツや機能によっては 「例外なく達成」することが難しい場合がある。そのため、通常はAAAへの適合を達成目標にはしない。 Copyright© 2024 dotD All Rights Reserved.
  6. 1.4.1 色の使用 ・色は、情報を伝えたり、行動を示したり、視覚的要素を区別したりする唯一の手段として使ってはならない 色の使用 レベルA ️OK 氏名 メールアドレス ※必須 ※必須

    テキストで情報を伝えている 氏名 メールアドレス 青枠内は必須入力です NG 色のみで情報を伝えている Copyright© 2024 dotD All Rights Reserved.
  7. 1.4.3 コントラスト(最低限) 1.4.11 非テキストのコントラスト 1.4.6 コントラスト(強化) ・大きいサイズ※1のテキストのコントラスト比を3:1以上にする ・それ以外のテキストのコントラスト比を4.5:1以上にする ・ユーザーインタフェースコンポーネント※2やグラフィカルオブジェクト※3のコントラスト比を3:1以上にする ・大きいサイズ※1のテキストのコントラスト比を4.5:1以上にする

    ・それ以外のテキストのコントラスト比を7:1以上にする コントラスト レベルAA レベルAA レベルAAA ※1大きいサイズのテキスト:18px以上、または14px以上の太字 ※2ユーザーインタフェースコンポーネント:テキストボックスやラジオボタンなど、利用者が単一のコントロールとして近くするもの ※3グラフィカルオブジェクト:コンテンツを理解するために必要な図版など Copyright© 2024 dotD All Rights Reserved.
  8. コントラスト比とは、隣り合う色との輝度の差のこと コントラスト比が低すぎると、色の差を感じる力が弱いまたはそのような環境にいる場合に、情報へのアクセスが難しくなる。 コントラスト比 3:1 あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリ オ市、郊外のぎらぎらひかる草の波。 またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤い こどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物の なかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。 4.5:1

    あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリ オ市、郊外のぎらぎらひかる草の波。 またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤い こどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物の なかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。 7:1 あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリ オ市、郊外のぎらぎらひかる草の波。 またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤い こどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物の なかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。 Copyright© 2024 dotD All Rights Reserved.
  9. テキストの間隔 1.4.12 テキストの間隔 ・行の高さをフォントサイズの1.5倍以上にする ・段落に続く間隔をフォントサイズの2倍以上にする※ ・文字の間隔をフォントサイズの0.12倍以上にする※ レベルAA 行間/文字間が狭く、読みづらい あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい 森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。

    またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼の ミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパー ゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつか しい青い幻燈のように思われます。 ️ 行間/文字間/段落の間隔が適切に設定され、読みやすい あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつ くしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、 羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・ デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みん なむかし風のなつかしい青い幻燈のように思われます。 ※あまり間隔を開けすぎるとかえって読みにくくなる可能性がある Copyright© 2024 dotD All Rights Reserved.
  10. font-sizeの単位rem 文字の大きさを絶対単位(px, ptなど)で指定すると、ブラウザの文字サイズ変更機能の設定が反映されない。 rem はルートである<html>要素のフォントサイズを基準とする単位。デフォルトでは 1rem = 16px となる。 Chrome

    の場合、フォントサイズを極大にすると、1rem = 24pxとなる。 フォントサイズだけでなく、フォントサイズに応じて大きさを変えたい箇所(例えばボタンの幅や高さ)も相対単位を使用する。 ブラウザのフォントサイズが反映されないボタン <button class=”save-button”>保存</button> .save-button { font-size: 16px; min-width: 80px; height: 32px; } ️ブラウザのフォントサイズによって大きさが変わるボタン <button class=”save-button”>保存</button> .save-button { font-size: ; min-width: ; height: ; } 1rem 5rem 2rem Copyright© 2024 dotD All Rights Reserved.
  11. 3.3.2 ラベルまたは説明 適切なラベルと説明 レベルA ・コンテンツにユーザー入力が必要な場合、ラベルや指示が提供される。 ️OK 半角英数字で入力 氏名 メールアドレス ※必須

    枠外にラベルと説明がある placeholderで説明している NG 氏名 メールアドレス 半角英数字で入力 国語 数学 理科 社会 英語 横並びでかつ接近している NG 国語 数学 理科 社会 英語 縦にならべてラベルを整列させる ️OK Copyright© 2024 dotD All Rights Reserved.
  12. キーボード操作できないボタン キーボード操作できないボタン <div onClick=”...”>ボタン</div> ️キーボード操作できるボタン < onClick=”...”>ボタン< > button /button

    tabindex属性や、onKeydownイベントを駆使すればキーボード操作できるようにするこ とも出来るが、コード量は増える。 <button>タグを使えば、これ以上何も書かなくても、キーボードフォーカスされ、Enter キーでclickイベントを発火させることができる。 divタグはonClickイベントを付与しても、キーボードフォーカスできず、操作できない。 操作可能なインタフェースは、buttonやinput、aタグなどのインタラクティブ要素を使用すること。 Copyright© 2024 dotD All Rights Reserved.
  13. フォーカスが表示されない(outline非表示) フォーカスできないボタン <div onClick=”...”>ボタン</div> button { outline: none; } ️

    フォーカスできるボタン <button onClick=”...”>ボタン</button> button: focus { } outline: #000082; ブラウザデフォルトのフォーカスはCSSのoutline属性で表現されている。 outline:none; などで非表示にしていると、フォーカス表示ができなくなってしまう。 Copyright© 2024 dotD All Rights Reserved.
  14. フォーカスが表示されない(インタラクティブ要素が非表示) ️フォーカスできないチェックボックス <label> <input type=”checkbox” id=”agreement” class=”checkbox” /> <svg viewBox="0

    0 960 960" width="16"><path d="(省略)"/></svg> <span>同意する</span> <label> .checkbox { display: none; } ️フォーカスできるチェックボックス <label> <input type=”checkbox” id=”agreement” class=”checkbox” /> <svg viewBox="0 0 960 960" width="16"><path d="(省略)"/></svg> <span>同意する</span> <label> .checkbox { } appearance: none; opacity: 0; // または チェックボックスやラジオボタンの見た目をカスタムするために、input要素を非表示にすることがあるが、 その際に、HTMLのhidden属性や、CSSのdisplay: none; を使うと、フォーカスされなくなってしまう。 Copyright© 2024 dotD All Rights Reserved.
  15. HTMLのタグは、h1〜6は見出し、pは段落、ulはリスト、tableは表といった意味を持っている。 スクリーンリーダーはただテキストを読み上げるだけでなく、意味に合わせて読み方を変える。 HTMLのセマンティクス 意味論が実装されていないHTML <div> <span>銀河鉄道の夜</span> 『銀河鉄道の夜』(銀河鐵道の夜、ぎんがてつどうのよる)は、宮沢賢治の童話作 品。<br /> 孤独な少年ジョバンニが、友人カムパネルラと銀河鉄道の旅をする物語</div>

    <span>あらすじ<span> <span>一、午后の授業</span> 銀河系の構造についての授業。天の川について先生に質問されたジョバンニは、答え を知りつつ気もそぞろに答えることができない。次に指されたカムパネルラも、答えな い。 </div> 意味論が実装されているHTML < > < >銀河鉄道の夜< > < >『銀河鉄道の夜』(銀河鐵道の夜、ぎんがてつどうのよる)は、宮沢賢治の童話 作品。< > < >孤独な少年ジョバンニが、友人カムパネルラと銀河鉄道の旅をする物語< > < > < >あらすじ< > < > < >一、午后の授業< > < > 銀河系の構造についての授業。天の川について先生に質問されたジョバンニは、 答えを知りつつ気もそぞろに答えることができない。次に指されたカムパネルラも、答 えない。 < > < > < > < > section h1 /h1 p /p p /p section h2 /h2 dl dt /dt dd /dd /dl /section /section Copyright© 2024 dotD All Rights Reserved.
  16. WAI-ARIAを用いて実装されたタブUI WAI-ARIAを用いて実装されたタブUIの実装例 <div > <button id=”software-tab”>ソフトウェア基本情報</button> <button id=”license-tab”>ライセンス情報</button> <div> <div

    > ...(ソフトウェア基本情報のコンテンツ) </div> <div > ...(ライセンス情報のコンテンツ) </div> role=”tablist” role=”tab” aria-selected=”true” role=”tab” aria-selected=”false” role=”tabpanel” aria-labelledby=”software-tab” aria-hidden=”false” role=”tabpanel” aria-labelledby=”license-tab” aria-hidden=”true” ・タブUIを構成するパーツに で役割(tablist, tab, tabpanel)を設定する ・タブの選択状態を として設定する ・タブパネルの表示状態を として設定する ・タブとタブパネルの関連性を で指定する role属性 aria-selected属性 aria-hidden属性 aria-labelledby属性 Copyright© 2024 dotD All Rights Reserved.
  17. imgタグに対しては、alt属性で代替テキストを設定する。 画像の代替テキスト(1/2) <img src=”/img/logo.svg” alt=”株式会社dotD”> <img src=”/img/graph.png” alt=”図の中心に人に優しいデジタル化と書かれていて、 取り囲むように、地域を支える、世界を支える、国を支える、産業を支える、個人を支 えるの5項目が書かれている。”>

    例1)画像化したテキスト 画像内の文字と同等の内容を設定する。 会社のロゴであれば、会社名を設定する。 例2)コンテンツの理解に欠かせない図表など 図表を要約した内容を設定する。ただし本文中で同様の内 容が説明されている場合は省略可能。 文字数に制限は無いが、可読性を考慮すると80文字が目 安。それ以上になる場合は、本文に書き起こすことを検討 する。 C opy right© 2024 dotD A ll R ights Re se rve d.
  18. imgタグに対しては、alt属性で代替テキストを設定する。 画像の代替テキスト(2/2) <button> <img src=”/icon-add.svg” alt=””> <span>いいね</span> </button> 例4)装飾やテキストつきの画像 テキストつきの場合、altを設定すると同じ内容が2回読み

    上げられてしまうので、altを空にする。 alt属性自体を省略すると、ファイル名やパスが読み上げ られてしまうので、省略ではなく、必ず空にする。 いいね <button> <img src=”/icon-add.svg” alt=”メンバーを追加する”> </button> 例3)アイコンのみのボタン ボタンの機能を記述する。 Copyright© 2024 dotD All Rights Reserved.
  19. アクセシビリティに配慮したデザインシステムの事例 IBM Carbon Design System - https://carbondesignsystem.com/ 序文で、障害に対してデザイナーがどう対処すべきか、そしてそれが障害のないユーザーにとってどんなメリットになるのかを紹 介している。 コンポーネントやパターンごとにも、どのようにアクセシビリティ面の問題を解消しているのかを解説されている。

    Adobe Spectrum Design System - https://spectrum.adobe.com/ コンポーネントがReact SpectrumというReactによる実装が用意されている。さらに各コンポーネントの振る舞いは、React AreaやReact Statelyというパッケージに抽象化して実装されている。 SmartHR Design System - https://smarthr.design/ SmartHRのブランドガイドラインも内包したデザインシステムであり、内部にプロダクトのUI向けコンポーネントライブラリで あるSmartHR UIがある。 Cyber Agent Ameba Spindle - https://spindle.ameba.design/ Amebaのブランドガイドラインも内包したデザインシステムで、Storybookでコンポーネントカタログを公開している。 Copyright© 2024 dotD All Rights Reserved.