如何测试Firefox扩展工具栏按钮及关联弹窗的可访问性（仅键盘操作）

嘿，刚好我对Firefox扩展的键盘可访问性测试挺熟的，给你分享几个不用鼠标、也不用额外屏幕阅读器的实用方法：

一、先确认基础键盘导航已开启 #

Firefox默认支持键盘导航，但可以先确认下设置是否正确：

• 打开Firefox的设置页面，找到「无障碍」板块
• 勾选「使用键盘在网页和应用中导航」（不同版本的措辞可能略有差异，找类似的选项就行）

二、快速聚焦到工具栏的扩展按钮 #

有两种高效的方式定位到你的扩展按钮：

1. 用F6切换区域：按下F6键可以循环切换地址栏、标签栏、工具栏、网页内容这些核心区域。当切换到工具栏后，用左右箭头键就能在各个按钮（包括你的扩展按钮）之间移动，焦点落在按钮上时会有虚线框或高亮提示。
2. 用访问键直接跳转：按下Alt键后，工具栏上的按钮会显示带下划线的访问键提示（如果你的扩展manifest.json里设置了default_title，Firefox会自动提取可作为访问键的字母），直接按下对应字母就能快速聚焦到你的扩展按钮。要是没显示访问键，去无障碍设置里开启「显示访问键」即可。

三、触发扩展的Popup弹窗 #

当焦点已经落在你的扩展按钮上时，按下Enter键或者Space键，就能和鼠标点击一样触发popup弹窗。

四、测试Popup内部的键盘交互 #

Popup打开后，默认焦点会落在第一个可交互元素上（比如按钮、输入框），你可以用以下操作导航：

• Tab键：向前切换到下一个可交互元素
• Shift+Tab键：向后切换到上一个可交互元素
• Enter/Space键：触发当前焦点元素的点击操作（比如按钮提交、链接跳转）

如果发现某个元素无法被键盘聚焦，大概率是HTML结构的问题：比如用了<div>代替语义化的<button>，或者没给需要聚焦的元素设置合适的tabindex属性，这时候就要检查popup的HTML代码了。

五、针对溢出菜单里的扩展按钮 #

如果你的扩展按钮被放在了工具栏右侧的溢出菜单（三个点的图标）里，操作步骤是：

1. 用F6切换到工具栏，用箭头键移到溢出按钮，按下Enter打开菜单
2. 用上下箭头键选中你的扩展按钮，再按Enter触发Popup

六、辅助测试小技巧 #

• 开启「焦点指示器」：在无障碍设置里找到「突出显示焦点」，这样焦点元素会有更明显的高亮边框，方便你看清当前聚焦位置
• 用开发者工具检查：打开Firefox开发者工具的「无障碍」面板，可以查看元素的可访问性属性（比如aria-label、是否可聚焦），提前排查潜在的可访问性问题

内容的提问来源于stack exchange，提问作者arantius