![]() Tip: Imagine you are explaining the image to someone over the phone. Ask yourself, why am I including this? What message am I trying to convey by including it? What further information and meaning will be missed if I don’t include this description? Think about the function of the imageĬontent authors add images to web pages for a reason. Describe what the image content is and what it does, such as “Twitter icon.”Īlt text that reads “a bright blue bird” is ambiguous and unhelpful here. Try not to describe what the picture looks like, i.e. A pint of beer is next to the plate on a rustic table.” 3. “Battered cod with salad and a side of tartar sauce on a blue plate. An example of overly long alt-text for the above fish and chips image might be: This is because they take a long time to read aloud. Long descriptions which contain too much detail can be a barrier for screen reader users. Look to avoid unnecessary details about colours and appearance. Writing alt-text is a balancing act of not being too vague and not being overly descriptive. A short sentence or two should be the largest amount needed to convey your message. The general recommendation for alt-text length is 125 characters. “Plate of battered fish and chips, a popular British dish, with a pint of beer on the side”. A useful alt-tag, depending on the context of the webpage, could be: Is the colour of the object relevant? Is the weather in the background relevant? Does it matter what person’s hair colour is? Content authors have to decide if this information adds or detracts from the message.Ī bad alt-text description for the above image would be: “food on a plate”. Tips for writing better, more useful alternative text 1. Good alt-text for this image could be: “My golden retriever dog, Scully, posing for a photo in the living room”. This description is too vague and does not provide information to users. Poor alt-text can mislead, confuse and alienate people who rely on assistive technology.Īn example of bad alt-text for the above image would be “dog”. Well-written alt-text can broaden a person’s understanding. The cost of writing misleading, unhelpful or irrelevant alt-text is at the user’s expense. Some users may also have images turned off in areas with slow internet access.) Bad alt-text (Alt-text is also shown when images do not load on a web page. Writing effective alt-text offers Search Engine Optimisation (SEO) benefits too if written well. If not, that information becomes inaccessible to those users. information that improves understanding in the context of the document.Images must have alt-text if they contain: Or, depending on the device, may read the file name (for example “078GUU.jpeg”) aloud. If no alt-text is provided, a screen reader will simply say “Image”. For example, screen readers or text-to-speech software. Certain disabled, visually impaired and blind users may rely on assistive technology. Not everyone visiting your website will be able to see the images. Why alt-text is important for accessibility And the person using the device is given context and meaning about how the image relates to the rest of the page. It provides the content in an alternative text-based format. It can be added to HTML code and functions as an invisible description for any image presented on a web page.Īlt-text does not affect how an image is displayed. ![]() It’s also known as “alt attributes,” “alt descriptions” and often wrongly referred to as “alt tags”. What is alt-text?Īlt-text stands for alternative text. All Twitter, Facebook and Instagram users can now add alt-text to posts. But will be useful to anyone who publishes to social media. This guidance is aimed at content editors, authors and managers. But knowing how to write an image description that is actually useful can be a little harder. So why, given its importance, is alt-text often so badly implemented?įrom a technical perspective, image alt-text is simple to add for anyone familiar with a content management system. WebAIM’s analysis of the top homepages in the world continues to cite missing alt-text as one of the most common accessibility failings. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |