Feed aggregator

Talking Drupal: Talking Drupal #514 - HTMX

Drupal Planet -

Today we are talking about HTMX, What it is, and why it could be a game changer for Drupal with our guests Shawn Duncan & Carson Gross. We’ll also cover RefreshLess as our module of the week.

For show notes visit: https://www.talkingDrupal.com/514

Topics
  • What is HTMX
  • HTMX and Drupal Integration
  • Community and Contribution
  • Discussing HTMX and Its Integration
  • HTMX's Stability and Composition
  • Programming with HTMX: A Lego-like Experience
  • Drupal's HTMX Initiative
  • Proof of Concept and Community Involvement
  • HTMX's Flexibility and Developer Experience
  • Big Pipe and HTMX Integration
  • Comparing HTMX with Hotwire Turbo
  • Getting Involved with the HTMX Initiative
Resources Guests

Shawn Duncan - HTMX intiative fathershawn Carson Gross - bigsky.software 1cg

Hosts

Nic Laflin - nLighteneddevelopment.com nicxvan John Picozzi - epam.com johnpicozzi Rich Lawson - richlawson.co rklawson

MOTW Correspondent

Martin Anderson-Clutz - mandclu.com mandclu

  • Brief description:
    • Have you ever wanted to give your Drupal site a more application-like feel, by only reloading parts of the page that need to change? There’s a module for that.
  • Module name/project name:
  • Brief history
    • How old: created in Mar 2016 by Wim Leers, but recent releases are by ambient.impact, a fellow Canadian
    • Versions available: 2.0.0-alpha9
  • Maintainership
    • Actively maintained
    • Security coverage
    • Test coverage
    • Documentation
    • Number of open issues: 40 open issues, only 2 of which are active bugs against the current branch
  • Usage stats:
    • 2 sites
  • Module features and usage
    • The RefreshLess module aims to give Drupal sites a smooth, fast, and responsive experience by using Javascript to selectively update the parts of the existing page that need to change, instead of a full page refresh. It uses the HTML5 History API to ensure the browsing behaviour is equivalent, and unsupported browsers will see a standard page refresh instead
    • Using RefreshLess also makes it possible to use transitions (with or without the View Transition API in modern browsers), morphing, and persistent elements to enhance the application-like feel
    • There is some indication that sites may encounter issues if they use RefreshLess with JS aggregation enabled, so it’s probably better to use it if your site has HTTP/2 enabled
    • RefreshLess is currently built on the Turbo library originally built for Ruby on Rails, but there is already an issue open to move the implementation to use HTMX instead

Golems GABB: Drupal Security Trends in 2025: How to Protect Your Business

Drupal Planet -

Drupal Security Trends in 2025: How to Protect Your Business Editor Mon, 08/04/2025 - 12:04

Technically, Drupal is one of the most secure open-source platforms out there. It has an active developer community, frequent patches, and a robust architecture. But the reality is that cyber threats aren’t slowing down even in 2025. If you still think updating modules is enough, that’s one of the biggest mistakes today.
You know, cybercriminals in 2025 are sharper than ever. Hacking a site used to take time previously. Now they need just a few minutes, especially when site owners overlook basic security. Drupal may be powerful and built for high traffic, but without proper setup and maintenance, it can be breached. Read this article to learn how to protect your Drupal website from emerging threats.

#! code: Drupal 11: Object Oriented Hooks And Hook Service Classes

Drupal Planet -

Hooks are used in Drupal to allow modules and themes to listen to or trigger different sorts of events in a Drupal system. During these events Drupal will pause and ask if any modules want to have any say in the event that is currently being triggered.

For example, hooks are commonly used when content is viewed, created, updated, or deleted. So, if we delete a page of content then a delete hook is triggered which allows modules to react to that content item being deleted. Using this, we can react to this and perform clean up operations on items of content that don't exist any more. Our custom module might want to remove items from a database table, or delete associated files since they wont be needed.

This is just one example of how hooks are used in Drupal as they are used in all manner of different situations, and not just listening for content events. Another example of a common Drupal hook is when creating a custom template. Many modules will use a hook called hook_theme() to register one or more templates with the theme system so that they can be used to theme custom content.

Hooks have been used in Drupal for a long time (probably since version 3) and have always been one of the harder things for beginners to understand. Module files full of specially named functions that seem to be magically called by Drupal is not an easy concept to get into and can take a while to get familiar with.

New in Drupal 11.1.0 is the ability to create object oriented (OOP) hooks, which is a shift away from the traditional procedural based hooks that have been a part of Drupal for so long. This OOP approach to hooks can be used right now, has a backwards compatible feature, and will eventually replace procedural hooks (where possible).

In this article we will look at how to create a OOP hook, how to transition to using OOP hooks in your Drupal modules, and how to create your own OOP hooks.

Read more

Drupal AI Initiative: Choosing the Right AI Tools for Marketing: Key Takeaways from the Latest Drupal AI Webinar

Drupal Planet -

Last week’s Drupal AI webinar, Choosing the Right AI Tools for Content and Marketing, brought together a global audience and a powerhouse panel. Jamie Abrahams, Alan Botwright, and Matthew Saunders spoke while being moderated by Paul Johnson. Together, we tackled pressing topics facing digital leaders: how to harness AI to deliver real marketing value without getting lost in hype or hamstrung by complexity.

The webinar attracted attendees from more than 20 countries and nearly 80 participants at its peak. This session wasn’t a technical demo. It was an honest conversation about challenges of implementing AI in today’s constrained marketing landscape.

Paul started the conversation by framing the discussion with some statistics. Budgets are under pressure.

Gartner released a report indicating that marketing budgets have dropped to around 7.7% of company revenue, down from 11% in pre-COVID days and this is looking to be the new normal. Combined with that, expectations are rising. Boards want more measurable results, greater efficiency and faster delivery. So everyone needs to do more with less. 59% of CMOs have insufficient budget to execute their strategies and most of them are looking towards AI to have as a possible lever to address this gap or at least try and bridge it. But there are real risks here. Teams are often starting with the technology and then going looking for problems to solve with that technology and that rarely delivers value and often leads to stalled initiatives. How do you help your clients avoid this solution-first mindset and what does a more structured problem-led approach look like in real marketing environments?

– Paul Johnson

Highlights & Key Insights 1. Start with the Why, not the Tool

Too many teams jump into AI with a solution-first mindset. The panel pushed hard against that.

You need to understand the whats and whys before you start tackling the hows.

– Matthew Saunders

We stressed the importance of identifying repetitive, data-heavy, and feedback-loop-dependent processes. Things like content review gates or asset tagging as the most valuable opportunities for automation.

2. AI is not Magic, It’s Smart Math

Jamie framed Large Language Models (LLMs) not as creative geniuses, but as very good pattern recognizers. They’re more “clever librarians” than original thinkers.

LLMs are not doing reasoning in the human sense, they’re more like an extremely good search engine of human knowledge.

– Jamie Abrahams

Expecting them to invent breakthrough creative or strategy will leave you disappointed. But as support for summarising, filtering, and speeding up content workflows? They become an efficiency booster.

3. Human-in-the-Loop is Non-Negotiable

AI isn’t a replacement for people, it’s a partner. Matthew walked through a mini case study where AI was used to aid in brand guideline compliance audit, reduce SLA reporting times by 80%, and streamline asset pipelines. But in every case, humans remained in control.

We never removed people from the loop. The AI was an assistant, not an overlord.

– Matthew Saunders

This framing, AI as a force multiplier, resonated across the panel. Alan added:

You can never spend too much time framing the problem. Once that’s clear, everything else starts to fall into place.

– Alan Botwright

Jamie suggested that human soft-skills are going to be increasingly important and that those with educational backgrounds not grounded in computer science might adapt more quickly.

People with psychology or literature backgrounds often adapt to AI tools faster than engineers. Soft skills are a real superpower here.

– Jamie Abrahams

4. Data Sovereignty Matters

The team then tackled one of the biggest blockers to enterprise adoption: where does your data go?

If you’re using a public LLM, your data is not private. Full stop.

– Matthew Saunders

The options? Either host your own (complex, but sovereign) or work with a trusted provider who can guarantee control over data storage and model access.

5. Cost Isn’t Just About Tokens

Licensing, training, integrations, governance, and internal change management all add up. Matthew suggested teams run a “pre-mortem”:

Ask: a year from now, this AI rollout failed. Why? Map every reason—and you’ll surface the hidden costs before they become real.

– Matthew Saunders

Jamie added that the best outcomes come from constrained agents and narrowly scoped tasks. Not sprawling generalist bots.

If you make your agent or LLM do as little as possible, it’s much more likely to get it right.

– Jamie Abrahams

6. Open Source + Drupal = Strategic Advantage

When asked why Drupal AI matters and what it means to organizations, the panelists had quite a bit to say:

You can build and demo an end-to-end AI prototype in 5 minutes on Drupal. No other open platform gives you that kind of agility.

– Matthew Saunders

This isn’t just a tech shift—it’s a change program. Trust, communication, and alignment across teams are critical to success.

– Alan Botwright

Drupal’s built-in abstraction layers mean you can swap models, switch providers, and adapt as the AI landscape evolves—without rearchitecting everything.

Final Thoughts

This was a real-world conversation grounded in experience: how to launch, govern, scale, and sustain AI in environments with limited budget, complex regulation, and high user expectations.

If you missed the session or want to share it with your team, the full recording is available here:

https://youtu.be/thCrVYlw1Bk

Got questions or want to connect around Drupal AI or implementation strategies? Drop by the Drupal AI Slack channel or check out the Drupal AI LinkedIn page.

File attachments:  Choosing_the_right_AI_tooling_for_your_business_image.png

The Drop Times: Drupal: A Digital Public Good for a Better Digital Future

Drupal Planet -

Drupal isn’t just powerful open-source tech — it’s officially recognized as a Digital Public Good, meaning it’s built to serve people and planet. In this piece, Mike Gifford shows how Drupal’s values align with global goals like sustainability, accessibility, and digital trust — and why it’s time for the community to start talking more about Drupal as a force for public good.

A Drupal Couple: Orchestrating Development Teams Like Kubernetes

Drupal Planet -

Orchestrating Development Teams Like Kubernetes Image Imagen Article body

The pricing conversation has been interesting to watch, especially as it relates to development team orchestration and resource allocation. The comments, the ecosystem convergence discussion, and industry thoughts on agency transformation all point to the same thing: we're in the middle of a shift in how development work gets organized.

 

I mentioned thinking there might be a better approach to this. Here's what I had in mind.

The Orchestration Model

Think about how Kubernetes works - it's a container orchestration system that automatically manages where and how applications run across multiple servers. You don't manually decide "we need 3 web server pods on server A and 2 database pods on server B."

 

Instead, you define what services you need (web servers, databases, caches) and how they should scale based on demand. Kubernetes figures out how many of each type to run based on current load and metrics, then figures out where to place them based on available resources and constraints.

 

What if we applied that same orchestration model to development teams?

 

Instead of throwing senior-level rates at routine maintenance, or abandoning smaller projects because they don't fit traditional agency economics, we coordinate talent based on what each task actually requires.

 

A technical architect acts like that Kubernetes orchestration system. They look at project requirements and figure out what types of expertise are needed and how much of each. Then they coordinate between client requirements, available talent, and project constraints to assign the right people to the right tasks. Whether that's a senior developer handling complex architecture decisions, a mentored developer working on implementation tasks, or AI handling routine code generation.

 

It's about matching the right resource to the right task.

Why This Matters Now

The ecosystem pieces we've been discussing are reducing coordination costs: affordable hosting, professional themes under $500, mentored developers through the IXP (inexperienced) program, Drupal CMS for less technical users, Experience Builder for visual personalization. We still need someone to orchestrate how these pieces work together.

 

That's where the technical architect orchestration model becomes important. It's not about cheaper labor. It's about intelligent resource allocation.

The Human Element

This connects to what Dries wrote about the "accountability gap" in his analysis of AI and agency transformation. AI can generate code and automate processes, but someone needs to own the results and make sure everything's going the right direction. Sometimes AI gets confused. Someone has to guide it.

 

The technical architect fills that accountability layer while coordinating the broader team.

Looking Ahead

I've been working on how this orchestration model works in practice - the tools, the processes, the communication patterns that make cross-cultural, multi-skill-level teams effective.

 

The economics are promising. The client gets better value through intelligent resource allocation. The developers get meaningful work that matches their skill level and expertise. And projects that used to be impossible become viable again.

 

I'll dive into the implementation details in upcoming posts. But first, what's your experience with these kinds of orchestrated approaches? Have you seen coordination models that work well for distributed teams?

 

The conversation's just getting started.

 

About We're Still Too Expensive, and We Should Talk About It Author Carlos Ospina Abstract Applying Kubernetes orchestration principles to development teams. How technical architects coordinate talent based on what each task actually requires. Tags Drupal Drupal Planet Technical Architect Development Community Drupal Leadership Team Orchestration Rating Select ratingGive Orchestrating Development Teams Like Kubernetes 1/5Give Orchestrating Development Teams Like Kubernetes 2/5Give Orchestrating Development Teams Like Kubernetes 3/5Give Orchestrating Development Teams Like Kubernetes 4/5Give Orchestrating Development Teams Like Kubernetes 5/5Cancel rating No votes yet Leave this field blank Add new comment

Centarro: Will Shopify Plus Work For Your B2B Commerce Website?

Drupal Planet -

Shopify is the biggest name in the e-commerce space, and for good reason. The platform is relatively easy to set up, performs well, and has excellent marketing. Its app marketplace is constantly growing, adding more capabilities.

For many merchants, Shopify is all they need. Going with the market leader is an obvious choice.

However, when you reach an enterprise scale, with requirements for B2B commerce and increased operational complexity, the story becomes quite different. Shopify says they offer B2B capabilities at scale, and when you’re subjected to their marketing and advertised track record, it's easy to start nodding your head to the beat of their tune.

Let’s dive into the true cost of Shopify Plus. Reading this will help you ask the right questions and better equip you to judge the answers.

The Shopify Plus Sales Machine

When Shopify's enterprise sales team comes knocking, they arrive with a compelling story. They position Shopify Plus as the solution to all your B2B woes: lower total cost of ownership, enterprise features without enterprise overhead, and the promise that migrating to Shopify Plus will lead to a conversion rate boom.

But often these promises are unrealistic. The pitch typically centers around three key pillars that deserve closer scrutiny.

The conversion rate promise

Shopify's sales pitch often includes dramatic claims about conversion improvements—sometimes suggesting compounding monthly increases that would theoretically give you a 55% conversion rate within six months.

Read more

Droptica: Drupal 7 vs Drupal 11 – How Have This System and Its Functionalities Changed?

Drupal Planet -

Drupal 7 was released in 2011 and has been the foundation of many websites for years. However, in the world of technology, 14 years is almost an eternity – during this time, Drupal has undergone a huge evolution. Today, the latest version, Drupal 11, is a modern system based on current coding standards and offering features that were once only a dream. In this article, we will look at the key differences between Drupal 7 and Drupal 11. If you last worked with Drupal years ago (e.g., with version 6 or 7), prepare yourself for the "wow" effect – Drupal 11 is a whole new experience.

Joshuami: Taking a Tour of the Tour Module

Drupal Planet -

Tour was deprecated in Drupal 10 and removed in Drupal 11.0. I was fine with that as I had not used it before, but I recently needed a tour for an upcoming launch of an intranet. Tour kinda blew my mind with its easy setup and out of the box look and feel.

Dries Buytaert: Why Drupal is built for the AI era

Drupal Planet -

In my previous post, [The great digital agency unbundling](https://dri.es/ai-and-the-great-digital-agency-unbundling), I explored how AI is transforming the work of digital agencies. As AI automates more technical tasks, agencies will be shifting their focus toward orchestration, strategic thinking, and accountability. This shift also changes what they need from their tools. Content management systems like [Drupal](https://new.drupal.org/home) must evolve with them. This is not just about adding AI features. It is about becoming a platform that strengthens the new agency model. Because as agencies take on new roles, they will adopt the tools that help them succeed. As I wrote then: > "As the Project Lead of Drupal, I think about how Drupal, the product, and its ecosystem of digital agencies can evolve _together_. They need to move in step to navigate change and help shape what comes next" The good news is that the Drupal community is embracing AI in a coordinated and purposeful way. Today, Drupal CMS already ships with 22 AI agents, and through the [Drupal AI Initiative](https://dri.es/accelerating-ai-innovation-in-drupal), we are building additional infrastructure and tooling to bring more AI capabilities to Drupal. In this post, I want to share why I believe Drupal is not just ready to evolve, but uniquely positioned to thrive in the AI era. ### Drupal is built for AI Imagine an AI agent that plans, executes, and measures complex marketing campaigns across your CMS, CRM, email platform, and analytics tools without requiring manual handoff at every step. To support that level of orchestration, a platform must expose its content models, configuration data, state, user roles and permissions, and business logic in a structured, machine-readable way. That means making things like entity types, field definitions, relationships, and workflows available through APIs that AI systems can discover, inspect, and act on safely. Most platforms were not designed with this kind of structured access in mind. Drupal has been moving in that direction for more than a decade. Since Drupal 7, the community has invested deeply in modernizing the platform. We introduced a unified Entity API, adopted a service container with dependency injection, and expanded support for REST, JSON:API, and GraphQL. We also built a robust configuration management system, improved testability, and added more powerful workflows with granular revisioning and strong rollback support. Drupal also has excellent API documentation. These changes made Drupal not only more programmable but also more introspectable. AI agents can query Drupal's structure, understand relationships between entities, and make informed decisions based on both content and configuration. This enables AI to take meaningful action inside the system rather than just operating at the surface. And because Drupal's APIs are open and well-documented, these capabilities are easier for developers and AI systems to discover and build on. Making these architectural improvements was not easy. Upgrading from Drupal 7 was painful for many, and at the time, the benefits of Drupal 8's redesign were not obvious. We were not thinking about AI at the time, but in hindsight, we built exactly the kind of modern, flexible foundation that makes deep AI integration possible today. As is often the case, there is [pain before the payoff](https://dri.es/the-pain-before-the-payoff). ### AI makes Drupal's power more accessible I think this is exciting because AI can help make Drupal's flexibility more accessible. Drupal is one of the most flexible content management systems available. It powers everything from small websites to large, complex digital platforms. That flexibility is a strength, but it also introduces complexity. For newcomers, Drupal's flexibility can be overwhelming. Building a Drupal site requires understanding how to select and configure contributed modules, creating content types and relationships, defining roles and permissions, building Views, developing a custom theme, and more. The learning curve is steep and often prevents people from experiencing Drupal's power and flexibility. AI has the potential to change that. In the future, you might describe your needs by saying something like, "I need a multi-language news site with editorial workflows and social media integration". An AI assistant could ask a few follow-up questions, then generate a working starting point. I've demonstrated early prototypes of this vision in recent [DriesNotes](https://dri.es/tag/state-of-drupal), including [DrupalCon Barcelona 2024](https://dri.es/state-of-drupal-presentation-september-2024) and [DrupalCon Atlanta 2025](https://dri.es/state-of-drupal-presentation-march-2025). Much of that code has been productized in the [Drupal AI modules](https://www.drupal.org/project/ai). In my Barcelona keynote, I said that "AI is the new UI". AI helps lower the barrier to entry by turning complex setup tasks into simple prompts and conversations. With the right design, it can guide new users while still giving experts full control. In my last post, [The great digital agency unbundling](https://dri.es/ai-and-the-great-digital-agency-unbundling), I shared a similar perspective: > "Some of the hardest challenges the Drupal community has faced, such as improving usability or maintaining documentation, may finally become more manageable. I see ways AI can support Drupal's mission, lower barriers to online publishing, make Drupal more accessible, and help build a stronger, more inclusive Open Web. The future is both exciting and uncertain." Of course, AI comes with both promise and risk. It raises ethical questions and often fails to meet expectations. But ignoring AI is _not_ a strategy. AI is already changing how digital work gets done. If we want Drupal to stay relevant, we need to explore its potential. That means experimenting thoughtfully, sharing what we learn, and helping shape how these tools are built and used. ### Drupal's AI roadmap helps agencies AI is changing how digital work gets done. Some platforms can now generate full websites, marketing campaigns, or content strategies in minutes. For simple use cases, that may be enough. But many client needs are more complex. As requirements grow and automations become more sophisticated, agencies continue to play a critical role. They bring context, strategy, and accountability to challenges that off-the-shelf tools cannot solve. That is the future we want Drupal to support. We are _not_ building AI to replace digital agencies, but to strengthen them. Through the [Drupal AI Initiative](https://dri.es/accelerating-ai-innovation-in-drupal), Drupal agencies are actively helping shape the tools they want to use in an AI-driven world. As agencies evolve in response to AI, they will need tools that evolve with them. Drupal is not only keeping pace but helping lead the way. By investing in AI in collaboration with the agencies who rely on it, we are making Drupal stronger, more capable, and more relevant. ### Now is the moment to move The shift toward AI-powered digital work is inevitable. Platforms will succeed or fail based on how well they adapt to this reality. Drupal's investments in modern architecture, open development, and community collaboration has created something unique: a platform that doesn't just add AI features but fundamentally supports AI-driven workflows. While other systems scramble to retrofit AI capabilities, Drupal's foundation makes deep integration possible. The question isn't whether AI will change digital agencies and content management. It already has. The question is which platforms will help agencies and developers thrive in that new reality. Drupal is positioning itself to be one of them.

Evolving Web: When Accessibility Isn’t Easy: Website Features That Need Extra Love

Drupal Planet -

Interested in exploring this topic more ? Join our live accessibility webinar on August 15 at 12 pm EDT with Janell Sims, Manager of Digital Accessibility Services at Harvard University.

 

When we talk about web accessibility, it's easy to focus on guidelines and checklists. But in practice, not every feature on a website is easy to make accessible. Some elements—like custom search filters, maps, or dropdown menus—require more testing and creativity than others. 
At Evolving Web, we’ve encountered many of these challenges firsthand. In this post, we’re sharing some of the techniques we’ve used when tackling tricky accessibility issues.

The Role of Accessibility Testing Tools

To meet WCAG AA guidelines and create genuinely usable experiences for all, we regularly use tools like Axe DevTools, DubBot, SortSite, and Siteimprove. But using accessibility testing during development and QA generally uncovers issues too late in the process. That’s why it’s important to plan for the features that will require extra accessibility work. Designers, strategists, project managers, and QA specialists all play a role in identifying those tricky areas from the start.

Features to Flag for Accessibility Review Making Megamenus Accessible

Megamenus often include more than just a list of links — they might have headings, images, featured articles, short blurbs, or even interactive elements like buttons or embedded search fields. But adding these elements creates accessibility challenges if the keyboard and screen reader experience isn’t carefully planned.

Issue

When content beyond basic links is added to a megamenu, users navigating via keyboard or screen reader may:

  • Not be able to reach all content using the Tab key if focus isn’t properly managed.
  • Get stuck in the menu due to keyboard trap loops, especially if tabindex is misused.
  • Lose track of where they are because menu sections aren't announced clearly.
Workaround
  • To make the entire megamenu accessible — not just the links — we apply a few specific techniques:
  • Ensure all focusable elements inside the open menu (links, buttons, form fields) are reachable in a logical tab order.
  • Use aria-expanded="true" on the parent menu item when the menu is open, and aria-controls to reference the submenu container.
  • Add aria-hidden="false" to the open menu container so that screen readers know when the menu content is available.
  • When the menu opens, move focus into the first focusable item inside the panel, and use keyboard listeners (like Escape key and arrow navigation) to allow users to exit or move between items cleanly.
  • Ensure visible focus styles are present for extra headings and buttons in the menu dropdowns
Example

The  ROM museum website opens a megamenu under the “Visit” tab. The menu displays three content columns: a list of links like Visitor Information and Accessibility, a visual tile for Museum Maps & Tours with an image, and another for Location & Parking. On the far right, there’s a panel showing admission hours by date. The layout reflects accessibility best practices by grouping content logically, supporting clear tab order, and offering visual structure that could be paired with ARIA roles like aria-expanded and aria-hidden to ensure screen reader compatibility and smooth keyboard navigation.
 

This example illustrates how visual hierarchy and structured content can guide both sighted users and assistive technologies through a complex navigation experience.
Main Navigation Dropdown Toggling

In many website navigation designs, especially on desktop, the first-level menu items act both as links and as toggles for dropdowns. But combining these two functions in one element can confuse keyboard users and screen readers. To simplify the experience, we often design navigation so that top-level items with submenus act only as toggle buttons, not links.

Issue

When a first-level menu item functions as both a link and a dropdown toggle, it can cause:

  • Confusion for keyboard users: Should pressing Enter activate the link, or open the dropdown?
  • Inconsistent behavior across screen readers, depending on how the markup is structured.
  • Difficulty in managing focus and aria states cleanly, especially when nesting multiple levels.
Workaround

To provide a clearer, more accessible experience, we:

  • Convert the parent menu item into a button (or a link with role="button") that only toggles the visibility of the submenu, rather than navigating to a new page.
  • Use the first link in the dropdown to link to the top-level page for that section of the website (sometimes it’s a section landing page).
  • Use aria-expanded="false" on the toggle button, and update it to true when the dropdown is open.
  • Include aria-controls pointing to the submenu container’s id for better screen reader context.
  • Ensure the submenu is hidden by default (using aria-hidden="true" and/or display: none), and revealed when toggled open.
  • Place focusable items within the dropdown in a logical tab order, and allow for keyboard-only navigation through all items before returning focus to the parent nav.
Example

We implemented this pattern on the Georgia Center website, where the top-level menu items with dropdowns act only as toggles. This makes it easier for keyboard users to explore all submenu items without accidentally navigating away, and it gives screen reader users clear cues about expandable content.

 

On the University of Georgia Center site, top-level navigation items like "Youth Programs" function only as dropdown toggles—improving clarity for screen reader and keyboard users by separating toggle actions from navigation links.
Making AJAX Search Filters Screen Reader-Friendly

We love using AJAX to make search filters feel fast and responsive—content updates instantly without reloading the page. But while this improves the visual and performance experience, it creates barriers for screen reader users, who may not realize anything on the page has changed.

Issue
  • When results update dynamically (via AJAX), screen readers don’t automatically detect or announce those changes:
  • Users may not know their filter selection did anything.
  • The results section may change visually, but not be announced to non-visual users.
  • Without proper cues, users can feel disoriented or think the filter “didn’t work.”
Workaround

To ensure dynamic updates are communicated to assistive technologies, we:

  • Add an aria-live="polite" region around the content area that updates (e.g., search results or counts).
  • After filters are applied, add a clear message like “12 results found”.
  • Use JavaScript to trigger updates to that region after the AJAX request completes.
  • Test the implementation with screen readers to ensure the live region is actually being read.
Example

On the Georgia Gwinnett College website, we provided a screen reader announcement for Drupal views that require page reload. We appended the counter to the “skip to main” link with JavaScript so that it’s being read first after the page is loaded.    

To support screen reader users, the Georgia Gwinnett College search interface includes a live region that announces updated result counts after filters are applied—ensuring dynamic AJAX changes are clearly communicated without a page reload.

 

Making Custom Select Menus Accessible

Custom-styled form elements are a favorite of designers, especially when a project calls for a more branded or polished look. But replacing native form controls—like <select> elements—with JavaScript replacements introduces accessibility challenges. While native HTML elements are the most accessible by default, they don’t offer the design flexibility that clients and designers want.

Issue

Custom select menus often:

  • Break keyboard navigation (Tab, Arrow keys, Escape) if not fully implemented.
  • Lack proper screen reader support, especially for focus announcements, selection changes, and open/close states.
  • Trap users inside the field or fail to return focus correctly after selection.
Workaround

To balance accessibility with visual customization, we often use Select2—a JavaScript library that mimics native selects but with better styling and feature support.

Here’s how we make it work:

  • Use Select2's built-in accessibility modes, including ARIA support and keyboard navigation patterns.
  • Customize behaviour when needed—e.g., ensuring focus returns to the appropriate element after a selection is made, or that assistive tech announces open/closed states correctly.
  • Manually test each implementation with screen readers and keyboard to catch edge cases.
Modal Lightboxes Keyboard and Screen Reader-Friendly

When showcasing visual content—like photo galleries, product views, or exhibition highlights—designers often rely on modals or lightboxes to create an immersive experience. While these interactions look great, they can easily become accessibility barriers if not carefully implemented for keyboard and screen reader users.

Issue

Standard lightbox/carousel libraries often:

  • Don’t properly trap keyboard focus inside the modal, allowing users to tab into hidden background content.
  • Lack appropriate ARIA roles or labels, so screen readers may not recognize the modal context.
  • Fail to provide intuitive ways to close the modal with the keyboard.
Workaround

To build accessible modals for image galleries, we use Parvus, a customizable JavaScript lightbox. If a modal is used to display content or a menu, we create a custom modal with JavaScript.

Here’s are some things to make sure you do when implementing a custom modal:

  • Add role="dialog" and aria-modal="true" to the modal container so screen readers know it should get the user’s attention.
  • Ensure the modal includes a labeled close button (e.g., aria-label="Close modal").
  • Hide background content from screen readers using aria-hidden="true" while the modal is active.
Example

On the Royal Ontario Museum site, we use the Parvus library to create the modal lightboxes for exhibits. When users click the info icon on an image, a modal lightbox opens with detailed content and imagery.

Inside the modal:

  • Keyboard users can tab through all interactive elements, including text, images, and the close button.
  • After the last item, focus loops back to the first item inside the modal.
  • Users can press Escape to close the lightbox and resume navigation from where they left off.

The ROM’s modal lightbox presents exhibit images in an immersive view while maintaining accessibility: it uses ARIA roles, traps keyboard focus, and allows users to navigate or close the modal without relying on a mouse.
Preventing Keyboard Traps in Sliders

Sliders and carousels are commonly used to highlight featured content—especially in hero areas or product showcases. But when using libraries like Swiper.js, this can introduce keyboard accessibility issues, trapping users inside the slider with no way to escape.

Issue

Swiper’s default loop mode duplicates slides to enable infinite scrolling. This has unintended consequences for keyboard users:

  • All duplicate slide elements remain in the DOM and are focusable, even if they’re not visible.
  • This creates a keyboard trap, where users tab endlessly through duplicated slides and never exit the slider.
Workaround

To fix this, we use a custom JavaScript function to control which elements inside the slider can receive focus:

  • We dynamically set tabindex="-1" on all non-visible slides, and remove it only from those currently in view.
  • We detect slide changes using Swiper’s event listeners (on: slideChange, etc.) and update focusable elements in real time.
  • This ensures that only visible slides are keyboard-reachable, and users can tab forward to content outside the slider.
  • We also test the slider with real content (especially when using links or buttons inside slides) to make sure screen readers and keyboard users can interact without confusion.
Example

On one project, we implemented a looping slider using the Swiper library to feature linked articles and stories within each slide. However, with loop mode on, all slide links remained focusable—even off-screen—creating an infinite tab loop. To solve this, we added custom JS to make only visible elements focusable.
This simple adjustment allowed keyboard users to tab through the slider once and move on to the rest of the page.

 

This slider uses Swiper.js to showcase community images. To prevent keyboard traps, a custom script ensures that only visible slides are focusable, allowing keyboard users to navigate the carousel and continue through the rest of the page seamlessly.
Handling Non-Essential SVG Maps in an Accessible Way

SVG maps can be a visually rich, clickable way to help users explore content—especially for regional directories or filtering tools. But when maps are used as enhancements rather than essential navigation tools, they can create more accessibility challenges than they solve.

Issue

SVG-based maps often:

  • Contain many interactive regions that need proper ARIA labeling and keyboard support.
  • Are not inherently keyboard-navigable, requiring extensive scripting to manage focus, interactivity, and screen reader compatibility.
Workaround

When maps are non-essential to the user experience we can:

  • Hide the map from assistive technologies using aria-hidden="true" or similar techniques.
  • Provide a fully accessible alternative—such as a structured list or dropdown.
Example

On the Canada’s Drug Agency website, we used an SVG-based regional map to help users find programs by region. However, making each region fully accessible (labeling, focus control, keyboard behavior) would have required a substantial custom build. Instead, we provide a link to “View Data Table” that shows all the same content in a structured, accessible way.

This regional SVG map was used to visually enhance navigation on a program directory page. Because making the map fully accessible would require complex scripting, it’s hidden from assistive tech using aria-hidden="true", while a structured data table link offers a fully accessible alternative for screen reader and keyboard users.
Making Icons Meaningful for Screen Readers and Editors

Icons are everywhere on modern websites. Whether used to break up dense content, convey meaning quickly, or support a brand’s visual language, they’re a valuable design tool. But when icons are used as the only way to communicate important information, they become content, not just decoration. And that means they must be accessible.

Issue

Icons used as content need to:

  • Be labelled for screen readers with meaningful descriptions.
  • Be structured so content editors can easily manage them in the CMS.
  • Avoid duplicating content or creating confusion with conflicting visual/text cues.
  • If not handled carefully, screen readers may skip the icon entirely—or announce something generic like “image” or “graphic.”
Workaround

To ensure icons are accessible and manageable by content authors, we:

  • Paired each icon with screen reader-only text (e.g., “Gluten-free”) using visually hidden HTML elements
  • Allowed editors to add or manage this text directly in the CMS, rather than hardcoding it.
  • Used ARIA roles so screen readers interpret the icons as labels, not decorative graphics.
Example

On the University of Georgia (UGA) website, we implemented this solution on the restaurant menu, where icons communicate important dietary info. By structuring the markup to include hidden descriptive text and enabling editorial control in the CMS, we made the interface both accessible and sustainable for ongoing content updates.
 

On the University of Georgia website, we enhanced accessibility by allowing editors to manage icon labels directly in the CMS. This ensures that dietary icons, like those indicating allergens, include hidden descriptive text for screen readers, avoiding ambiguous announcements like “image” or “graphic.”
Ensuring Accessible Focus States in Dark Mode

Dark mode has become a popular design choice for modern websites. It can reduce eye strain, support user preferences, and create a sleek aesthetic. But enabling a dark mode theme adds an extra layer of complexity when it comes to accessibility—particularly for colour contrast and focus visibility.

Issue
  • Colour contrast that passes in light mode may fail in dark mode, especially on hover or focus.
  • Focus indicators can disappear or become too subtle against dark backgrounds.
  • Keyboard users may lose visual cues for navigation if focus styling isn't tested across themes.
Workaround
  • Test all state variations (default, hover, focus, active) in both light and dark modes.
  • Use WCAG-compliant color contrast:
    • 4.5:1 for text
    • 3:1 for UI components (borders, outlines, focus rings)
  • Customize styles to ensure visible focus indicators in dark mode (e.g., outlines, box shadows).

This dark mode interface includes a visible green focus indicator to help keyboard users navigate recipe content. Testing hover and focus states in dark themes ensures that interactive elements remain visually accessible and meet WCAG contrast standards. Drupal’s Darkmode JS module makes it easy to add a dark mode toggle to your website while preserving accessibility.
Takeaways: What Teams Should Watch For

Whether you’re a developer, designer, or project manager, here are a few things to keep in mind:

  • Check keyboard and screen reader support early in development, especially for interactive elements.
  • Don’t rely on testing tools alone. Manual testing with user scenarios are key.
  • Look for alternatives and fallbacks—like offering a text version of map content or a non-dynamic option for filters.
Conclusion

Accessibility isn’t just about checking boxes or following rules—it’s about creating digital experiences that work for everyone. By identifying tricky features early in the process, your team can better plan, estimate, and design with inclusion in mind, reducing the need for late-stage fixes and improving usability for all.

At Evolving Web, we specialize in helping organizations meet these challenges head-on. From accessibility audits to custom component design and strategic guidance, we support teams in building websites that are not only compliant—but genuinely accessible. . If you're looking to improve your website's accessibility or tackle a specific challenge, get in touch with us.

+ more awesome articles by Evolving Web

Drupal Association blog: Transform Your Business by Sponsoring a Drupal Leader

Drupal Planet -

An extraordinary opportunity exists to support Drupal CMS, boost your organisation's credits, and bring one of the leading minds behind Drupal CMS directly into your organization. 

We're seeking sponsors for Cristina Chumillas, the UX and Product Design Lead for Drupal CMS, who has been defining and driving the product direction since the Starshot initiative started in May 2024.

We were lucky to have Cristina engaged in this role full-time for seven months, thanks to Lullabot. Now we're looking to extend this to ensure we can deliver on the strategy for Drupal CMS 2.0 and beyond.

Why Core Contributors Are Business Game-Changers

The real value of this sponsorship goes beyond supporting Drupal—it's about what core contributors can do for your business.

"Working with a core contributor is like having a superhero on your team,” explains Pam Baronne, CTO at Technocrat and Drupal CMS Product Owner. 

"There should be an absolute premium on hiring core contributors. They aren’t just an asset to Drupal -- their skill, knowledge, and connections make them incredibly valuable to your company”.

Sponsoring a member of the Drupal CMS leadership team ensures your organization is not just prepared for what's coming, but also has the insider insight to help position you in the shifting market. 

Cristina can bring a depth of experience to your organization that is hard to match. Your sponsorship earns you contribution credits directly, boosting your Drupal Certified Partner ranking. Additionally, she can mentor your team on Drupal contribution, building expertise that elevates your company's productivity as well as your standing in the community. 

Meet Cristina - The Designer-Developer Leading Drupal's Transformation

As a designer who later learned front-end development and specializes in Drupal, Cristina brings a diverse range of skills to the role. She has been a core contributor for many years. She joined the Core Leadership Team as a front-end framework manager in 2021, and was recently also appointed as a core UX Manager. Cristina has been coordinating key design and UX initiatives in Drupal since 2017, most recently with the new Navigation in Drupal 11.
Based in Barcelona, Cristina is also active in organising the local community as well as DrupalCon. She will be a featured speaker at DrupalCon Vienna and (pending sponsorship) DrupalCon Nara as well.

The vision for Drupal CMS as a tool for marketers, designers, and content creators requires deep expertise in user experience design—exactly what Cristina brings to the role.

Flexible Engagement Options

The structure of the sponsorship engagement is flexible, and we are open to offers: 

  • Full or partial sponsorship
  • Project-based arrangements for specific milestones
  • Part-time combinations of Drupal work with your business needs
  • Custom arrangements tailored to your goals
     
Ready to add a Drupal superhero to your team?

We're open to alternative arrangements as well, so if you are interested in learning more about this opportunity, please fill in this sponsorship interest form and we will be in touch.

Picozzi.com: Drupal + Mailgun: A Simple Setup for Transactional Email

Drupal Planet -

Drupal + Mailgun: A Simple Setup for Transactional Email john Wed, 07/30/2025 - 08:54 I’ve been using SendGrid as the transactional email provider for my site for a while. Since I only send about three emails a week—mostly simple contact form submissions—the free tier was perfect for my needs. It let me test things out, integrated easily with Drupal, and just worked.

LakeDrops Drupal Consulting, Development and Hosting: Drupal's Modeler API released - learn about the benefits

Drupal Planet -

Drupal's Modeler API released - learn about the benefits Jürgen Haas Wed 30 Jul 2025 - 13:57

Drupal's ECA module has been released 3 years ago, and provides an incredible workflow automation and orchestration platform together with an intuitive UI based on BPMN diagrams. Other complex configuration requirements can now be managed with the same tools as the newly introduced Modeler API provides the framework to serve applications like ECA or AI Agents with modern, exchangeable UIs without having to re-implement any of those ever again. This blog post describes the architecture, and the benefits that come out of all this for software developers and end-users alike.

Pages

Subscribe to www.hazelbecker.com aggregator