Alt text is a term used in web design and publishing to describe the text that appears below images on a web page. Alt text is also used to describe the text that appears when an image is clicked or tapped.
Alt text can be used for a variety of purposes, including helping people with disabilities access information on a web page, providing additional information about an image, or helping people find specific images on a page.
To create alt text, first determine what information you want to include in your description of the image. Then use the appropriate tags to add that information to your HTML code. For example, if you want to include the title of the image in your description, you would use the
tag. If you want to include the filename of the image in your description, you would use the <src> tag.
Once you have added all of the necessary tags, it’s time to write your alt text. To make sure everything looks correct, preview your page in a browser before publishing it online. ..</p>
<h2 id="why-is-alt-text-important">Why Is ALT Text Important?<a hidden class="anchor" aria-hidden="true" href="#why-is-alt-text-important">#</a></h2>
<p>Alt attributes exist as a backup form of content; when the main type of content cannot be rendered, its alternate or “alt” attribute is rendered instead. In the case of alt text, if the image cannot be rendered for some reason, you’ll get the alt text description instead.</p>
<p>This allows someone, for example, to copy an image “as text.” Or if you save a website without any images, the alt text remains, telling you what the images were meant to show.</p>
<p>Alt text is also a crucial component of web accessibility. Visitors have low vision and rely on screen reading software to hear an image’s alt text description. If there is no alt text, or if the alt text is poor, that negatively affects the experience of users with visual problems. It can also make navigation difficult for those with limited internet connections relying on text-based browsers.</p>
<p>Alt text is also important in SEO (Search Engine Optimization) since it helps search engines like Google or Bing better index your content. Indexing is what makes content findable with those search engines.</p>
<h2 id="how-to-write-good-alt-text">How to Write Good ALT Text<a hidden class="anchor" aria-hidden="true" href="#how-to-write-good-alt-text">#</a></h2>
<p>Alt text shouldn’t simply be a literal description of what’s in your image. You need to consider the context of the image and why it’s there in the first place. Consider this image:</p>
<p>If your alt text for this image was, “A large statue of a woman holding up a torch and cradling a book,” it would be an accurate description of what’s in the image, but it wouldn’t be good alt text.</p>
<p>A better description might be, “The Statue of Liberty in New York against a cloudy blue sky.” The context of the page matters as well. If the image was part of a news story about immigration, the alt text might be, “The Statue of Liberty in New York, a powerful symbol for prospective immigrants.”</p>
<p>Think about the image’s purpose, and write your alt text accordingly!</p>
<p>It’s important that your primary keyword appears in some of your alt text, but don’t put it into every image, especially if the keyword isn’t part of a good alt text description</p>
<h2 id="when-not-to-use-alt-text">When Not to Use ALT Text<a hidden class="anchor" aria-hidden="true" href="#when-not-to-use-alt-text">#</a></h2>
<p>There are two situations where using alt text is something to avoid. The first is for images that are purely decorative. These images aren’t interesting to anyone using a screen reader and are irrelevant to your SEO efforts. In fact, describing purely decorative images can muddle search engine indexing and make your article harder to understand for anyone using a screen reader.</p>
<p>As with the general principles of writing good alt text, the decision on whether to write alt text at all rests on what benefits the reader the most. If alt text adds to their understanding and helps retain the value of the original images, you should make an effort to include it.</p>
<h2 id="adding-alt-text-on-social-media">Adding ALT Text on Social Media<a hidden class="anchor" aria-hidden="true" href="#adding-alt-text-on-social-media">#</a></h2>
<p>Alt text isn’t just something website designers and bloggers must consider. Most of us post images to social media, and most social media platforms offer a way to add alt text to those photos. You may not even be aware of it, but in some cases, alt text is automatically generated using machine vision technology.</p>
<p>The steps for adding or editing alt text on social media change over time as these platforms undergo changes. We’ve seen many out-of-date instructions for the various social media platforms, so you’re the best choice is to check the official documentation for Facebook and Twitter.</p>
<p>Adding alt text only takes a few seconds per image, but it can make all the difference to your content’s performance and how accessible the web is to those with visual impairments.</p>
<p>RELATED: How to Add Alternative Text to an Object in Microsoft Word</p>
<h2 id="related-video">Related Video<a hidden class="anchor" aria-hidden="true" href="#related-video">#</a></h2>
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe src="https://www.youtube.com/embed/flf2vS0IoRs" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen title="YouTube Video"></iframe>
</div>
</div>
<footer class="post-footer">
<ul class="post-tags">
</ul>
<nav class="paginav">
<a class="prev" href="https://bluemonthstar.pages.dev/posts/what-is-a-wrapped-bitcoin-/">
<span class="title">« Prev</span>
<br>
<span>What Is A Wrapped Bitcoin?</span>
</a>
<a class="next" href="https://bluemonthstar.pages.dev/posts/what-is-the-avif-image-format-/">
<span class="title">Next »</span>
<br>
<span>What Is The Avif Image Format?</span>
</a>
</nav>
<div class="share-buttons">
<a target="_blank" rel="noopener noreferrer" aria-label="share What Is Alt Text? Why You Should Use It, And How To Write It. on twitter"
href="https://twitter.com/intent/tweet/?text=What%20Is%20Alt%20Text%3f%20Why%20You%20Should%20Use%20It%2c%20And%20How%20To%20Write%20It.&url=https%3a%2f%2fbluemonthstar.pages.dev%2fposts%2fwhat-is-alt-text-why-you-should-use-it-and-how-to-write-it-%2f&hashtags=">
<svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
<path
d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-253.927,424.544c135.939,0 210.268,-112.643 210.268,-210.268c0,-3.218 0,-6.437 -0.153,-9.502c14.406,-10.421 26.973,-23.448 36.935,-38.314c-13.18,5.824 -27.433,9.809 -42.452,11.648c15.326,-9.196 26.973,-23.602 32.49,-40.92c-14.252,8.429 -30.038,14.56 -46.896,17.931c-13.487,-14.406 -32.644,-23.295 -53.946,-23.295c-40.767,0 -73.87,33.104 -73.87,73.87c0,5.824 0.613,11.494 1.992,16.858c-61.456,-3.065 -115.862,-32.49 -152.337,-77.241c-6.284,10.881 -9.962,23.601 -9.962,37.088c0,25.594 13.027,48.276 32.95,61.456c-12.107,-0.307 -23.448,-3.678 -33.41,-9.196l0,0.92c0,35.862 25.441,65.594 59.311,72.49c-6.13,1.686 -12.72,2.606 -19.464,2.606c-4.751,0 -9.348,-0.46 -13.946,-1.38c9.349,29.426 36.628,50.728 68.965,51.341c-25.287,19.771 -57.164,31.571 -91.8,31.571c-5.977,0 -11.801,-0.306 -17.625,-1.073c32.337,21.15 71.264,33.41 112.95,33.41Z" />
</svg>
</a>
<a target="_blank" rel="noopener noreferrer" aria-label="share What Is Alt Text? Why You Should Use It, And How To Write It. on linkedin"
href="https://www.linkedin.com/shareArticle?mini=true&url=https%3a%2f%2fbluemonthstar.pages.dev%2fposts%2fwhat-is-alt-text-why-you-should-use-it-and-how-to-write-it-%2f&title=What%20Is%20Alt%20Text%3f%20Why%20You%20Should%20Use%20It%2c%20And%20How%20To%20Write%20It.&summary=What%20Is%20Alt%20Text%3f%20Why%20You%20Should%20Use%20It%2c%20And%20How%20To%20Write%20It.&source=https%3a%2f%2fbluemonthstar.pages.dev%2fposts%2fwhat-is-alt-text-why-you-should-use-it-and-how-to-write-it-%2f">
<svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
<path
d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-288.985,423.278l0,-225.717l-75.04,0l0,225.717l75.04,0Zm270.539,0l0,-129.439c0,-69.333 -37.018,-101.586 -86.381,-101.586c-39.804,0 -57.634,21.891 -67.617,37.266l0,-31.958l-75.021,0c0.995,21.181 0,225.717 0,225.717l75.02,0l0,-126.056c0,-6.748 0.486,-13.492 2.474,-18.315c5.414,-13.475 17.767,-27.434 38.494,-27.434c27.135,0 38.007,20.707 38.007,51.037l0,120.768l75.024,0Zm-307.552,-334.556c-25.674,0 -42.448,16.879 -42.448,39.002c0,21.658 16.264,39.002 41.455,39.002l0.484,0c26.165,0 42.452,-17.344 42.452,-39.002c-0.485,-22.092 -16.241,-38.954 -41.943,-39.002Z" />
</svg>
</a>
<a target="_blank" rel="noopener noreferrer" aria-label="share What Is Alt Text? Why You Should Use It, And How To Write It. on reddit"
href="https://reddit.com/submit?url=https%3a%2f%2fbluemonthstar.pages.dev%2fposts%2fwhat-is-alt-text-why-you-should-use-it-and-how-to-write-it-%2f&title=What%20Is%20Alt%20Text%3f%20Why%20You%20Should%20Use%20It%2c%20And%20How%20To%20Write%20It.">
<svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
<path
d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-3.446,265.638c0,-22.964 -18.616,-41.58 -41.58,-41.58c-11.211,0 -21.361,4.457 -28.841,11.666c-28.424,-20.508 -67.586,-33.757 -111.204,-35.278l18.941,-89.121l61.884,13.157c0.756,15.734 13.642,28.29 29.56,28.29c16.407,0 29.706,-13.299 29.706,-29.701c0,-16.403 -13.299,-29.702 -29.706,-29.702c-11.666,0 -21.657,6.792 -26.515,16.578l-69.105,-14.69c-1.922,-0.418 -3.939,-0.042 -5.585,1.036c-1.658,1.073 -2.811,2.761 -3.224,4.686l-21.152,99.438c-44.258,1.228 -84.046,14.494 -112.837,35.232c-7.468,-7.164 -17.589,-11.591 -28.757,-11.591c-22.965,0 -41.585,18.616 -41.585,41.58c0,16.896 10.095,31.41 24.568,37.918c-0.639,4.135 -0.99,8.328 -0.99,12.576c0,63.977 74.469,115.836 166.33,115.836c91.861,0 166.334,-51.859 166.334,-115.836c0,-4.218 -0.347,-8.387 -0.977,-12.493c14.564,-6.47 24.735,-21.034 24.735,-38.001Zm-119.474,108.193c-20.27,20.241 -59.115,21.816 -70.534,21.816c-11.428,0 -50.277,-1.575 -70.522,-21.82c-3.007,-3.008 -3.007,-7.882 0,-10.889c3.003,-2.999 7.882,-3.003 10.885,0c12.777,12.781 40.11,17.317 59.637,17.317c19.522,0 46.86,-4.536 59.657,-17.321c3.016,-2.999 7.886,-2.995 10.885,0.008c3.008,3.011 3.003,7.882 -0.008,10.889Zm-5.23,-48.781c-16.373,0 -29.701,-13.324 -29.701,-29.698c0,-16.381 13.328,-29.714 29.701,-29.714c16.378,0 29.706,13.333 29.706,29.714c0,16.374 -13.328,29.698 -29.706,29.698Zm-160.386,-29.702c0,-16.381 13.328,-29.71 29.714,-29.71c16.369,0 29.689,13.329 29.689,29.71c0,16.373 -13.32,29.693 -29.689,29.693c-16.386,0 -29.714,-13.32 -29.714,-29.693Z" />
</svg>
</a>
<a target="_blank" rel="noopener noreferrer" aria-label="share What Is Alt Text? Why You Should Use It, And How To Write It. on facebook"
href="https://facebook.com/sharer/sharer.php?u=https%3a%2f%2fbluemonthstar.pages.dev%2fposts%2fwhat-is-alt-text-why-you-should-use-it-and-how-to-write-it-%2f">
<svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
<path
d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-106.468,0l0,-192.915l66.6,0l12.672,-82.621l-79.272,0l0,-53.617c0,-22.603 11.073,-44.636 46.58,-44.636l36.042,0l0,-70.34c0,0 -32.71,-5.582 -63.982,-5.582c-65.288,0 -107.96,39.569 -107.96,111.204l0,62.971l-72.573,0l0,82.621l72.573,0l0,192.915l-191.104,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Z" />
</svg>
</a>
<a target="_blank" rel="noopener noreferrer" aria-label="share What Is Alt Text? Why You Should Use It, And How To Write It. on whatsapp"
href="https://api.whatsapp.com/send?text=What%20Is%20Alt%20Text%3f%20Why%20You%20Should%20Use%20It%2c%20And%20How%20To%20Write%20It.%20-%20https%3a%2f%2fbluemonthstar.pages.dev%2fposts%2fwhat-is-alt-text-why-you-should-use-it-and-how-to-write-it-%2f">
<svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
<path
d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-58.673,127.703c-33.842,-33.881 -78.847,-52.548 -126.798,-52.568c-98.799,0 -179.21,80.405 -179.249,179.234c-0.013,31.593 8.241,62.428 23.927,89.612l-25.429,92.884l95.021,-24.925c26.181,14.28 55.659,21.807 85.658,21.816l0.074,0c98.789,0 179.206,-80.413 179.247,-179.243c0.018,-47.895 -18.61,-92.93 -52.451,-126.81Zm-126.797,275.782l-0.06,0c-26.734,-0.01 -52.954,-7.193 -75.828,-20.767l-5.441,-3.229l-56.386,14.792l15.05,-54.977l-3.542,-5.637c-14.913,-23.72 -22.791,-51.136 -22.779,-79.287c0.033,-82.142 66.867,-148.971 149.046,-148.971c39.793,0.014 77.199,15.531 105.329,43.692c28.128,28.16 43.609,65.592 43.594,105.4c-0.034,82.149 -66.866,148.983 -148.983,148.984Zm81.721,-111.581c-4.479,-2.242 -26.499,-13.075 -30.604,-14.571c-4.105,-1.495 -7.091,-2.241 -10.077,2.241c-2.986,4.483 -11.569,14.572 -14.182,17.562c-2.612,2.988 -5.225,3.364 -9.703,1.12c-4.479,-2.241 -18.91,-6.97 -36.017,-22.23c-13.314,-11.876 -22.304,-26.542 -24.916,-31.026c-2.612,-4.484 -0.279,-6.908 1.963,-9.14c2.016,-2.007 4.48,-5.232 6.719,-7.847c2.24,-2.615 2.986,-4.484 4.479,-7.472c1.493,-2.99 0.747,-5.604 -0.374,-7.846c-1.119,-2.241 -10.077,-24.288 -13.809,-33.256c-3.635,-8.733 -7.327,-7.55 -10.077,-7.688c-2.609,-0.13 -5.598,-0.158 -8.583,-0.158c-2.986,0 -7.839,1.121 -11.944,5.604c-4.105,4.484 -15.675,15.32 -15.675,37.364c0,22.046 16.048,43.342 18.287,46.332c2.24,2.99 31.582,48.227 76.511,67.627c10.685,4.615 19.028,7.371 25.533,9.434c10.728,3.41 20.492,2.929 28.209,1.775c8.605,-1.285 26.499,-10.833 30.231,-21.295c3.732,-10.464 3.732,-19.431 2.612,-21.298c-1.119,-1.869 -4.105,-2.99 -8.583,-5.232Z" />
</svg>
</a>
<a target="_blank" rel="noopener noreferrer" aria-label="share What Is Alt Text? Why You Should Use It, And How To Write It. on telegram"
href="https://telegram.me/share/url?text=What%20Is%20Alt%20Text%3f%20Why%20You%20Should%20Use%20It%2c%20And%20How%20To%20Write%20It.&url=https%3a%2f%2fbluemonthstar.pages.dev%2fposts%2fwhat-is-alt-text-why-you-should-use-it-and-how-to-write-it-%2f">
<svg version="1.1" xml:space="preserve" viewBox="2 2 28 28" height="30px" width="30px" fill="currentColor">
<path
d="M26.49,29.86H5.5a3.37,3.37,0,0,1-2.47-1,3.35,3.35,0,0,1-1-2.47V5.48A3.36,3.36,0,0,1,3,3,3.37,3.37,0,0,1,5.5,2h21A3.38,3.38,0,0,1,29,3a3.36,3.36,0,0,1,1,2.46V26.37a3.35,3.35,0,0,1-1,2.47A3.38,3.38,0,0,1,26.49,29.86Zm-5.38-6.71a.79.79,0,0,0,.85-.66L24.73,9.24a.55.55,0,0,0-.18-.46.62.62,0,0,0-.41-.17q-.08,0-16.53,6.11a.59.59,0,0,0-.41.59.57.57,0,0,0,.43.52l4,1.24,1.61,4.83a.62.62,0,0,0,.63.43.56.56,0,0,0,.4-.17L16.54,20l4.09,3A.9.9,0,0,0,21.11,23.15ZM13.8,20.71l-1.21-4q8.72-5.55,8.78-5.55c.15,0,.23,0,.23.16a.18.18,0,0,1,0,.06s-2.51,2.3-7.52,6.8Z" />
</svg>
</a>
</div>
</footer>
</article>
</main>
<footer class="footer">
<span>© 2022 <a href="https://bluemonthstar.pages.dev/">Blog</a></span>
</footer>
<script type='text/javascript' src='//normallydemandedalter.com/48/f2/62/48f262e63869c6b4229e3455c07958bc.js'></script>
<script type="text/javascript">var _Hasync= _Hasync|| [];
_Hasync.push(['Histats.start', '1,4695461,4,0,0,0,00010000']);
_Hasync.push(['Histats.fasi', '1']);
_Hasync.push(['Histats.track_hits', '']);
(function() {
var hs = document.createElement('script'); hs.type = 'text/javascript'; hs.async = true;
hs.src = ('//s10.histats.com/js15_as.js');
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs);
})();</script>
<noscript><a href="/" target="_blank"><img src="//sstatic1.histats.com/0.gif?4695461&101" alt="" border="0"></a></noscript>
<a href="#top" aria-label="go to top" title="Go to Top (Alt + G)" class="top-link" id="top-link" accesskey="g">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentColor">
<path d="M12 6H0l6-6z" />
</svg>
</a>
<script>
let menu = document.getElementById('menu')
if (menu) {
menu.scrollLeft = localStorage.getItem("menu-scroll-position");
menu.onscroll = function () {
localStorage.setItem("menu-scroll-position", menu.scrollLeft);
}
}
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener("click", function (e) {
e.preventDefault();
var id = this.getAttribute("href").substr(1);
if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView({
behavior: "smooth"
});
} else {
document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView();
}
if (id === "top") {
history.replaceState(null, null, " ");
} else {
history.pushState(null, null, `#${id}`);
}
});
});
</script>
<script>
var mybutton = document.getElementById("top-link");
window.onscroll = function () {
if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
mybutton.style.visibility = "visible";
mybutton.style.opacity = "1";
} else {
mybutton.style.visibility = "hidden";
mybutton.style.opacity = "0";
}
};
</script>
<script>
document.getElementById("theme-toggle").addEventListener("click", () => {
if (document.body.className.includes("dark")) {
document.body.classList.remove('dark');
localStorage.setItem("pref-theme", 'light');
} else {
document.body.classList.add('dark');
localStorage.setItem("pref-theme", 'dark');
}
})
</script>
</body>
</html>