我們如何使用 React 修復 A11y 錯誤“所有頁面內容必須由地標包含”？

Question

ax 可訪問性規則所有頁面內容必須包含在地標中聲明所有頂部 html 元素都應該是地標元素，例如

<html lang="en">
    <head>
        <title>Hello</title>
    </head>
    <body>
        <header>This is the header</header>
        <nav>This is the nav</nav>
        <main>This is the main</main>
        <footer>This is the footer</footer>
    </body>
</html>

但是一個 React 項目需要在 body 下面有一個根元素（需要避免與其他腳本發生沖突

<html lang="en">
    <head>
        <title>Hello</title>
    </head>
    <body>
        <div id="root">
            <header>This is the header</header>
            <nav>This is the nav</nav>
            <main>This is the main</main>
            <footer>This is the footer</footer>
        </div>
    </body>
</html>

我試圖將aria-hidden="true"為我的 div 以便屏幕閱讀器忽略它

<div id="root" aria-hidden="true">

但這引發了另一個問題： aria-hidden 元素不包含可聚焦元素

我找不到其他人在討論這個問題，這讓我懷疑它是否相關。 有沒有一種干凈的方式來讓 React 應用程序具有里程碑式的頂級元素？ 或者我應該忽略這個特定的斧頭規則？

Answer 1

您可以放心地忽略這一點。 就可訪問性樹而言，此 div 將被忽略。

不要將aria-hidden添加到根 div，這將嘗試對屏幕閱讀器隱藏整個 Web 應用程序。

只要根 div 的內容結構正確，它仍然可以完全使用。

我唯一要說的是確保你有一個警告，“這個應用程序需要 JavaScript”回退位於你的根 div 之外。

更多信息

這里以<main>的規范為例。 它指出：-

可以使用此元素的上下文：

預期流內容，但沒有<article> 、 <aside> 、 <footer> 、 <header>或<nav>元素祖先。

由於<body>和<div>元素都可以接受流內容，所以你很好。

Answer 2

根元素是<div>元素沒有問題。 您可能在<main> 、 <header>和<footer>的同一級別上還有另一個<div> 、 <p>或其他一些非地標元素。 如果您將在上面顯示的示例上運行 ax，您將不會看到此問題。 您將在下面的示例中看到它。

<html lang="en">
    <head>
        <title>Hello</title>
    </head>
    <body>
        <div id="root">
            <header>This is the header</header>
            <nav>This is the nav</nav>
            <main>This is the main</main>
            <div>I am a stray element</div>
            <footer>This is the footer</footer>
        </div>
    </body>
</html>

例如，您要查找的元素可以是頁面上的市場像素或用於彈出模式的變暗層。 在這些情況下，或者如果元素為空（並且以后不會填充內容）或其內容與屏幕閱讀器無關（例如純粹的裝飾圖像），那么您可以添加此特定元素aria-hidden="true"

我們如何使用 React 修復 A11y 錯誤“所有頁面內容必須由地標包含”？

問題描述

2 個解決方案

解決方案1
2 已采納 2020-09-17 09:56:43

更多信息

解決方案2
0 2020-09-22 09:38:37

我們如何使用 React 修復 A11y 錯誤“所有頁面內容必須由地標包含”？

問題描述

2 個解決方案

解決方案1 2 已采納 2020-09-17 09:56:43

更多信息

解決方案2 0 2020-09-22 09:38:37

解決方案1
2 已采納 2020-09-17 09:56:43

解決方案2
0 2020-09-22 09:38:37