Skip to content.
Adrian Roselli
Outsourced Machine Learning Tool-Set VRML

All Posts Tagged: usability

My WebAIM 10th SR User Survey Takeaways

A rambling collection of thoughts from reading through the WebAIM Screen Reader User Survey #10 Results. Most of this was in a Masto thread, but I opted to post it here so I can laugh at myself later. Disability This opening nugget is important for understanding some of my commentary:…

Posted:

Tags: accessibility, rant, usability, UX

Don’t Disable Form Controls

Just another usability and accessibility pro telling authors not to do the thing they continue to do. It’s Ok to Disable Buttons There are plenty of cases where you want to disable a button until a user takes a conscious action to enable it, such as when launching nuclear missiles.…

Posted:

Tags: accessibility, pattern, rant, usability, UX

Embed Slides, YouTube Videos, and More

There are plenty of use cases for embedding third-party content on a site, as well as local content that may not be in HTML. Perhaps you gave a talk and want to share your slides. Sometimes you want to reference a video that exists only on YouTube. Maybe you have…

Posted:

Tags: html, pattern, usability, UX

AD Support in HTML Video

This post supplements Browser Video Players Review. There I wade into the de facto accessibility of the <video> element based on the default video players provided by browsers. The results of my testing here update the tables in that post. One of the primary challenges of using the browsers’ default…

Posted:

Tags: accessibility, browser, css, html, mobile, standards, usability, W3C, whatwg

Media Queries in HTML Video

Before you get too far into this post, maybe read Browser Video Players Review. There I wade into the accessibility of the <video> element based on the video players browsers provide. Then maybe read Scott Jehl’s How to Use Responsive HTML Video (…and Audio!). I am leaning on support in…

Posted:

Tags: accessibility, browser, css, html, mobile, standards, usability, W3C, whatwg

Øredev 2023: Under-Engineered Patterns

Download a 2.6MB tagged PDF of my slides or try the embedded view if your browser displays PDF inline. I was invited Malmö, Sweden to present two talks at Øredev. Well, they asked me to do one but then suggested that hey, since I’m already there and stuff, how about…

Posted:

Tags: accessibility, browser, css, html, slides, speaking, usability

Don’t Turn a Table into an ARIA Grid Just for a Clickable Row

Again, title says it all. However, there is an equally bad opposite approach you might be tempted to use, so let me clarify: Don’t use ARIA grid roles simply to make rows clickable in a table, and Don’t put click handlers on table rows (<tr>s) to make them clickable. Step…

Posted:

Tags: accessibility, ARIA, html, tables, usability

Splitting within Selects

The native HTML <select> is renowned for its styling limitations. Even with control over the closed state and trigger appearance, the options themselves are still defined primarily by the browser and the OS. While I think this is generally fine (preferred, even), the <selectlist> (nee <selectmenu>) hopes to change that.…

Posted:

Tags: accessibility, browser, Chrome, Firefox, html, Safari, standards, usability, whatwg

Where to Put Focus When Deleting a Thing

TL;DR: When deleting something you should generally move focus to the prior equivalent control or its grouping container. Why This Is a Thing Plenty of user interfaces let users delete things that are on the screen. It may be an extra address, a calendar item, a message (the same as…

Posted:

Tags: accessibility, JavaScript, pattern, usability, UX

Styling Links and Buttons

I made a tutorial for styling links and buttons, something which many developers have struggled with (resulting in links used as buttons and buttons used as links). I have embedded it on this page, but if you are coming in with your RSS reader you can visit the tutorial directly…

Posted:

Tags: css, html, usability

Progressively Enhanced HTML Accordion

Does what it says on the tin. Uses <details> and <summary> with a bit of ARIA to create an accordion that works without JavaScript while working better with JavaScript. Mostly. See the Pen Progressively Enhanced HTML Accordion by Adrian Roselli (@aardrian) on CodePen. Visit the standalone version for testing or…

Posted:

Tags: accessibility, ARIA, css, html, JavaScript, pattern, print, usability, UX

Blockquotes in Screen Readers

TL;DR: This post does not assert the correct way to code blockquotes, it will only demonstrate how screen readers announce some existing patterns. Test Details The first four examples are lifted from WHATWG HTML’s <blockquote> entry. The next three are from W3C HTML’s 2019 <blockquote> guidance (the W3C HTML spec…

Posted:

Tags: accessibility, html, standards, usability, W3C, whatwg