辅助功能: Hover上的可见性-如何添加屏幕阅读器和ontab功能？

Question

我正在构建我的第一个React应用程序！我正在使用它来构建一个作家的应用程序，我希望每个人都可以访问它。

我已经建立了基本的控制台。中间有一个写作控制台，左边是一个带有导航链接的作家站，右边是一个带有环境按钮的选项面板。基本结构如下：

function Demo() {

return (
<div className='Demo'>
  <div className="movable-writer-station">
  <aside>
    <div className="left panel" id="writer-station-nav-panel">
      <nav>
        <div className="panel-links flex-column">
          <h1>Writer's Station</h1>
            <a href="#">My Stories</a>
            <a href="#">Calendar</a>
            <a href="#">Writer's Groups</a>
            <a href="#">Friends</a>
            <a href="#">Forum</a>
            <button className="btn">Invite to Sprint</button>
        </div>
      </nav>

    </div>
  </aside>
  <main>
    <div className="writer-console-container">
        <div className="writer-station-input">
          <textarea></textarea>
        </div>
        <div className="word-count">
          342
        </div>
    </div>
  </main>
  <aside>
    <div className="right panel" id="writer-station-button-panel">
      <div className="text options">
        <input id="ltr1" className="c-btn t1" type="button" value="F" />
        <input id="ltr2" className="c-btn t2" type="button" value="F" />
        <input id="ltr3" className="c-btn t3" type="button" value="F" />
        <input id="ltr4" className="c-btn t4" type="button" value="F" />
        <input id="ltr5" className="c-btn t5" type="button" value="F" />
     </div> 
   </div>
  </aside>

现在，从美学上讲，我将构建这样的功能:整个控制台显示几秒钟，以便有视力的用户知道那里有什么，但随后它就消失了，提供了一个无干扰的视图。当他们需要这些功能时，或者想要更改状态(歌曲、字体样式等等)时，他们可以简单地悬停在右侧面板上，再次显示选项。

当面板未悬停时，我使用visibility: none。但是屏幕阅读器和制表符阅读器呢？我了解到这个CSS属性根本不允许用户访问这些函数。我如何提供允许所有功能的体验，同时提供我所希望的视觉美学？

注意:我使用了一个名为"OmmWriter“的程序作为灵感，如果您想要一个实现示例的话。虽然我的应用程序将具有不同的和额外的功能，并将能够作为web应用程序使用。

Answer 1

我可以看到你错过了很多点，特别是对于屏幕阅读器的可访问性。在开发可访问的Web应用程序时，我想提出几点您必须牢记的要点。(如果你感兴趣，很乐意讨论更多)。

跳过链接：-提供跳过链接将有利于用户跳过相关性很小、重复或导航更耗时的内容(如导航栏)。

键盘可访问：-由于视觉障碍的有限可见性，少数人不习惯使用鼠标，所以键盘本身应该足以导航通过整个web应用程序和所有的功能，如表单填写和提交，也应该是可通过键盘执行的。

对比度：-在设计时，文本和背景之间的对比度应保持在最低4:1。

Alternate text：-应提供媒体内容的描述性、有意义的“alt”文本，以便屏幕阅读器阅读它，以便具有视觉挑战性的人阅读。表单元素的标签：-输入字段，复选框，单选按钮和选择框应该有一个相关的标签，以获得更好的用户体验。

颜色上的无关紧要：-内容信息永远不应该留在颜色上，只是为了将信息传递给用户。还应为部分盲人提供描述性文本信息。

避免JavaScript链接：-链接()方法不是标准方法，不应使用，因为并非所有浏览器都支持该方法。

Focus on Active Elements:-活动/焦点链接、按钮、复选框、单选按钮、选择框下拉框和输入元素周围应该有一个突出显示的区域，这样用户就可以很容易地了解他在网页上的位置。

图例字段集和图例使用：-字段集标签用于对表单中的相关元素进行分组，标签用于为这些元素提供标题。通过这种方式，可以将表单元素一起分组到确定的类别中。

锚定标签href：-“href”of Anchor Tag绝不能为空。它必须联系一个URL，如果不需要重定向操作，那么应该使用“javascript:void()；”。这将使Anchor链接可访问，并且焦点将转到该链接。

ID冲突：-使用Id通常是非常糟糕的做法，如果需要使用，必须注意任何页面都不能有一个以上的Id。

暂停按钮用于移动内容：-必须有一个暂停按钮或链接来停止移动的内容，如旋转木马或视频和音频，以便阅读或理解占用更多时间的用户获得足够的内容。