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

user_16816388 0
Viewed 498

I have used a native html5 input date-picker in my code, It's working fine for me so far(i am only concerned about chrome and edge). But I am facing one issue: I want a uniform way to access the date picker but I notice that in my date picker there is a date picker button(pseudo-element) which is not accessible via keyboard, I tried to remove the pseudo-element by making its display none but then I lose the functionality to open the pop-up calendar via mouse.

  • we have to press space to open via the keyboard as the icon is not accessible via the keyboard.
  • we have to click on the icon to open the calendar popup via mouse.

As per accessibility standards if an element is accessible via mouse it should be accessible by keyboard too. so I need a work-around that.

I am looking for one of the following solutions - (any one of them will work)

  1. Making the date icon accessible by keyboard.

  2. Removing the date icon and making the calendar popup via mouse click instead of clicking on the icon.

Does anyone know the solution to this issue?

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

accessibility datepicker css html javascript
1 Answers

You are using a native element, so by definition, there is no unique solution, since every browser can implement it differently.

This is both the advantage and the disadvantage of native elements. If it's accessible, it's the best; if it isn't accessible, it's in fact not your responsibility to fix it, but rather that of browser implementers.

If you try to fix the accessibility of the component in a given environment, you have great risks to create problems on other environments where you haven't tested your fix. You normally shouldn't try to interfer with the internal working of native elements beyond what you can configure in standard. By the way, the inaccessible button you have fund may even not be reachable in standard DOM and may thus be totally unable to do anything about it.

If you want to have full control, you will need to implement your own date picker. Keep in mind, though, that your own solution is generally going to be less accessible than a native one.

IN general, native components are more accessible and their behavior is adapted to the running platform. Iif they currently aren't accessible, they are supposed to improve over time without the need for you to update your code. This is why you normally should always prefer native components over any home made or library provided components. Using native components is in principle a long term win, both for you and for users.

user_19712160
Related