東京で開催された「CSS Nite LP54 Corder’s High 2017」の参加レポートです。

セッション2つめはfreeeの伊原、太田さん。

セッションを聴いて思ったこと・感想

弊社でもよく「アクセシビリティ対応」が議題に上がったりするのですが、いざ「対応してみろ」と言われたら「実装できない」という人が大半だった記憶があります。

今回セッションでご紹介していただいた「インクルーシブHTML」には具体的な実装方法が多く記載されており、まさに今の自分が欲していた一冊でした。（会場で速攻ポチりましたｗ）

あと、「インクルーシブ」ってなかなか聞き慣れないワードでしたが、「アクセシビリティ」とほぼ同義ということで納得しました。

以下はその場で書き起こしたメモです。

インクルーシブとは

「誰でも受け入れる」「特定の人を除外しない」

= どんな人、どんな環境でもアクセスできる「アクセシビリティ」とほぼ同義

アクセシビリティ的にダメと言われても…どうすればいいの？
↓
「インクルーシブHTML + CSS +JavaScript」https://goo.gl/G6RJck

その解決方法などアクセシブルなパターンを網羅した本

やるなではなく「こう実装するとアクセシブル」という話

ボタン vs ボタン

インクルーシブなボタン

  • 「グラフィックデザイナーのボタン」

    • Web上で動くことを前提としていない

  • 「コードが書けるデザイナーのボタン」

    • とりあえずWeb上に表示できる程度しか考えられていない

  • 「インクルーシブデザイナーのボタン」

    1
    2
    3
    4
    <button type="button">
      use button
      not div
    </button>

ボタンにはボタンを使おう！

背景画像にするとどうなる?

Windowsのハイコントラストモードを使うと背景画像は表示されなくなる。

アイコンフォントの問題

ユーザーがWebページのフォントを変更する場合、フォントのロードに失敗する場合、□←豆腐が出てしまう

Unicode標準の記号を使う
aria-hidden="true" でスクリーンリーダー上でUnicodeを読まなくする

SVGスプライトの利用

急速にアイコンの標準仕様になりつつある。
svgの中にsymbol要素で配置しておく。

アイコン単体で使用する場合

1
<span class="visual-hidden"></span>

など視覚的に隠す。

aria-label="メニュー" などで指定する

開閉メニュー実装時のポイント

  • JSで <ul> にhidden属性を使いして非表示にする
  • buttonはnav要素の中に配置する
  • buttonの直後にメニューを配置する

ボタンまとめ

  • 原則としてbuttonで実装する
  • メニューボタンはラベルを付ける
  • アイコン実装方法は色々ある
  • 開閉メニュー実装はいろいろ注意

メニュー実装

<nav> > <ul> のすすめ

  • スクリーンリーダーで適切に読み上げられる
  • CSSが読み込めなくてもわかる

現在地は色以外でも区別する

  • 色だけに頼らないようにデザインする
    • ボーダーを付ける
    • フキダシにするなど
  • スクリーンリーダーでの対応
    • aria-current="page" で現在のページと解釈できる

見出しレベルに注意

  • 見出しレベルは読み上げてくれる。h1からh3にいきなり飛ぶと不思議な感じなってしまう
  • 「インクルーシブ ＝ 体験を等価なものにすること」

<article> は使うべきなのか？

  • 記事が連続している場合、article要素があるとスクリーンリーダーで分かりやすく読まれる
  • 一定数恩恵を受け人がいるので使うべき
  • 要素を選ぶときは、ユーザー体験の視点から

まとめ

  • インクルーシブ = アクセシビリティと同義
  • ボタンは <button> で
  • ナビゲーションをインクルーシブに
  • ブログ記事は見出しが大事