August 13, 2021
I came across a weird issue while doing an accessibility audit recently. NVDA announces the site logo as "clickable", and the cursor changes to a pointer (the little "hand") when hovering over it with the mouse. I assumed it was a link to the homepage, as is typical for header logos, but clicking it did nothing – on the homepage, at least.
On interior pages, clicking the logo takes you to…
Continue reading The importance of using correct semantic HTML
February 2, 2021
I really appreciate when a website or app offers the choice of dark mode. It makes reading at night much easier on the eyes, and some people prefer it at all times due to vision issues.
I'd never implemented a dark mode switch, so one of my goals for my blog redesign was to do so, both for reader convenience and to gain the experience. Here's how I did it.
It might seem surprising that I discuss…
Continue reading How I created a dark mode switch for my Drupal 9 site
September 10, 2020
This is slightly adapted from presentation notes, so it's a bit sketchy. It's more of an outline of requirements, rather than code samples. I may add those later. Also, note that I've only covered two scenarios: a dropdown menu, and a menu that covers the entire screen when opened (modal dialog). There may be different considerations for other styles.
Mobile menu: usually the site's main menu,…
Continue reading How to create an accessible mobile menu
October 9, 2019
I've worked on several sites recently where the site search form is hidden by default and displayed by activating a button. This pattern caused me a bit of confusion about where to put the role="search" attribute, which is important for accessibility.
According to the W3C specification the search role is:
A landmark region that contains a collection of items and objects that, as a whole, combine…
Continue reading Accessibility: where to put the search role when your search form is hidden
May 17, 2019
I'm working on a website which has icons on file upload links, like so:
This works for people who can see the icons, but what about those who can't? Accessibility means giving all users an equivalent experience, regardless of how they're accessing the site.
If the icons were inline images, we could add alt text with the filetype. However, in this case, they're background images.
So, we want to…
Continue reading Add file type indicator to file field links for accessibility - Drupal 8-10