樣式下拉 a11y 而沒有 js？

Question

有沒有辦法設置可訪問且沒有 JS 的 HTML 下拉菜單的樣式？

目前我只看到帶有 JS、jQuery 或webkit-appearance: none;解決方案webkit-appearance: none; 但我根本不喜歡它，因為我認為這些解決方案是不可訪問的。

Answer 1

為清楚起見進行編輯

正如評論中指出的那樣，此建議適用於“飛出”菜單或作為導航一部分的下拉菜單。

如果您正在創建一個帶有工具欄樣式菜單（包含觸發功能等的按鈕而不是導航的菜單）的 Web 應用程序，則指南和行為將大不相同。

話雖如此，一般的答案仍然是一樣的，你不能創建一個沒有一些 JavaScript 就可以訪問的下拉菜單

原答案

JavaScript 與樣式無關，從您的其他問題來看，我假設您的意思是創建一個下拉菜單，而不是如何設置它的樣式。

如果沒有 JavaScript，您將無法制作可訪問的下拉菜單。 這有幾個原因：-

1. 您需要能夠在打開下拉菜單的按鈕上切換aria-expanded 。
2. 下拉列表應該只出現在按下回車鍵或空格鍵時（回車是正常的操作方式）。
3. 您需要管理焦點狀態，以便當有人點擊下拉菜單中的最后一項時，它會轉到下一個頂級菜單項並自動關閉下拉菜單。
4. 理想情況下，您應該能夠使用箭頭鍵導航下拉菜單（不是必需的，但很好）。
5. 理想情況下，按Esc應該關閉菜單，這對於合規性不是必需的，但對於鍵盤用戶來說會帶來更好的體驗。

還有其他原因，但這應該讓您了解為什么需要 JavaScript。

話雖如此，如果您擔心沒有啟用 JavaScript 的人，您可以提供指向 HTML 站點地圖的后備鏈接。 您可以使用<noscript>標簽來做到這一點。

還要記住，JavaScript 本身並不是一個可訪問性問題，由 JavaScript 引起的可訪問性問題歸咎於開發人員，只要您提供回退，它實際上是可訪問性最佳實踐中必不可少的工具。

Answer 2

HTML

<nav role="navigation">
      <ul>
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a>
          <ul class="dropdown">
            <li><a href="#">Sub-1</a></li>
            <li><a href="#">Sub-2</a></li>
            <li><a href="#">Sub-3</a></li>
          </ul>
        </li>
        <li><a href="#">Three</a></li>
      </ul>
    </nav>

CSS

li {
 display: block;
 transition-duration: 0.5s;
}

li:hover {
  cursor: pointer;
}

ul li ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 1rem;
  left: 0;
  display: none;
}

ul li:hover > ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

ul li ul li {
  clear: both;
  width: 100%;
}

Answer 3

Please check the following url for reference

> Blockquote

https://codepen.io/srirachachacha/pen/VPKjjx