Problem/Motivation

The widget template (templates/asw-widget.html.twig) has some accessibility problems.

1. Interactive element is a link instead of a button

The "Open Accessibility Menu" trigger is an <a href="#"> with role="button":

<a href="#" target="_blank" class="asw-menu-btn" title="{{ 'Open Accessibility Menu'|t }}" role="button" aria-expanded="false">
  • A <button type="button"> is the correct element here. The link does not navigate anywhere.
  • Links with role="button" do not respond to the Space key (only Enter). Native buttons handle both.
  • target="_blank" on a # link has no effect.

2. Image without alt attribute

<img src="{{ widget_icon }}" width="30px" height="30px">

The <img> has no alt attribute (WCAG 1.1.1). Since the icon is inside an interactive element with a title, it is decorative and should have alt="". Also, width="30px" and height="30px" are not valid HTML. These attributes take plain numbers without a unit.

Steps to reproduce

  1. Place the "Progressive Accessibility Block" in any region
  2. View the page and inspect the widget HTML
  3. Try to activate the button using the Space key. It does not work (only Enter does, because it is a link). The WAI-ARIA APG Button Pattern requires both Enter and Space to activate a button. Native <button> elements handle this automatically.
  4. Run WAVE (wave.webaim.org). It flags "Linked image missing alternative text"

Proposed resolution

Replace the <a> with a native <button type="button">, add alt="" to the image, and fix the width/height values. CSS for .asw-menu-btn may need minor adjustments to reset default button styles.

Issue fork progressive_accessibility_widget-3584414

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

scontzen created an issue. See original summary.

scontzen opened merge request !7

scontzen’s picture

scontzen commented
Assigned: scontzen » Unassigned
Status: Active » Needs review

Pushed the fix to the branch. Changes:

  • Replaced <a href="#" role="button"> with a native <button type="button">. This fixes Space key activation (WAI-ARIA APG Button Pattern) and removes the unnecessary target="_blank".
  • Added alt="" to the icon image (WCAG 1.1.1, decorative image inside labeled control).
  • Fixed width="30px" to width="30" (HTML attributes take plain numbers).
  • Added button reset styles in CSS to keep the same visual appearance.


Tested on a local Drupal 10 install with Olivero: Space key works, WAVE no longer flags missing alt
text, button looks the same as before.

guido_s made their first commit to this issue’s fork.

guido_s’s picture

guido_s
Location Cologne
commented
Status: Needs review » Reviewed & tested by the community

I tested it and noticed that the widget button had a strange style now because the Olivero theme rendered the block with a different block template in the navigation. So I adjusted the template of our widget and the styles and also removed the vendor prefix in the scss file as the compiler adds vendor prefixes where needed.
Looking good now and will be merged.

  • guido_s committed f70425d0 on 1.0.x authored by scontzen 
    feat: #3584414 Fix accessibility issues in widget template

By: scontzen...
guido_s’s picture

guido_s
Location Cologne
commented
Status: Reviewed & tested by the community » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.