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 #2780293: Add GUI to configure the site's logo alt and title attributes is done, we'll be able to fix both of the accessibility problems using configuration only.
- Make the logo alt. text match the text contained in the image itself. This follows example 9 (a newspaper logo) in Understanding Success Criterion 1.1.1: Non-text Content, which is a perfect match for the Umami scenario. Also see this W3C tutorial about Image used alone as a linked logo.
- Remove the site-name link. It's an unnecessary duplicate, once the logo alt is fixed.
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 #2780293: Add GUI to configure the site's logo alt and title attributes 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-hiddenclass (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.
