Sign in

Title tag in the Back To Top button

  • This topic has 1 reply, 2 voices, and was last updated 2 years, 8 months ago by .
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #4978
    Avatar photomlryan

    I am using the simple theme. Bing Webmaster tools complains of there being more than one title tag on the page. On examination the first title is in the head tag (no surprises there!) and the second title is in the footer, associated with the Back to Top button. The HTML generated by Publii appears to be correct, but perhaps not quite as accessible as it should be.

    <button class="footer__bttop js-footer__bttop" aria-label="Back to top">
    <svg>
    <title>Back to top</title>
    <use xlink:href="https://www.fullonecommerce.com/assets/svg/svg-map.svg#toparrow"/>
    </svg>
    </button>

     

    According to this (apparently authoritative) article on accessibility, the use of title is supported when the aria-labelledby attribute is set in the svg tag.

    <button class="menu-trigger" > 
    
        <svg focusable="false" width="24" height="28" viewBox="0 0 24 28"
                role="img" aria-labelledby="svg-title">
            <title id="svg-title"> Menu </title>
            <!-- svg content -->
        </svg>
    
    </button>

    You might want to consider making this small modification. Not sure if this is just a theme mod, or if a Publii change is required.

    #4984
    Avatar photobtrem

    That looks like a bug in Bing webmaster tools. The <title> element is permissible in <svg> documents. And html5 documents can contain <svg> elements inline, with no namespaces. (The aria labels don’t really have any impact on whether the document has errors or not, at least in this case.)

    Bottom line, your markup looks fine to me.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.