画面拡大鏡を実装する

  • 10 分

デジタル製品の作成時にスクリーン リーダーのサポートを検討している場合は、スクリーン 拡大鏡をサポートするための作業の多くが既に完了しています。 また、画面拡大鏡は、同じアクセシビリティ API を使用してアプリを操作します。つまり、アプリと Web アプリは、実装したアクセシビリティ機能を利用できます。

アプリケーションがアクセシビリティ API を介してブラウザー、オペレーティング システム、スクリーン リーダーや拡大鏡などの支援技術と通信する方法を示す DOM ツリーの視覚化のスクリーンショット。

サイズ変更のサポート

要素にフォーカスを設定し、要素の境界を指定する

ユーザーがインターフェイスをスムーズに移動できるように、特にスクリーン リーダーやスクリーン 拡大鏡などの支援技術を使用するユーザーに対して、正しい要素にフォーカスが設定されていることを確認します。 "フォーカス" とは、ユーザーが操作できる画面上のアクティブな要素を指し、ユーザーがアプリや Web ページのどこにいるかを簡単に識別できるように、明確に定義する必要があります。 クライアント アプリケーションでは、バランスを決定し、それをアクセシビリティ ツリーに含める必要があります。 このコンテキストでのバランスとは、スムーズなナビゲーションを実現するために要素を配置または強調表示する方法を指し、ユーザーがコンテンツを効果的に操作できるようにします。 その後、この情報がアクセシビリティ ツリーに追加されます。 Web アプリケーションでは、スクリーン リーダーと拡大鏡がユーザーの操作を追跡するのに役立つアクセシビリティ ツリーを使用して、ブラウザーによって要素のフォーカスとバランスが自動的に計算および管理されます。 開発者は、アクセシビリティ ツリーが正しく構築され、さまざまなデバイスや画面サイズで最適なユーザー エクスペリエンスを実現するために、フォーカスが適切に管理されていることを確認する必要があります。

テキスト パターンを実装する

画面拡大鏡に依存するユーザーのアクセシビリティを向上させるには、テキスト パターン機能を正しく実装することが重要です。 この機能により、スクリーン拡大鏡は、アプリケーション内で選択したテキストを正確に追跡して読み取ります。 スクリーン リーダーが利用するのと同じアクセシビリティ API とテキスト カーソル インジケーターを統合することで、テキスト拡大と音声フィードバックの両方を必要とするユーザー向けにスムーズなエクスペリエンスを作成できます。 テキスト パターンを統合するときは、すべてのテキスト範囲に適切な境界を指定することが重要です。 各テキストの始点と終点を明確に定義し、画面拡大鏡で強調表示または読み取られたテキストを正確に識別できるようにする必要があります。 この明確さは、テキスト内のナビゲーションを強化し、テキストの選択、コピー、テキスト間の移動などのユーザー操作を容易にするために重要です。 さらに、テキストの属性に関する詳細情報 (スタイル、サイズ、書式設定など) を提供して、ユーザーが操作しているテキストに関する聴覚的なフィードバックを受け取ることができるようにすることが重要です。 この情報は、コンテキストを理解し、混乱することなくコンテンツ内を移動するのに役立ちます。

DPI スケール

ドット/インチ (DPI) は、ディスプレイの 1 インチに収まるドットまたはピクセルの数を測定します。 DPI が高いほど、より詳細で鮮明な画像が示されます。 DPI スケーリングは、ディスプレイの DPI 設定に基づいてユーザー インターフェイス要素のサイズを調整します。これは、最新のスマートフォン、タブレット、高解像度モニターで見つかった高 DPI 画面で特に重要です。 DPI スケーリングの変更は、通常、応答性の高い設計戦略に統合されます。 ユーザーが表示設定を拡大または変更すると、DPI スケーリングにより、テキスト、ボタン、画像などのすべての UI 要素のサイズが正しく変更されます。 この機能は、水平スクロールを防ぐのに役立ち、コンテンツがさまざまな画面サイズと解像度に適応するにつれて、柔軟なレイアウトを維持します。 DPI スケーリングを実装する場合は、ユニバーサル Windows プラットフォーム (UWP) や Office Win32 アプリケーションなどのプラットフォームを検討することが不可欠です。

テキストのスケーリング

Web アプリでテキストのスケーリングをサポートするには、CSS ユニットを慎重に選択することが重要です。一部のユニットはスケーリングされますが、他のユニットはスケーリングされないためです。 既定のフォント サイズは 16 ピクセルに設定され、この基本サイズにはテキストスケールファクターが適用されます。 em、例、ch、パーセンテージなどの相対単位は親要素のフォント サイズに基づいているため、それに応じて拡大縮小されます。 つまり、これらの単位を使用するすべての子要素のサイズも変更されます。 これに対し、絶対単位またはビューポートに対する相対単位はスケーリングされません。つまり、これらの単位を使用する子要素は、 em、 ex、 ch、 または percentage を使用している場合でも変更されません。 ただし、 rem を使用する子 要素は、 親要素ではなくルート要素のフォント サイズに基づいているため、適切にスケーリングされます。 フォント サイズに合わせてスケーリングする必要があるオブジェクトとコンテナーの場合は、 rem、 em、 ex、または ch を幅と高さに使用することをお勧めします。 パーセントベースの幅と高さは親要素の寸法に対して相対的であるため、親要素の寸法が変更された場合にのみ拡大縮小されます。

リソース

リフローのサポート

さまざまな画面サイズと縦横比を設計するには、デザイナーや製品マネージャーと密接に連携してください。 応答性の高い Web デザイン手法を使用して、デバイス間でのコンテンツのリフローを容易にします。 たとえば、応答性の高い Web サイトは、デスクトップ上の 4 列のレイアウトから、小さなタブレット上の 3 つの列に移行する場合があります。 しかし、多くの最新のウェブサイトは、スマートフォン用に別々のバージョンを維持しています。 リフローを完全にサポートするには、プライマリ Web サイトで、スマートフォンと同じサイズのビューポートに適応できる必要があります。 モバイル アプリは、タブレットとスマートフォンの両方で同じコードを実行することがあります。 そのため、これらのアプリは、タブレットで開いたときに、より大きなビューポートに調整する必要もあります。

Web アプリをリフローするには、プレゼンテーション エンジンの豊富なレイアウト機能を使用します。 可能な場合は宣言型プロパティを使用し、必要な場合にのみ動作をカスタマイズするコードを記述します。 さらに、ホバーまたはフォーカスにコンテンツを実装する際のベスト プラクティスに従い、解除可能、ホバー可能、永続的であることを確認します。

Web アプリの場合は、最初に頭に <meta name="viewport" content="width=device-width, initial-scale=1"> を追加して、ページが適切なスケールでレンダリングされるようにします。 WCAG リフロードキュメントではビューポートの幅が設定されていないため、iPhone では既定で小さなスケールでレンダリングされます。

<meta name="viewport" 
      content="width=device-width, initial-scale=1">

Web アプリに独自のピンチ ズーム機能がある場合は、ブラウザーのピンチ ズームを無効にする user-scalable=no を指定します。 それ以外の場合は、有効のままにします。

<meta name="viewport" 
      content="width=device-width, initial-scale=1, user-scalable=no">

Web UX (ユーザー エクスペリエンス) をより狭いビューポートに適応させるために、画像の固定幅を設定しないようにします。 代わりに、 max-width: 100% を使用して、幅の広いコンテナーで拡大せずに、狭いコンテナー内で画像を縮小できるようにします。 高さを自動に設定するか、または省略して比例を維持します。 これにより、イメージがビューポート内に留まり、比例した状態が維持されます。

画像の幅を固定しました 画像の幅は 100% です
.image {
width: 556px;
height: 278px;
}		 .image {
max-width: 100%;
}

ボタンがテキストのスケーリングに適切に応答するようにするには、次の手順に従います。

  1. フォント サイズの設定: 切り捨ての問題を確認するには、フォント サイズを非常に大きな値に増やします。

  2. オーバーフローの非表示を解除: overflow: hidden プロパティを削除して切り捨てを防ぎます。 ただし、これにより、テキストがボタンの境界を超えて拡張される可能性があります。 この問題は、ボタンの幅と高さがピクセル単位で設定されており、テキストの拡大縮小では調整されないために発生します。

  3. REM 単位に切り替える: テキストの拡大縮小をサポートするために、ピクセルベース (px) の幅と高さを rem 単位に置き換えます。 これにより、ボタンのサイズをテキストと共に変更できます。

  4. 配置の調整: 重なりを避けるために、位置の値をピクセル (px) から rem 単位に変更します。

  5. ローカライズを処理する: ロシア語などのローカライズされたバージョンを調べると、テキストが折り返されていたり、ボタンからはみ出したりしているのが、見つかることがあります。 これは、1 行のテキストのみを想定して、ボタンの高さが固定されているためです。 テキストに合わせてボタンを拡大できるように、高さを自動または完全に削除するように設定します。

  6. 応答性を評価する: より狭いビューポートでデザインをテストする場合、ボタンはビューポートの幅を超える可能性があります。 これは、ボタンを並べて配置するのに十分な水平スペースがあることを前提とする position: absoluteの使用が原因です。 狭い表示領域でボタンが自然に重ねて回り込むようにするには、それを削除します。

    以前は クリック後
    button {
    width: 120px;
    height: 30px;
    overflow: hidden;
    }

    .button1 {
    position: absolute;
    margin-left: 0px;
    margin-top: 0px;
    }

    .button2 {
    position: absolute;
    margin-left: 130px;
    margin-top: 0px;
    }    		 button {
    width: 7.5rem;
    height: 1.875rem;
    }

    .button1 {
    margin-left: 0rem;
    margin-top: 0rem;
    }

    .button2 {
    margin-left: 8.125rem;
    margin-top: 0rem;
    }

  7. 余白の追加: 最後に、ボタン間に余白を追加して、積み重ね時に十分な間隔が確保されるようにします。 これは、ボタンが狭いビューポートで正しく折り返されるようにするのに役立ちます。

    .button {
    width: 44%;
    margin: 2%;
}

@media all and 
(max-width: 18rem) {
    .button {
        width: 95%;
    }
}

ウィンドウの幅を埋め、1 行から 2 行に切り替えるボタンをレイアウトするには、さまざまな CSS 手法を使用できます。 まず、コンテナーで display: flex を使用します。コンテナーには、項目の線形リストのサイズ変更、間隔、配置、折り返しのさまざまなオプションが用意されています。 Add display: flex をコンテナーに追加し、コンテナーと項目の両方に追加のプロパティを設定します。

.buttoncontainer {
    display: flex;
    flex-direction: row;
    align-content: stretch;
}

.button {
    width: 100%;
    margin: 2%;
}

@media all and (max-width: 18rem) {
    .buttoncontainer {
        flex-wrap: wrap;
    }
}

または、実際のテーブルを使用せずに、テーブルに似たレイアウト機能に display: grid を使用することもできます。 コンテナーの行と列のサイズと間隔を指定し、各項目の行と列の場所を定義します。 メディア クエリを使用して、必要に応じてグリッドを再構成します。 これらの手法の利点は、CSS のみを使用し、JavaScript を使用しない宣言型である点です。

以前は クリック後
.buttoncontainer {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
column-gap: 10px;
}

.button {
grid-row-start: 1;
grid-row-end: 2;
justify-self: stretch;
}

.button1 {
grid-column-start: 1;
grid-column-end: 2;
}

.button2 {
grid-column-start: 2;
grid-column-end: 3;
}		 @media all and (max-width: 18rem) {
.buttoncontainer {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
row-gap: 10px;
}

.button {
grid-column-start: 1;
grid-column-end: 2;
}

.button1 {
grid-row-start: 1;
grid-row-end: 2;
}

.button2 {
grid-row-start: 2;
grid-row-end: 3;
}
}

リフローに関する注意事項

リフローにおける注意事項を以下に示します。

  • max-width を使用して、コンテナーの幅に合わせて要素を縮小します。
  • 自動を使用して、コンテナーをコンテンツに合わせて拡大し、画像を比例的にスケーリングし、同じ余白を持つ要素を中央に配置します。
  • テキストの拡大縮小をサポートするには、フォント サイズやその他の要素に rem、 ex、 ch、 またはパーセンテージ を使用してください。
  • メディア クエリを使用して、異なる幅に異なるレイアウトを指定し、ブレークポイントごとに 1 つ追加します。
  • display: inline または display: inline-block with position: static を使用して、要素をテキストのようにスタックして折り返せるようにします
  • 表示を使用する: 項目の線形リストの高度なレイアウト オプションに flex を使用しますが、Internet Explorer をサポートする必要がある場合は互換性を確認してください。
  • テーブルを使用せずに、テーブルに似たレイアウトに対して display: Grid を使用します。
  • 可能な限りベクター グラフィックスを使用して、高速なダウンロードとより高いスケールでの鮮明な画像を確保してください。 インライン SVG は優れたオプションです。
  • img srcset を使用して同じイメージの異なる解像度バージョンを指定し、ブラウザーがスケール設定、帯域幅、およびキャッシュの状態に基づいて適切なものを選択できるようにします。
  • オーバーレイの作成など、必要な場合を除き、 position: absolute を使用しないでください。コンテナー内の要素ではなく、コンテナーでのみ使用してください。
  • フォント サイズには cm、mm、in、px、pt、pc などの単位を使用しないでください。テキストのスケーリングはサポートされていないためです。
  • レイアウトにはテーブルを使用しないでください。は、アクセシビリティ ツリーで正しいセマンティクスとアクセシビリティを維持するために、表形式データにのみ使用します。

合計で、

使う ✓ 使わない X
  • max-width
  • auto
  • rem、ex、ch、%
  • すべて@media (最大幅: 18rem)
  • 表示:インライン
  • display: inline-block（表示方法: インラインブロック）
  • display: flex (Internet Explorer の互換性を確認してください)
  • display: grid (Internet Explorer の互換性を確認)
  • <svg>
  • <img srcset=" ">
  • position: absolute (オーバーレイを除く)
  • cm、mm、in、px、pt、pc (余白、パディング、境界線、大きなブロックを除く)
  • <table> (表形式データを除く)

ホバー時またはフォーカス時のコンテンツ

Web アプリでホバー時またはフォーカス時にコンテンツを実装するには、多くのアクセシビリティの問題があるため、ブラウザーの組み込みツールヒントを使用しないようにします。 たとえば、タイトル属性を使用して作成されたツールヒントはホバーできず、ブラウザーのズームでは拡大縮小されません。 代わりに、カスタム ツールチップを使用します。 カスタム ツールヒントは、ホバー可能にしたり、ブラウザーのズームでスケーラブルにしたり、コントロール キーを使用して非表示にしたりできます。

機能的なカスタム ツールヒントの主な要素は次のとおりです。

  1. イベント ハンドラー: ユーザーがイベント ハンドラーとキーを使用してツールヒントを呼び出したり閉じたりできるようにします。 mouseEnter やフォーカスなどのイベント ハンドラーが呼び出され、ツールヒントが表示され、onMouseOut と onBlur では、ユーザーがエスケープ キーをタップすると、キー イベントと共にヒントが非表示になります。

    tooltip1.onmouseenter = showTooltip;
tooltip1.onmouseleave = hideTooltipAfterDelay;

  2. ヒントの非表示: onBlur や onMouseOut などのキーやイベント ハンドラーを使用して、ユーザーがツールヒントを無視できるようにします。

    triggerElement.addEventListener('mouseenter', showTooltip);

triggerElement.addEventListener('focus', showTooltip);

triggerElement.addEventListener('mouseleave', hideTooltip);

triggerElement.addEventListener('blur', hideTooltip);

document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') hideTooltip();
});

  3. キーダウン イベント ハンドラー: コントロール キーを処理するキーダウン イベント ハンドラーをドキュメントに追加します。キーボード フォーカスの場所に関係なく動作するようにします。

    function documentKeyHandler(e) 
{
    e = e || window.event;
    if(e.ctrlKey) 
        hideTooltip();
}

コントロールキーが押されたときに、ボタンのキーダウンハンドラーがstopPropagationを呼び出した場合、ツールチップが消えない可能性のあるバグに注意してください。 stopPropagation 呼び出しを削除すると、この問題が解決する可能性があります。