Quantcast
Channel: Issues for Drupal core
Viewing all articles
Browse latest Browse all 300130

Accessibility: skipped heading level on for search "no results" text

$
0
0

Problem/Motivation

When there are no search results, the markup of the "empty" message is h3, but there's no h2. Best practice is to not skip heading levels (WCAG success criteria 1.3.1, "Organizing a page using headings" advisory technique).

EDIT: More importantly, as pointed out in the thread, this heading doesn't head any content -- the heading is used to make the text look a certain way:

https://www.w3.org/WAI/WCAG21/Techniques/failures/F43 - either "Example 1: A heading used only for visual effect" OR "Example 2: Using heading elements for presentational effect"

Steps to reproduce

On a Drupal site with default/core search, run a search that yields no results, i.e. "asdfgghjhasdfj"--
/search/node?keys=asdfgghjhasdfj

On the resulting page, you'll see the following markup:
<h3>Your search yielded no results.</h3>

Proposed resolution

Replace the heading markup with a simple <p> or <div> element -- perhaps with a class if styling is desired, but that would be optional.

Remaining tasks

  1. Update "empty" markup (SearchController.php line 121).
  2. Optional: update Umami profile search-results.css.
  3. Backport to 9.3 (?) (...I don't know the rules, but I know I want it on our 9.x sites, so I hope qualifies for getting backported!)

User interface changes

The heading markup.

Before:
Screenshot of empty search results message with header styling

After using paragraph tag:
Screenshot of empty search results message with paragraph styling

After using emphasis tag:
Screenshot of empty search results message with emphasis styling

API changes

n/a

Data model changes

n/a

Release notes snippet

(?)


Viewing all articles
Browse latest Browse all 300130

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>