Fix accessibility issues by using visually-hidden on hide and unsetting title element on remove

Created on 6 March 2023, about 2 years ago

Updated 9 February 2024, about 1 year ago

Problem/Motivation

- This module was putting on the "hidden" class and I wanted it to show "visually-hidden" so that it still renders for screen readers.
- This module should not simply suppress the text from the h1 tag, it should remove the tag altogether. An empty header tag is an accessibility issue that triggers analysis tools like SiteImprove.

Steps to reproduce

1. Configure a content type and create a node of that type to use Exclude Node Title.
2. Configure its title to be hidden and view the node.
3. Configure its title to be removed and view the node.

Step 2, the title is hidden with `hidden` which is a display:none. This will not be picked up by screen readers.
Step 3, the title is emptied. This will be picked up by screen readers as an empty header.

Proposed resolution

- Apply the visually-hidden class to the title element when set to hide. This is for when we want to not show the title but have the screen reader pick up the text.
- Remove the title element entirely when set to remove. This is for when we really want to remove the title from the HTML.

Remaining tasks

- Review

User interface changes

- Removing the title should now remove its empty element. This may affect implementations that unknowingly relied on that empty element for spacing purposes, or worked around it to visually remove any spacing that empty element introduced.

API changes

None

Data model changes

None

🐛 Bug report

Status

Needs review

Version

1.0

Component

Code

Created by

🇺🇸United States dasginganinja Bethlehem, PA

Live updates comments and jobs are added and updated live.

Incomplete comments

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Comment about 1 year ago →
🇺🇸United States fskreuz
Combining this patch with a fix for https://www.drupal.org/project/exclude_node_title/issues/3247751 → to address a related accessibility issue. Having two separate patches for each issue will conflict, since the changes are in close proximity. Combining them should expedite the fix. Combined patch now:

- Applies the visually-hidden class to the title element when hidden.
- Removes the title element entirely when removed.
Comment about 1 month ago →
System Message

smustgrave → committed 953ccb0a on 2.0.x
Issue #3346319 by dasginganinja, fskreuz: Fix accessibility issues by...
Status changed to Fixed about 1 month ago5:15pm 12 March 2025
Comment about 1 month ago →
🇺🇸United States smustgrave
Comment 23 days ago →
System Message
Automatically closed - issue fixed for 2 weeks with no activity.

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024