css - 可访问性：悬停时的可见性 - 如何添加屏幕阅读器和 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>

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

当面板没有悬停时，我使用可见性：无。但是屏幕阅读器和标签阅读器呢？我了解到这个 CSS 属性根本不允许用户访问这些功能。如何提供允许所有功能的体验，同时提供我希望的视觉美感？

注意：如果您想要一个实现示例，我正在使用一个名为“OmmWriter”的程序作为灵感。尽管我的应用程序将具有不同的附加功能，并且能够用作网络应用程序。

标签： cssreactjsaccessibilityweb-accessibility

Answer 1