Question

说明：
我正在编写单页应用程序。这是一种电子书阅读器，我希望优化屏幕阅读器体验。

出于一般性能原因（加载时间，HTTP请求），应用程序的所有功能组件始终存在于DOM中，由CSS管理的可见性。只动态加载实际内容。

这意味着存在许多不需要的东西，例如登录/注册页面。
有视力的用户不会知道，但屏幕阅读器用户可能会烦恼。

对于屏幕阅读器用户来说，我认为也应该无关紧要，比如一堆视觉选项（字体大小，颜色......）。

我的意图：
我想通过应用aria-hidden="true"来隐藏某些部分。我想动态地将它应用于当前不起作用的元素，例如登录用户的注册页面。
另外，我想隐藏某些“表现”部分，比如视觉选项。

问题：
那是好习惯吗？有缺点吗？
有必要吗？
是否有其他/更好的方式告诉用户这些元素对他们没用？

，最后，至少，
是否有很好的方法可以引导用户注意某些元素？

-
附：我已经明智地构建了DOM，比如

<body>
    <main role="main"></main>
    <nav role="navigation">
        <button>Next Page</button>
        <button>Previous Page</button>
        ...
    </nav>
    <menu role="menu">
        <ul>
            <li><button role="menuitem">Important Task</button></li>
            ...
            <li><button role="menuitem">Least Worthy Task</button></li>
        </ul>
    </menu>
    <div class="options">
        ...
    </div>

确保控件应按使用频率的降序进行制表选择。

Answer 1

我认为更改页面的行为会删除/隐藏当前内容并取消隐藏新页面？在这种情况下，听起来你从显示/隐藏的角度采取了一个好的方法。

我最近做了一个快速的主题/备忘单，目前的最佳做法是：隐藏所有，隐藏在屏幕阅读器之外，或只向屏幕阅读器显示： https://gist.github.com/alastc/7706437

对于当前未激活但已禁用的项目，隐藏它们可能会不一致（因此会造成混淆）？也许使用disabled / aria-disabled属性。

由于内容和下一个/上一个是顺序中的第一个，在那些之后有几个禁用控件应该没问题。注意：当阅读屏幕阅读器时，有一个跟随DOM的“浏览”顺序，并且不受tabindex的影响。你的订单看起来不错，所以不要试图用tabindex覆盖它。

另外，请注意键盘焦点。即当您选择“下一步”时，键盘焦点是否会移动到下一页的顶部？我为单页应用写了一篇关于keyboard focus aspect的答案。

此外，由于您有多个导航元素helpful to label them，因此可以将它们宣布为“页面，导航”和“选项，菜单”（例如）。

Answer 2

看看以下链接。它列出了隐藏屏幕阅读器用户内容的方法，以及屏幕阅读器和浏览器的正确组合行为。 http://www.html5accessibility.com/tests/hidden2013.html

Answer 3

你的方法会有用，但是你过度思考。

任何隐藏在CSS中的内容：display：none或visibility：hidden也会对屏幕阅读器隐藏

隐藏屏幕阅读器中的内容 - 以及相关问题

3 个答案: