Alt text (alternative text), also known as “alt attributes”, “alt descriptions”, or visually “hidden” text, is a word or phrase that can be added to an image’s HTML tag in a website’s code. It is there to describe the appearance and function of images on a page for visitors who are using assistive technologies such as screen readers.
Alt text won’t be seen by most visitors who browse the web with a mouse and a screen, but it is very important for those who cannot see the images at all, or who cannot make sense of them. This text essentially gives the image meaning and makes it accessible by providing a textual description of the content of the image.
Screen readers are pieces of software which can be used to read information aloud to a user. It is often used by people with visual impairments, or those who are learning to read. They cannot see the images, so they rely on the alternative text to ascertain what the image is and what its content is.
Without alt text, a website can become inaccessible to a significant proportion of its visitors such as those using assistive technologies, those who have images turned off on their browser for data-saving purposes, and those using mobile browsers with smaller screens. Without alt text, these visitors may have difficulty visiting a website and interpreting its information as clearly as others.
The main guideline for writing alt text is to keep it concise and descriptive. It should be a meaningful phrase describing the image being presented – not just random words or phrases. It should also draw on the functionality of the image if it has any. If the image contains a business logo, the alt text should simply be the company name, or if the image has a link to a web page, the alt text should include the content of the link. If a banner promotes a product, the alt text should detail what is specifically being promoted.
Become a Sales & Marketing Rainmaker
Learn valuable skills to win more customers, grow your business, and increase your profits.
If the image just adds to the aesthetic of the webpage and has no specific purpose, then the alt text should be nullified by including an empty string; this is done by adding a single space or as“alt=”, which essentially tells a screen reader to skip over the image.
The alt text should be as short as possible and no more than 250 characters. Writing too much could cause the code to not display the rest and it could render it useless for the purpose of providing a description for those using a screen reader.
When creating alt text, try to put yourself in the user’s shoes. Think about what the website would look like without being able to see the images and how much easier it would be to understand with the help of a description.
As with all web content, quality is key. Spellcheck and accurate grammar are essential. Poorly written alt text sends the wrong message about the purpose of the website and its content.
Alt text is an important accessibility feature on a website and should be treated as an opportunity to clarify, rather than obscure a website's content. It should be detailed and meaningful enough so that it can be correctly interpreted by those unable to see the image, while being concise enough so as to not disrupt user experience. Thoughtful and properly implemented Alt text can help make a website fully accessible to all users.