Assign an "Accessible name" to Home icon

Home Forums Premium Themes Support ForumAssign an "Accessible name" to Home icon iFeatureAssign an "Accessible name" to Home icon Assign an "Accessible name" to Home icon

Tagged: 

This topic contains 4 replies, has 2 voices, and was last updated by  Milind (CyberChimps Team) 3 months ago.

  • Author
    Posts
  • #287556

    ktfcu
    Participant

    I am working on making my site https://ktfcu.org more accessible.

    I use the Home (house icon) in the Navigation bar. Accessibility sites flag it for: “The A element does NOT have an accessible name. Add text content to the link or use an ARIA labeling technique so that the accessible name describes the target of the link.”

    I think all I need to do is assign something like alt=”Home” to the icon it but I have been unable to get that correct in the Additional CSS section.

    Thank you in advance for any guidance.

    Bill

  • #287747

    Hi,

    I didn’t understand your query properly. Can you please elaborate more?
    Can you please let me know what you are actually looking for?

    Thank you.

  • #287749

    Hi,

    I didn’t understand your query properly. Can you please elaborate more?
    Can you please let me know what you are actually looking for?

    Thank you

  • #287753

    ktfcu
    Participant

    If you look at my site https://ktfcu.org you see I am using the Home icon (the little house) in the Navigation menu. I am trying to make my site WCAG 2.0 compliant.

    When I test my site at one of the many testing sites (http://wave.webaim.org/ for example) they always flag the Home icon in the navigation bar. My understanding is screen readers don’t know what to do with the icon because there is no associated text.

    I think it needs something like the alternative text you assign to any image on your page. I don’t know how to do that for the Home icon.

    Thanks, Bill

  • #288494

    Hi,

    We haven’t added an image for that Home icon in the menu. It’s a glyphicon icon which we have included and hence it doesn’t have an alt text
    You can check it here.
    https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp

    Thank you.

You must be logged in to reply to this topic.