Adrian Roselli

On paper, <datalist> is great but as implemented (or not) in all browsers, it has issues. This post walks through an example of using the element but also summarizes issues (as of June 2023): Under-Engineered Comboboxen? https://adrianroselli.com/2023/06/under-engineered-comboboxen.html

Looks like the sibling comment is correct and that <dialog> a11y has improved recently: https://adrianroselli.com/2020/10/dialog-focus-in-screen-readers.html#… I still would be careful using it! MDN has a section on accessibility considerations: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#acces… The W3C also has a pretty great set of examples of how to make complex widgets like dialogs accessible (not that a11y is just a checklist): https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/

I don't see any issues with this particular code (although for larger sizes, there may be an accessibility issue related to zooming). In general, I would recommend avoiding the use of vw-only units because the computed value may not change with zoom. I learned this from https://adrianroselli.com/2019/12/responsive-type-and-zoom.html

Although, as the article correctly points out, omitting the HTML tag is technically fine, there is one rather important argument for its inclusion: it can and should have a LANG attribute: <html lang=en-GB> It's not verbose after all, and IIUC may be omitted if and only if the document is served with corresponding information in `Content-Language:` HTTP header, but nasty (or rather annoying) things may happen if that fails [1], so when it comes to "right HTML", following this advice sounds reasonable. [1] https://adrianroselli.com/2015/01/on-use-of-lang-attribute.html

A great little front-end project for generating these numerals: https://adrianroselli.com/2021/02/cistercian-svg.html

In 2026, you can avoid the bad parts. > Let's start with the basics: if you write`font-size: 16px`then `16px` is the size of what? Sadly, the answer is "nothing in particular" -- this is a size of a virtual box around the glyph, but the box isn't tight, and the size of the glyph varies, depending on the font. Luckily, `font-size-adjust` property can fix it, and make `font-size` consistent across fonts. All modern browsers default to 16px, but for accessibility and sanity reasons, we shouldn't use pixels. By default, 16px = 1rem. You don't need to declare it; it just is. See "The Ultimate Ideal Bestest Base Font Size That Everyone Is Keeping a Secret, Especially Chet" - https://adrianroselli.com/2024/03/the-ultimate-ideal-bestest-base-font… > Can you just set `font-size: 18px`or whatever works best for your chosen font? I think the answer is yes, but there are some caveats to keep in mind. If you want to manually increase the base size, using relative units is the answer: `html { font-size: 1.125rem }`. Since by default, 1rem = 16px, 1.125rem is 18px. > Setting `font-size` in your CSS disables that second approach. Setting `font-size` in pixels disables changing the browser's default size; works fine with relative sizes. If the goal is not having to learn the intricacies of CSS, just use the built-in type scale: | CSS absolute-size values | xx-small | x-small | small | medium | large | x-large | xx-large…

When I checked in 2024 or 2025, Windows Narrator announced it differently in Chrome, Firefox, Edge (Chromium mode) and Edge (IE mode), and none of them worked how I would expect them to. Adrian Roselli's verdict (https://adrianroselli.com/2025/01/updated-brief-note-on-description-li… > Description list support continues to be generally good (with VoiceOver still the outlier), even if you may not like how it is supported. You shouldn't try to fix this kind of thing by mangling the HTML, since (1) users tend to be used to their screen reader's quirks, and (2) in situations like these, making it juuuust right in one screen reader is likely to make it incomprehensible in another. But it is important to be aware of these quirks, so you don't accidentally design an interface that relies on less-quirky behaviour.

Here's a useful note on how well screen readers support DL: https://adrianroselli.com/2025/01/updated-brief-note-on-description-li…

The issue is if you do want the element to appear in the tree. If the element has semantic meaning it can mess things up. Adrian Roselli is an accessibility expert who has done extensive testing and written up his findings: https://adrianroselli.com/2022/07/its-mid-2022-and-browsers-mostly-saf…

There are absolutely accessibility issues https://adrianroselli.com/2022/09/brief-note-on-super-and-subscript-te…

a11y = accessibility https://adrianroselli.com/2016/11/a11y-accessibility.html

Sadly it's now part of CSS. Thanks, Google. https://adrianroselli.com/2025/05/my-request-to-google-on-accessibilit…

When I say I don't deal with overlays, and I refuse, I think they're a scourge. They want to help businesses by not getting sued, but they don't want to help us, the community, in any way. Audio eye threatened to sue someone who was in the process of exposing them, for defamation. https://adrianroselli.com/2023/02/audioeye-will-get-you-sued.html

Hey browser makers, can we please be able to style the datalist dropdown? Also: https://adrianroselli.com/2023/06/under-engineered-comboboxen.html

This has been tried and doesn't work, which doesn't mean it will never work in the future! There are a few companies offering solutions in this space, but they don't work, are often worse than the problems they're trying to solve and are a privacy disaster. The companies peddling them often engage in shady business practices, like falsely claiming that their overlays can protect you from ADA lawsuits[1], while actually suing the people who expose their lies[2]. Most accessibility practitioners and disabled users themselves are warning the public to avoid those tools[3]. [1] https://adrianroselli.com/2020/06/accessibe-will-get-you-sued.html [2] https://adrianroselli.com/2023/05/audioeye-is-suing-me.html [3] https://overlayfactsheet.com

Someone's on it already (but maybe there's room for competition, if https://adrianroselli.com/2020/06/accessibe-will-get-you-sued.html is any indication): https://accessibe.com/accesswidget/artificial-intelligence

Typically you’d want to toggle aria-expanded to give more hints to users as to what’s actually happening. You also can’t trap focus into the menu purely with CSS, at a minimum you’ll need to use some JS to set an inert attribute. More info / examples here: https://adrianroselli.com/2023/03/css-only-widgets-are-inaccessible.ht…

Referenced in that article is: https://adrianroselli.com/2019/04/details-summary-are-not-insert-contr… Which says JavaScript is required and simplest solution for building this menu. It also states to try to avoid them when possible.

I believe the details/summary tag has most of the builtin behaviour one would expect of a hamburger menu, but those are usually unfortunately not well supported by common browser accessibility tools. https://adrianroselli.com/2019/04/details-summary-are-not-insert-contr…

This looks like a nice way to add some features to your website. But to all reading: Overlays are NOT the way to make your website accessible. They frequently do not work as intended, and sometimes even harm accessibility [0]. One particular overlay was so bad that it got sued under the ADA [1]. Unfortunately the only way to make your website accessible is to put in the work to make sure it complied with the standards. There’s lots of resources online for this. See [2] as a starting point. [0] https://adrianroselli.com/2022/09/overlays-underwhelm-at-id24.html [1] https://adrianroselli.com/2022/03/faciliti-will-get-you-sued.html [2] https://www.accessibilitychecker.org/guides/wcag/

There are multiple reasons why details/summary are bad semantics, outlined in this article: https://adrianroselli.com/2019/04/details-summary-are-not-insert-contr…

https://adrianroselli.com/2018/01/improving-your-tweet-accessibility.h… Unfortunately, this way of "styling" the text causes problems, so much so there are solutions to remedy this: https://twitter.com/MathAbuse

AccessiBe itself is rather shady [1], so it isn't really surprising to see them on the list. [1] https://adrianroselli.com/2020/06/accessibe-will-get-you-sued.html

The TLD surprised me, I didn't know you could request one. The article I found that covers off on purchasing (leasing?) a TLD ironically used Google as an example. The article is from 2011. "The process itself may be relatively straightforward. ICANN will make applications available (get the May 2011 draft of the Applicant Guidebook) from January 12, 2012 through April 12, 2012, giving companies time to develop a marketing plan and come up with justification to pay the $185,000 application fee and, if approved, the annual $25,000 fee. " Source: http://adrianroselli.com/2011/06/make-your-own-tld-i-want-bacon.html

I wasn't under the impression it is a W3C site, for all I know it is AI generated and looks it to me. But, there are other blog posts I've coming across where this is discussed and that site did outline my point well enough which is changing norms like this can be hard for screen reader users who need to adapt to <a>, <button> and <button action> being controls performing very similar if not overlapping behaviour. Currently these changes in norms happen because developers use links as buttons and buttons as links which can create confusion for the screen reader user / visual user who expects certain behavior based of the visual presentation of the control. Making button[action] standard in HTML codifies that behaviour though doesn't it? I get that you are trying to effectively solve this problem, but it isn't so easy when this group of people are more reliant on norms. Maybe they would embrace a solution here if they were engaged with is all. - https://adrianroselli.com/2016/01/links-buttons-submits-and-divs-oh-he… - https://adrianroselli.com/2023/08/styling-links-and-buttons.html - https://karlgroves.com/links-are-not-buttons-neither-are-divs-and-span…