Inc.自己紹介トゥーアールの森川です。私はWebの持つ無限の可能性に惹かれて、この業界で働いています。ウェブアクセシビリティとは、誰もがどんな状況でもウェブにアクセスできるようにすること。これを知ったとき、私はウェブのアクセシビリティの高さに惹かれたんだと思いました。「ウェブのパワーはそのユニバーサル性にある。Webを発明したティム・バーナーズ・リー氏の有名な言葉です。ウェブの本質であるアクセシビリティを守っていくのは私たちの役目です。これが私がアクセシビリティをやる理由の1つです。今日はCSSでアクセシビリティを高めていくためのTipsを4つご紹介したいと思います。フォーカス時のスタイルを消さないでくださいというものです。マウスユーザーはマウスカーソルで自分の位置を確認できますが、キーボードユーザーはフォーカス時のスタイルによって自分の位置を確認します。マウスカーソルが消えると混乱するのと同様に、フォーカスインジケータが消えるとキーボードユーザーは混乱します。手に障害があり、口に棒を咥えてキーボードを操作している人もいます。Compatibilityマウスがない環境の人ももちろんいます。キーボードだけでも操作できるよう確認してみましょう。Size次はポインティングターゲットサイズを広げてアクセシビリティを高めていきましょう。指が太い人は小さなエリアをタップしにくかったり、病気などで常に手が震えていて、ターゲットサイズが小さいとうまくタップできない方もいます。CSSピクセル相当のターゲットサイズが必要とされています。ターゲットのサイズ余白を含めたり、関連するテキストを含めたりしてターゲットサイズを拡大します。Sizeスタイルの都合上、視覚的なターゲットサイズを広げることが難しい場合には疑似要素を使って拡大することもできます。Order続いてコンテンツの順序を通してアクセシビリティを高めます。商品の画像があって、見出しとなる商品名があって、さらに説明文、商品の内容、購入ボタンと続きます。1それぞれimg要素や見出し要素を使ってマークアップしていきます。画像のalt属性値もコンテンツとして捉えると、意味のある順序はこのようになるのではないかと思います。全体を覆うsectionにsale-itemのclassをつけました。指定すると、視覚的な順序はアイキャッチとなる画像が1番上に表示されます。私たち晴眼者もウェブページの隅から隅まで読むことは少ないと思います。これはスクリーンリーダーを使っている視覚障害者も同じです。スクリーンリーダーの見出しジャンプという機能を使っていると、見出し要素より上の要素は見落としてしまったり、前の見出しの最下部の要素として間違えて捉えられるかもしれません。Input最後にフォームのアクセシビリティについて見ていきましょう。このようなUIがあったときにどのようにマークアップするでしょうか?グレーのテキストをplaceholderとしてマークアップするのはアクセシビリティ的によくありません。入力を始めるとplaceholderは消えてしまうし、autocomplete機能によってそもそもplaceholderが全く見られない可能性すらあります。スクリーンリーダーなどの支援技術の多くは、placeholderをラベルとして扱わなかったり、placeholder属性自体が、支援技術全体で広くサポートされていない問題もあります。labelsと呼ばれる手法があります。labelsフォーカスしたり、入力後は表示が変わります。Demo特定の条件下ではJavaScriptを使わず、CSSのみでも実装が可能です。IE11でも動きます。labelsを使うとplaceholderと同じビジュアルデザインでもアクセシビリティを高めることができます。万能ではなく、気をつけなければいけない点もあります。problematicという記事に詳しく書かれているので是非読んでみてください。最後にもう一度、ウェブの本質であるアクセシビリティを守っていくのは私たちの役目です。slidesPresent近年、ウェブ制作者の間でも関心が高まるアクセシビリティ。海外ではアクセシブルでないコンテンツに対する苦情や訴訟なども少なくありません。ウェブアクセシビリティを高める方法はWAI-ARIAだけではありません。スタイルのために適切なマークアップを諦めていませんか?このライトニングトークでは、適切なマークアップとCSSでアクセシビリティを高める方法をお伝えします。2019アクセシビリティ。2019擬似要素を使ってクリッカブルエリアを広げるの便利ですよね。組み合わせるとこんな表現もできます。orderは負の値使えるんだった。2019CSSで読み上げ順(?)を制御できるとは。2019あ、面倒なので目をつぶりがちな(笑)コーダーの頑張りどころ。flexboxで見出しと要素の適切な順序立てを実現する。2019これはやる時もあるけど、内心『誰にも評価されないのに面倒なことしてる』と思ってた。teamsCreditsElsewhereBlogTwitterNewsletter。