Skip to content.
Adrian Roselli
Decentralized Algorithm Overlay sFTP

All Posts Tagged: html

The 411 on 4.1.1

There is a non-zero chance that WCAG Success Criterion 4.1.1 Parsing will go away in WCAG 2.2. This isn’t a problem for users, regardless of the problems it may pose for the WCAG process, ACT rules, automated testing tools, or ossified testing processes. The joke here is using an antique…

Posted:

Tags: accessibility, ARIA, html, standards, W3C, WAI, WCAG

Brief Note on Description List Support

TL;DR: Description list support is generally good (with Safari being the outlier), even if you may not like how it is supported. This post builds on my 2020 tests when iOS 14 finally added (partial) support for description lists (VoiceOver on iOS 14 Supports Description Lists). The <dl> has existed…

Posted:

Tags: accessibility, html, standards

Web Development Advent Calendars for 2022

It’s a dice advent calendar. I have no idea how five Platonic Solids and some D10s will carry for 24 days, but I am going to find out. Web developers around the world have for years given a nod to Saturnalia solstice Isaac Newton’s birthday Yule wassailing mummering end of…

Posted:

Tags: accessibility, css, design, html, internet, standards, UX

Brief Note on Super- and Subscript Text

Thanks to a conversation on the A11y Slack, I ran desktop browsers and screen readers through a test to see how they announce content marked up as superscript and subscript. I spun up an old demo from mid-2018 for a quick test: See the Pen HTML Buddies: sub & sup…

Posted:

Tags: accessibility, Firefox, html, JAWS, VoiceOver

Conveying All-Caps Legal Text

I need your help. Legal documents are common on the web. Each site that has a Terms of Service written in impenetrable and indecipherable legalese, like this sentence, delights in that complexity to dissuade users from reading it and realizing just what they are giving up. “Am”, “add”, and “it”…

Posted:

Tags: accessibility, html, law, usability, UX

Brief Note on Calendar Tables

If you build calendars on the web and abbreviate the days in the column headings (you do use column headings, yeah?), this is how it sounds to a JAWS user. Sorry, your browser doesn’t support embedded videos, but don’t worry, you can download it. The caption file is also available…

Posted:

Tags: html, tables

Irrational Headings

For years developers have been confused about, fought over, ignored advice on, and generally mis-treated headings. It has bordered on irrational. But let’s look at some actual irrational headings. <hφ> <hφ> corresponds to a heading at roughly level 1.618033988749…. This represents the Golden Ratio and is handy for identifying a…

Posted:

Tags: html

Brief Note on Dismissing Selects and Listboxen

Native controls can be different from their roled-up ARIA equivalents in a variety of ways. For example, an expanded native HTML <select> on mobile behaves differently when the dismiss gesture is used than when the same gesture is used with an expanded ARIA listbox. Using Android with TalkBack, a down-then-left…

Posted:

Tags: ARIA, html, mobile, touch, usability, UX

It’s Mid-2022 and Browsers (Mostly Safari) Still Break Accessibility via Display Properties

It was late 2020 when I last tested how browsers use CSS display properties to break the semantics of elements. I had been waiting for Safari to fix how it handles display: contents for four years now, and was excited when the announcement came in June. Then I started testing…

Posted:

Tags: accessibility, browser, Chrome, css, Firefox, html, Safari, tables

Use Legend and Fieldset

It’s 2022 and people are still afraid to use <fieldset> and <legend>. I understand the layout challenges can be frustrating, but swapping to an ARIA group role will result in a more inaccessible experience. A Solution Try this: <fieldset> <legend>Choose</legend> <div aria-hidden=”true”>Choose</div> […] </fieldset> legend:not(:focus):not(:active) { position: absolute; overflow: hidden;…

Posted:

Tags: accessibility, ARIA, html, standards

A “Best viewed with…” Gag

I made some pointless things again. The First One See the Pen Best viewed in… by Adrian Roselli (@aardrian) on CodePen. A spinning box for each word is not exactly a compelling interface element, I admit, but I based it off this old tweet that was sitting around in a…

Posted:

Tags: browser, css, html