Theme colour switcher

Blog Topic: JavaScript

One of my clients is a site which has extensive audio recordings. Their current site uses the default HTML5 audio player, but they want something that is more customizable to fit with their design and needs. One of their requests was to be able to set audio playback speed. One of my priorities was that the audio player be fully accessible. To display the audio player, they are using the Drupal…

Continue reading How I customized jPlayer for accessibility and added playback rate control, Drupal 9

Just plopping this here for future reference and in case it might be useful to someone. I'm having to work with a platform which shall remain unnamed but whose code makes working with it very difficult. Among other things, it gives form elements unique classes with ID numbers, but for some reason no IDs. So I needed to filter the class list to find the unique class so I can set the element's ID…

Continue reading JavaScript function to find a class on an element containing a particular string

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've been working on a website with the requirement to truncate certain text fields—display the first several words of the text, with a "show more" link which on click, expands the rest of the text. I had to dig a bit into the Twig documentation to figure it out, but it's easily done with Twig filters and a bit of JavaScript. (Note that this method will strip any HTML in the text fields. It…

Continue reading Truncated expanding text field with "show more" link in Drupal 8 & Twig