Softonic

アクセシブルなCSSスピナー ジェネレーター

ステップ 1 / 2
次へ

スクリーンリーダーを使う人にとって、回転する輪は何の意味も持ちません。また、絶え間ない動きは動きに敏感な人を不快にさせることがあります。ここでスピナーを生成し、以下のマークアップと動きを抑えるルールを追加してください。

スピナーをアクセシブルにする方法

  1. 1

    輪を生成する

    ツールでサイズ、太さ、色、速度を設定し、CSSをコピーします。

  2. 2

    色のコントラストを確認する

    明るいグレーのトラックとページの背景の両方から、はっきり目立つ弧の色を選びます。

  3. 3

    ステータスのマークアップを追加する

    このページの例のように、スピナー要素にroleとラベルを設定します。

  4. 4

    動きを抑えるルールを追加する

    生成されたCSSの下に、以下のメディアクエリを貼り付けます。

生成されるCSSが対応する範囲と対応しない範囲

ツールが提供するのは見た目の部分、つまり枠線付きの円と回転です。見た目だけのローダーは要素が空なので、支援技術にとっては意味がありません。アクセシビリティは、マークアップと、その周囲に追加する1つのCSSルールによって実現します。

状態を伝えるマークアップ

<div class="loader" role="status" aria-label="結果を読み込んでいます"></div>

role="status" は、この要素をライブリージョンとして示します。そのため多くのスクリーンリーダーは、要素が表示されたときにラベルを読み上げます。aria-label には、「読み込み中」のような曖昧な言葉ではなく、何が読み込まれているかを書きます。例えば「結果を読み込んでいます」や「保存中」です。作業が終わったら要素を削除し、新しいコンテンツを表示します。

リングの横に表示テキストを置くこともできます。表示テキストは、動きが見えにくい人を含め、すべての人の助けになります。

動きの軽減を尊重する

訪問者の中には、アニメーションを控えめにするよう求めるシステム設定をオンにしている人がいます。生成されたCSSの後にメディアクエリを置いて、その設定を尊重します。

@media (prefers-reduced-motion: reduce) {
  .loader {
    animation-duration: 3s;
  }
}

このルールは回転を止めるのではなく、遅くします。そのためローダーは生きているように見えつつ、速い動きは避けられます。静的な表示を望む場合は、animation: none; を使い、リングの横に「読み込み中」というテキストを表示してください。

コントラストとサイズのチェックリスト

確認項目 目安
ページに対する弧の視認性 はっきり見えること。理想は3:1以上のコントラスト比
グレーのトラックに対する弧 弧の動きを追えるように区別できること
サイズ 訪問者が気づく必要があるものは24px以上
速度 1回転あたり0.8〜1.5秒

注意点

  • ジェネレーターはトラックの色（#eee）を自動で選びます。ページの背景と似ている場合は、貼り付けたCSSで変更してください。
  • 速度の値が非常に速いと、輪がちらつきます。約0.5秒より短い値は避けてください。
  • 長い待ち時間をスピナーだけに頼らないでください。何が起きているのかを文章で伝えましょう。

すばやく確認する

OSの動きの軽減設定をオンにしてページを再読み込みします。輪の回転が遅くなっていれば成功です。次にキーボードでページ内を移動し、スピナーが訪問者の操作中のコントロールからフォーカスを奪っていないことを確認します。最後にスクリーンリーダーを有効にして一度読み込み状態を発生させ、要素が表示されたときにラベルが読み上げられるか、その後で新しいコンテンツに到達できるかを確かめてください。

よくある質問

マークアップを追加した場合にのみ使えます。空の要素は読み上げられないので、role=“status” と分かりやすい aria-label を設定してください。

訪問者がデバイスで動きを抑えるように設定しているときに一致する、CSSのメディアクエリです。これを使ってスピナーを遅くしたり止めたりできます。

どちらでも構いません。遅くすると動きの気配が残ります。「読み込み中」などのテキストを表示する場合は、止めるのが最も安全です。

操作内容を平易な言葉で説明してください。例えば「結果を読み込んでいます」や「変更を保存しています」です。「スピナー」のような曖昧なラベルは避けてください。

サイズを大きくし、コントラストを強くすると見やすくなりますが、支援技術が読み上げるテキストラベルの代わりにはなりません。

関連ツール

Webpack設定ジェネレーター

素の JavaScript、React、Vue 向けに webpack 5 の webpack.config.js を生成します。TypeScript、Babel、CSS や Sass、画像、HtmlWebpackPlugin、開発サーバー、npm install のコマンドまでそろいます。

カラーティントジェネレーター

ベースカラーの明るい色合いを生成します。デザイン システム トークン、背景、ホバー状態を 3 ～ 20 段階でスケールします。

CMYK から RGB への変換

標準的な計算式で CMYK の割合をおおよその RGB 値と Hex 値に変換し、画面用にすばやく確認できます。

.gitignore ジェネレーター

Laravel、Node.js、Python、Rails のプロジェクト用除外ルールを組み合わせます。結果をコピーするか、.gitignore 入りの ZIP をダウンロードできます。個人用ルールは別に表示します。

16進数から10進数への変換ツール

16進数を10進数（10進法）に変換します。メモリアドレス、エラーコード、RGBチャンネル、任意精度の整数に対応します。

JSONからPythonデータクラスへの変換

JSONから、型ヒント、オプションフィールド、ネストされたクラス、およびdataclasses-jsonまたはPydanticサポートを備えたPythonデータクラスを生成します。

このツールは他の言語でも利用できます

使い方ガイドと活用例