Skip to content. Adrian Roselli Consultant, Writer, Speaker

All Posts Tagged: usability

Basic Custom Control Requirements

If you are working on a custom control, a complex widget, or a novel interface element to integrate into a project, library, or framework, there are some core features you need to build. These represent not just what works for users across the most contexts and preferences, but also what…

Posted:

Tags: accessibility, usability, UX

Under-Engineered Toggles Too

In my post Under-Engineered Toggles I showed you how to take a standard checkbox and use some CSS to style it to visually look like a toggle. That styling does nothing to change the semantics, nor should it. A checkbox is the default fallback for a switch role. It also…

Posted:

Tags: accessibility, css, html, usability, UX, WHCM

Maybe Ignore type=search

Another case of the headline saying it all. If you have a valid, accessible search field (with a useful, sensible label) then you can probably ignore type=”search” and use type=”text” instead. I made a code sample you can use for testing in your preferred set-up; it is what I used…

Posted:

Tags: accessibility, ARIA, browser, html, standards, usability, UX

Maybe You Don’t Need a Date Picker

Calendar controls, date pickers, date widgets, whatever you call them, however they are described, they follow the same basic principle — present the user with a calendar to enter a date (and sometimes a time). Chris Blakeley, CC BY-NC-ND 2.0 The native implementations come from browsers when authors use <input…

Posted:

Tags: accessibility, html, JavaScript, usability, UX

Link + Disclosure Widget Navigation

Early in 2017 I filed an issue against WAI-ARIA Authoring Practices (APG) requesting a change to the menu navigation pattern. Despite a great deal of feedback in agreement, it languished. In late 2017 I wrote Don’t Use ARIA Menu Roles for Site Nav and started actively campaigning against the APG…

Posted:

Tags: accessibility, ARIA, html, standards, usability, UX, WAI, WCAG

Group Labels Do Not Guarantee… Uniquity?

Heading this off early: uniquity uniq·​ui·​ty; \ yüˈnikwətē, -wətē, -i \Uniqueness; quality of being unique. There is a place where accessibility practitioners hang out and try to out-do each other with niche knowledge of nuance. While loitering in one, a question came up about text fields that have the same…

Posted:

Tags: accessibility, browser, Chrome, Edge, Firefox, Internet Explorer, Safari, usability, UX

Target Size and 2.5.5

TL;DR: Regardless of what accessibility conformance level you target, try to ensure that interactive controls are at least 44 by 44 pixels in size. Links in blocks of text are exempt. Overview In real life there is typically both a visual and tactile component to an interface. You have to…

Posted:

Tags: accessibility, standards, usability, UX, W3C, WAI, WCAG

A Model for WordPress Accessibility

I am going to propose a way to increase the overall accessibility of the WordPress ecosystem. It requires acknowledging some mistakes and using those as the base for building a better platform. I long for a world where a metric for featuring #WordPress themes and plugins in the repo is…

Posted:

Tags: accessibility, usability, UX, WordPress

Global Accessibility Awareness Day 2019

I kind of missed it this year. I was presenting at YGLF and was invested in the other talks, so my annual tweet thread of my accessibility posts since the previous GAAD did not come out on time. Instead I filled up timelines last night. Below are eight tweets with…

Posted:

Tags: accessibility, css, html, standards, usability, UX, WCAG

Selfish Accessibility — YGLF Vilnius

I (and the audience) survived my talk today. As our mutual reward, I offer my slides. All the links turned white onupload, so they are nearly impossible to read. I am sharing it now because you can at least hover over them or follow them, otherwise you might have to…

Posted:

Tags: accessibility, slides, standards, usability, UX, WCAG

Details / Summary Are Not [insert control here]

Once major browsers started supporting <details> & <summary> developers immediately started to play with them to see what sorts of patterns they could enhance or replace. This is a good thing. Experimentation pushes boundaries, improves understanding. However, we need to be careful of christening this new-to-us interaction as the solution…

Posted:

Tags: accessibility, ARIA, html, standards, usability, UX

Under-Engineered Toggles

Toggle buttons feel like a favorite way for devs and designers to show off their animation, design, and pun skills. There is even a Codepen collection dedicated to toggles. Other writings on toggle and switch patterns Toggle Buttons by Heydon Pickering, 31 March 2017 Building Inclusive Toggle Buttons by Heydon…

Posted:

Tags: accessibility, css, html, usability, UX, WHCM

Search icon Used in the search form as a button. Search icon Used in the search form as a button. Information icon Lower-case 'i' in a circle. Checkmark icon Symbol showing a checkmark. Alert icon Exclamation mark within a triangle.