Theme colour switcher

Blog Topic: accessibility

Yesterday I had an interview for a front-end developer contract. The job would have involved overseeing a small front-end team rebuilding a suite of marketing sites on a strict deadline, specifically focused on improving performance. I asked about the client's commitment to accessibility, and whether that was part of their redevelopment plan, only to be told no, it wasn't. Meeting their deadline…

Continue reading Why I turned down a job for a client not interested in accessibility

The title of this post might seem a little surprising. Isn't alternative text supposed to describe the image? That's the concept that's drilled into us, and it's what most people think of when writing alt text. However, in some situations, it's actually wrong. One of those situations is when the image is serving as the visible content of a control, such as a link or button which does not also…

Continue reading Linked image alt text should not describe the image

Weird little accessibility note: using the CSS property display: table causes NVDA to announce the element as a table. (I'm not sure about other screen readers). Putting role="presentation" on the element with this property stops it announcing as a table. This is yet another reason you're better off using Flexbox or Grid for layout (as if we needed any more reasons). They're a lot more…

Continue reading CSS table display property causes NVDA to announce a table

WCAG Success Criterion 1.4.4 Resize text states: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. The reason for this is pretty obvious: people with low vision may need to resize text so they can read it. There are two ways to do that in the browser (not counting tools like screen magnifiers,…

Continue reading Detecting browser font size to fix accessibility and layout issues with large fonts

Recently CSS Tricks posted "A Deep Dive on Skipping to Content" by Paul Ratcliffe. It's great to see so much content lately focused on accessibility, and this article should prove useful for many years to come. However, I've got a few thoughts on the implementation which I think can improve it a bit, related to the skip link target element. I posted some of these as a comment on the article, but…

Continue reading Some thoughts on CSS Tricks' "Deep Dive on Skipping to Content"

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

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

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

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

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