Theme colour switcher

Blog

Removing borders from buttons is part of many CSS resets, including mine, till recently: button,input[type="submit"] {  border: none;} However, during an accessibility test with a tester who uses high-contrast mode, I realized the problem with this. High contrast mode is used by many people with low vision or photosensitivity. It replaces your carefully-chosen website colour…

Continue reading Accessibility: don't remove borders from buttons

Without fail, in my accessibility testing with blind users, links which open in new tabs (or windows, but that's less common these days) are a problem. Often, there's no notification in the link that it will open in a new tab, as is required by WCAG Success Criterion 3.2.2 On Input. Other times, it's there but presented in an inaccessible way, such as the <title> attribute on the link. (…

Continue reading Accessibility: Just don't open links in new tabs

That isn't the most catchy title in the world, but it's a phenomenon that I come across all the time when developing sites for clients. What happens is, a client will come to me with a request that doesn't make sense for outside users of their site. It would make the site less usable and less understandable for anyone who didn't know the site intimately or use it the way the owners or content…

Continue reading Website owners can't see their sites the way visitors do

This is probably a pretty niche topic, but for anyone out there using the Group module and the very useful Entity Group Field module to add content to groups, it may be handy. I previously posted about how to get the rendered value of this field in Twig, but what if you want/need to get individual raw values? Today I had to do just that; I needed to check the type of each group referenced from…

Continue reading Get raw values from Entity Group Field in Twig

I wanted to create a view of "event" content type, grouped by taxonomy term. For each group, I wanted to show only the first 4 items, with a "more" link to see all. This seems like it should be a simple task, but isn't, and isn't possible out of the box with views. I didn't want to have to create a view display for every taxonomy term. That's a huge pain, requires maintenance every time a new…

Continue reading How to limit number of rows in each group in a grouped View using Twig

This post piggybacks on my earlier post "Print raw values from Smart Date fields in Twig templates - Drupal 8+". The Drupal Smart Date module allows users to choose a timezone for each date entered in a Smart Date field. One of my clients has a site with an event content type that uses a Smart Date field, and they needed event dates and times to display in the actual timezone entered. However, no…

Continue reading Drupal & Twig: How to show Smart Date dates in the created timezone, without conversion to site default or user-chosen timezone

The title of this post might seem a little odd, but it's inspired by a recent accessibility audit where I saw the HTML <nav> region being used in some unusual ways. The MDN HTML spec defines the <nav> element this way: The <nav> HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents.…

Continue reading Accessibility: What is a nav region?

Please note I'm not referring here to showing a block with a list of content that shares the same taxonomy terms as the content it is displayed on, a.k.a. a "related content" block. There are reams and reams of tutorials out there showing you how to do that. This use case is when you have a specific block, maybe just some custom output, that you only want to show on content that is tagged with…

Continue reading How to show a Drupal block on content tagged with specific taxonomy terms

A common need when displaying dates on a website is to display the start and end date of an event. If your date field is a standard Drupal datetime or daterange field, that's fairly easy. (See my post on how to get values from Drupal date fields in Twig). If your date field is a Smart Date field and allows for recurrence, that's slightly more complicated, as it is now a multi-value field (…

Continue reading Get specific key values from multi-value field, e.g. first and last dates from recurring Smart Date field

    <a href="{{ file_url(node.field_document.entity.field_media_document.entity.uri.value) }}">      {{ node.field_document.entity.field_media_document.entity.filename.value }}    </a> Of course you'll need to replace the fieldnames with yours. The file_url function is necessary to transform the URL into a workable…

Continue reading How to get file URI and filename from referenced media entity field in Twig