4

NVDA スクリーン リーダーに問題があり、1 つのブロック内の同じ行にあるすべての要素を読み上げます。

たとえば、次のコードを使用します。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Title</title>
        <style>
        nav > ul > li {
            list-style: none;
            display:inline-block;
        }   

        </style>
    </head>
    <body>
        <h1>Title 1</h1>
        <nav role="navigation">
            <ul>
                <li>
                  <a href="#">Link 1</a>
                </li>
                <li>
                  <a href="#">Link 2</a>
                </li>
                <li>
                  <a href="#">Link 3</a>
                </li>
                <li>
                  <a href="#">Link 4</a>
                </li>
            </ul>
        </nav>
    </body>
</html>

これにより、すべてのナビゲーション リンクが一列に表示され、視覚的には正しいのですが、ブラウズ モードで NVDA が矢印キーを使用してスクロールすると、すべてのリンクがまとめて読み取られます。ユーザーは個々のリンク間を移動できません。つまり、1 つのリンクにとどまって選択することはできません。

段落の途中にあるリンクでも同じことが起こります。

<p>NVDA will not stop on <a href="#">This link</a> so a user can select it.</a>

私のナビゲーションの例では、各リンクが別の行に表示されるようにスタイルを変更しています。

        nav > ul > li {
            list-style: none;
            display:block;
        }

NVDA の問題を修正 - ユーザーはリンク間を移動できますが、視覚的には間違っています。

視覚的に正しく、NVDA に個別に読み取らせる唯一の方法は、各アンカーをリスト項目内のブロックとして表示することです。

        nav > ul > li {
            list-style: none;
            display:inline-block;
        }   

        nav > ul > li > a {
            display: block;
        }

しかし、これはハックに感じられ、すべての状況での解決策ではありません (たとえば、これは段落内では機能しません)。

追加できる属性、または NVDA に各要素を個別に読み込ませるための他のより良い方法はありますか?

この問題は、すべてのブラウザーで発生します。

4

1 に答える 1