[Enhancement]: Search SkinObject uses anchor without href causing SEO & accessibility issues

[uzmannazari]

Is there an existing issue for this?

• I have searched the existing issues

Description of problem

The Search SkinObject renders a clear-text control using an <a> element without an href attribute:
<a class="dnnSearchBoxClearText" title="<%= ClearQueryText %>"></a>
This element is not a navigational link and is only used as a UI control to clear the search input via JavaScript.

As a result:

• Google Lighthouse and PageSpeed report “Links are not crawlable”
• Google Search Console shows persistent crawlability warnings
• The markup violates HTML semantics and accessibility guidelines (WCAG), since an anchor without a destination is announced as a link with no target

This warning appears consistently on DNN-based sites and cannot be resolved at the site level without modifying the core Search SkinObject.

Description of solution

Replace the anchor element with a semantic button element:

<button
  type="button"
  class="dnnSearchBoxClearText"
  title="Clear search"
  aria-label="Clear search">
</button>

Why this works:

• A button is the correct semantic element for this behavior
• Existing JavaScript and CSS continue to work without changes
• SEO crawlability warnings are resolved
• Accessibility is improved (keyboard and screen-reader friendly)
• No breaking changes to behavior or UI

Description of alternatives considered

Adding href="#"
❌ Causes unwanted page jumps and is considered an anti-pattern

Keeping <a> and adding role="button"
❌ Still exposes an anchor without a navigable destination

Replacing with <span>
❌ Lacks native accessibility and keyboard support compared to

The <button> element is the most correct and standards-compliant solution.

Anything else?

This is a long-standing, low-risk issue that affects:

• SEO scores (Lighthouse / PageSpeed)
• Accessibility compliance
• HTML validity

Fixing it in core improves all DNN sites automatically without requiring custom skins or overrides.

Do you plan to contribute code for this enhancement?

• Yes

Would you be interested in sponsoring this enhancement?

• Yes

Code of Conduct

• I agree to follow this project's Code of Conduct

[valadas]

I do agree with the idea, however many themes may customize the look and feel based on the current markup, so it is something to consider...

[uzmannazari]

I do agree with the idea, however many themes may customize the look and feel based on the current markup, so it is something to consider...

Thanks for pointing that out, I agree this is something to be careful about

The change is intentionally minimal:

• The same CSS class name (dnnSearchBoxClearText) is preserved
• No JavaScript behavior or DOM structure is changed
• Only the semantic element is updated from <a> to <button type="button">

Any theme that styles based on the class selector (which is the recommended approach) will continue to work without changes.
Only themes that explicitly target the a element type (e.g. a.dnnSearchBoxClearText) would need a small selector update, which should be straightforward.

If preferred, we could also add a short note to the release notes to make this change explicit for theme authors.

[bdukes]

I think we'd need a new property on the skin object to use the button instead of the link. Even if they're styling the class, the browser styles that naturally apply to a button are different enough that the change will be noticed, so I think it needs to be opt-in. I definitely think having the option to render a button is great.