让我们谈谈残疾按钮。具体来说，让我们了解为什么使用它们以及如何比HTML中的传统残疾属性（例如
在很多用例中，禁用按钮很有意义，我们将在片刻之内解决这些原因。但是在本文中，我们将研究一种表格，使我们可以在购物车中添加许多门票。
这是一个很好的基线示例，因为有一个明确的情况可以禁用“添加到购物车”按钮：当没有票可以添加到购物车中时。
防止人们采取无效或不可用的操作是我们可能接触到禁用按钮的最常见原因。在下面的演示中，只有在添加到购物车中的门票数量大于零时，我们才能添加门票。尝试一下：
请允许我跳过此演示中的代码说明，并将注意力集中在重要的内容上：“添加到购物车”按钮。
<button type="“" submit disabled> 添加到购物车 </button>
此按钮被禁用属性禁用。 （请注意，这是一个布尔属性，这意味着可以将其写入为禁用或禁用=“禁用”。）。
一切似乎都很好……那怎么了？
好吧，老实说，我可以在这里结束文章，要求您不要使用残疾按钮，因为它们很烂，而是使用更好的模式。但是，让我们变得现实：有时禁用按钮是最有意义的解决方案。
话虽如此，出于此演示目的，我们假装禁用“添加到购物车”按钮是最好的解决方案（扰流板警报：不是）。我们仍然可以使用它来了解其工作原理并提高其在此过程中的可用性。
我想澄清我的意思是可用的残疾按钮。您可能会认为，如果按钮被禁用，则不应该使用，所以……捕获量是多少？
忍受我。
在网络上，有多种与页面交互的方法。使用鼠标是最常见的之一，但是还有其他人，例如由于电动机障碍而使用键盘导航的视力人。
尝试仅使用选项卡键向前浏览上面的演示，然后将TAB Shift向后移动。您会注意到如何跳过禁用按钮。焦点直接从票务输入到“虚拟术语”链接。
让我们暂停一秒钟，然后回顾一下导致我们首先禁用按钮而不是实际完成的原因。
将“互动”与“点击”相关联是常见的，但是它们是两个不同的概念。是的， C舔是一种互动，但它只是悬停和聚焦等其他互动。
换句话说…
我们的目标是防止点击，但是通过使用残疾人，我们不仅可以防止点击，还可以防止焦点，这意味着我们可能会造成尽可能多的伤害。当然，这种行为似乎无害，但会引起混乱。认知障碍的人可能难以理解为什么他们无法集中按钮。
在以下演示中，我们对布局进行了一些调整。如果您使用鼠标，然后悬停在提交按钮上，则显示一个工具提示，以说明为什么禁用该按钮。那太棒了！
但是，如果您仅使用键盘，则无法看到该工具提示，因为该按钮不能专注于禁用。触摸设备也发生了同样的事情。哎哟!
请允许我再次跳过代码解释。我强烈建议您阅读Haydon Pickering的“包容性工具提示”和Sarah Higley的“ WCAG 2.1时代的工具提示”，以充分了解工具提示模式。
禁用属性与aria-disabled =“ true”相关。再次尝试使用以下演示，仅使用键盘。注意该按钮虽然被标记为禁用，但仍可以通过焦点访问并触发工具提示！
酷，是吗？这样的微小调整以进行重大改进！
但是我们还没有做到。这里的警告是，我们仍然需要使用JavaScript以编程方式进行单击。
elform.AddeventListener（'submist'，函数（event）{
event.preventDefault（）; / *防止本地表格提交 */
const isDisabled = elbuttonsubmit.getAttribute（'aria-disabled'）==='true';
如果（ISDisabled || issubmitting）{
//提早返回以防止票添加
返回;
}
ISSUBIMTITS = true;
// ...代码添加到购物车...
ISSUBINT = false;
}））您可能熟悉这种模式，以防止双击两次表格。如果您出于这个原因使用了禁用属性，我宁愿不这样做，因为在提交表单时，这会导致键盘焦点的暂时丢失。
您可能会问：如果ARIA-DISABLED默认情况下没有阻止单击，那么使用它有什么意义？为了回答这一点，我们需要了解两个属性之间的区别：
两者之间唯一的重叠是语义。这两个属性都会宣布该按钮确实是禁用的，这是一件好事。
与残疾人属性相反，ARIA-DISABLED与语义有关。 ARIA属性默认情况下永远不会更改应用程序行为或样式。他们唯一的目的是帮助辅助技术（例如屏幕读取器）以更有意义和强大的方式宣布页面内容。
到目前为止，我们已经讨论了两种类型的人，即点击的人和标签的人。现在，让我们谈谈另一种类型：使用视觉障碍的人（例如失明，低视力）使用屏幕阅读器来浏览网络。
使用屏幕读取器的人通常更喜欢使用标签键导航表单字段。现在，看看MacOS上的配音如何完全跳过禁用按钮。
再次，这是一种非常最小的形式。在更长的一个中，寻找不立刻的提交按钮可能会很烦人。想象一个表格，其中提交按钮被隐藏，只有在您完全填写表格时才可见。这就是某些人使用残疾属性时的感觉。
幸运的是，屏幕读取器并非完全无法实现禁用的按钮。您仍然可以单独浏览每个元素，最终您会找到按钮。
尽管可能，但这是一次烦人的经历。另一方面，屏幕读取器将正常并正确地宣布其状态。请注意，屏幕阅读器之间的公告略有不同。例如，NVDA和JWAS说“按钮，不可用”，但配音说“按钮，昏暗。”
我已经绘制了两个属性如何根据我们刚刚使用的工具创建不同的用户体验：
因此，这两个属性之间的主要区别是：
确认可访问性和可用性之间的细微差异很重要。可访问性是一个能够使用某些东西的人的衡量标准。可用性是对使用的容易程度的衡量标准。
鉴于这是可以禁用的？是的。它具有良好的可用性吗？我不这么认为。
如果我在本文中完成本文而没有向您展示我们的门票形式示例的真正包容解决方案，那我对自己感觉不好。只要可能，请勿使用禁用的按钮。让人们随时单击它，如有必要，将错误消息显示为反馈。这种方法还解决了其他问题：
老实说，我看不到残疾人属性完全是可访问性问题。我担心的更多是一个可用性问题。通过将残障属性与ARIA-Disabable交换，我们可以使某人的体验更加愉快。
这是我在网络访问性上的旅程中又一步。多年来，我发现可访问性不仅符合Web标准。处理用户体验是棘手的，大多数情况都需要在我们处理解决方案方面进行权衡和妥协。没有银色子弹以供完美访问。
我们作为Web创建者的职责是寻找并理解可用的不同解决方案。只有这样，我们才能做出最佳选择。假装问题没有任何意义。
归根结底，请记住，没有什么可以阻止您使网络更具包容性的地方。
还在吗？让我提到我认为值得的有关此演示的最后一件事：
在演示中，内容的两个部分动态变化：表单提交按钮和成功确认（“添加[x]票！”）。
但是，对于使用屏幕读取器有视力障碍的人来说，这些变化在视觉上被认为不是现实。为了解决它，我们需要将这些消息变成现场区域。这些允许辅助技术可以聆听更改并在发生时宣布更新的消息。
演示中有一个仅限SR类，它隐藏了包含加载消息的，但允许屏幕读取器宣布它。在这种情况下，将Aria-live =“自信”应用于，并且在提交表单并正在加载过程中后，它会保留有意义的消息。这样，我们可以向用户宣布表格正在工作，并在加载时要有耐心。此外，我们对形式的反馈元素进行相同的操作。
<button type="“提交”" aria-disabled="“" true>
添加到购物车
<span aria-live="“自信”">
</span>
</button>
<p aria-live="“自信”">
</p>请注意，即使该元素还没有任何消息，辅助技术可能无法正常工作，因此ARIA-LIVE属性也必须从DOM中存在。
还有更多关于这个小小的Aria-live属性及其所做的大事情的信息。也有陷阱。例如，如果不正确地应用它，则属性可能弊大于利。值得一读IRE Aderinokun和Adrian Roselli的“使用Aria Live”的“使用Aria-Live”，以更好地了解其工作原理以及如何使用它。
这是我在网络周围看到的替代性（和不正确的）实现。这使用指针事件：无；在CSS中，以防止单击（没有任何HTML属性）。请，不要这样做。这是一支丑陋的笔，有望证明原因。我重复一遍，不要这样做。
尽管CSS确实确实阻止了鼠标点击，但请记住，它不会阻止焦点和键盘导航，这可能导致意外的结果，甚至更糟的是错误。
换句话说，使用此CSS规则作为防止点击的策略是毫无意义的（明白的？）。 ）
以上是使残疾按钮更具包容性的详细内容。更多信息请关注PHP中文网其他相关文章！
