If you aren’t using meaningful alt text in website projects, you are committing a crime on the internet. This tiny element has a big function, and comes with a huge impact on usability, readability, and accessibility.
If you thought that alt text was only for the purposes of accessibility, think again. It can help Google better understand your content, provide important context for what your page is about, and help readers navigate.
Here’s a guide to creating alt text that will help create more impact and a better user experience on your website.
1. Alt Text Provides Information to Facilitate Accessibility
For users that can’t see images on a website, alt text provides an alternative that screen readers can understand so that the context of that information is not lost.
As a designer or developer, it is important that you provide a short, but functional description for every image on the website.
For the image above alt text might read something like “Two women with surfboards walking toward the ocean.” While alt text does not need to be in a complete sentence or contain punctuation, it should provide a reasonable description of what’s in an image.
2. Alt Text is Good for Search Engines
This might be all you need to know in order to be convinced to use alt descriptions and information in your website designs:
“Google uses alt text along with computer vision algorithms and the contents of the page to understand the subject matter of the image,” according to Google Developers.
Alt tags are search engine optimization must-haves.
3. Alt Text Is Readable by Humans and Computers
Alt text isn’t just something that machines understand. All users can see and read it when they hover over an image or inspect page content.
Additionally, alt text is readable by computers, screen readers, and search engines.
4. Alt Text Contains Additional Information About Page Content
While stuffing alt content with keywords for search engines is not a best practice, these descriptions can and do provide extra context about the content on a web page.
This makes it important to use images and descriptions that work with the content on the page.
Here’s another little to when it comes to images and alt text. Pair images and alt text for maximum impact; avoid images of text. That’s not a functional design technique and the loss of those words as part of the design isn’t worth the value of having them in alt text. (Search engines are happier and give more weight to actual page content than alt text.)
5. Alt Text Provides Descriptive Information for Images
Think of the varying context of these two alt descriptions for the same image:
- Sunflower field under blue sky in the daytime
- Closeup of a yellow sunflower that is largest in the world
Descriptive alt information can add value and context to the rest of the content on the page. You don’t have to overwhelm image descriptions with information but a visual element that explains the what and why of a photo is appropriate.
6. Alt Text Helps You Find Content More Quickly
Because of its impact on search engines, alt text can help you find what you are looking for on the internet more quickly. The additional information and content send just one more signal to search engines about a page and what is contained therein.
Here’s an advanced tip: While it was once recommended to use the longdesc tag to include even more alt text, that is a mostly depreciated feature that isn’t commonly used and can be avoided.
7. Alt Text Helps Provide Common User Experiences for Everyone
One of the most important aspects of using alt text and descriptions in website design is that you are providing a common user experience for all visitors, regardless of physical ability. Alt text bridges gaps in comprehension and visual impairments so that everyone knows what is on a page design.
Don’t forget to add alt text for elements such as buttons. The alt attributes on these user interface elements should describe the function of the button such as “Submit,” “Apply,” or “Search.”
8. Alt Text Contributes to “AI” Intelligence
How do you think computers “learn” what shapes and images are called? Alt text can actually help facilitate artificial learning and supervised learning, where a computer is given a set of training images along with the corresponding labels and creates a model that can be used to identify similar images in the future.
The image above might have an alt tag of “golden retriever dog” that could facilitate this machine learning.
9. Alt Text Powers Context for Missing Images
Almost everyone has encountered a website where the images did not render for one reason or another. Whether it was a slow connection speed or another type of technical error, alt text on these images can ensure that you know what is missing from the design.
Think of alt text or descriptions as a type of Plan B for when things don’t go as intended on the user end of a website design.
10. Alt Text is Indexable
It almost goes without saying as much as we have referenced search engines here in relationship with alt text, but it is important to understand: Alt tags are indexable by search engines.
If nothing else about using alt text seems to resonate, this should. Search optimization is the key to getting your website content and design to as many relevant people as possible. You want your website to be easy to find online and show up when relevant parties are looking for the information or products that your website contains.
Alt text and descriptions are one more contributing factor in the giant algorithm of search optimization.
Conclusion
Alt text and descriptions are important elements for every website design. This type of microcopy isn’t at the forefront of the design but is a behind-the-scenes function that can help ensure your design is accessible, easy to read and understand, and optimized for search engines.
When thinking about how to write alts, keep descriptions as short as possible while being descriptive. Stuffing alt text or descriptions with keywords to “trick” search engines isn’t helpful and could actually prove detrimental to the site design.
0 Commentaires