アクセシビリティを損なう可能性のある CSS プラクティス

CSS は強力な言語になりました。 テキストやその他のデザイン要素に基本的なスタイルを追加する手段として始まったものが、今ではさらに多くの機能を備えています。

これを使用して、想像できるほぼすべてのレイアウトを作成できます。 JavaScript やブラウザ プラグインが必要だった特殊効果や双方向性がネイティブにサポートされるようになりました。 この言語は、基本的なツールから、すべての Web サイトの背後にある基本的なテクノロジの 1 つになりました。

しかし、他の強力なツールと同様に、CSS にも意図しない副作用が生じる可能性があります。 アクセシビリティは、最大の懸念事項の 1 つです。 いくつかの実装は、確かに良いことよりも悪いことをする可能性があります。

そのことを念頭に置いて、アクセシビリティを損なう可能性のある CSS プラクティスをいくつか見てみましょう。 これらには、コードの記述を開始する前に慎重に検討する必要がある一般的な機能が含まれています。 始めましょう！

contentプロパティを使用して重要なテキストを表示する

CSS contentプロパティは、要素に視覚的な拡張機能を追加する巧妙な方法を提供します。 たとえば、疑似要素と組み合わせて使用​​して、テキストまたはリスト項目の前にアイコンを追加できます。 また、画像や文字列を表示することもできます。

しかし、その最後のものは特に厄介な場合があります. contentプロパティを介して追加されたテキストは、ドキュメント オブジェクト モデル (DOM) には含まれません。 つまり、スクリーン リーダーなどの支援技術では認識されない可能性があります。

これは純粋に装飾的なアイテムには問題ありません。 ただし、テキストがページに重要なコンテキストを提供する場合、アクセシビリティの問題が発生する可能性があります。 ユーザーは重要な情報を見逃す可能性があります。

したがって、テキストの表示にcontentプロパティを使用しないことをお勧めします。 ただし、ユーザーがページを理解する能力を妨げないという確信がある場合を除きます。

激しく点滅するアニメーション シーケンスの作成

アニメーションは、CSS が大きな進化を遂げた領域です。 かつてはサードパーティ ライブラリの領域だったエフェクトを、比較的簡単に作成できるようになりました。 また、これらはネイティブにサポートされているため、ハードウェア アクセラレーションなどの機能を利用してパフォーマンスを向上させることができます。

基本的なトランジションとトランスフォームは、ムードを作り出し、ユーザーの注意を引くために驚異的な効果を発揮します。 また、JavaScript を使用して信じられないほどリアルな効果を構築することもできます。

ただし、特定のアニメーション スタイルは悪影響を与える可能性があります。 一部のユーザーにとっては、あまりにも多くの動きが方向感覚を失わせたり、さらに悪化させたりする可能性があります. 激しいフラッシュまたはストロボ効果は、発作を引き起こす可能性があります。 これは、映画、テレビ番組、ビデオ ゲームと同じように、Web でも可能です。

WCAG 2.0 は、発作やその他の有害反応を引き起こさないアニメーションを作成するための、研究に裏付けられたガイダンスを提供しています。 たとえば、プレゼンテーションのフラッシュを 1 秒あたり 3 回以下に設定し、サイズを小さく保ち、赤色を避けることをお勧めします。

ありがたいことに、これはユーザーに動きで印象づける私たちの能力を制限しません. 仕事の幅を広げるチャンスはまだまだたくさんあります。 しかし、使用されるアニメーションの種類とその潜在的な影響を精査する必要があります。

直感的でないインタラクティブ要素の:hover hover または:focus状態

CSS は、インタラクティブな要素のスタイル設定に長けています。 ハイパーリンクやフォーム フィールドなどの日常的なアイテムで何ができるかを考えてみましょう。 デフォルトの外観と比較すると、認識できない点までカスタマイズできます。

それはすべて順調です。 しかし、ユーザーが要素を操作したときに何が起こるかを考えることも重要です。 何が起こったのかを確認するための視覚的な合図を提供しないボタンをクリックすることを想像してみてください。 または、キーボードを使用して、現在のリンクが強調表示されていないメニューをタブで移動します。

シンプルかもしれませんが、これらのマイクロインタラクションはユーザーにコンテキストを提供するのに役立ちます。 ボタンのクリックを確認したり、カーソルがフォーカスしているメニュー項目を理解したりすることは、ほんの 2 つの例です。 そしてそれぞれが、訪問者が Web サイトを閲覧するときに自信をもたらします。

インタラクティブな要素の最初のスタイリングは、戦いの半分にすぎません。 :hoverおよび:focus疑似クラスの直感的なスタイルを提供することで、ユーザー エクスペリエンスが完成します。

これらのスタイルは簡単に認識できる必要があることに注意してください。 実際には、指標として色以上のものを使用することを意味します。 アニメーション、アウトライン、またはアイコンを追加すると、誰も取り残されないようにすることができます。

アクセシブルデザインの基本を当然のことと考える

私たちは皆そこにいました。 プロジェクトの締め切りが迫っており、あなたは物事を成し遂げる必要があります。 立ち上げ競争の中で、一部のアクセシビリティ関連のアイテムが見過ごされる可能性があります。

多くの場合、取り残されるのはアクセシブルなデザインの基本です。 デザイナーが当たり前のように考え、想定している CSS プラクティスは、すでに標準になっています。

主な例には、読みやすいタイポグラフィや許容される色のコントラスト比などの基本が含まれます。 これらの項目を考慮してテストしないと、Web サイトは思ったほどアクセスしにくいものになる可能性があります。

そのため、時間をかけてサイトのスタイルのより広い側面を確認する価値があります。 アイテムが「目玉」検査に合格したとしても、さらに一歩進んで監査を実行してください。 微妙な改善の機会がたくさんあることに驚くかもしれません。

責任を持って CSS を使用することについてです

CSS は非常に強力であるため、CSS が提供する可能性に誘惑されがちです。 映画のようなものを作成できるのに、基本的なアニメーションで妥協する必要はありません。 そして、それを使用してコンテンツを生成する便利さを気に入らないわけがありません。

それはすべて、共感と責任に帰着します。 他のツールと同様に、CSS には優れた機能があります。 しかし、特定の機能を実装できるからといって、それがアクセシビリティに適しているとは限りません。 私たちは、あらゆる階層の人々が私たちが構築したものを消費する世界に住んでいます。 そして、彼らが障害なくそうできるようにするのが私たちの仕事です。

明るい面は、上記の慣行を回避することは誰にとっても手の届くところにあるということです. ほとんどの場合、それは私たちが行うことの潜在的な影響について考える問題です. そこから、テストにより、さらに改良するために必要なデータが提供されます。

CSS はアクセシビリティを容易にするためにあります。 それはすべて、私たちがそれをどのように使用するかによって決まります。