Techiio-author
Started by Allen ScottNov 3, 2021

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

2 VIEWES 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 2 VIEWES SHARE

I've used a native html5 input date-picker in my code, it's working first-class for me so far(I'm the handiest concerned with approximately chrome and aspect). However I'm facing one trouble: I want a uniform manner to get admission to the date picker however I notice that in my date picker there's a date picker button(pseudo-element) which isn't reachable thru the keyboard, I attempted to put off the pseudo-detail by way of making its show none but then I lose the capability to open the pop-up calendar through the mouse.

We must press space to open via the keyboard because the icon is not handy through the keyboard.

We must click on the icon to open the calendar pop-up thru the mouse.

As in step with accessibility requirements if an element is available thru a mouse it has to be available utilizing the 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.

Anyone can help to solve 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>

1 Replies

Techiio-commentatorNurjaman Shekh replied a month ago0 likes0 dislikes

<input> elements of type="date" create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface.

HTML:

<label for="start">Start date:</label>

<input type="date" id="start" name="trip-start"

value="2018-07-22"

min="2018-01-01" max="2018-12-31">

CSS:

label {

display: block;

font: 1rem 'Fira Sans', sans-serif;

}

input,

label {

margin: .4rem 0;

}

You must be Logged in to reply
Techiio-logo

Techiio is on the journey to build an ocean of technical knowledge, scouring the emerging stars in process and proffering them to the corporate world.

Follow us on:

Subscribe to get latest updates

You can unsubscribe anytime from getting updates from us
Developed and maintained by Wikiance
Developed and maintained by Wikiance