CSS の `reading-flow` プロパティで要素の読み上げ順を制御する
Note reading-flow プロパティは 2024 年 8 月現在 Editor Draft として提案されている機能です。W3C によって標準化されておらず、将来仕様が変更される可能性があります。Chrome Dev または Canary バージョン 128 以降で試すことができます。 Flex や Grid などの CSS レイアウトを使っている場合や、ドラッグアンドドロップで自由に要素を配置できる UI を実装している場合、要素の見た目上の並び順と、DOM 上の並び順が異なることがあります。このような状態はキーボード操作やスクリーンリーダーなどの支援技術を使うユーザーにとって混乱を招く可能性があります。見た目とは異なる順番で要素にフォーカスがされるためです。 例えば、Flex コンテナ内の要素は flex-direction: column-reverse; を指定すると要素
新しい UI テストの手法を提供するテストライブラリ SafeTest
新しい UI テストの手法を提供するテストライブラリ SafeTest 2024.02.25 SafeTest は Playwright と Jest/Vitest を組み合わせた UI テストライブラリです。特定のライブラリに依存せず、React, Vue, Angular, Svelte などのフレームワークに対応しています。SafeTest は単体テストと Playwright を使った E2E テストの手法を組み合わせることで、それぞれの手法が抱える欠点を補うことを目指しています。 SafeTest は Playwright と Jest/Vitest を組み合わせた UI テストライブラリです。特定のライブラリに依存せず、React, Vue, Angular, Svelte などのフレームワークに対応しています。 従来のフロントエンドのテストの手法は Testing Libra
input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案
input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案 2023.12.23 スイッチは多くのウェブサイトで使われているものの、HTML の標準要素としては存在していませんでした。そのため多くの開発者は、スイッチを実装するために独自の実装を行っていましたが、このような独自の実装はアクセシビリティの問題を引き起こす可能性がありました。この問題を解決するために、WHATWG により `input[type="checkbox"]` 要素に `switch` 属性を追加することが提案されました。この属性を指定することで、チェックボックスをスイッチとして利用できます。 input 要素の switch 属性は 2023 年 12 月現在実験的に実装されている機能です。将来的に仕様が変更される可能性があります。 スイッチ とは
![input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案](https://cdn-ak-scissors.b.st-hatena.com/image/square/9f498fff7f14d1f4ab6c565817f30f1ad084c770/height=288;version=1;width=512/https%3A%2F%2Fazukiazusa.dev%2Fblog%2Fogp%2Finput%255Btype%253Dcheckbox%255D%2520%25E8%25A6%2581%25E7%25B4%25A0%25E3%2581%25AB%2520switch%2520%25E5%25B1%259E%25E6%2580%25A7%25E3%2582%2592%25E6%258C%2587%25E5%25AE%259A%25E3%2581%2599%25E3%2582%258B%25E3%2581%2593%25E3%2581%25A8%25E3%2581%25AB%25E3%2582%2588%25E3%2582%258B%2520HTML%2520%25E6%25A8%2599%25E6%25BA%2596%25E3%2581%25AE%25E3%2582%25B9%25E3%2582%25A4%25E3%2583%2583%25E3%2583%2581%2520UI%2520%25E3%2581%25AE%25E6%258F%2590%25E6%25A1%2588%2FHTML.png)
`<details>` 要素の `name` 属性による排他的なアコーディオンの実装
`<details>` 要素の `name` 属性による排他的なアコーディオンの実装 2023.10.08 `<details>` 要素の `name` 属性を利用してグループ化することにより、排他的なアコーディオンを JavaScript なしで実装できます。 <details> 要素の name 属性は 2023 年 10 月 8 日現在 Chrome Canary のみ実装されています。 アコーディオンは Disclosure（コンテンツを折りたたむ、または展開することを可能にするウィジェット）が垂直に並べられた UI の総称です。いくつかのアコーディオンはグループ化された Disclosure の中でただ 1 つしか開くことができないという制約を持っています（排他的なアコーディオン）。つまり、ある Disclosure が開いているときに、他の Disclosure を開いた場合に
forcusgroup で矢印キーによるフォーカスナビゲーションを実装する
forcusgroup で矢印キーによるフォーカスナビゲーションを実装する 2023.10.09 カスタム UI ウィジェットを実装する際には、ウィジェットのロールに応じたキーボード操作によるフォーカスナビゲーションを実装することが求められています。従来このようなキーボード操作は JavaScript を用いて実装する必要がありました。`focusgroup` の提案は、このようなキーボード操作を独立して使用できるプリミティブとして提案されています。この機能を利用することで、開発者は JavaScript を用いることなく一貫したフォーカスナビゲーションを実装できます。 この記事で紹介している機能は Chrome Canary の Experimental Web Platform features フラグを有効にした場合のみ利用可能です。将来にわたって API が変更される可能性がありま
ポップオーバー API で JavaScript を使わずにポップアップを表示する
ポップオーバー API で JavaScript を使わずにポップアップを表示する 2023.06.11 Chrome 114 から追加されたポップオーバー API を使うと、JavaScript を使わずに簡単にポップアップを表示することができます。 Chrome 114 から追加された ポップオーバー API を使うと、JavaScript を使わずに簡単にポップアップを表示できます。ただポップアップとして表示・非表示を切り替えられるだけでなく、以下のような複雑な要素もデフォルトでサポートしています。 ポップアップの外側をクリックするとポップアップが閉じる Escape キーを押すとポップアップが閉じる 最も大きな z-index の上に表示される（top layer） ポップアップが非表示になったとき、ポップアップ内にフォーカスがある場合前にフォーカスしていた要素にフォーカスが戻る
アニメーションの無効設定は prefers-reduced-motion に任せるか、アプリケーションの設定で制御するか
アニメーションの無効設定は prefers-reduced-motion に任せるか、アプリケーションの設定で制御するか 2023.08.06 prefers-reduced-motion とは、ユーザーの環境設定によって余計な動きを抑制することを要求したことを検出するメディアクエリです。この設定は各 OS ごとに設定できます。ユーザーがアニメーションを無効にできることは、アクセシビリティの観点で重要です。prefers-reduced-motion によりアニメーションを無効にするのでも十分ですが、アプリケーションの設定として持たせるべきだと考えています。 prefers-reduced-motion とは prefers-reduced-motion とは、ユーザーの環境設定によって余計な動きを抑制することを要求したことを検出するメディアクエリです。この設定は各 OS ごとに以下のよう
Web アプリケーションエンジニアのためのウェブアクセシビリティの基礎
Web アプリケーションエンジニアのためのウェブアクセシビリティの基礎 2023.02.18 ウェブアプリケーションエンジニアを対象に、アクセシビリティの対応について解説した記事。アクセシビリティを向上させるためには、正しいHTMLの書き方が必要である。HTML要素には、アクセシビリティに関する機能が元々備わっているため、適切なHTMLを選択し使用することが大切だ。複雑なUIの場合はWAI-ARIAを使用し、ARIA Authoring Practices Guideに基づき適切に実装する必要がある。UIライブラリ選びの際には、WAI-ARIAに従った実装を行っているかが基準の1つとなる。 この記事は、ウェブアプリケーションエンジニアとして仕事をされているほうを対象に書かれています。日々のウェブフロントエンドの開発の中で意識しておきたい基礎的な内容をメインに記載しています。 そのため、ここ
単体テストの単位はコードではなく振る舞いである
単体テストの単位はコードではなく振る舞いである 2023.01.07 単体テストの目的は、ソフトウェア開発プロジェクトを持続可能なものにすることです。この目的を達成するための単体テストの機能の 1 つにリファクタリングに対する耐性が上げられます。これは内部のコードを変更した前後でも、外部の振る舞いから見た振る舞いが壊れていないことを保証してくれる度合いです。この耐性が高ければ、開発者は安全にコードを変更できます。 この記事では、単体テストをコード単位で書いた場合と振る舞い単位で書いた場合をそれぞれ提示して、リファクタリングに対する耐性がどのように異なるのかを見ていきます。 単体テストの目的は、ソフトウェア開発プロジェクトを持続可能なものにすることです。この目的を達成するための単体テストの機能の 1 つにリファクタリングに対する耐性が上げられます。これは内部のコードを変更した前後でも、外部の
今すぐできる Web アクセシビリティ改善
適切なロールを持った要素を適切な箇所で使うことが大切です。 button ロールを持つ要素は大抵のスクリーンリーダーで「${ボタン内のテキスト} ボタン」のように読み上げられます。その後現在ボタン上にいて、ボタンをクリックできるということが読み上げられます。 以上のことより、onClick がついていてクリック可能な要素には大抵 <button> を使っておけばいいことがわかります。 <button> に変更するときの注意 <div> や <span> タグをそのまま <button> に変更すると、思わぬ変化が起きてしまう可能性があるので注意が必要です。まず <button> に変更するとブラウザのデフォルトのスタイルが適用されるので、見た目が大きく崩れてしまいます。以下のようにデフォルトのスタイルを打ち消す CSS を適用させて置くといいでしょう。 .style-reset-butto
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS でランダムな値を扱う `random()` と `random-item()` 関数
単体テストでスクリーンリーダーをシミュレートする Virtual Screen Reader
HTML の仕様に search 要素が追加された