Its time you write alt text on every meaningful image.No more excuses. Include alt text onimages.Many people have been using AI tools, like ChatGPT and AltText.ai, to write alt text for them. These tools are simpleall you do is upload an image and click a button. So whats theproblem?Though the AI tools describe the image it was prompted to write alt text for, it doesnt convey the purpose of theimage.You may be thinking, Well, at least I provided alt text. Yes, thats true. But by only providing alt text to check the box doesnt mean you automatically pass WCAG (Web Content Accessibility Guidelines) standards.WCAG requires non-text content to include a text alternative that serves an equivalent purpose (WCAG 1.1-Text alternatives). So, people who use a screen reader must be given text-based information on images so they interpret a webpage the same as a sightedperson.*Meaningful images convey important information on the webpage, even if theyre supporting text adjacent to the image. If the image isnt meaningful, its decorative and requires null alt text <alt="">.Why is alt text that important?Imagine if you have low-vision or are blind; you rely on a screen reader to consume web content. Screen readers, like JAWS and NVDA, convert digital text from the markup into synthesized speech to be read to the user (WebAIMDesigning for Screen Reader Compatibility).The content must be implemented properly to give the same experience as any sighted user. For visuals like images, a screen reader says, Graphic, then reads the images alternative text (if provided).You dont need to know much about HTML or its attributes, but you must understand and use the <alt> attribute.When an <alt> attribute is applied to an <img> element, screen readers have more information about the image it relays to the user. If no <alt> attribute is used (or if left blank), users are left to guess what the h*ll is in theimage.Screen readers speak the alt text to users after identifying an image from theHTMLPros and cons of using AI to generate alttextThere are always two sides to every story. Before taking a side, lets discuss the pros and cons of using AI to generate alttext.ProsEfficient: If you have many images to generate alt text (if none of your websites images have alt text), AI can help expedite the process since manually writing is time-consuming.Consistent: If you use the same AI model, it can keep the voice and tone similar for each instance of alt text for consistent messaging.Baseline: If you find writing alt text to be challenging, AI can give you a jumping off point to further modify to suit the webpagecontent.Scenarios to useAIBulk image processing for initialdraftsNon-critical imagesConsLack of context: Alt text should describe the image in the context of the webpage, but AI only describes the image itself, so screen reader users wont get additional details.Inaccurate: AI isnt factual or precise 100% of the time, so alt text is subject to errors with misleading descriptions or misidentified objects.Privacy: In order to get alt text, you must upload images to an AI model; this may raise questions around user or company data security.Scenarios to avoidAIComplex images (likegraphs)Content for highly regulated industries (like healthcare)Bar chart titled Efficiency Optimization by Branch, via Highcharts demoDos and donts for writing alttextTreat alt text with equal importance to the content always visible on the interface. Hearing alt text spoken by a screen reader is how many users perceive webpages, and poor alt text (or none at all) hinders their ability to do so (W3CTips and Tricks for AltText).Do:Keep alt text short but descriptiveHave a maximum of 140 characters (including spaces)Describe the information the image is displaying rather than the imageitselfUse proper grammar (like capitalize the first letter and end the sentence with aperiod)Describe what happens when the image is selected (for actionable images)For example, the alt text for a home icon that links to the homepage should say Home, rather than Houseicon.<a href="icon-button/house.png> <img alt="Home." src=""><a/>Dont:Start the alt text with Image of or Photo ofscreen readers already announce its describing animageInclude alt text for decorative imagesuse <alt= ""> so screen readers skipitAdd bias to alt textuse A woman in a pink hat. versus A beautiful woman in an ugly pinkhat.Describe an entire chart or graph in the alt textuse plain text to describe the image and position it adjacent to theimageFor example, insert a block of plain HTML text adjacent to a complex chart or graph so non-sighted users can also access the charts information (W3CAlt Text for ComplexImages)Plain text explaining the complex graphs positioned on the left of the graph, image via JohnHopkinsIts time to roll up your sleeves and write alt text for every image on your website. Its an easy fix for a major accessibility issue.Alt text helps websites comply with WCAG standards, and improves everyones experience from better screen reader output to improvedSEO.If you have trouble writing alt text, you can turn to AI (with caution) to help give you a starting point. But alt text should put the image in the context of the webpage versus just describe the imageitself.What do you think? What have been your experiences using AI to write alttext?ResourcesWebAIMTechniques to write alternative textWCAG 2.0, Guideline 1.1- Text AlternativesWebAIMDesigning for Screen Reader CompatibilityW3CTips and Tricks for AltTextW3CAlt Text for ComplexImagesJohn HopkinsAlternative Text forVisualsSection 508Authoring Meaningful Alternative TextShould AI write your alt text? was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.