Improve accessibility

Open on Drupal.org →

Created on 16 June 2021, about 3 years ago

Updated 2 May 2024, about 2 months ago

Problem/Motivation

There are two known accessibility issues. They're related to one another, so I've created a single issue.

Keyboard navigation - When a user tabs through a page, the tooltip cannot be tabbed to.
Screen reader - When using a screen reader, the tool tip definition is read first, followed by the glossary term. This is a confusing reading experience.

Steps to reproduce

Tab through a page with a glossary term using the keyboard. Read a page with a tool tip definition with VoiceOver in Chrome.
Read aloud a page with a glossary term using VoiceOver in Chrome.

Proposed resolution

Code tooltip to be tabbable
Ideal Solution: Code the definition in a manner recognizable to screen readers so that a user can chose whether to read the definition aloud.
Less Ideal Solution: Code the definition so that it is skipped by screen readers. If the Glossify setting is set to show the tooltip and link the term to a definition page there is at least a way for a user to get to the definition.

Further Reading: Tooltips Accessibility Best Practices (including example code)

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report

Status

Active

Version

3.0

Component

Code

Created by

🇺🇸United States cedewey Denver, CO

Live updates comments and jobs are added and updated live.

Accessibility
It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Incomplete comments

Sign in to follow issues

Comments & Activities

Not all content is available!

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

Comment 8 months ago →
🇺🇸United States kreynen
Somehow this got overlooked from 1.x->2x->3.0.0.

Testing to see if this change can be made in https://git.drupalcode.org/project/glossify/-/blob/3.x/templates/glossif...
Comment 8 months ago →
🇺🇸United States kreynen
The link example in https://dequeuniversity.com/library/aria/tooltip looks like it would be easy to implement in https://git.drupalcode.org/project/glossify/-/blob/3.x/templates/glossif...

The use of a tooltip role in https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/to... looked promising, but then https://sarahmhigley.com/writing/tooltips-in-wcag-21/ says "While it's not a bad idea to add it to the tooltip element, it doesn't seem to do much good either. The tooltip role does not appear to affect screen reader announcements in any meaningful way".

At this point, I'm not sure what the right way to fix this is, but I'm also noticing that the tool-tip only link doesn't work in mobile. Clicking on the underlined term just selects it.
Comment about 2 months ago →
🇺🇸United States chkitchens
inregards2pluto → made their first commit to this issue’s fork.

contrib.social Blog FAQ Discussions

Production build 0.69.0 2024