使用 <button> 或 <a> 到 open/close 模式是否更容易访问？
Is it more accessible to use a <button> or <a> to open/close a modal?
据我了解，按钮用于执行功能，链接用于将用户导航到不同的页面。但就打开和关闭模态而言，最佳做法是什么？
<a id="testModal" href="#">Open Modal</a>
或
<button id="testModal">Open Modal</button>
我认为有两种可能。
您的内容只是隐藏在页面中或在页面中可见（可以被屏幕阅读器阅读）并且可以被散列 linked，那么锚标记可能是合适的（这case 不是很常见，例如：用例是如果您在页面上突出显示段落或图像作为模态）。
在几乎所有其他情况下，您的模式都加载在同一页面上，并且绝不会使用 url link 进行导航（通过 ajax用于可能访问数据，这不算数）。因此它是一个自定义功能，按钮是合适的选择。
根据定义，对话框是会在当前 window 上弹出的内容。您并不是真的要离开 window，它只是暂时不可用。完成对话框后，您通常会返回到 window。因此，在这方面，您不想使用 link，因为您不会转到另一个页面。您正在当前页面上执行某些操作。使用按钮。
使用屏幕 reader 时，我经常会调出 link 列表（JAWS 中的 Ins+F7）以查看我可以 link 到哪些页面。我还将调出一个按钮列表 (Ctrl+Ins+B) 以查看页面上可用的操作。我希望在我的按钮列表中出现模式对话框的操作。
<button>
将 <a href="#"> 更改为 <button> 并将事件处理程序放在上面。
关于元素属于哪里的更多上下文....
控件是否将我带到另一页？使用锚
如果在通过键盘或语音单击、点击或激活（或在此处插入新颖的交互方法）时，用户被快速转到另一个 URL（包括同一页面上的锚点），则使用<a href="[URL]">。确保你使用 href 属性并且它有一个真正的 URL，而不是“#”（否则你可能依赖于 JavaScript，这对于一个超链接）。如果 href 只指向一个“#”，那么你可能做错了。如果它指向一个命名锚点作为你渐进增强工作的一部分，那是完全有效的。
控件是否更改了当前页面上的某些内容？使用按钮
如果在激活时，用户没有从页面移动（或移动到页面内的锚点），而是呈现一个新视图（消息框、布局更改等），则使用一个<button>。虽然您可以使用 <input type="button">，但您更有可能与先前存在的样式和后续开发人员（例如我）发生冲突。
控件是否提交表单字段？使用提交
如果在激活时将用户输入的信息（通过手动键入或通过在屏幕上选择项目）发送回服务器，则使用 <input type="submit">。这最好住在 <form> 之内。如果您需要更多的样式控制或必须嵌入的不仅仅是简单的文本字符串，请改用 <button type="submit">。
键盘注意事项
想一想键盘用户。可以通过按回车键来触发超链接。但是可以通过按回车键或 space 栏来触发真正的按钮。当超链接获得焦点并且用户按下 space 栏时，页面将滚动一屏。如果没有更多内容可以滚动，那么用户什么也不会体验到。给定一组看起来相同的界面元素，如果一些元素使用 space 栏而另一些不使用，您就不能指望用户对页面的行为有多大信心。
我认为还值得一提的是，由 space 条触发的事件仅在释放按键时触发，而使用 Enter 键会在您按下按键时立即触发事件（在释放它）。
据我了解，按钮用于执行功能，链接用于将用户导航到不同的页面。但就打开和关闭模态而言，最佳做法是什么？
<a id="testModal" href="#">Open Modal</a>
或
<button id="testModal">Open Modal</button>
我认为有两种可能。
您的内容只是隐藏在页面中或在页面中可见（可以被屏幕阅读器阅读）并且可以被散列 linked，那么锚标记可能是合适的（这case 不是很常见，例如：用例是如果您在页面上突出显示段落或图像作为模态）。
在几乎所有其他情况下，您的模式都加载在同一页面上，并且绝不会使用 url link 进行导航（通过 ajax用于可能访问数据，这不算数）。因此它是一个自定义功能，按钮是合适的选择。
根据定义，对话框是会在当前 window 上弹出的内容。您并不是真的要离开 window，它只是暂时不可用。完成对话框后，您通常会返回到 window。因此，在这方面，您不想使用 link，因为您不会转到另一个页面。您正在当前页面上执行某些操作。使用按钮。
使用屏幕 reader 时，我经常会调出 link 列表（JAWS 中的 Ins+F7）以查看我可以 link 到哪些页面。我还将调出一个按钮列表 (Ctrl+Ins+B) 以查看页面上可用的操作。我希望在我的按钮列表中出现模式对话框的操作。
<button>
将 <a href="#"> 更改为 <button> 并将事件处理程序放在上面。
关于元素属于哪里的更多上下文....
控件是否将我带到另一页？使用锚
如果在通过键盘或语音单击、点击或激活（或在此处插入新颖的交互方法）时，用户被快速转到另一个 URL（包括同一页面上的锚点），则使用<a href="[URL]">。确保你使用 href 属性并且它有一个真正的 URL，而不是“#”（否则你可能依赖于 JavaScript，这对于一个超链接）。如果 href 只指向一个“#”，那么你可能做错了。如果它指向一个命名锚点作为你渐进增强工作的一部分，那是完全有效的。
控件是否更改了当前页面上的某些内容？使用按钮
如果在激活时，用户没有从页面移动（或移动到页面内的锚点），而是呈现一个新视图（消息框、布局更改等），则使用一个<button>。虽然您可以使用 <input type="button">，但您更有可能与先前存在的样式和后续开发人员（例如我）发生冲突。
控件是否提交表单字段？使用提交
如果在激活时将用户输入的信息（通过手动键入或通过在屏幕上选择项目）发送回服务器，则使用 <input type="submit">。这最好住在 <form> 之内。如果您需要更多的样式控制或必须嵌入的不仅仅是简单的文本字符串，请改用 <button type="submit">。
键盘注意事项
想一想键盘用户。可以通过按回车键来触发超链接。但是可以通过按回车键或 space 栏来触发真正的按钮。当超链接获得焦点并且用户按下 space 栏时，页面将滚动一屏。如果没有更多内容可以滚动，那么用户什么也不会体验到。给定一组看起来相同的界面元素，如果一些元素使用 space 栏而另一些不使用，您就不能指望用户对页面的行为有多大信心。
我认为还值得一提的是，由 space 条触发的事件仅在释放按键时触发，而使用 Enter 键会在您按下按键时立即触发事件（在释放它）。