SVG logo - Heading and web accessibility

Question

Inside header.handlebars I have only one svg file that I use as the page logo:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100px">
    <defs>
        <g id="SVG" fill="#005A9C">
            <path id="S"
                d="M 5.482,31.319 C2.163,28.001 0.109,23.419 0.109,18.358 C0.109,8.232 8.322,0.024 18.443,0.024 C28.569,0.024 36.782,8.232 36.782,18.358 L26.042,18.358 C26.042,14.164 22.638,10.765 18.443,10.765 C14.249,10.765 10.850,14.164 10.850,18.358 C10.850,20.453 11.701,22.351 13.070,23.721 L13.075,23.721 C14.450,25.101 15.595,25.500 18.443,25.952 L18.443,25.952 C23.509,26.479 28.091,28.006 31.409,31.324 L31.409,31.324 C34.728,34.643 36.782,39.225 36.782,44.286 C36.782,54.412 28.569,62.625 18.443,62.625 C8.322,62.625 0.109,54.412 0.109,44.286 L10.850,44.286 C10.850,48.480 14.249,51.884 18.443,51.884 C22.638,51.884 26.042,48.480 26.042,44.286 C26.042,42.191 25.191,40.298 23.821,38.923 L23.816,38.923 C22.441,37.548 20.468,37.074 18.443,36.697 L18.443,36.692 C13.533,35.939 8.800,34.638 5.482,31.319 L5.482,31.319 L5.482,31.319 Z" />
            <path id="V"
                d="M 73.452,0.024 L60.482,62.625 L49.742,62.625 L36.782,0.024 L47.522,0.024 L55.122,36.687 L62.712,0.024 L73.452,0.024 Z" />
            <path id="G"
                d="M 91.792,25.952 L110.126,25.952 L110.126,44.286 L110.131,44.286 C110.131,54.413 101.918,62.626 91.792,62.626 C81.665,62.626 73.458,54.413 73.458,44.286 L73.458,44.286 L73.458,18.359 L73.453,18.359 C73.453,8.233 81.665,0.025 91.792,0.025 C101.913,0.025 110.126,8.233 110.126,18.359 L99.385,18.359 C99.385,14.169 95.981,10.765 91.792,10.765 C87.597,10.765 84.198,14.169 84.198,18.359 L84.198,44.286 L84.198,44.286 C84.198,48.481 87.597,51.880 91.792,51.880 C95.981,51.880 99.380,48.481 99.385,44.291 L99.385,44.286 L99.385,36.698 L91.792,36.698 L91.792,25.952 L91.792,25.952 Z" />
        </g>
    </defs>
    <g id="SVG-label">
        <use xlink:href="#SVG" transform="scale(1) translate(10,10)" />
    </g>
</svg>

I import the header.handlebars and the body.handlebars in to the main.js file to build the page ui as follow:

<body class="px-2">
    {{> header }}
    {{{ body }}}
</body>

But if I run the web-accessibility test, I get the following Alert: Missing first level heading

I tried to fix it by wrapping the svg file (logo) inside h1 tag, but it didn't help.

What is the right way to make the logo accessible by using h1 tag?

can you see the generated (final) HTML? what does it look like? — blurfus, Feb 01 '21 at 21:38
Please [edit] your question and add it there - it's very hard to read in a comment. Also, isn't the `main` outside the `body` tags? is that not strange? — blurfus, Feb 01 '21 at 21:43

GrahamTheDev · Answer 1 · 2021-02-02T15:12:42.020

Short Answer

There are two ways you could address this add a <title> to your SVG or add some hidden text for screen reader users.

I have added both for completeness but I would recommend the second option for both accessibility and SEO.

Finally I would strongly recommend that you provide a fully visible <h1> that describes the page and use your logo as a link to the home page for numerous accessibility and UX reasons. I have explained this in the "Final Thoughts" section.

Long Answer

There are two ways to make SVGs accessible within a <h1>.

Option 1

It is valid HTML to have an SVG in a <h1> but you must have a <title> element in your SVG.

This is because otherwise the <h1> is basically empty as far as screen readers and web crawlers are concerned.

You can think of the <title> element in the same way as an alt attribute on an image, it provides a way to programatically determine the text within the SVG image.

So the following would be valid:

<h1>
    <svg>
        <title>Useful description of the SVG</title>
        [....svg paths etc.]
    </svg>
</h1>

Option 2

SVG is well supported, but for even better compatibility you could use visually hidden text to provide programatically determined text for your <h1>.

To do this we hide the SVG from screen readers and then use the visually hidden text to add meaningful information to the <h1>.

There are 2 things we need to do here.

First we need to hide the SVG from screen readers using aria-hidden="true". We also add focusable="false" as old Internet Explorer versions would focus SVGs by default.

Secondly we add the visually hidden class to our CSS and then add the visually hidden text inside a <span> within the <h1> .

<span class="visually-hidden">Useful description</span>

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<h1>
    <span class="visually-hidden">Useful description such as "SVG logo"</span>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100px" aria-hidden="true" focusable="false">
    <defs>
        <g id="SVG" fill="#005A9C">
            <path id="S"
                d="M 5.482,31.319 C2.163,28.001 0.109,23.419 0.109,18.358 C0.109,8.232 8.322,0.024 18.443,0.024 C28.569,0.024 36.782,8.232 36.782,18.358 L26.042,18.358 C26.042,14.164 22.638,10.765 18.443,10.765 C14.249,10.765 10.850,14.164 10.850,18.358 C10.850,20.453 11.701,22.351 13.070,23.721 L13.075,23.721 C14.450,25.101 15.595,25.500 18.443,25.952 L18.443,25.952 C23.509,26.479 28.091,28.006 31.409,31.324 L31.409,31.324 C34.728,34.643 36.782,39.225 36.782,44.286 C36.782,54.412 28.569,62.625 18.443,62.625 C8.322,62.625 0.109,54.412 0.109,44.286 L10.850,44.286 C10.850,48.480 14.249,51.884 18.443,51.884 C22.638,51.884 26.042,48.480 26.042,44.286 C26.042,42.191 25.191,40.298 23.821,38.923 L23.816,38.923 C22.441,37.548 20.468,37.074 18.443,36.697 L18.443,36.692 C13.533,35.939 8.800,34.638 5.482,31.319 L5.482,31.319 L5.482,31.319 Z" />
            <path id="V"
                d="M 73.452,0.024 L60.482,62.625 L49.742,62.625 L36.782,0.024 L47.522,0.024 L55.122,36.687 L62.712,0.024 L73.452,0.024 Z" />
            <path id="G"
                d="M 91.792,25.952 L110.126,25.952 L110.126,44.286 L110.131,44.286 C110.131,54.413 101.918,62.626 91.792,62.626 C81.665,62.626 73.458,54.413 73.458,44.286 L73.458,44.286 L73.458,18.359 L73.453,18.359 C73.453,8.233 81.665,0.025 91.792,0.025 C101.913,0.025 110.126,8.233 110.126,18.359 L99.385,18.359 C99.385,14.169 95.981,10.765 91.792,10.765 C87.597,10.765 84.198,14.169 84.198,18.359 L84.198,44.286 L84.198,44.286 C84.198,48.481 87.597,51.880 91.792,51.880 C95.981,51.880 99.380,48.481 99.385,44.291 L99.385,44.286 L99.385,36.698 L91.792,36.698 L91.792,25.952 L91.792,25.952 Z" />
        </g>
    </defs>
    <g id="SVG-label">
        <use xlink:href="#SVG" transform="scale(1) translate(10,10)" />
    </g>
</svg>
</h1>

Final thoughts

Although the above "fixes" the accessibility, there are other accessibility considerations that are important.

First and foremost your <h1> should really be the name of the page or describe the current page accurately. This is because a lot of users rely on this to ensure they have navigated correctly (especially screen reader users) and ended up on the page they were expecting.

As such your <h1> should be fully visible to everyone to help orientate themselves on your site.

Secondly a general rule is that your company logo should not be the <h1> on a page. It is expected behaviour (a key part of accessibility and User Experience (UX)) that the company logo is contained within a hyperlink that links to the homepage.

Luckily you can use either of the techniques above and simply switch the <h1> for an anchor <a href="homepageURL"> and it would work fine as you can programatically determine the link text.

What a great answer to my question Graham. Thanks a lot mate. — HomTom, Feb 02 '21 at 13:50