No Style Design System
Adam Silver’s collection of accessible form-related components – a companion to his book Form Design Patterns – is a brilliant reference.
How to build an accesssible autocomplete
At work there are plans afoot to reconcile various differing Autocomplete implementations into a single, reusable component. So far there’s been a written audit presenting all instances and how they differ in functional and technical respects. There’s also been design work to identify visual commonalities and avoid future inconsistencies. I’d now like to add another perspective: an investigation into which HTML materials and (if necessary) ARIA supplements are appropriate to ensure we build something accessible and resilient.
Custom multi-checkbox and multi-radio controls
Our Design System team has recently received “new component requests” for some custom filtering controls. These look like custom-styled
<select>s however their “options” appear more like checkboxes and radio buttons. I think the inspiration was Carbon Design System’s Dropdown component and the idea is to bring consistency to filtering controls in forms. Although it’s not yet time to fully explore this and make a yay/nay decision on the request, I’ve been doing some initial thinking.
Simple input[type=range] styling, by Ana Tudor
Ana demonstrates how to achieve a range slider effect accessibly, using web standards and without needing to reach for libraries.
A better birthday input, by Vitaly Friedman
I recently signed up to Vitaly from Smashing Mag’s Smart Interface Design Patterns newsletter. This latest edition regarding “date of birth” inputs was interesting, and well timed as my work colleagues and I are about to revisit our form patterns. It’s a nice explainer on why we should approach UI for dates the user knows differently from UI for dates the user will choose.
The accessibility of conditionally revealed questions (on GOV.UK)
Here’s something to keep in mind when designing and developing forms. GOV.UK’s accessibility team found last year that there are some accessibility issues with the “conditional reveal” pattern, i.e. when selecting a particular radio button causes more inputs to be revealed.
How-to: Create accessible forms - The A11Y Project
Here are five bite-sized and practical chunks of advice for creating accessible forms.
- Always label your inputs.
- Highlight input elements on focus.
- Break long forms into smaller sections/pages.
- Provide error messages (rather than just colour-based indicators)
- Avoid horizontal layout forms unless necessary.
Inclusive Datepicker (by Tommy Feldt)
A human-friendly datepicker. Supports natural language manual input through Chrono.js. Fully accessible with keyboard and screen reader.
Sign-in form best practices (on web.dev)
Sam Dutton advises how to use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use.
HTML attributes to improve your users’ two factor authentication experience (Twilio
In this post we have seen that with just a sprinkling of HTML attributes we can improve the login experience for our users, particularly on mobile devices.
HTML: The Inaccessible Parts (daverupert.com)
Here’s Dave Rupert, frustratedly rounding up the accessibility shortfalls in browser implementations of native HTML elements.
I’ve always abided in the idea that “HTML is accessible by default and then we come along and mess it up”. But that’s not always the case. There are some cases where even using plain ol’ HTML causes accessibility problems.
Why the GOV.UK Design System team changed the input type for numbers (Technology in Government)
<input type="text" inputmode="numeric" pattern="[0-9]*">(instead of
<input type="number") allows for a degree of separation between how the user enters data (“input mode”), what the browser expects the user input to contain (type equals number), and potentially how it tries to validate it.
Design Better Forms (UX Collective)
As Andrew Coyle says, “Life is short. No one wants to fill out a form.”. Here, he presents a number of form design tips to make the user experience more bearable and increase completion rates.
Styling a Select Like It’s 2019 (Filament Group, Inc.)
Recently, we’d seen some articles suggest that things haven’t changed a great deal with select's styling limitations, but I decided to return to the problem and tinker with it myself to be sure. As it turns out, a reasonable set of styles can create a consistent and attractive select across new browsers, while remaining just fine in older ones too.
See all tags.