如何通过键盘和鼠标访问输入[type="date"]？

Question

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

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

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

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

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

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

<!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>

Answer 1

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

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

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

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

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

如何通过键盘和鼠标访问输入[type="date"]？

How to make input[type="date"] accessible via keyboard and mouse?

javascript

html

css

datepicker

accessibility