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…
If you attended my pre-recorded remote CSUN 2020 talk, then this talk will be familiar. I updated with the latest browsers, since February was six Chrome and nine Firefox versions ago. This talk was also only fifteen minutes, so I cut the videos and some other materials. Go check the…
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…
HTML has all sorts of built-in features that, when used correctly, are accessible, will localize, and which just work. For example, if I want a button, I use <button>, and a screen reader will announce it as button. For users in other languages, they will hear whatever is their word…
I have often remarked that my blog is little more than a place for me to offload my memory. I need not remember the syntax, logic, test results, etc. of every control, widget, style, browser, and so on. I can just write a post and refer to it later. This…
TL;DR: for standard HTML controls and standard ARIA patterns (widgets), you do not need to add instructions for screen readers on how to use them nor what they are. When a screen reader encounters an element on the page that invites interaction beyond reading, it typically provides users with instructions…