TechQA.

Adding alt text and aria label to fav icon

431 views Asked by At

How can we add alt text and aria label to a fav icon?

Tried the following but has no effect.

I am questioning whether a fav icon even needs these details but see no references in W3 to confirm whether it is needed or not.

Pls advice.

<!DOCTYPE html>
<html>
<head>
  <title>My Page Title</title>
  <link 
    rel="icon" 
    type="image/x-icon" 
    href="https://www.company.com/favicon.ico" 

    <!-- This doesn't do anything. And do I even need this -->
    alt="some sample" 
    aria-label="I AM ARIA LABEL"
  >
</head>
<body>

<h1>This is a Heading 12</h1>
<p>This is a paragraph. 1</p>

</body>
</html>
html accessibility favicon wcag2.0
Original Q&A
3

There are 3 answers

2
Johannes On BEST ANSWER

The favicon is 1.) not an img tag and 2.) does not appear in the body of the HTML code, so you don't need an alt attribute or aria label attribute for it since it won't be read by screenreaders.

0
raininguranium17 On

alt or aria-label are not required or needed in the <link> tag that you have identified as a favicon to your page . as an addition to alt:

  • the alt attribute only works if a specific image in the website could not be displayed.
0
QuentinC On

Technically, since the <link> element referencing the favicon is in <head>, it isn't rendered in the page, and hence, can't have any alternative text or label.

In fact, the favicon is a pure decorative icon to help you quickly identify your website without the need for the user to read the URL or domain name. As such, it doesn't bring any useful information to blind and partially sighted users who can't distinguish enough detail allowing this quick visual recognition.

Note that, for the reasons just explained, if an alt text had been required, it should have been empty.

Related Questions in HTML

Related Questions in ACCESSIBILITY

Related Questions in FAVICON

Related Questions in WCAG2.0

Popular Questions

Trending Questions