Currently the project logo is labelled on portal pages (which is good!), but we should consider hiding the logo from screenreader users using 'aria-hidden' because the project name is already read out in the <h1> tag. It can be argued the logo doesnt really add anything to the experience for screenreader users, and its also the first element in the page.
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Hide portal logos from screenreader users | wikimedia/portals | master | +12 -57 |
Change 982921 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):
[wikimedia/portals@master] Hide portal logos from screenreader users
I think this depends on a persons definition of 'decorative'. We could also consider changing the alt's from being the project name into actual descriptive alt, so that people can learn what the logo looks like. In this particular page that might actually make sense.
"Logo of Wikipedia. An unfinished globe made of puzzle pieces, some pieces are missing in the top. Each piece is inscribed with a glyph from a different writing system"
@TheDJ Thanks for bringing this point up! I know there's a larger discussion in the accessibility world about how 'decorative' images often convey context or other info and could be considered 'informational' images. To me, this depends a lot on the context, and in the case of a website logo, which is often the first element on the site, I think its best to be less verbose, and allow the name of the site/logo/brand to be the main focus. In my experience thats why logos are usually treated as 'decorative' unless they are part of a link. And in that case the label would be something like simple like "Wikipedia homepage"
I think the code on Portals is most similar to this example from w3, where the logo is considered repetitive when used next to logo text. Given the original markup has the logo next to the <h1>, I think something like this makes the most sense:
<h1 class="central-textlogo-wrapper">
<img class="central-featured-logo" src="{{l10n.assets.logo.src}}" srcset="{{l10n.assets.logo.srcset}}" width="{{l10n.assets.logo.width}}" height="{{l10n.assets.logo.height}}" alt="">
<span class="central-textlogo">
{{l10n.portal.name}}
</span>
<strong class="jsl10n localized-slogan" data-jsl10n="portal.slogan" >{{l10n.portal.slogan}}</strong>
</h1>Change 982921 merged by jenkins-bot:
[wikimedia/portals@master] Hide portal logos from screenreader users