Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Creating HTML Content Add Social Media Links

Posted by catharinabhring
catharinabhring
233 Points

What "alt text" do I have to include with a twitter image?

<img src="img/facebook-wrap.png" alt=""> </li> <li> <img src="img/twitter-wrap.png" alt="">

index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit</title>
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <section>
      <ul>
        <li>
          <img src="img/numbers-01.jpg" alt="">
        </li>
        <li>
          <img src="img/numbers-02.jpg" alt="">
        </li>
        <li>
          <img src="img/numbers-06.jpg" alt="">
        </li>
      </ul>
    </section>
    <footer>
        <li>
        <img src="img/facebook-wrap.png" alt="">
        </li>
        <li>
        <img src="img/twitter-wrap.png" alt="">
        </li>
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
  </body>
</html>

3 Answers

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Catharina :)

I always write out what that image actually is if it is appropriate, as appose to what the image simply shows.

So for me my alt in that case would be "This is the twitter logo linking to my twitter home page @mytwitterpage", the reason for that is a when a screen reader for example, hits that link its quite clear on what that image is there for, rather than simply what the image shows.

Hope this helps :)

Craig

Sam Roberton
Sam Roberton
7,225 Points
Sam Roberton
Sam Roberton
7,225 Points

I'm not sure if this is part of a quiz or just a general question, but you should always include a short description of the image as a fallback in case the image doesn't render in the browser for whatever reason i.e. broken link, bad connection etc...

So in the case for the twitter logo the alt tag would simply be

<img src="img/twitter-logo.png" alt="Twitter Logo">

Some search engines also use these alt tags for SEO purposes.

Hope that helps.

Julian Fields
Julian Fields
8,983 Points
Julian Fields
Julian Fields
8,983 Points

A short description of what the image is will do. For fallback or visually impaired users.