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

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

自己紹介

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

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

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

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

Focus State Style

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

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

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

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

出典： Web Accessibility Perspectives Keyboard Compatibility

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

Pointing Target Size

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

WCAG2.1: 達成基準 2.5.5 Target Size

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

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

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

出典：Enhancing The Clickable Area Size

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

Contents Order

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

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

出典：CSS Flexible Box Layout Module Level 1

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

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

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

出典：CSS Flexible Box Layout Module Level 1

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

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

Form Input

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

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

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

マークアップの問題点

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

Floating labels

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

Floating labels

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

Demo

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

Demo: Floating labels

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

Floating labels are problematic

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

Floating labels are problematic

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

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

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

@talocohc_rion