Subject: Weaver Xtreme Accessibility Improvements (WCAG 2.1 AA)

[ROBIN]

I have been bringing up ADA compliance a lot and many people are telling me to not worry about it. I promise that is becoming a really big issue for a lot of website designers.

I have been doing my best to bring my websites into compliance and I have had 2 reaccuring issues.

1. Search icon isn’t compliant
2. PlaceHolder Menu items are not compliant

I was hoping I could maybe ask that these two things be addressed in a future release? I know that I know nothing about designing a Theme, so if this is a crazy request please forgive me.

Here is what Chat GPT suggested:

Hello Weaver Xtreme Team,

I’m reviewing accessibility issues in the theme and wanted to flag a couple of areas that need improvement to better align with WCAG 2.1 AA standards. These issues mainly affect screen reader usability and the way interactive elements are announced.

The main concerns involve dropdown menu triggers and the header search button. Both currently lack proper semantic structure or accessible naming, which can make navigation difficult for users relying on assistive technology.

Below are the specific issues and recommended fixes:

<hr data-start=”743″ data-end=”746″ />

Issue 1: Dropdown Menu Items Using Placeholder Links

Description:<br data-start=”814″ data-end=”817″ />Some menu items that function as dropdown toggles (such as “About”) are currently implemented using placeholder links (href=”#”). While they behave like buttons, they are still coded as links.

Problem:

<ul data-start=”1022″ data-end=”1298″>
<li data-section-id=”12o7zwd” data-start=”1022″ data-end=”1077″>This creates a WCAG 4.1.2 (Name, Role, Value) issue
<li data-section-id=”cadd5r” data-start=”1078″ data-end=”1151″>Screen readers may interpret these as non-functional or invalid links
<li data-section-id=”1x6kx22″ data-start=”1152″ data-end=”1213″>There is no proper indication of expanded/collapsed state
<li data-section-id=”yhio8o” data-start=”1214″ data-end=”1298″>Links are being used for button-like behavior, which is not semantically correct

Requested Fix:<br data-start=”1314″ data-end=”1317″ />Replace placeholder links used for dropdown toggles with proper accessible controls.

Preferred implementations:

<ul data-start=”1430″ data-end=”1703″>
<li data-section-id=”mxkd6g” data-start=”1430″ data-end=”1479″>Use a button element for submenu toggles<br data-start=”1472″ data-end=”1475″ />OR
<li data-section-id=”342w85″ data-start=”1480″ data-end=”1703″>If anchor elements must be retained, ensure proper accessibility attributes are included:
<ul data-start=”1574″ data-end=”1703″>
<li data-section-id=”1q5bmrb” data-start=”1574″ data-end=”1589″>role=”button”
<li data-section-id=”10rx4tc” data-start=”1592″ data-end=”1620″>aria-expanded=”true/false”
<li data-section-id=”1h0hiyj” data-start=”1623″ data-end=”1703″>aria-label that clearly describes the submenu function (e.g., “About submenu”)

<hr data-start=”1705″ data-end=”1708″ />

Issue 2: Header Search Button Missing Accessible Name

Description:<br data-start=”1777″ data-end=”1780″ />The search submit button is currently icon-only, using a search icon without any accessible label or text.

Problem:

<ul data-start=”1899″ data-end=”2081″>
<li data-section-id=”6g1rgr” data-start=”1899″ data-end=”1942″>Violates WCAG 4.1.2 (Name, Role, Value)
<li data-section-id=”17fgfl3″ data-start=”1943″ data-end=”2004″>Screen readers cannot determine the purpose of the button
<li data-section-id=”190zxwx” data-start=”2005″ data-end=”2081″>The icon is not conveyed as meaningful content to assistive technologies

Requested Fix:<br data-start=”2097″ data-end=”2100″ />Provide a clear accessible name for the search button.

Preferred implementations:

<ul data-start=”2183″ data-end=”2352″>
<li data-section-id=”1s5x15d” data-start=”2183″ data-end=”2238″>Add aria-label=”Search” directly to the button<br data-start=”2231″ data-end=”2234″ />OR
<li data-section-id=”19j5gfy” data-start=”2239″ data-end=”2352″>Add visually hidden text such as “Search” for screen readers<br data-start=”2301″ data-end=”2304″ />AND ensure the icon is marked aria-hidden=”true”

<hr data-start=”2354″ data-end=”2357″ />

Summary:

These issues both relate to missing or incorrect accessibility semantics for interactive elements:

<ul data-start=”2469″ data-end=”2634″>
<li data-section-id=”152prs3″ data-start=”2469″ data-end=”2564″>Dropdown toggles are using non-semantic placeholder links instead of proper button behavior
<li data-section-id=”504kx7″ data-start=”2565″ data-end=”2634″>The search button lacks an accessible name due to being icon-only

Addressing these will improve WCAG 2.1 AA compliance and significantly enhance usability for screen reader users.

FORGIVE ME if I have overstepped.

Thanks

[scrambler]

@weaver would have to comment

[Weaver]

@ROBIN – keeping me on my toes. I’ve avoided (ignored…) Accessibility for a log time, but it has been on my to do someday list for a while. So a little poke is actually just what I needed.

Accessibility doesn’t need to be overly complicated, it turns out, and I think I can make the changes farily quickly – but I’m kind of on my summer schedule.

But for now, I can get the menus and the search buttons into compliance fairly quickly. I will post a beta version as soon as I can, and post a note on this discussion when it is ready.

[Weaver]

And are there other specific items that might be causing issues – buttons, for example? Navigation links in pages/posts? Are the standard links compliant – I think that might be handled by WP directly when displaying post/page content.

[User]

@Weaver

FYI, below are two examples of what I changed to help move my Accessibility Score from 41 to 71.

I think these two are generic WP widget defaults(?).

The largest changes in the Score improvement related to the sidebar link text color, which I changed the usual dark blue hyperlink color to black.

I also found that 1 plugin widget needed the default header and contents font size increased from 16 to 18.

I considered improving my score above 71, but it seemed that the remaining issues may get changed when you update Xtreme, so I chose to make no more improvements, and await the Xtreme update.

No need reply — and hope this helps!.

/* Search Form height and font */
.search-form input[type="search"] { height: 30px !important; font-size: 18px !important; }

/* Archives search box */
#archives-dropdown-2 { font-size: 16px !important; line-height: 1.0 !important; height: 25px !important; }

[Author]

Posts