A feed of the latest posts from our blog.
The problem A strange issue was reported last week: in place of a favicon in Google search results for our website, an empty white circle showed instead. My first thought was that something was wrong with the favicon file, or that Google couldn't find it. This couldn't be the case, though -- the favicon still showed up in other search engine results, and I remembered that when Google couldn't find…
Today, I was working on adding some standard formatting and linting to a repo. I didn't want the git history to look like I touched these files, so I chose to associate the changes with a bot account to make things cleaner. I did this by updating my git name and email address prior to committing the changes. git config user.name "Botty McBotFace" git config user.email "BottyMcBotFace@gmail.com" If…
Really Simple Syndication (RSS) is a 25 year old technology that helps you keep track of when websites publish new content. A lot of websites have RSS feeds, and sometimes even social media profiles have RSS feeds. If you aren't familiar with either of these, it's likely that you've encountered RSS feeds in a different form: podcasts. RSS readers Your favorite podcast app is essentially what we'd…
Dark mode has evolved from a trend in the 2010s to a standard in the 2020s. Is it more or less accessible than the standard "light mode"? What does WCAG say about text contrast? There are two WCAG success criteria that correspond with text contrast. SC 1.4.3 Contrast (Minimum) is a Level AA success criteria that recommends a contrast level of 3:1 for normal text, and 4.5:1 for large text. This…
This is a list of accessibility resources that I find helpful. General These are one-size-fits-all resources that have a bunch of information about a lot of different things. A11Y (Accessibility) Project Stark's Accessibility Library Inclusive Web Design Checklist TPGi's ARC Knowledgebase (paid) Specialist blogs These are more specific resources that do detailed deep dives on really focused…
When preparing for the IAAP CPACC exam, I came across a video where a speaker posited that an accessible version of a design could look exactly the same as a non-accessible version of a design. I'd agree to a certain extent: I think that we can make designs more accessible by making certain markup choices. But after a design is fleshed out, there's only so much that we can do to make something…
I've only learned about (and started championing) progressive enhancement in the past couple of years, but I get the impression that it was something that used to be far more common than it is today. It seems that the principles that progressive enhancement were built on top of—making sure that all users can use the core functionality of your site, regardless of their connection and browser— are…
I got a question from a coworker a few weeks ago. They received feedback that a screen reader user was having trouble navigating one of the pages on our site. They asked if I could advise on any issues that they weren't able to figure out, and then they asked something like this: We aren't sure how to test these updates on our own. Are there any tools you could share with us? I arrived at a simple…
The buttons vs. links debate is so prevalent in the accessibility community that it's almost a joke at this point. Articles like H. Locke's Links vs. Buttons go into a lot of details about some of the issues that come about when styling links as buttons (and vice versa). It all comes down to the matter of what the user expects when they see the element on the page. Rather than trying to solve this…
Progressive enhancement is a development approach, not a technology choice. — What is progressive enhancement and why should you care? This graphic was originally included in The power of progressive enhancement by Andy Bell. The user's experience doesn't always have to look the same if it achieves the minimum viable product. A skateboard may be less efficient than a motorbike, but at least it…
Imagine a React component that renders a dialog. import { createPortal } from 'react-dom' ; function Dialog ( { isOpen , handleClose , ... props } ) { if ( ! isOpen ) return null ; return createPortal ( < div role = " dialog " { ... props } /> , document . body ) ; } An important part of any dialog component is focus management. When the dialog opens, we want to either focus the role="dialog"…
On the bbb.org search, we have a toggle for showing only BBB accredited businesses. When the toggle button is clicked, the search results automatically reload. I was working on rebuilding the HTML/CSS for this component, and wanted to consider an experience for when JavaScript failed to load. The first idea that came to mind was using a checkbox. This could be toggled on and off regardless of…
1. Use self-descriptive labels As sighted users, we have the benefit of seeing the text and imagery surrounding every link on the page. A link that says only "read more" makes sense to us, because we can see the text above it. Users of assistive technology do not always browse this way. Screen reader users, for example, often traverse a page by viewing all of the links on each page. A list like…
I saw Manuel Matuzovic start up 100 days of more or less modern CSS on his own blog, and I thought it was a great idea that I wanted to give a try. I hope to use this series to familiarize myself more with CSS features that I haven't got a chance to deep dive on. I like to think of this series as my "cover album" of the great work that Manuel did! CSS custom properties have nearly 97% browser…