在 web 應用程序中，什么鍵盤快捷鍵適合將焦點移動到頁面菜單按鈕

Question

我想為使用鼠標有內在困難的我的網站用戶提供支持。 這包括有視覺或運動缺陷的人。

我沒有保留占據每個頁面頂部的 1980 年代風格的菜單欄，而是將該信息移動到一個下拉菜單中，該菜單通過選擇具有漢堡包常見外觀的頁面菜單按鈕來激活。 如您所知，漢堡包圖標是由 Norm Cox 為世界上第一個圖形用戶界面 Xerox Star 設計的。 我搜索了一長串常用鍵盤快捷鍵，但找不到任何推薦用於在 web 應用程序中選擇此類按鈕的快捷鍵。 請注意，這不是瀏覽器工具欄中瀏覽器的漢堡包按鈕，它是顯示的 web 頁面的一部分。

    <button id="menuButton" class="left"
        title="Main Page Menu" aria-hidden="true"
        aria-haspopup="menu"
        aria-label="Open the menu" aria-expanded="false">
      <div class="menuicon"></div>
      <div class="menuicon"></div>
      <div class="menuicon"></div>
    </button>

menuicon 的 CSS 是：

div.menuicon {
            width: 35px;
            height: 5px;
            background-color: black;
            margin: 6px 0;
            border-radius: 2.5px;
            }

要查看這是什么樣子，請嘗試https://www.jamescobban.net/FamilyTree/nominalIndex.php 。

對於無法使用鼠標訪問此按鈕的人，我能看到的唯一方法是從具有初始焦點的表單元素 [Shift-]tab 直到到達頁面菜單按鈕。 這似乎不必要地麻煩。 顯然，我必須避免使用那些具有標准含義的鍵盤快捷鍵。 例如，我不能使用 Home 或 Alt-Home。 但理想情況下，它應該是我的客戶已經知道的鍵盤快捷鍵，因為它被其他工具使用。

Answer 1

如果你真的想改善這些用戶的體驗，我建議首先不要隱藏主菜單項。

通過隱藏網站的主導航，可發現性幾乎減少了一半。 此外，任務時間更長，任務難度增加。

尼爾森諾曼集團，2016

這將使您有機會使菜單項也變大，從而提高運動障礙的可用性。

捷徑

ARIA 標准有一長節是關於鍵盤快捷鍵的。

在 HTML 中， accesskey屬性允許定義單個字母，並將修改鍵的處理留給瀏覽器和操作系統。

<button aria-label="Menu" accesskey="m">
<!-- OR -->
…
<a href="/" accesskey="h"><u>H</u>ome</a> 

這在理論上很棒，但在實踐中存在一些問題。

我仍然會選擇 go，因為這是我們目前擁有的最佳選擇。 您不想在代碼中處理平台約定。

您甚至可以使用accessKeyLabel屬性檢索瀏覽器最終分配的組合鍵，但瀏覽器支持不是很好。

button.title += ` [${button.accessKeyLabel || button.accessKey}]`;

如果您使用單字符快捷方式，則需要提供一種機制來更改這些快捷方式，以防止它們干擾其他 AT 快捷方式：

了解成功標准 2.1.4：字符快捷鍵

渲染菜單項足夠大

在訪問鏈接頁面時，我注意到實際的菜單項只有 17 像素高，並且它們之間幾乎沒有空間。

擁有足夠大的點擊和觸摸目標對於有運動障礙的用戶尤為重要。

根據WCAG 標准 2.5.5 目標大小要求，目標應至少為 44×44 px 。 您會在Android 的指南和Apple 的人機界面指南中找到幾乎相同的建議。