アクセシビリティを意識した CSS の書き方

Writing CSS with Accessibility in Mind

translated on

私は約一年前から Web アクセシビリティについて注目し始めました。私にとって何かを学ぶこと最も効率的な方法は他人に教えることなので、ミートアップやカンファレンスなどで発言したり、このトピックに関する記事を書いているわけです。Progressive Enhancement については Smashing Magazine で、Web アクセシビリティに関しては Medium で書いています。この記事は3つ目の Web アクセシビリティ関連の記事です。このシリーズを読むのに特に決まった順序はありませんので、興味があれば Writing HTML with accessibility in mind や Writing JavaScript with accessibility in mind を読んでいただければと思います。

私が初めて Web サイトを作った17歳当時、CSS は比較的新しいものでした。あらゆるものが変化し、CSS もまた素晴らしいツール達を我々にもたらしてくれました。Verdana から始まり、Web フォント、固定幅のページからレスポンシブデザイン、テーブルレイアウトから グリッドレイアウトなど。それらを経験した私たちはもはや、ボーダーやフォント、影をつけるために画像を使う必要がなくなりました。私たちは custome propertiesFeature Queriescalc() といった様々な新しい技術を駆使することができます。これはもちろん、これまでの偉大な発展のほんの一部分にしか過ぎません。

アクセシビリティを意識した CSS の書き方
アクセシビリティを意識した CSS の書き方

この幅広い CSS プロパティと問題を解決するための様々な手段により、私たちの開発はより快適になり、より価値のある経験をユーザーにもたらしています。同時に、たった3行の CSS で Web サイトを非常に使いづらいものにすることも可能です。

この記事では、CSS をより使いやすくする技術、アイディア、手法を集め記載しています。まずは CSS の基本的なコンセプトから始まり、よく知られている CSS プロパティ、最新のトレンドを見ていきたいと思います。

どうぞお楽しみください。

「読めるテキスト」から「読みやすいテキスト」へ

画像、アイコン、動画は、今日の Web デザインにおいて必要不可欠となっていますが、テキストは未だ Web コンテンツの多くを占めるものです。デバイスに関係なくテキストを読めるようにするためにも、フォントスタイルを調整するのに時間をかけることは非常に重要なことです。

フォントサイズを上げる

画面とユーザーの距離に比例してフォントサイズを上げる
画面とユーザーの距離に比例してフォントサイズを上げる(ソース:Marvel

かつては 12px がフォントサイズの基準でしたが、画面解像度が上がるにつれて、平均のフォントサイズは 15px から 18px へと変化していきました。近年では 20px 以上となっており、これが現状最適なようです。テキストサイズはスマホでも十分読める大きさである必要があり、また TV のような大きなスクリーンで十分離れた場合にも読めるように調整しなくてはいけません。

フォントの特色が違うにもかかわらず、フォントサイズを最小サイズに設定するのは理にかなってはいませんが、しかし、おそらく 18-20px 程度のフォントサイズが一番小さいスクリーンにおいて最適なサイズでしょう。

フォントサイズについては語りきれませんが、この記事においてはこの程度で十分でしょう。より詳しく知りたい方には Christian Miller 著の Your Body Text Is Too Small を読まれることをお勧めします。

行間の設定

ブラウザのデフォルトの line-heigt はおおよそ 1.2 です。Web Content Accessibility Guildelines によると、パラグラフ内の行間は少なくとも 1.5 は必要とされています。

行間が 1.2 と 1.5 の段落の比較
行間が 1.2 と 1.5 の段落の比較

パラグラフ内の行間の調整は、文章を読みやすくするだけでなく、ビジュアル的にもより魅力的となります。

テキストを左側、あるいは右側に寄せる

text-align: justify による不揃いな字間
text-align: justify による不揃いな字間

もし見た目が良いからという理由で右側、あるいは左側に寄せたテキストを好む場合、それはバッドプラクティスと見なされてしまいます。text-ailgn: justify は行を同じ長さにするために単語の間隔を調整するものですが、このまばらな間隔は、文章を読みづらく、そして台無しにする可能性を秘めています。必要に応じて文章中に改行をいれることが解決策となりえますが、CSS Hyphenation はこれらに対応しておらず、狙い通りの成果は得られないかもしれません。

段落の幅の定義

いくつかのソースによると、理想的な段落の幅は1行あたり65文字と言われているため、デザイナーは 1行あたり45字から85字内に収めるよう務めるべきと言われています。

段落の幅を設定するとき、1ch がゼロ(0)の幅とおおよそ同じになるため、ch での指定が便利です。また、font-familyfont-size も同じように変更します。

p {
  /* Maximum width of 65characters */
  max-width: 65ch;
}

レスポンシブなフォントサイズを指定している場合は、必ず非常に大きな画面でテストするようにしてください。フォントサイズに制限がない場合、特定のビューポートでテキストが読めなくなることがあります。限界値の設定やレスポンシブなフォントサイズ指定に慣れていない場合は、Mike RiethmullersPrecise control over responsive typography を参照してください。

疑似要素の content を慎重に使う

擬似要素である ::before::after を使うことで、要素の前か後にCSSを追加することができます。これは、コンポーネントの前後にデザインされた要素を追加する便利な方法ですが、content プロパティを使ってコンテンツを追加することもできます。しかし、関心の分離という意味では、この方法はおすすめしません。

h2 {
  content: "DON'T DO THIS";
}

コンテンツは、データベースの中に HTML ファイルとして保存されているべき、または API から返されるべきですが、CSS の中に保存されるべきではありません。しかし、フォントアイコンや特殊文字のような非テキストコンテンツを追加する場合は content プロパティを使用することがあります。この場合、スクリーンリーダーによって認識されるかどうか に気を付けなければなりません。そのコンテンツが単に装飾のためだけに使われている場合、aria-hidden を使ってスクリーンリーダ等から隠すようにしてください。

<span class="icon icon-key" aria-hidden="true"></span>

スクリーンだけが表示媒体ではない

私たちはデジタルな時代に生きていますが、人はまだまだ印刷をします。仮に PDF で保存された場合でも読みやすく、使いやすいものであるよう注意する必要があります。CSS に @media ブロックを追加して、崩れている要素のスタイルを調整し、ナビゲーションや広告などの紙には意味のない要素を非表示にするだけでも、読みやすさは大きく変わってきます。

@media print {
  .header {
    position: static;
  }
  nav {
    display: none;
  }
}

Web ページを印刷した際の問題の一つは、リンクがまったく役に立たないということです。幸運なことに、CSS は属性の値をスクリーン(またはこの場合は紙)に表示する方法を提供しています。

@media print {
  a[href^="http"]:not([href*="mywebsite.com"])::after {
    content: " (" attr(href) ")";
  }
}

これにより、http で始まる href 属性がついているすべてのリンクの横に href 属性の値を表示します(ただし mywebsite.com は含まれません)。

Firefox、特に Chrome は、印刷のためのスタイルシートをテスト・デバッグするツールを提供しています。

より深く知りたい人のために、印刷スタイルを扱うためのヒントとテクニックを集めました。

サポートされていないプロパティのフォールバック

時折、プロパティ使用したいが、一部のブラウザではサポートされていないため、使用できない場合があります。その場合、フォールバック指定している限り、そのプロパティを使用できます。多くの場合、Feature Queries を使う必要はありません。

IE と古いバージョンの Edge が認識できない vmax を使いたいとしましょう。

div {
  width: 50vmax; /* IE と古いバージョンの Edge は認識できない */
}

ブラウザが認識できる width: 50vw のようなフォールバックを指定します。実際にどのような幅で設定するかを以下で見てみましょう。

div {
  width: 50vw;
  width: 50vmax;
}

vmax に対応していないブラウザは、width: 50vw を解釈し、50vmax は認識しません。一方、対応しているブラウザでは、最初に width: 50vw、次に width: 50vmax の順で解釈します。vmax の宣言は vw の宣言の後に来るので、ユーザーには vmax で表示されることになります。

コンテンツを非表示にする様々な方法

HTML の見出しタグは、ドキュメントの概要を記述するときに非常に便利です。h1 - h6 の見出しを使用すると、ブラウザや他のソフトウェアに文書の構造や文書の関連部分を伝えることができます。正しい文書のアウトラインは非常に重要です。そうすることで、SEO にとっても良いですし、スクリーンリーダーがサイトをナビゲートするのにも役立ちます。見出しがない場所にデザインを実装しなければならない場合もあります。その場合はデザイン自体が構造を伝えています。このような場合、見出しを単にマークアップから削除するわけではなく、視覚的に隠してください。CSS の有無にかかわらず文書の構造が明確でなければなりません。もちろんこれは一例に過ぎず、フォーム内のラベルを視覚的に隠すのは別のものです(UX の観点からは、ラベルを隠すべきではありません)。CSS ではコンテンツを隠す方法がいくつかありますので、状況に合わせて適切な方法をお選びください。

コンテンツを完全に隠す

hidden 属性を使うか、visibility: hidden もしくは display: none を設定すると、コンテンツを完全に隠すことができます。ユーザーはそれを見ることができず、スクリーンリーダーまたは検索エンジンからも認識されなくなります。

コンテンツを視覚的に隠す

コンテンツを視覚的に隠すことはそれほど簡単ではありません。スクリーンリーダーからはきちんとアクセスできるか確認しなければなりませんし、ブラウザの互換性を考慮して対処しなければならず、要素がフォーカスされたときに何が起きるか、予め決めておかなければなりません。もちろん、先人はすでにそれを行っていて、そのための既知の解決策はいくつかあります。

私はリサーチを行い、様々なアプローチがあることを知りました。そのため、専門家に意見を尋ね、それらを完全に理解するために推奨される方法を明らかにしました。

.visually-hidden {
  /* コンテンツの流れから切り離す */
  position: absolute;
  /* 誤ったコードに対処するための回避策 */
  white-space: nowrap;
  /* 可能な限り文字サイズを小さくするための処理
   * (スクリーンリーダー中には height と width が 0 のものを無視するため)
   */
  width: 1px;
  height: 1px;
  /* オーバーフローしているコンテンツを隠す */
  overflow: hidden;
  /* 要素サイズを変更しうるプロパティのリセット */
  border: 0;
  padding: 0;
  /* 要素のどの部分が表示されるかを定義するもの */
  /* 古いブラウザでは使用できない */
  clip: rect(0 0 0 0);
  /* 最近のブラウザ用
   * コンテンツを非表示にする設定  */
  clip-path: inset(50%); 
  /* 今現在なぜ-1pxがここで設定されるかは分かっていないそうです。
   * それに加えていくつか問題もあるそうです 
   * (参考: https://github.com/h5bp/html5-boilerplate/issues/1985)
   */
  margin: -1px;
}

このコードを保存しておき、視覚的にコンテンツを非表示にしたい場合や、スクリーンリーダーや検索エンジンからアクセスできるようにしたい場合にご使用ください。

スキップリンク

前のセクションの .visually-hidden クラスは、スキップリンクとしての使用にも適しています。スキップリンクとは、最初は隠されていますが、フォーカスが当たると表示されるリンクです。このスキップリンクは、スクリーンリーダーとキーボードを使うユーザがすぐにメインコンテンツに移れるように、ページの一番最初において置くべきです。これは基本的にはユーザーを特定のページに連れて行くアンカーリンクとして使用されます。

フォーカスすると"Skip to content"が表示される
フォーカスすると"Skip to content"が表示される

スキップリンクが表示されるか、 CodepenTab キーを押して確認してみてください。

コンテンツを意味的に隠す

コンテンツを視覚的に見せることが理にかなっていても、スクリーンリーダーからは見えなくしたい場合があります。たとえばアイコンを使用している場合など。その場合、非表示にしたい要素の aria-hidden 属性を true にします。

<button>
  <span class="icon icon-hamburger" aria-hidden="true"></span>
  <span class="text">Menu</span>
</button>

その他

ネガティブ text-indent や、 font-sizeheight をゼロにするなど、コンテンツを隠すための方法は他にもあります。いくつかは機能しますが、注意点もあります。詳細は webaim.orgTechniques for hiding text を読んでください。

低いコントラストを信用しない

デザインを見やすくするには、テキストと背景とのコントラストに気をつける必要があります。視覚障害のある人だけでなく、視力が高くない人も恩恵を得られます。晴れた日にスマートフォンを外で使うことを想像するわかりやすいでしょう。

色のコントラストとは何か、なぜコントラストは重要か

世界保健機関(WHO)によると、人口の約4%が視覚障害を負っています。男性の7〜12%、女性の1%未満が何らか色覚異常を有しており、これらの障害の多くは、コントラストに対する感度、場合によっては色を区別する能力を低下させます。

色相環上の異なった2つの色が対照的な色とされています。大まかに言いうと、2つの色の差が大きいほどコントラストが高いということです。Web デザイナーや開発者の私たちにとっては、コントラストそのものだけでなく、コントラストがテキストに対してどう適用されるかも重要です。テキストとその背景とのコントラストは、低視力の人でも読めるよう、十分に高く設定する必要があります。もちろん、この基準を満たしているかどうか推測する必要はなく、測定するための比率を定義している Web Accessibility Initiative(WAI) を参照にすれば基準がわかります。

最小のコントラスト比

コントラスト比は、テキストと背景のコントラストがどれくらい高いかを示すものです。比率は、1:1 から 21:1 の範囲で示され、色が同じ場合は 1:1、白黒の場合は 21:1 となります。

#DDD の背景の上に #777 のテキストをおいた場合、コントラスト比は 3.3 になる
#DDD の背景の上に #777 のテキストをおいた場合、コントラスト比は 3.3 になる(ソース:contrast ratio

Web Content Accesibility Guidelines(WCAG)2.0 によれば、背景とテキスト(またはテキストの画像)との間に少なくとも 4.5:1 のコントラスト比にしなければならないとされています。これは、太字でない場合は 24px 未満、太字の場合は 19px 未満のテキストに適用されます。文字が大きい場合、レベル AA を満たすための比率 3:1 あれば十分です。レベル AAA を満たすための比率は、太字でない場合 7:1、太字の場合 4.5:1 になります。また、必須ではありませんが、アイコンを使用している場合は、テキストのコントラスト規定に合うようなアイコンを使用するようにしてください。

現在取り組んでいるプロジェクトについても、この点で正しく理解することが重要だということに気づいた私は、友人の Daniel とコントラスト比について話をすることにしました。さまざまな組み合わせを試した後、彼は私に電話し、彼が思ったよりも難しいと言う話をしました。その点で問題となるのは、視覚的に快適な組み合わせが十分にないという点ではなく、デザイナーが過去に低コントラストの組み合わせを使用することに慣れすぎてきたということでした。小規模の企業だけでなく、Apple や Google のような大企業でさえも、このようなデザイナーの問題を抱えているとのことです。

私の場合年齢のこともありましたが、そうしたデザインにおけるコントラストにはかなり苦労しました。

Kevin Marks

コントラスト比の計算式はありますが、計算を代用してくれるツールがあるので、古い電卓を使う必要はありません。

コントラスト比の測定

Chrome Canary では、Dev Tools に直接コントラスト比を表示することができます。Remy Sharp はブログにてこちらの使い方を解説しています。

Chrome Devtools にあるコントラスト比
Chrome Devtools にあるコントラスト比

色のコントラストとアクセシビリティを一般的にテストするツールはたくさんあります。以下に少ないですが、私がよく使うツールを載せておきます。

オンライン上で使用可能なツール
ブラウザの拡張機能と DevTools
  • Chrome DevTools の Audits パネル
    Lighthouse が提供する Audits パネルを搭載した Chrome 60。
    特にサイトのアクセシビリティスコアと問題のリストの提供をしてくれます
  • tota11y
    コントラスト、ドキュメントの概要をテストするための優秀なブラウザ拡張ツール
  • aXe
    サイトのアクセシビリティの欠陥を見つける自動化されたツール
その他
  • Color Contrast Analyser for Sketch
    2つのレイヤーの色のコントラストを計算し、それを WCAG に照らし合わせて評価する Sketch プラグイン

ハイコントラスト体験

コントラストが高い色を使うことは素晴らしいですが、視力の良くない人は Web サイトで使われている色を変えたいかもしれません。多様なユーザのニーズが存在するため、それに応じて色を変更方法も様々あります。あなたのページが誰にでも使いやすいものであるかということを予測するのは簡単なことではありません。そのため、レベル AA または AAA の基準を満たすだけでなく、Web サイトを徹底的にテストし、高コントラストの代替案を常に検討しておく必要があります。

Windows でのハイコントラストモード

Windows では、設定にハイコントラストオプションがあります。ユーザーは独自の色設定を定義したり、定義済みのテーマを選択することができます。

Windows のハイコントラスト設定
Windows のハイコントラスト設定

簡単なログインフォームを作成しその後いくつかのパターンを試してみました (1つ目のスクリーンショットはこれを参考にしました: https://dribbble.com/shots/1687064-Simple-Login-Form) 。

異なるコントラスト設定下でのログインフォーム
異なるコントラスト設定下でのログインフォーム

Anika Henke は、ユーザーがウェブサイト上の色をどのように変更するかについてレポートを書きました。彼女はテスト中に、入力欄が見えなくなりボタンが認識不能になることを発見したと説明しています。上記のスクリーンショットで同じことが起こっているのが確認できます。プレースホルダーのテキストがなければ、ユーザーは2つの入力フィールドがあることに気づかないかもしれません。簡単ですが、ここでは入力フィールドとボタンにデフォルトのボーダーをつけることでこの問題を修正しました(ブラウザ間ではテストされていません)。

改善されたログインフォーム:入力フィールドとボタンにボーダーを付けたもの
改善されたログインフォーム:入力フィールドとボタンにボーダーを付けたもの

Media Query を使用して、ハイコントラストモードが有効になっているかどうかを検出し、特定のスタイルを当てることもできます:

/* ハイコントラストモードが有効 */
  @media (-ms-high-contrast:active) {
}
/* ハイコントラストモードが有効で black-on-white テーマを使用 */
  @media (-ms-high-contrast:black-on-white) {
}
/* ハイコントラストモードが有効で white-on-black テーマを使用 */
  @media (-ms-high-contrast:white-on-black) {
}

Patrick H. Lauke 氏は ハイコントラストモード:-ms-high-constrast の機能が限定的であることにおいて、この Meida Query に関する懸念を表明しています。これに対して、Greg Whitworth氏は以下のように指摘しています:「その機能の目的は、ユーザーに対して高いコントラストとより良い体験を提供することに役立てるようにするためです。そのため、特定の色が何であるかは必ずしも気にする必要はありません。また、あなたのサイトがどう見えているのか、あまり気にする必要はありませんが、コントラストがあなたのサイトにどのように影響するかには気をつけましょう。」

コントラストに関するChromeの拡張機能

また、Google Chrome にはコントラストに関する拡張機能があります。これは、テキストを読みやすくするために、ハイコントラストカラーフィルタを使って Web サイトを閲覧することができます。

コントラストを高くすることの代替案

十分なコントラストを持たないデザインがある場合は、Alternate Version を使って WCAG 基準を満たすことができます。その基準に従い、ユーザーに対して、ハイコントラストバージョンのページへのリンクか、ページを変更できるページ上のコントロールを提供する必要があります。

この代替案にはいくつかの基準があります。

  • リンクまたはコントロールは、ページ上に目立つように配置する必要があります。
  • リンクまたはコントロール自体がコントラスト要件を満たしている必要があります。
  • 新しいページには、元のページと同じ情報と機能がすべて含まれている必要があります。
  • 新しいページは、必要な基準をすべて満たしている必要があります。

NoCoffee でテストする

NoCoffee は、低視力、色覚異常を持つ人たちにどう見えているかをシュミレートしてくれる
NoCoffee は、低視力、色覚異常を持つ人たちにどう見えているかをシュミレートしてくれる

基準を満たすことと、実際に人にどう見えているかはまた別の話です。私たち全員がプロのようにテストできる手段を持っているわけではありません。しかしながら、ありがたいことに NoCoffee は、低視力、色覚異常を持つ人たちにどう見えているかをシュミレートしてくれます。多少の視力障害のある人がどのような問題に直面しているかを理解するのに役立つでしょう。

色に頼りすぎない

すでに述べたように、非常に高い割合の男性が色覚障害を抱えており、障害にもさまざまなタイプがあります。最も一般的なものの一つである2型3色覚は、赤と緑を区別するのに苦労します。こうした人々に対しては、インターフェイスが使用できなくなる可能性があるため、色だけが情報を示す唯一の手がかりにしないでください

前の例のフォームを使用して、入力フィールドにボーダーを追加して、成功とエラーの状態を示しました。次のスクリーンショットは、ユーザーにフィードバックを伝える手段が色だけでは不十分であることを示しています。

色による差別化はハイコントラストモードではうまく機能しない
色による差別化はハイコントラストモードではうまく機能しない

シンプルなアイコンを付け加えると、アクセシビリティと UX が向上します。

もう一つ気をつけるべき例はリンクです。リンクは、通常のテキストと色だけで区別するのではなく、下線を付けるのがベストでしょう。

順序に気をつける

アイテムが配置される順序を変更するには、さまざまな方法があります。たとえば、Flexbox の orderflex-direction、あるいは、Grid Layout などがあります。これらのプロパティは有用ですが、DOM の順序と実際に表示される順序との乖離による問題が起こるかもしれません。

次の例では、グリッドプロパティを使って配置されている画像のギャラリーを示します。

一見すると問題ないようですが、キーボードを使用してイメージからイメージにジャンプすると、その順序が完全に予測できないことがわかります。Tab キーを押すと、次にどの画像がハイライト表示されるかを知る方法がありません。さらに、フォーカスした際のスタイルがない場合、キーボードユーザーにとっては最悪なシナリオになります。

予測不可能な、あるいは誤ったコンテンツの順序は、キーボードユーザーだけに影響があるものではありません。スクリーンリーダーは、CSS によって決められた順序には影響されず、DOM の順序に従って読み上げるので、スクリーンリーダーを使用している人は影響を受けることになります。スクリーンリーダーのユーザーは、コンテンツが画面上でどのように描画されているのか気にしないと考えるかもしれません。しかし、すべてのスクリーンリーダーユーザーが視覚障害者ではありません。低視力または学習障害のある人であれば、画面上に表示されているものを補うためにスクリーンリーダーを使用することもあります。

これらの序列の問題は、flex や grid だけの問題ではありません。特定のスタイルにこだわらず、わかりやすい方法でコンテンツを配置し、それがきちんとデザインとして成立しているかどうかを確認することが重要です。そうでない場合は、デザインを再考する必要があります。何をするにしても、盲目的にマークアップ内の要素を並べ替えないでください。CSS で正しく配置することができないからです。

より詳しい情報は Rob Dodson 氏の Does reordering content affect accessibility? か Adrian Roselli 氏の Source Order Matters をご参照ください。

重要なものに焦点を当てる: focus

ここまで、キーボードナビゲーションの基本と、Writing Javascript with Accessibility in Mind の中で注目すべき項目について書いてきました。この記事を読み進めていく上で、もしあなたがこれらのトピックに詳しくなければぜひ事前に読んでおいてください。

ウェブサイトをキーボードで操作できるようにすることは重要なことです。多くのユーザーは、ネットサーフィンをする際にキーボードに依存しています。その中には、運動障害のある人、盲目の人、手を持たない人、何らかの理由でマウスやトラックパッドを使用できない人もいます。

CSS でもフォーカス可能な要素にスタイルを与える方法があります。

:focus セレクター

:focus を使うとアイテムを選択した際にフォーカス状態にすることができます。

a:focus {
  background-color: #000000;
  color: #FFFFFF; 
}

デフォルトのフォーカスされた際のスタイルは、ブラウザ間で一貫しているわけではなく、見苦しい場合もよくあり、デザインによってはうまく調和しない場合もあります。UX を向上させ、デザインにフィットさせるためにも、自分でスタイルを当てることをおすすめします。

代わりのスタイルを指定せずにデフォルトのアウトライン(点線の輪郭、青またはオレンジのリング)は削除しないよう気をつけてください。キーボードを主要なナビゲーション方法として使用しているユーザーにとっては、どこにフォーカスが当たっているのかわからず、うまくサイトを使用できない場合があるためです。

代わりのスタイルを指定せずデフォルトのアウトラインを消さないでください
代わりのスタイルを指定せずデフォルトのアウトラインを消さないでください(ソース:outlinenone.com

これは単なるヒントではなく、レベル AAの基準でもあります。

キーボードユーザーとマウスユーザーをきちんと区別する

既に言及したように、デザイナーを苛立たせるものの一つとして、ブラウザ間でデフォルトのフォーカススタイルが異なっているということがあります。こうした不満のもう一つの原因は、ユーザーがマウスで要素をフォーカスした際に、フォーカススタイルが表示されることです。マウスのユーザーにとっては気が散り、視覚的に美しくない場合も多々あります。

Chrome ではカーソルを合わせた時に青いアウトラインが表示される
Chrome ではカーソルを合わせた時に青いアウトラインが表示される (ソース:frend.co)

outline プロパティを削除することはありえません。これはキーボードユーザーが要素にアクセスできなくなるためです。我々に必要なものは、キーボードとマウスを区別する方法です。これは CSS Level 4 のセレクター群 に含まれる :focus-ring 擬似クラスで可能になります。

/* デフォルトの outline を消す */
:focus {
  outline: none;
}

/* 表示する必要がある場合のみ outline を追加する */
:focus-ring {
  outline: 2px solid blue;
}

残念ながら現時点では、ブラウザは focus-ring の標準的な実装はまだサポートしていませんが(Firefox は moz-focus-ring をサポートしています)、.focus-ring クラスを追加することで同じことを実現するポリフィルがあります。

/* JavaScriptが機能する時、.focus-ring クラスを持つ
 * フォーカス可能な要素全てを選択し、アウトラインを取り除く
 */
.js-focus-ring :focus:not(.focus-ring) {
  outline-width: 0;
}

より詳しい点に関しては Rob Dodson の Focus Ring! - A11ycasts をご覧ください。

フォーカスされた子要素を持つスタイリング

:focus-within は比較的新しい疑似クラスであり、ほとんどの主要なブラウザで既にサポートされており、現在フォーカスされている子要素を持つ要素を選択できます。

子要素がフォーカスされた時にドロップシャドーをつけたフォーム
子要素がフォーカスされた時にドロップシャドーをつけたフォーム
form:focus-within {
  box-shadow: 0 0 4px 6px rgba(80, 88, 156, 0.2);
}

CodePen で動作を確認できます。

フォーカスの基礎についてのより詳しい情報は What is Focus? という YouTube の動画をご覧ください。

グリッドとフラットな文書構造

新しいサイトを構築するときは、通常、HTML を記述することから始めます。正しいマークアップを選択し、論理的な順序で要素を配置します。ドキュメントが正しく、構造が整っていて、配置を整えたい場合、CSS を追加します。CSS グリッドレイアウトの登場以前は、レイアウトを構成することは非常にトリッキーで、DOM の順序とデザイン的な順序が違う場合には特にそうでした。floatposition、時には Flexbox でさえも柔軟性がない状況があり、DOM の順序を変更したくなってしまいます。グリッドのおかげで、我々は柔軟に全てのアイテムの配置を整えることができます。これは素晴らしいことですが、グリッドはまたドキュメント構造を変更したくなる新しい誘惑を引き起こしています。

あなたがデザインを作りたいとして、それらのアイテムに h2ul を使用する場合をみてみましょう。

見出しとリストを含むレイアウト
見出しとリストを含むレイアウト
<div class="wrapper">
  <h2>Heading</h2>
  <ul>
    <li><a href="#">Element 1</a></li>
    <li><a href="#">Element 2</a></li>
    <li><a href="#">Element 3</a></li>
    <li><a href="#">Element 4</a></li>
    <li><a href="#">Element 5</a></li>
    <li><a href="#">Element 6</a></li>
  </ul>
</div>

これらのリスト要素をグリッドを使って整列し、h2 をポジショニングすることは非常にかんたんです。

.wrapper {
  display: grid;
  grid-template-columns: 120px repeat(2, 1fr);
  grid-gap: 20px;
}

h2 {
  grid-column: 2 / -1;
}
見出しとリストを含むレイアウト。グリッドコンテナ直下の子要素のみグリッド状に配置されている
見出しとリストを含むレイアウト。グリッドコンテナ直下の子要素のみグリッド状に配置されている

これは期待通りの結果とは言えません。問題はグリッドコンテナの直下の子要素のみがグリッド上に配置されていることです。この場合機能するのは <h2><ul> です。<li> はグリッドアイテムとして機能します。最も良くない解決策は、構造を平坦化して <ul> を取り除き、li<div> に変換してグリッドコンテナの直接の子要素にすることです。

最善の解決策は <ul>display プロパティに subgrid を設定することですが、残念ながら subgrid は仕様のレベル1にはなりませんでしたので、新たな解決策が提示されるのを待つ必要があります。

<ul>display:contents を当てることも一つの手段ですが、現在のところ、Firefox しかサポートしていません。display:contents は、要素を無視することで、子要素を親要素の直接の子要素であるかのように表示できる機能です。

究極的には、<ul> のために別のグリッドを定義する方法があります。これは理想的ではありませんが、文章の構造を平坦化して意味を失うよりは良いでしょう。これは非常に基本的な例で、リストがグリッド全体にまたがるので、親グリッドからいくつかの値を継承できます。

ul {
  /*グリッド全体に機能するようにする */
  grid-column: 1 / -1;
  /* 別のグリッドを作成し、親グリッドから値を継承させる */
  display: inherit;
  grid-template-columns: inherit;
  grid-gap: inherit;
  /* display: contents をブラウザに理解させるために上書きする */
  display: contents;
}

CodePen 上でこれら二つの解決策を確認することができます。

結論

この記事でCSSについてはかなりの項目を網羅することができましたが、これが CSS について知るべき全てのことではありません。一方で、こちらの記事はただの入門編とは言えないところもあります。 フォーカスのされる順序を正しくし、コントラストに気をつけながら、アクセシビリティを念頭に置いてデザインすることができたら、あなたは CSS においてはかなりのレベルにあると言えるでしょう。あなたが作っているすべての新しいページやサイトにアクセシビリティに関する少しの配慮で、あなたがインターネットをより良い場所にすることもできるのです。

制約を念頭に置いてデザインすることがデザインの上達の近道です。

Aaron Gustafson

この記事を楽しんで読み、何か新しいことを学べたなら幸いです。ご質問やフィードバックがある場合は、コメントを残すか、Twitter で私に連絡してください。
この記事で私を助けてくれたメンター、Aaron Gustafson 氏に感謝します。

アクセシビリティに関する Tips

この記事は、4つのシリーズのうちの3つ目です。最後の一つはもうすぐリリースされる予定です。

  1. Writing HTML with accessibility in mind
  2. Writing JavaScript with accessibility in mind
  3. Writing CSS with accessibility in mind
  4. Up Next: Learn how to design and develop with accessibility in mind

読んでいただきありがとうございました。もし楽しんでくれたらいいねとシェアよろしくおねがいします。

次のポストを書いてる間、私が書いた他の記事もチェックしてみてください

Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid

The Difference Between Explicit and Implicit Grids | CSS-Tricks

参考

「読めるテキスト」から「読みやすいテキスト」へ

疑似要素の content を慎重に使う

スクリーンだけが表示媒体ではない

サポートされていないプロパティのフォールバック

コンテンツを非表示にする様々な方法

低いコントラストを信用しない

色に頼りすぎない

順序に気をつける

重要なものに焦点を当てる: focus

グリッドとフラットな文書構造