アクセシビリティの記事一覧

international day of yog

GIF アニメーションの使用を控える

技術記事を書く際に、GIF アニメーションを使用することがあるかと思います。しかし、GIF アニメーションを使用することはアクセシビリティ上問題となります。この記事では、GIF アニメーションを使用することを避けるべき理由を説明します。

—Pngtree—find vector icon_3725277.png

HTML の仕様に search 要素が追加された

HTML Standardに新しい`<search>`要素が追加された。これまで、ARIAには`<search>`に相当するHTML要素がなかったため、`<div role="search">`しか代替要素がなかった。新たに`<search>`要素を使用することにより、WAI-ARIA を使用せずともsearchランドマークを定義できるようになった。通常、`<search>`要素は少なくとも1つの入力要素を含んでおり、検索を開始するためのボタンもあることが期待されている。

small fresh blue splash

Web アプリケーションエンジニアのためのウェブアクセシビリティの基礎

ウェブアプリケーションエンジニアを対象に、アクセシビリティの対応について解説した記事。アクセシビリティを向上させるためには、正しいHTMLの書き方が必要である。HTML要素には、アクセシビリティに関する機能が元々備わっているため、適切なHTMLを選択し使用することが大切だ。複雑なUIの場合はWAI-ARIAを使用し、ARIA Authoring Practices Guideに基づき適切に実装する必要がある。UIライブラリ選びの際には、WAI-ARIAに従った実装を行っているかが基準の1つとなる。

surface-h108eyMxbxw-unsplash

【React】アクセシビリティに考慮したタブを実装する

タブとは、ページ内でコンテンツを切り替えるために使用する UI です。タブ初期表示ではいずれか一つのタブパネルが表示されており、関連するタブがアクティブなスタイルで表示されます。それぞれのタブには関連するタブパネルがあり、タブを選択することで表示されるタブパネルがタブに関連するものに切り替わります。

アコーディオン

【React】アクセシビリティに考慮したアコーディオンを実装する

アコーディオンは見出しであるヘッダーとコンテンツであるパネルから構成された UI が垂直に積み重ねられたセットです。ユーザーはヘッダーをクリックすることで、ヘッダーに関連付けられたパネルの表示・非表示を切り替えることができます。 アコーディオンは1つのページ内で複数のセクションのコンテンツを表示する際に、スクロールを減らすためによく 使用されます。例えば、「よくある質問」のようなページで使われていることを見たことがあるかと思います

modal2

フォーカストラップとは? 〜アクセシブルなモーダル〜

フォーカストラップ(またはループ)とは、ウェbページをキーボードで操作する際にフォーカスをとある領域からはみ出さないようにことです。フォーカス可能な要素を抽出してその中をループすることで実現ができます。 登場シーンとしてはモーダルで使われることが多いです。実際に例を交えて確認してみましょう。

雪だるま

Web フロントエンドの実装において本来の機能を損なってはいけない

データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケースも発生してしまいました。見た目上操作に不都合がないのですが、修飾キーが有効でなかったりと、とある要素が当然に持っているべき機能が失われていることがよくあります。

gold

アクセシビリティに考慮したツールチップを実装する

ツールチップとは、ある要素に対する補足情報を与える UI です。通常ある要素に対してマウスホバーまたはキーボードでフォーカスした時少しのディレイの後に、ユーザーの操作によらず自動的にポップアップして表示されます。このポップアップはユーザーの操作をブロッキングするものではありません。ユーザーがマウスのホバー外すかフォーカスが外れた場合にツールチップは非表示となります。

accesibility

今すぐできる Web アクセシビリティ改善

アクセシビリティの対応は、要件定義段階から設計したりなど大変そうなイメージはあります。実際に本格的に対応するにはどの達成基準を目標にするか決めたり、入念なテストが必要になるなど確かに一朝一夕で対応できるわけではないでしょう。 ですが、完璧な対応を目指すのではなく、少しづづ改善できるところから進めることこともできます。実際にやってみると、簡単な HTML や CSS のコードの修正でもよい改善を得られたりします。 この記事では比較的低コストで実践入門できるアクセシビリティの改善を紹介します。