如何通过键盘和鼠标访问 input[type="date"]？答案

【问题标题】：How to make input[type="date"] accessible via keyboard and mouse?如何通过键盘和鼠标访问 input[type="date"]？
【发布时间】：2021-11-03 07:44:41
【问题描述】：

我在我的代码中使用了原生 html5 输入日期选择器，到目前为止它对我来说工作正常（我只关心 chrome 和 edge）。但我面临一个问题：我想要一种统一的方式来访问日期选择器，但我注意到在我的日期选择器中有一个无法通过键盘访问的日期选择器按钮（伪元素），我试图通过使其显示不显示来删除伪元素然后我失去了通过鼠标打开弹出日历的功能。

我们必须按空格键才能通过键盘打开，因为图标无法通过键盘。
我们必须点击图标才能通过鼠标打开日历弹出窗口。

根据可访问性标准，如果一个元素可以通过鼠标访问，那么它也应该可以通过键盘访问。所以我需要解决这个问题。

我正在寻找以下解决方案之一 - （其中任何一个都可以）

使日期图标可通过键盘访问。
删除日期图标并通过鼠标单击而不是单击图标弹出日历。

有人知道这个问题的解决方法吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DatePicker</title>
    <style>

    </style>
</head>
<body>
    <label for="mydate">DOB:</label>
    <input type="date" id="mydate">
</body>
</html>

【问题讨论】：

tab 到条目并按空格将打开日期选择器
是的，按空格键会打开它，但由于有一个图标是一个吸引人的元素，它也应该可以通过键盘访问，但事实并非如此。
@AbhishekTomar 您可以使用左右箭头键在日、月和年之间移动。然后上下选择正确的。
是的，问题是没有统一的方式打开弹出日历，我们必须点击日历图标或空格键，它不符合可访问性标准我想要一个统一的方式鼠标和键盘都可以，但无法通过键盘访问图标。
@AbhishekTomar “有一个图标，它是一个交互式元素，它也应该可以通过键盘访问”。确保您完全理解 WCAG 2.1.1。该成功标准不是说每个元素都必须是键盘可访问的，而是“所有功能”都是键盘可访问的。如果该图标用于显示日历但不能通过键盘聚焦，但您也可以通过在日期部分之一上按空格键来显示日历，则功能 IS 可访问.

标签： javascript html css datepicker accessibility

【解决方案1】：

您使用的是本机元素，因此根据定义，没有唯一的解决方案，因为每个浏览器都可以以不同的方式实现它。

这既是原生元素的优点也是缺点。如果可以访问，那是最好的；如果它无法访问，实际上修复它不是你的责任，而是浏览器实现者的责任。

如果您尝试在给定环境中修复组件的可访问性，则在您尚未测试修复的其他环境中创建问题的风险很大。通常，您不应尝试干扰本机元素的内部工作，超出您可以在标准中配置的范围。顺便说一句，你有资金的不可访问按钮甚至可能在标准 DOM 中无法访问，因此可能完全无法对其做任何事情。

如果您想要完全控制，您需要实现自己的日期选择器。但请记住，您自己的解决方案通常比本地解决方案更难访问。

一般来说，原生组件更易于访问，并且它们的行为适应运行的平台。如果它们目前无法访问，它们应该会随着时间的推移而改进，而无需您更新代码。这就是为什么您通常应该始终更喜欢原生组件而不是任何自制或库提供的组件。原则上，使用原生组件对您和用户来说都是长期的胜利。

【讨论】：