mmenu.js生成的HTML不符合WCAG规范：错误严重吗？需修复吗？

输出的HTML代码 #

<nav class="mm-menu mm-menu--offcanvas mm-menu--position-right mm-menu--theme-light mm-menu--opened" 
id="mmenunav"
aria-label="Test"
aria-modal="true"
role="dialog"
inert="true">

W3C验证器检测到的错误 #

• nav元素的role属性值dialog无效
• nav元素此处不允许使用aria-modal属性
• nav元素的inert属性值true无效

问题分析与解决方案 #

这些错误属于中度到重度的无障碍合规问题，绝对不能忽略，必须修复mmenu的代码。

具体原因：

1. role="dialog"错误：<nav>本身是语义化的导航区域标签，强行赋予dialog角色会混淆屏幕阅读器对页面结构的判断，视障用户会误以为这是对话框而非导航菜单，严重影响导航体验。
2. aria-modal="true"错误：该属性仅适用于真正的模态对话框（如原生<dialog>元素），导航菜单不属于模态对话框范畴，添加这个属性会误导辅助技术，可能导致用户无法正常访问页面其他内容。
3. inert="true"错误：inert用于标记元素为非交互状态，而导航菜单是需要用户操作的交互区域，设置inert="true"会直接让菜单无法被键盘或屏幕阅读器识别操作，完全破坏菜单可用性。

修复建议：

• 移除role="dialog"，保留<nav>本身的语义，确保辅助技术能正确识别这是导航菜单。
• 移除aria-modal="true"，若需要实现菜单打开时页面其他区域不可交互，应通过JS给页面主体内容添加inert，而非给菜单本身设置该属性。
• 移除inert="true"，保证导航菜单的交互性，让用户能正常操作菜单选项。

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