September 10, 2021
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…
CSS table display property causes NVDA to announce a table
August 26, 2021
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,…
Detecting browser font size to fix accessibility and layout issues with large fonts
August 16, 2021
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…
Some thoughts on CSS Tricks' "Deep Dive on Skipping to Content"
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…
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…
How I created a dark mode switch for my Drupal 9 site
February 1, 2021
Several years ago when I was working at Romni Wools, a yarn shop in downtown Toronto, I was asked to make a sample from the then-new Malabrigo Twist yarn. I found this pretty Shetland Eyelet lace pattern in Barbara Walker's A Treasury of Knitting Patterns (page 179), which worked up nicely into a hat.
This hat requires 100 grams of aran weight yarn (the sample used 55 grams/83 yards, so even if…
Chelsea Hotel Hat Knitting Pattern
January 25, 2021
I guess I'm a little obsessed with the Group module, or maybe it's just that I've been using it a lot lately, and still learning its ins and outs.
One of the main purposes of Group is to control user access to various content types, based on what Group(s) the viewing user and content are in. Each Group type has an extensive permissions table where you can control permissions for anonymous users,…
How to control access to content using the Group module - Drupal 8 & 9
January 21, 2021
Previously, I posted about how to create a view on a user's profile of content authored by that user, limited to content in Group(s) the viewing user is a member of. That tutorial shows how to accomplish that with a view of content (Drupal nodes) which are in Groups.
The person who requested that tutorial later told me they needed a view of Group content. Group content is the relationship between…
Show group content on author's user profile, limited by viewing user's Group membership - Drupal 8 & 9
January 20, 2021
The following preprocess function will give you unique classes on the body tag for each Group content type (from the Group module). It adds two classes, one that includes the Group type that the content is in as well as the Group content type (e.g. group-content--client-group--node-page); and one with just the Group content type (e.g. group-content--node-page).
Place this code in your theme's .…
Add body classes per group content type - Drupal 8 & 9
January 20, 2021
The following template suggestion (placed in your theme's .theme file) will give you field template suggestions per entity type, e.g. field--node.html.twig, field--group.html.twig, field--media.html.twig, etc. I wanted to theme all fields in Groups the same way, and didn't want to have to create field templates for each group type, which was the least granular template suggestion available.
Template suggestion for field templates per entity type - Drupal 8 & 9