Fix accessibility problems in Umami's branding block

Created on 18 September 2018, over 6 years ago
Updated 3 August 2024, 5 months ago

Problem/Motivation

Umami has a couple of accessibility problems in the branding block:

  • The logo is an image of text, but the alt attribute says "Home". For a linked logo image like this, best practice is to make the alt text match what the graphic says.
  • Currently we do have this text as a visually-hidden site-name link, which helps screen reader users. Unfortunately it causes a problem for sighted keyboard users, who can TAB to the link but don't know what it says. This is a failure of WCAG "Focus Visible".

The visually-hidden class in Umami's custom branding block template prevents the "display site name" (and slogan) from working as expected, which could be confusing for evaluatorr who try using this feature.

Proposed resolution

When Add GUI to configure the site's logo alt attribute Needs work is done, we'll be able to fix both of the accessibility problems using configuration only.

Remove the visually-hidden class from Umami's branding block, so the site name and slogan behave as expected.

BONUS: the visually-hidden class is the only difference from the template in Classy, so it's an opportunity to remove a custom template.

Remaining tasks

  • Wait until Add GUI to configure the site's logo alt attribute Needs work is committed.
  • Set the logo alt text to "Umami Food Magazine", in the theme configuration.
  • Disable the site name in the branding block config.
  • Either remove the visually-hidden class (x2) from Umami's branding block template, OR remove the template entirely if no longer needed.
  • Follow-up issue. Make the site name and slogan look better in Umami theme.

User interface changes

  • No visible changes to the Umami design.
  • Accessiblity improvements for keyboard and screen reader users.
  • Improves the evaluator UX by letting the site name and slogan behave as expected.

API changes

None.

Data model changes

None.

🐛 Bug report
Status

Postponed

Version

11.0 🔥

Component
Umami 

Last updated about 2 months ago

Created by

🇬🇧United Kingdom andrewmacpherson

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.

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.

  • 🇳🇿New Zealand quietone

    The issue summary refers to Classy so removing the novice tag. Can be added back when this Issue Summary is updated when the other issue is fixed.

Production build 0.71.5 2024