[ Webridge Meeting SP22 ] Web アクセシビリティ はじめの一歩に参加してきました〜。(^o^) #wmsp22

↓この記事が気に入ったら、ぜひシェアをお願いします!

2016年10月1日(土)14:00-18:00 レグザムホール(香川県民ホール)大会議室で行われた [Webridge Meeting SP22 ] Web アクセシビリティはじめの一歩 に参加してきました。

スポンサーリンク

今日から始める Web アクセシビリティ、まずはココから! ~ Web アクセシビリティ はじめの一歩、キホンの「キ」~ (植木 真さま)

  • アメリカでは、Web アクセシビリティの実装が法律で義務付けられている。
  • 日本でも、平成28年4月1日から「障害者差別解消法」が施行された。
  • 障害がある人のためだけでなく、デバイスの多様化や多種多彩な使われ方に対応する必要がある。
  • 高齢のユーザーでも使いやすく、さらにはユーザー全般のユーザビリティーを向上する。
  • 超高齢社会+障害者差別解消法+2020年パラリンピック
  • ユーザー×利用環境×場面・状況で多種多彩なシチュエーション。
  • アクセシビリティは Web コンテンツの品質基準
  • ガイドラインには3つのレベルの達成基準がある。A, AA, AAA

見出し

  • ユーザーは文章の全てを読んでいない。
  • 目の動きは F 字型。
  • 見出しレベルはスキップしないほうが良い。
  • h1 要素はページ内でひとつにする。

リスト

  • 文章の要点が明確に
  • 文章のテンポがよくなる
  • 箇条書きの前にはリード文を入れる。

リンク

  • 「ここをクリック」や「こちら」ではリンク先の内容がわからない。
  • このストレスがサイトの印象を悪くする。
  • リンクテキストとリンク先の大見出しは同じにする。

画像の代替テキスト

  • 画像に文字がある場合はそのまま代替テキストにする。
  • グラフの中もテキストに書く。
  • alt 属性がないとファイル名やリンク先の URL を読んでしまう。
  • 画像と隣り合ったリンクテキストは一個の a 要素で囲む。この場合、alt の記述は不要となる。
  • figcaption 要素は写真用のキャプションを入力できる。

文字サイズ

  • 文字サイズ変更ボタンは不要。
  • 音声読み上げ用ボタンは不要。
  • 色合いの変更ボタンは不要。
  • 読みやすい文字サイズは人それぞれ。
  • コンテンツは拡大できるようにする。
  • 老眼世代には標準文字サイズを大きく

フォーム

  • label 要素でラベルと入力エリアを関連付ける。
  • プレースホルダーに項目名を入れない。
  • エラーはエラーが起こった場所を明示する。
  • どういうエラーが起きて、どうすれば良いのかを伝える。

  • 坂本様のセッションにて。

キーボード操作

  • フォーカスの移動・リンクを押すなどの動作がキーボードでできるように。
  • フォーカスの現在位置がが表示されているか?

ページタイトル

  • 前後の文脈がなくても意味がわかる
  • 簡潔である
  • 「ページタイトル | サイト名」が良い。

WAI-ARIA

  • タブなどはソースコードからどんな構造か判断できない。
  • role 属性はデフォルトの役割を上書きする。

HTML5 で今日から使える WAI-ARIA ~Webアクセシビリティ はじめの一歩、アリアの「ア」~(大藤 幹さま)

  • WAI-ARIA とは、Web アプリケーション向けの要素と属性の追加セット
  • role 属性を使い、既存の要素を上書きして別の要素に変更する。
  • 追加される属性は3種類。HTML5 ではすべての要素に使用できる。
    • role 属性
    • aria-**** 属性
    • tabindex 属性

tabindex 属性

  • インタラクティブな要素は全てフォーカス可能にする必要がある。
  • tabindex=”0” フォーカスのみを可能にする。
  • tabindex=”-1” フォーカスできなくする。

role 属性

  • ランドマーク・ロール(nav, main とか)
  • 文章構造ロール
  • ウィジェット・ロール(部品)
  • 抽象ロール

ランドマーク・ロール

  • ランドマーク・ロールは全8種類
    • banner
    • main
    • contentinfo
    • navigation
    • complementary
    • form
    • search
    • application

文章構造ロール

  • 以下抜粋
    • document
    • img
    • separator
    • heading
    • region
    • article
    • list
    • listitem
    • presentation = 要素から意味・役割を削除する。見た目だけ。継承される。

ウィジェット・ロール

  • 以下抜粋
    • tree = Windows エクスプローラーみたいな表現のときに使う。

aria-**** 属性

  • 関係を示す属性
  • ウィジェット属性
  • ライブ領域属性(リアルタイム更新を知らせる)
  • ドラッグ&ドロップ属性
  • aria-label 属性 = テキストリンクにラベルを付けられる。
  • aria-labelledby 属性 = 他の要素をラベルとして使用する。

まとめ

  • WAI-ARIA はすぐにでも導入可能
  • 属性を覚えるだけでオッケー
  • アクセシビリティの問題もかんたんに解決できる機能がある
  • 使わないのはもったいない
  • 普通のブラウザでは影響がない。アクセスビリティ API 利用時のみ影響が出る。

今日からできるカラーデザインチェック ~ Web アクセシビリティ はじめの一歩、カラーの「カ」~(坂本 邦夫さま)

  • 老眼が進み 12px のフォントサイズに殺意を覚える
  • ウェブサイトは目で見ている人が多い。
  • 見えることには個人差がある
    • 視力の衰え・加齢による目の変化
    • 疾病などによる個人差
    • そもそも色を識別する錐体細胞の数や働きが同じとは限らない。
  • 色々な見え方
    • ロービジョン = 全盲ではないが極端に見えにくい
    • 色覚の違い。日本人の男性の5%は色弱者。
  • 配色の基本的な考え方
    • 色だけに頼らないようにする
    • 多くの人に見えるように作る
    • 小さい字・薄い字は読みにくい
    • 資格での閲覧を配慮しないのは、機会損失の極み
  • 客観的基準としての基準
    • JIS X8341-3 色に関する基準
    • 色だけで区別しないこと
      • 「はい」は緑のボタンをクリックしてください。など
      • 色と形状とテキストをセットで使う
      • 文中のテキストリンクは文字色が青いだけじゃなくアンダーラインを引くとか。
      • 色分けされたグラフなどは使いにくい。
      • モノクロにしてみて判断できない物はアウト。
    • 読みやすくすること
      • コントラスト比が高いほうが見やすい
      • カラー・コントラスト・アナライザーというソフトがある。
      • コントラストは最低 4.5:1 以上。
      • 高度(AAA)レベルのコントラスト比は 7:1 以上。
      • 実務的には全て 6:1 を目標に!
      • オレンジと緑はコントラスト比が出にくい。
      • Google など有名なサイトでは、モバイルサイトの方がコントラスト比が高い
        • 外光などの屋外環境に影響されやすい
        • 文字が物理的に小さい
        • フィルムを貼っている
    • ピカピカさせない
      • ポケモンフラッシュはだめ
      • 閃光は一秒間に三回まで?
      • 判断基準が難しいので閃光は使わない
  • カラーユニバーサルデザイン推奨配色セット
    • 文字で使うとコントラスト比が足りない場合があるので注意
    • 色分けとか背景色などに使うと良いかも。
  • 様々なツールでチェック
    • Illustrator, Photoshop で色に関するチェックができる。
    • 「色のシミュレータ」というアプリ
    • (un)clrd という Chrome 拡張機能がある
    • ChromeLens という Chrome 拡張機能がある
    • 実際に目を細めてみる。かすみ目や老眼のエミュレーション。
    • 後から直すと大変
    • デザインの要件とする?コントラスト比とか。
  • まとめ
    • 見え方と環境は一定ではない
    • 最低限の基準を満たしたサイトに
    • デザインと配色チェックを習慣づける。慣れるとわかる。

感想

▲ 登壇者の皆様集合。

アクセシビリティとはなんぞやから、支援技術まで体系的に学べた有意義なセミナーでした。

登壇者の皆様、スタッフの皆様、ありがとうございました。

スポンサーリンク

↓この記事が気に入ったら、ぜひシェアをお願いします!

↓ブログをフォローすると更新情報が届きます。

スポンサーリンク