ARIA角色=＆＃34; menuitem＆＃34; <a> or </a> <li> <a>

Question

I've found two possible solutions:

1. apply role="menuitem" for the <li> tags:

   <li role="menuitem"><a ...>some menuitem</a></li>

2. apply role="menuitem" for the <a> tags:

   <li role="presentation"><a role="menuitem" ...>some menuitem</a></li>

I think that the second solution is the logical one, but I am unsure. And I cannot use it in a more complex situation, only 2, because the submenuitems are not children of the <a> tag:

<li role="menuitem"><a ...>some menuitem</a></li>
<li role="menuitem" aria-haspopup="true">
  <a ...>some menuitem with children </a>
  <div><ul>
    <li role="menuitem"><a ...>submenuitem</a></li>
    ...
  </ul></div>
</li>

Is it correct? Is there some additional possible improvement on it?

The HTML structure is defined by the framework I use, I am not able to change it.

Answer 1

回答问题

如果您真的将操作系统风格的菜单应用于应用程序，那么您希望将role放在<a>上。这是执行菜单项功能的项目（链接到另一个视图或页面或状态）。

所以你的第二个建议是正确的：

<li role="presentation"><a role="menuitem" ...>some menuitem</a></li>

曲线球

现在说，我怀疑你真的不想要一个操作系统风格的菜单。要查看对其中的预期内容，请查看WAI-ARIA Authoring Practices item 2.14 Menu or Menu bar。

通过调用这种菜单，您告诉屏幕阅读器的熟练用户它将像操作系统菜单一样运行，这意味着您需要遵守下面的键盘命令（因此您必须对它们进行全部编码， ARIA不只是让浏览器尊重他们。）

相反，考虑只使用<nav>元素来保存您的列表（将向屏幕阅读器宣布并充当页面内导航的里程碑），保持列表语义（IOW，不要使用role=presentation，因为您希望屏幕阅读器的用户知道有多少项目，并将其样式设置为您认为合适的视觉效果。

这样，您就不会为屏幕阅读器用户创建更糟糕的体验，以帮助他们（或满足清单项目）。

ARIA菜单键盘交互

  

            
•               当menu打开时，或menubar获得焦点时，键盘焦点会放在第一个项目上。所有项目都是可聚焦的，如4.6键盘导航内部组件中所述。             
            
• 输入：               
                  
  • 当焦点位于具有子菜单的menuitem时，打开子菜单并将焦点放在第一个项目上。
                  
  • 否则，激活该项目并关闭菜单。
                
              
            
• 空间：               
                  
  • 当焦点位于menuitemcheckbox时，更改状态而不关闭菜单。
                  
  • 当焦点位于未选中的menuitemradio时，如果不关闭菜单，请检查焦点menuitemradio并取消选中同一组中任何其他已检查的menuitemradio元素。
                  
  • （可选）：当焦点位于具有子菜单的menuitem上时，打开子菜单并将焦点放在第一个项目上。
                  
  • （可选）：当焦点位于没有子菜单的menuitem时，激活menuitem并关闭菜单。
                
              
            
• 向下箭头：               
                  
  • 当焦点位于menuitem中的menubar时，会打开其子菜单并将焦点放在子菜单中的第一个项目上。
                  
  • 焦点位于menu时，将焦点移至下一个项目，可选择从最后一个到第一个项目。
                
              
            
• 向上箭头：               
                  
  • 焦点位于menu时，将焦点移至上一项，可选择从第一项到最后一项。
                  
  • 当焦点在menubar时，什么都不做。
                
              
            
• 右箭头：               
                  
  • 焦点位于menubar时，将焦点移至下一个项目，可选择从最后一个到第一个项目。
                  
  • 当焦点位于具有子菜单的menu和menuitem时，打开子菜单并将焦点放在第一个项目上。
                  
  • 当焦点位于menu和没有子菜单的项目上时，请执行以下3个操作：                   
                        
    1. 关闭子菜单和任何父菜单。
                        
    2. 将焦点移至menuitem。
    中的下一个menubar                     
    3.                       或者:(推荐）打开menuitem的子菜单，而不将焦点移动到子菜单，或打开menuitem的子菜单，并将焦点放在子菜单中的第一个项目上。                     
                                         请注意，如果menubar不存在，例如，菜单是从menubutton打开的，那么当焦点位于没有子菜单的项目时，右箭头将不会执行任何操作。                                
              
            
• 左箭头：               
                  
  • 焦点位于menubar时，将焦点移至上一个项目，可选择从最后一个到第一个项目。
                  
  • 当焦点位于menu中项目的子菜单中时，关闭子菜单并将焦点返回到父menuitem。
                  
  • 当焦点位于menubar中项目的子菜单中时，执行以下3个操作：                   
                        
    1. 关闭子菜单。
                        
    2. 将焦点移至menuitem。
    中的上一个menubar                     
    3.                       或者:(推荐）打开menuitem的子菜单，而不将焦点移动到子菜单，或打开menuitem的子菜单，并将焦点放在子菜单中的第一个项目上。                     
                                                      
              
            
• 主页：如果不支持箭头换行，请将焦点移至当前menu或menubar中的第一项。
            
• 结束：如果不支持箭头换行，请将焦点移至当前menu或menubar中的最后一项。
            
• 与可打印字符对应的任何键（可选）：将焦点移至当前菜单中的下一个菜单项，其标签以该可打印字符开头。
            
• Escape ：关闭包含焦点的菜单，并将焦点返回到元素或上下文，例如菜单按钮或父menuitem，从中打开菜单。
            
• Tab ：将焦点移动到标签序列中的下一个元素，如果焦点不在menubar的项目，则关闭其menu并全部打开父menu个容器。
            
• Shift + Tab ：将焦点移动到标签序列中的上一个元素，如果焦点不在menubar的项目，则关闭其menu和所有打开的父menu容器。