Page MenuHomePhabricator

[a11y] Provide a label for the logo inside MinervaNeue's footer
Closed, ResolvedPublic2 Estimated Story Points

Description

Description

The wordmark logo inside the mobile footer is unlabeled. It is also in an h2 element, which is unnecessary and makes the heading structure of the page less clear. This was observed using VO in Chrome and Safari, but this issue should be reproducible in all screen reader/OS combinations.
https://phabricator.wikimedia.org/F34586280

Expected

  • The logo inside the footer uses the sitetitle message.
  • The logo is placed inside a div or another element instead of an h2 element

QA

QA Results - Beta

ACStatusDetails
1T288362#7403091
2T288362#7403091

QA Results - Prod

ACStatusDetails
1T288362#7413690
2T288362#7413690

Event Timeline

Jdlrobson triaged this task as Medium priority.Aug 11 2021, 2:16 PM
Jdlrobson added a subscriber: Jdlrobson.

The logo is placed inside a div or another element instead of an h2 element

I believe the reason for the h2 is because it degrades to a heading if no logo is given. I think this could be made conditional but we'd need to test both cases.

Jdlrobson renamed this task from Provide a label for the logo inside MinervaNeue's footer to [a11y] Provide a label for the logo inside MinervaNeue's footer.Aug 18 2021, 7:34 PM

Thinking about this more, even if there's no logo and it's just text is there a particular reason why we want to use an h2? The text doesn't really describe any content, and as far as I can tell it functions more like a logo than as a section heading. If possible, I'd err on the side of using less headings to avoid complicating the page's heading structure.

nray removed nray as the assignee of this task.
nray claimed this task.
nray added a subscriber: nray.

Change 722704 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/MinervaNeue@master] Add alt attribute to logo

https://gerrit.wikimedia.org/r/722704

nray removed nray as the assignee of this task.Sep 22 2021, 12:45 AM

Change 722704 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Add alt attribute to logo

https://gerrit.wikimedia.org/r/722704

Jdlrobson reassigned this task from Edtadros to nray.
Jdlrobson moved this task from QA to Doing on the Readers-Web-Backlog (Kanbanana-FY-2021-22) board.
Jdlrobson added a subscriber: Edtadros.

I thinks this is now blocked on the train, right?

Change 724179 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/MinervaNeue@master] Change footer logo from a heading element to a div

https://gerrit.wikimedia.org/r/724179

Change 724179 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Change footer logo from a heading element to a div

https://gerrit.wikimedia.org/r/724179

Test wiki created on Patch Demo by NRay (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/1053c9ce83/w/

Test Result - Beta

Status: ✅ PASS
Environment: beta/patchdemo
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1: Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Spain. Ensure that footer still has the text "Wikipedia".

Screen Shot 2021-10-05 at 10.20.15 AM.png (931×1 px, 217 KB)

✅ AC2: Visit https://patchdemo.wmflabs.org/wikis/1053c9ce83/w/index.php?title=Main_Page&mobileaction=toggle_view_mobile. Inspect the html of the footer 's logo. The img tag should have an alt attribute set. This img element should be inside a div element.
Screen Shot 2021-10-05 at 10.21.59 AM.png (931×1 px, 195 KB)

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1: Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Spain. Ensure that footer still has the text "Wikipedia".

✅ AC2: Visit https://patchdemo.wmflabs.org/wikis/1053c9ce83/w/index.php?title=Main_Page&mobileaction=toggle_view_mobile. Inspect the html of the footer 's logo. The img tag should have an alt attribute set. This img element should be inside a div element.

Screen Shot 2021-10-08 at 1.28.12 PM.png (1×971 px, 440 KB)