A user-friendly website ensures more happy visitors
Marlies Klooster, digital accessibility booster at the VNG, pointed us via LinkedIn to an interesting column on website usability in the Volkskrant. It made for a fun conversation. Time to take a look together at how digital accessibility, usability and a better user experience (user experience) go hand-in-hand.
When entering my date of birth, the calendar starts in March 2022. That will be clicking back 551 months.
Pfff... what a hassle!
"Clicking back 551 months". Jasper van Kuijk describes that frustration in his column. In an online form, he had to enter his date of birth. A date picker appeared. This one starts on "today". The first idea you get, to get to your date of birth, is to click back by month. Just until you get to the year and month you were born in. Hassle!
But is it really an accessibility problem? No. Not really at least. If we read the article, we don't immediately see a problem for this for the Web Content Accessibility Guidelines (WCAG).
Everyone should be able to enter the date of birth in their own way. Some visitors use a keyboard or assistive technology similar to this. Other visitors use a mouse, touch controls or control the computer by voice.
Most date pickers can be operated by mouse and "touch". Voice control is not always possible properly, mainly because such a dialogue box has a lot of different buttons. But it should be possible in principle.
What about keyboard users? No problem for them either. Jasper already writes that you can also type your date, even though it is not at all obvious.
Finally, I see that above the dialogue box there is an inconspicuous, light-grey bar (...) This bar says 'select date' and next to it a calendar icon. Secretly, it turns out you can also just type the date in this.
Jasper van Kuijk, Volkskrant
Poor user experience for everyone
A date picker for a birth date is annoying for everyone. It makes for a poor user experience for most people. A birth date always has the same form, which is fine for everyone to remember. So a date picker is "overkill". Or, as Jasper so nicely describes it, "the wrong interaction pattern".
"Dom date dialogue box" as used in the column.
For visitors with disabilities, this can be even more annoying, especially if the date picker is not read out or cannot be operated properly. It then all takes even more time to fill in the form. Simply typing the date of birth is then much faster.
All date picker problems listed
The column describes several problems. We list them for you:
"Select date" If you click in this inconspicuous bar with the misleading instruction, it turns out you can just type in a date after all.Go backwards/forwards by month No visual instructions on how to click backwards or forwards entire years. There are only arrows to switch between months.Month/year turns out to be clickable By clicking on the year, it turns out that you can go forward and back by year.Opens on today The date picker opens on "today" by default. This is not logical for a date of birth, especially if the form expects you to be at least 18 years old.Back to current date At the bottom there is also a link to go back to "today". This is only useful if you enter a date close to today, which is not the case with a birth date.
Accessibility issues in the date picker
But then, are there no WCAG problems at all with this date picker? Hard to say, because of course we have to make do with Jasper's nice column. From the article and the image of the date picker, we do extract the following (potential) problems:
Incomplete colour contrast of the date input field
Incomplete colour contrast of the current day (orange with white text)
A misleading instruction "Select date" when you can also type this
The lack of a visible label above the input field
If you adjust the spacing of words and letters to make them more legible, the instruction in the input field is completely unclear
In addition, there could still be technical problems in date picker. As a result, auxiliary software has difficulty determining what should or should not be read out. Often, auxiliary software does not know what the current day is. When you see the date picker, it is immediately clear because this day has a different style (e.g. colour).
User experience and accessibility go hand in hand
A good user experience (UX) designer or interaction designer takes into account the user experience of all users. Even the visitor who has some difficulty using the internet, for example due to a disability or age.
Digital accessibility and UX design work together to make your website (or app) more user-friendly for everyone. And more happy visitors means more conversions and a better image for your company or organisation. So investing in digital accessibility really pays off.
So in our research and consultancy sessions, we like to think along with the designer or builder. This will make your website even better. Digital accessibility is very important, but it should also just be pleasant for all other website visitors.
Digital accessibility training for UX designers
In our "Digital Accessibility for UX Designers" training course, you will get practical tips on how to ensure that your website or app actually provides an equal and enjoyable experience for all types of users.
The training course is perfect for UX designers, interaction designers, SEO and CRO specialists and marketers who work with their client to see how to get the most out of the website.
The training is full of "Ooo... that's why I do it" and "Aaah... is that so!". As you start looking at elements (like a date picker) just a little differently, you also start using them better. Or you end up choosing a much simpler alternative. That may not be as "fancy", but it is a lot more user-friendly.