アクセシビリティを高めるCSS

A presentation at DIST.30 in December 2019 in Tokyo, Japan by Yuko Morikawa

Slide 1

Slide 1

アクセシビリティを⾼めるCSS

  • DIST.30 Lightning Talk
  • 13 December 2019
  • Yuko Morikawa, to-R Inc.

Slide 2

Slide 2

自己紹介

トゥーアールの森川です。
私はWebの持つ無限の可能性に惹かれて、この業界で働いています。
ウェブアクセシビリティとは、誰もがどんな状況でもウェブにアクセスできるようにすること。これを知ったとき、私はウェブのアクセシビリティの高さに惹かれたんだと思いました。

Slide 3

Slide 3

「ウェブのパワーはそのユニバーサル性にある。障害に関わらず誰もがアクセスできることがその本質である」

World Wide Webを発明したティム・バーナーズ・リー氏の有名な言葉です。

Slide 4

Slide 4

ウェブの本質であるアクセシビリティを守っていくのは私たちの役⽬です。
これが私がアクセシビリティをやる理由の1つです。
今日はCSSでアクセシビリティを高めていくためのTipsを4つご紹介したいと思います。

Slide 5

Slide 5

Focus State Style

Slide 6

Slide 6

まずはじめに :focus { outline: none; } でフォーカス時のスタイルを消さないでくださいというものです。

Slide 7

Slide 7

マウスユーザーはマウスカーソルで自分の位置を確認できますが、キーボードユーザーはフォーカス時のスタイルによって自分の位置を確認します。

Slide 8

Slide 8

マウスカーソルが消えると混乱するのと同様に、フォーカスインジケータが消えるとキーボードユーザーは混乱します。

Slide 9

Slide 9

⼿に障害があり、⼝に棒を咥えてキーボードを操作している⼈もいます。

出典: Web Accessibility Perspectives Keyboard Compatibility

Slide 10

Slide 10

マウスがない環境の⼈ももちろんいます。キーボードだけでも操作できるよう確認してみましょう。

Slide 11

Slide 11

Pointing Target Size

次はポインティングターゲットサイズを広げてアクセシビリティを高めていきましょう。
指が太い人は小さなエリアをタップしにくかったり、病気などで常に手が震えていて、ターゲットサイズが小さいとうまくタップできない方もいます。

Slide 12

Slide 12

WCAG2.1: 達成基準 2.5.5 Target Size

W3Cが策定しているアクセシビリティのガイドライン:WCAGには、最低でも44 × 44 CSSピクセル相当のターゲットサイズが必要とされています。

出典:Web Content Accessibility Guidelines (WCAG) 2.1 達成基準 2.5.5 ターゲットのサイズ

Slide 13

Slide 13

余白を含めたり、関連するテキストを含めたりしてターゲットサイズを拡大します。

出典:Enhancing The Clickable Area Size

Slide 14

Slide 14

スタイルの都合上、視覚的なターゲットサイズを広げることが難しい場合には疑似要素を使って拡大することもできます。

Slide 15

Slide 15

Contents Order

続いてコンテンツの順序を通してアクセシビリティを高めます。

Slide 16

Slide 16

よくあるUIですね。商品の画像があって、見出しとなる商品名があって、さらに説明文、商品の内容、購入ボタンと続きます。

出典:CSS Flexible Box Layout Module Level 1

Slide 17

Slide 17

それぞれimg要素や見出し要素を使ってマークアップしていきます。

Slide 18

Slide 18

画像のalt属性値もコンテンツとして捉えると、意味のある順序はこのようになるのではないかと思います。

Slide 19

Slide 19

全体を覆うsectionにsale-itemのclassをつけました。

出典:CSS Flexible Box Layout Module Level 1

Slide 20

Slide 20

flexboxを使って縦方向に要素を並べ、画像部分には order: -1; を指定すると、視覚的な順序はアイキャッチとなる画像が1番上に表示されます。

Slide 21

Slide 21

私たち晴眼者もウェブページの隅から隅まで読むことは少ないと思います。これはスクリーンリーダーを使っている視覚障害者も同じです。スクリーンリーダーの⾒出しジャンプという機能を使っていると、⾒出し要素より上の要素は⾒落としてしまったり、前の⾒出しの最下部の要素として間違えて捉えられるかもしれません。

Slide 22

Slide 22

Form Input

最後にフォームのアクセシビリティについて見ていきましょう。

Slide 23

Slide 23

このようなUIがあったときにどのようにマークアップするでしょうか?

Slide 24

Slide 24

グレーのテキストをplaceholderとしてマークアップするのはアクセシビリティ的によくありません。

Slide 25

Slide 25

マークアップの問題点

⼊⼒を始めるとplaceholderは消えてしまうし、autocomplete機能によってそもそもplaceholderが全く⾒られない可能性すらあります。
スクリーンリーダーなどの⽀援技術の多くは、placeholderをラベルとして扱わなかったり、placeholder属性自体が、⽀援技術全体で広くサポートされていない問題もあります。

Slide 26

Slide 26

Floating labels

Floating labelsと呼ばれる手法があります。一見同じに見えますが、

Slide 27

Slide 27

Floating labels

フォーカスしたり、入力後は表示が変わります。

Slide 28

Slide 28

Demo

特定の条件下ではJavaScriptを使わず、CSSのみでも実装が可能です。IE11でも動きます。

Demo: Floating labels

Slide 29

Slide 29

Floating labelsを使うとplaceholderと同じビジュアルデザインでもアクセシビリティを⾼めることができます。ただし万能ではなく、気をつけなければいけない点もあります。

Slide 30

Slide 30

Floating labels are problematic

詳しくはFloating labels are problematicという記事に詳しく書かれているので是非読んでみてください。

Floating labels are problematic

Slide 31

Slide 31

やっぱり普通にラベルとして表示して、マークアップするのが1番アクセシブルです😊

Slide 32

Slide 32

最後にもう一度、ウェブの本質であるアクセシビリティを守っていくのは私たちの役⽬です。

Slide 33

Slide 33

ありがとうございました!

@talocohc_rion