Data tables need column headers. Monolitten, a granite column of humans (each with a head) at Vigelandsanlegget, a sculpture park in Frognerparken in Oslo, Norway. What they probably do not need is a new set of column headers every few rows, particularly not when they change the meaning of the…
This post serves no purpose other than to demonstrate the fidelity of screen readers when announcing non-emoji Unicode characters when using default settings. There is no judgment on which is correct. This is simply for reference. I grabbed the following tweet and recorded it across common screen readers (WordPress ate…
The title of this post is pretty specific. It relates to the meme on Twitter where users identify a trait or preference that they see as problematic, and identify it as a red flag. The emoji represents the red flag. For example: A stylized red flag Blaming Screen Readers 🚩🚩🚩🚩🚩…
Both Chrome and Firefox support XPath searches when in the DOM view of their dev tools. Because the browser cleans whatever HTML it encounters (closing tags, correcting nesting), XPath can operate on the code as XML. Simple checks like finding a unique ID value can result in multiple hits in…
Outline: Feature Queries Proprietary, or Internet Explorer Only Standards Track, or Edge Only Frankenquery’s Monster System Colors CSS2 System Color Keywords WHCM Proprietary Feature Query Color Mappings CSS4 System Color Keywords Browser Support Internet Explorer Legacy Edge (Ledgacy) Chromium Edge (Chromiedge) Firefox Chrome Examples Backgrounds Inline SVGs SVGs via <img>s…
Update In early July 2022 I re-tested these to see how the results shaped up after nearly two years and at least one promise: It’s Mid-2022 and Browsers (Mostly Safari) Still Break Accessibility via Display Properties If the title is not clear, one browser stands out in failing to address…
Relying on images that come from CSS has always been risky from an accessibility perspective. CSS background images, in particular, must either be purely decorative or be described to the user in some way. The risk is no different for images coming from CSS generated content using content: url(foo.gif) (typically…
Creating an accessible dialog on the web is trickier than it should be. Lack of support for the <dialog> element, the need for fundraisers to get inert into WebKit, inconsistent support for the ARIA dialog role, and other annoyances make them problematic. Scott O’Hara has spent a few years covering…
The <dl> has existed since HTML+, or 1993, when it was called definition list. VoiceOver on iOS has existed since 2009, when it was introduced with the iPhone 3GS. Neither VoiceOver on iOS nor iPadOS had support for this core feature of HTML that was in existence for 16 years…
Update, 15 September 2020: Microsoft put together a more formal announcement at Introducing Source Order Viewer in the Microsoft Edge DevTools. It has some video examples and instructions to enable it. Edge 86 has introduced a feature that shows the source order of a page. You can read more about…
In early March, Steve Faulkner shared this nugget for making sub-headings: 👉If you want to semantically identify a heading subtitle, look no further than role="doc-subtitle" w3.org/TR/dpub-aria-1.0/#doc-subtitle #HTML #ARIA #WebDev pic.twitter.com/uaHcVRp6oz Steve Faulkner (@stevefaulkner) March 7, 2020 On its surface it looks pretty handy. Handy enough that Chris Ferdinandi wrote about…
Don’t tell anyone. This may be a secret. But I am really excited, as no person should ever be over something this mundane. Check this out (and then read on for what is happening here): The alt text gives it away, but look in the lower right corner. In the…