iFrame 親タグ内に title 要素を含める必要があります。</p></li> <li><p>ベスト プラクティスとして、<iframe> でスクロールを「自動」または「はい」に設定することをお勧めします。タグの設定。これにより、視覚障害のある人でも、<iframe> 内のコンテンツにスクロールできるようになります。そうでなければ見ることができないかもしれません。</p></li> </ul> <h2> フォーカス順序 </h2> <ul> <li>デフォルトのフォーカス順序は論理的かつ直観的であり、ページの視覚的な順序と一致する必要があります。</li> </ul> <h2> タブインデックス </h2> <ul> <li><p>通常はフォーカス可能だが非アクティブ状態にある要素 (無効になっている入力ボックスやボタンなど) には、負の tabindex (tabindex="-1") を与える必要があります。</p></li> <li><p>アクティブまたは必要なときに、要素にフォーカスを追加し直す必要があります (JS または TS を使用できます)。</p></li> <li><p>正の tabindex は避けてください。非インタラクティブな要素にフォーカスを与えたり、通常のフォーカス順序を乱したりすると、ユーザーが混乱してイライラする可能性があります。状況によっては、フォーカス不可能な要素に tabindex=1 などの正の tabindex を追加する必要があることはほとんどありません。</p></li> </ul> <h2> リンクをスキップする </h2> <ul> <li><p>ユーザーがナビゲーション メニューを回避できるように、スキップ リンクを含める必要があります。</p></li> <li><p>スキップ リンクには、リンクの目的に関するコンテキスト (例: 「メイン コンテンツにスキップ」) を含める必要があり、aria-labelledby、aria-label などの追加の ARIA プロパティを使用できます。</p></li> <li><p>スキップ リンクは、ユーザーがタブで移動するまで (デザインに基づいて) 表示または非表示にすることができます。</p></li> </ul> <h2> フォーカスインジケーター </h2> <ul> <li>フォーカス インジケーターが他のコンポーネントの下に隠れていないことを確認してください。</li> </ul> <h2> ブラウザのデフォルトのスタイル </h2> <ul> <li><p>ブラウザのデフォルトのフォーカス スタイル (例: "outline: 0" または "outline: none") をオーバーライドしないでください。</p></li> <li><p>カスタム フォーカス スタイルが許可されます。</p></li> </ul> <h2> JavaScript </h2> <h3> トリガーイベント </h3> <ul> <li>クリック イベント (例: onClick()) が非セマンティック要素 (例: <div>) に適用される場合、Enter キーまたはスペース キーの押下を検出するために keydown/keyup イベントを追加する必要があります。</li> </ul> <h3> ページタイトル </h3> <ul> <li>各ページにはタイトルが必要です。この目的には、 document.title プロパティまたはサードパーティのパッケージを使用できます</li> </ul> <h3> 動的コンテンツ </h3> <div><table> <tr> <th>Possible misuse</th> <th>Correct use</th> </tr> <tr> <td>Render large chunks of non-semantic HTML</td> <td>Render smaller pieces of semantic HTML</td> </tr> <tr> <td>Not allowing time for dynamic content to be recognized by assistive technology</td> <td>Using a setTimeout() time delay to allow users to hear the full message</td> </tr> <tr> <td>Applying style attributes for onFocus() dynamically</td> <td>Use :focus for the related elements in your CSS stylesheet</td> </tr> <tr> <td>Applying inline styles may cause user stylesheets to not be read properly</td> <td>Keep your styles in CSS files to keep the consistency of the theme</td> </tr> <tr> <td>Creating very large JavaScript files that slow down overall site performance</td> <td>Use less JavaScript; prefer CSS for animations or sticky navigation for better performance</td> </tr> </table></div> <h3> コンポーネントレベルのフォーカス管理 </h3> <ul> <li>ユーザーがモーダルを開いたとき、Tab キーを使用してモーダル内のアクション可能な要素 (キャンセル ボタンや送信ボタンなど) 間を移動できる必要があります。ただし、フォーカスはモーダルに限定されたままにする必要があり、ユーザーがモーダルを明示的に閉じない限り、モーダルの外側の要素にアクセスできないようにします。これにより、フォーカスがモーダル内に確実に閉じ込められます。</li> </ul> <h3> ページレベルのフォーカス管理 </h3> <ul> <li><p>ユーザーがページ間を移動するときにもフォーカスを維持する必要があります。</p></li> <li><p>ユーザーがリンクをクリックしてアプリケーション内の別のページに移動するたびに、フォーカスは同じ場所に維持されるか、まったく別の場所に配置される可能性があります。</p></li> <li><p>ユーザーがあるページから別のページに移動するときに推奨されるフォーカスの配置を次に示します。</p></li> <li><p>aria-live アナウンスでメインコンテナに焦点を当てます。</p></li> <li><p>メイン コンテンツにスキップするには、リンクにフォーカスを戻します。</p></li> <li><p>新しいページの最上位の見出しにフォーカスを移動します。</p></li> </ul> <h3> コンポーネントレベルの状態管理 </h3> <ul> <li><p>コンポーネントの状態は ARIA 属性を使用して管理する必要があります (例: aria-expanded 属性を使用して、ドロップダウン メニューまたはリストが展開されているか折りたたまれているかをユーザーに伝えます)。</p></li> <li><p>ARIA 属性を適用するときは選択することが重要です。ユーザー フローを徹底的に検討して、どのような重要な情報をユーザーに伝える必要があるかを理解します。</p></li> </ul> <h3> ページレベルの状態管理 </h3> <ul> <li><p>ページ上でコンテンツが動的に追加または更新された場合 (警告メッセージやテキストの変更など)、ユーザーに通知する必要があります。</p></li> <li> <p>使用した方が良い</p> <ul> <li>反応：react-aria-live または accept-a11y-announcer </li> <li>角度: LiveAnnouncer </li> <li>Vue: vue-a11y-utils </li> </ul> </li> </ul> <p>(続き...)</p>
