Question

我有以下代码（from here）：

<div role="menubar">
    <ul role="menu" aria-label="functions" id="appmenu">
            <li role="menuitem" aria-haspopup="true" tabindex="0" aria-expanded="false">
                File
                <ul role="menu">
                            <li role="menuitem" tabindex="-1">New</li>
                            <li role="menuitem" tabindex="-1">Open</li>
                            <li role="menuitem" tabindex="-1">Print</li>
                    </ul>
            </li>
            <li role="menuitem" aria-haspopup="true" tabindex="-1" aria-expanded="false">
                Edit
                <ul role="menu">
                            <li role="menuitem" tabindex="-1">Undo</li>
                            <li role="menuitem" tabindex="-1">Redo</li>
                            <li role="menuitem" tabindex="-1">Cut</li>
                            <li role="menuitem" tabindex="-1">Copy</li>
                            <li role="menuitem" tabindex="-1">Paste</li>
                    </ul>
            </li>
            <li role="menuitem" aria-haspopup="true" tabindex="-1" aria-expanded="false">
                    Format
                    <ul role="menu">
                            <li role="menuitem" tabindex="-1">Font</li>
                            <li role="menuitem" tabindex="-1">Text</li>
                    </ul>
            </li>
            <li role="menuitem" aria-haspopup="true" tabindex="-1" aria-expanded="false">
                View
                <ul role="menu">
                    <li role="menuitem" tabindex="-1">100%</li>
                    <li role="menuitem" tabindex="-1">Zoom In</li>
                    <li role="menuitem" tabindex="-1">Zoom Out</li>
                </ul>
            </li>
            <li role="menuitem" tabindex="-1" aria-expanded="false">Help</li>
    </ul>
</div>

然而，当我尝试验证（via the W3C validator）HTML片段时，它会给出错误：

此时元素aria-expanded上不允许使用属性li。

由于这是官方的W3C示例，我有点困惑，因为他们自己的示例没有使用他们自己的验证器进行验证。这有什么不对？

Answer 1

W3C HTML检查程序（验证程序）的维护者。我认为检查程序的行为符合预期，因为aria-expanded与role=menuitem isn’t allowed by the ARIA spec。

至于https://www.w3.org/WAI/tutorials/menus/examples/appmenu/示例使用无效标记的原因，根据我的经验，有许多例子是无效的。没有什么意思是官方/权威与ARIA规范和其他规范相同，所以当你注意到一个与ARIA规范要求不符的例子时，你应该在https://github.com/w3c/wai-tutorials/issues报告它，所以该例子可以修复。

根据我的经验，当人们花时间报告这些教程中的错误时，会很快得到修复。

2017-07-09更新：另请参阅StackOverflow上 About use 'aria-expanded' on 'role=menuitem' 的答案，并查看https://github.com/w3c/aria/issues/454 “ARIA 1.1 ：ARIA工作组针对ARIA规范的问题跟踪器中的menuitem角色“不支持aria-expanded。

Answer 2

因此，根据草案here，应使用以下内容：

＆＃13;

<ul role="menubar" id="appmenu">
	…
	<li role="menuitem" aria-haspopup="true">
		Edit
		<ul role="menu">
			<li role="menuitem">Undo</li>
			<li role="menuitem">Redo</li>
			<li role="separator"></li>
			<li role="menuitem">Cut</li>
			<li role="menuitem">Copy</li>
			<li role="menuitem">Paste</li>
			</ul>
		</li>
	…
</ul>

＆＃13;

然而，现在有一个说明＆＃34;应用程序菜单通常没有链接，并依赖脚本来提供功能。＆＃34;所以网站的正确菜单可能是here。

“此时元素li上不允许扩展属性咏叹调”

2 个答案: