A presentation at DIST.30 in in Tokyo, Japan by Yuko Morikawa
トゥーアールの森川です。
私はWebの持つ無限の可能性に惹かれて、この業界で働いています。
ウェブアクセシビリティとは、誰もがどんな状況でもウェブにアクセスできるようにすること。これを知ったとき、私はウェブのアクセシビリティの高さに惹かれたんだと思いました。
「ウェブのパワーはそのユニバーサル性にある。障害に関わらず誰もがアクセスできることがその本質である」
World Wide Webを発明したティム・バーナーズ・リー氏の有名な言葉です。
ウェブの本質であるアクセシビリティを守っていくのは私たちの役⽬です。
これが私がアクセシビリティをやる理由の1つです。
今日はCSSでアクセシビリティを高めていくためのTipsを4つご紹介したいと思います。
まずはじめに :focus { outline: none; } でフォーカス時のスタイルを消さないでくださいというものです。
マウスユーザーはマウスカーソルで自分の位置を確認できますが、キーボードユーザーはフォーカス時のスタイルによって自分の位置を確認します。
マウスカーソルが消えると混乱するのと同様に、フォーカスインジケータが消えるとキーボードユーザーは混乱します。
⼿に障害があり、⼝に棒を咥えてキーボードを操作している⼈もいます。
マウスがない環境の⼈ももちろんいます。キーボードだけでも操作できるよう確認してみましょう。
次はポインティングターゲットサイズを広げてアクセシビリティを高めていきましょう。
指が太い人は小さなエリアをタップしにくかったり、病気などで常に手が震えていて、ターゲットサイズが小さいとうまくタップできない方もいます。
W3Cが策定しているアクセシビリティのガイドライン:WCAGには、最低でも44 × 44 CSSピクセル相当のターゲットサイズが必要とされています。
出典：Web Content Accessibility Guidelines (WCAG) 2.1 達成基準 2.5.5 ターゲットのサイズ
余白を含めたり、関連するテキストを含めたりしてターゲットサイズを拡大します。
スタイルの都合上、視覚的なターゲットサイズを広げることが難しい場合には疑似要素を使って拡大することもできます。
続いてコンテンツの順序を通してアクセシビリティを高めます。
よくあるUIですね。商品の画像があって、見出しとなる商品名があって、さらに説明文、商品の内容、購入ボタンと続きます。
それぞれimg要素や見出し要素を使ってマークアップしていきます。
画像のalt属性値もコンテンツとして捉えると、意味のある順序はこのようになるのではないかと思います。
全体を覆うsectionにsale-itemのclassをつけました。
flexboxを使って縦方向に要素を並べ、画像部分には order: -1; を指定すると、視覚的な順序はアイキャッチとなる画像が1番上に表示されます。
私たち晴眼者もウェブページの隅から隅まで読むことは少ないと思います。これはスクリーンリーダーを使っている視覚障害者も同じです。スクリーンリーダーの⾒出しジャンプという機能を使っていると、⾒出し要素より上の要素は⾒落としてしまったり、前の⾒出しの最下部の要素として間違えて捉えられるかもしれません。
最後にフォームのアクセシビリティについて見ていきましょう。
このようなUIがあったときにどのようにマークアップするでしょうか？
グレーのテキストをplaceholderとしてマークアップするのはアクセシビリティ的によくありません。
⼊⼒を始めるとplaceholderは消えてしまうし、autocomplete機能によってそもそもplaceholderが全く⾒られない可能性すらあります。
スクリーンリーダーなどの⽀援技術の多くは、placeholderをラベルとして扱わなかったり、placeholder属性自体が、⽀援技術全体で広くサポートされていない問題もあります。
Floating labelsと呼ばれる手法があります。一見同じに見えますが、
フォーカスしたり、入力後は表示が変わります。
特定の条件下ではJavaScriptを使わず、CSSのみでも実装が可能です。IE11でも動きます。
Demo: Floating labels
Floating labelsを使うとplaceholderと同じビジュアルデザインでもアクセシビリティを⾼めることができます。ただし万能ではなく、気をつけなければいけない点もあります。
詳しくはFloating labels are problematicという記事に詳しく書かれているので是非読んでみてください。
やっぱり普通にラベルとして表示して、マークアップするのが1番アクセシブルです😊
最後にもう一度、ウェブの本質であるアクセシビリティを守っていくのは私たちの役⽬です。
近年、ウェブ制作者の間でも関心が高まるアクセシビリティ。海外ではアクセシブルでないコンテンツに対する苦情や訴訟なども少なくありません。ウェブアクセシビリティを高める方法はWAI-ARIAだけではありません。スタイルのために適切なマークアップを諦めていませんか？このライトニングトークでは、適切なマークアップとCSSでアクセシビリティを高める方法をお伝えします。
The following code examples from the presentation can be tried out live.
Here’s what was said about this presentation on social media.
for free. You
can too.