Site Logo is paragraph instead of image

[jessynd]

Issue Summary

This an accessibility issue and a usability issue. The design calls for an icon to display to the left of the site title in the header block. The issue from an accessibility point of view is that the icon is decorative but it's being read out by the screen reader because it's in a paragraph it's a glyph within the readable space of unicode (see more in @joedolson's comment below). It conveys no relevant information for the user.

From a usability perspective, this type of graphic in the design is often where a company logo would go and it's likely that many users of this theme will want to use an image here. Having it as a paragraph doesn't allow users to easily upload their own logo to this header.

Current code

<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontSize":"1.5rem"}}} -->
<p style="font-size:1.5rem">✦</p>
<!-- /wp:paragraph -->
<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}}} -->
<div class="wp-block-group"><!-- wp:site-title /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

Steps to reproduce

1. Go to any page in the theme.
2. Inspect element on the icon next to the site title in the header block of the page.
3. Observe that it is a paragraph and not an image.

Recommendation

1. Swap out the paragraph block for an image block.
2. Ensure that the alt is empty since in our demo template, the diamond is decorative alt=""
3. Adjust the styles of the theme so it follows the figma spec.

Recommended code

HTML

<div class="wp-block-group"><!-- wp:image {"id":18,"width":51,"height":51,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="logo.png" alt="" class="wp-image-18" style="width:51px;height:51px" width="51" height="51"/></figure>
<!-- /wp:image -->

<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}}} -->
<div class="wp-block-group"><!-- wp:site-title /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

Specifications

Relevant Template Files:
header-copy.html
header-portfolio.html
header-writer.html
header.html
WCAG Principle: Understanding
WCAG SC: 1.1.1

[joedolson]

The glyph is actually being read because it's a glyph within the readable space of unicode; which is to say that it has a standard recognized name. Alternate font glyphs used in things like dashicons are not usually read because they're in undefined unicode bands. It's standard practice to assign aria-hidden to graphics like font icons because it is possible that any currently undefined unicode could become defined, causing that icon to be read by assistive technology.

This glyph is decorative, so it should be treated as decorative in the code. That could be resolved by using an image block and an empty alt, but it can also be resolved by using aria-hidden on a wrapping element, as long as the graphic is not linked.

[MaggieCabrera]

It is not a logo so let’s go with wrapping and hiding for this one. Awesome feedback both of you

[jessynd]

Thanks for the explanation about unicode glyphs and how they're handled by screen readers @joedolson! I will amend the issue description.

[carolinan]

In the footer, we changed it to a site logo. I would have thought it was the site logo in the header, too.
See #51 (comment)

[MaggieCabrera]

In the footer, we changed it to a site logo. I would have thought it was the site logo in the header, too. See #51 (comment)

It never was, and I probably would have mentioned if I got the time to review, we are still discussing how to best solve this while keeping the intention of the design

[richtabor]

Yes, these should both be site logo blocks. People will want to see their logos, rather than the asterisk. We should have it set up for that out of the box.

[carolinan]

What about rendering the asterix on the front if there is no site logo selected? Like a placeholder.

[MaggieCabrera]

Yes, these should both be site logo blocks. People will want to see their logos, rather than the asterisk. We should have it set up for that out of the box.

I think @beafialho said to use images instead of the character

[beafialho]

If we could get these to be SVGs it would be ideal, can we?

[richtabor]

I think @beafialho said to use images instead of the character

Right. The image can be the site logo.

If we could get these to be SVGs it would be ideal, can we?

I don't think we will be able to.