Search code examples
htmlcssaccessibilityfocuswai-aria

Web accessibility - focus items

I am working on a website, making it accessible. But I am having some trouble with the voice reader focus going into the items located in the footer. I tried using aria-label but it didn't work. I'll attach an image. The elements enter focus, which I can tell because of the blue ring around the item, but I don't know how to get the orange ring to focus to those anchor elements in the footer. voice over focus in the element above while the regular focus is in the item in the footer

Solution

  • The problem was created due to the use of "fontawesome.com" for the social media Icons. In order to include an alternative text or label to the element (provide by fontawesome.com) you need to use a different method: In my specific case this solved it:

    <a href="https://www.instagram.com/iamthonystark/" aria-label="Instagram">
<i aria-hidden="true" class="fab fa-instagram fa-3x"></i>
</a>

    Here is the link to this solution and the solution to other possible issues related to accessibility and fontawesome.com

    https://fontawesome.com/how-to-use/on-the-web/other-topics/accessibility