Adding a Title and Description to the SVG Home Icon For Improved Accessibility in Breadcrumb

[onebrowncow]

Some CC users may find this little code hack handy. I found a solution after it was flagged as an accessibility issue by Google. It allows you to add a title and/or description to an svg icon , in this instance the svg home icon seen in the mobile skin or on small screens, improving the user experience for people with accessibility issues.

Find this original code in template element.breadcrumb.php
 

         <a itemprop="item" href="{$STORE_URL}">
            <span class="show-for-small-only">
               <svg class="icon"><use xlink:href="#icon-home"></use></svg>
            </span>
            <span class="show-for-medium-up" itemprop="name">{$LANG.common.home}</span>
         </a>

Edit to include the information for aria-describedby mark up:

<a itemprop="item" href="{$STORE_URL}">
            <span class="show-for-small-only">
               <svg class="icon" aria-describedby="svg-titlehome1 svg-deschome1" role="img"><title id="svg-titlehome1">home</title><desc id="svg-deschome1">home</desc><use xlink:href="#icon-home"></use></svg>
            </span>
            <span class="show-for-medium-up" itemprop="name">{$LANG.common.home}</span>
         </a>

The result of the additional code is the word 'home' appearing on hover over the home SVG icon in the mobile skin.

I've also made the same code addition to the home svg icon in box.navigation.php however you will need to change the aria-describedby title and desc to unique / different  ID names in a second instance for it to work with both templates.