TL;DR
- Alt is an HTML attribute inside the img tag, not a tag, so alt tag, alt attribute and alt text usually mean the same field.
- WCAG 1.1.1 Non-text Content at Level A requires a text alternative for every meaningful image; decorative images take an empty alt="" instead.
- A missing alt attribute can make some screen readers read the file name aloud, while the title attribute is a hover tooltip that phones rarely show.
- Neither HTML nor WCAG sets a maximum length; the often-quoted 125 characters is a convention, and one descriptive sentence in the page's language is usually enough.
Alt text is a short piece of text that describes what an image shows, written in the alt attribute of the image tag in HTML. Screen readers read it aloud to blind and low-vision users, browsers display it in place of the image when the image fails to load, and Google uses it as one of the signals for understanding what an image is about.
This guide focuses on alt text itself: what it means, how it differs from the title attribute, how to write it well in Thai and in English, which images need it and which do not, how long it should be, and where to add it in WordPress and Shopify. Getting images to rank in Google Image Search as a whole, including file names, file size and image sitemaps, is covered separately in our image SEO article.
What is alt text, and how does it work in code
In HTML, an image is written with the img tag, which has two attributes that matter most: src, which points to the file, and alt, which says what the image is. For example:
<img src="tom-yum-goong.jpg" alt="Creamy tom yum goong in a clay bowl, topped with sawtooth coriander">
Browsers do not normally show the alt text on screen, so most visitors never see it. It matters in three situations.
- Screen readers such as VoiceOver on iPhone and Mac, TalkBack on Android or NVDA on Windows read the alt text aloud when the user reaches the image.
- When an image fails to load because of a broken link, a slow connection or a user who has turned images off, the browser shows the alt text where the image would have been.
- Search engines read alt text together with the text around the image and their own image analysis to decide what the image is about and which searches it should appear for.
On the accessibility side, WCAG success criterion 1.1.1 Non-text Content, at Level A, requires every piece of non-text content to have a text alternative that serves the same purpose. Level A is the most basic level, which means a site that leaves meaningful images without alt text fails the minimum accessibility bar.
Alt text vs alt tag vs title: what is the difference
"Alt tag" is a phrase people use out of habit, but technically it is wrong. Alt is not a tag. It is an attribute inside the img tag. So when someone says alt tag, alt attribute or alt text, they almost always mean the same thing: the text in the alt field.
Title is a different attribute that works in a clearly different way.
- Alt stands in for the image when the image cannot be seen. It affects accessibility and how search engines understand the image.
- Title shows up as a small tooltip when you hover the mouse over the image on a computer. On phones, with no mouse, it usually does not appear at all, and many screen readers do not read title consistently.
- Title cannot replace alt. If you can only fill in one, fill in alt.
Another thing often confused with alt is the caption, the text below an image that everyone can see on the page. The caption and the alt text should not be word-for-word identical, because screen reader users would hear the same thing twice. Let the caption give context, and let the alt text say what the image shows.
Does every image need alt text
Every img tag should always have an alt attribute, but not every image needs text inside it. The rule depends on what the image does on the page.
- Informative images, such as product photos, step-by-step illustrations or a portrait in an interview, need alt text that says what the image shows.
- Decorative images, such as dividers, background patterns, or icons placed next to text that already says the same thing, should get an empty alt, written alt="" with no space inside, which tells screen readers to skip the image.
- Images used as links or buttons, such as a logo that takes you to the home page or a magnifying-glass icon that acts as a search button, need alt text that says what happens on click, such as "Home" or "Search", not a description of the icon's shape.
- Images containing text, such as promotional banners, should carry the important words from the image in the alt text, because people who cannot see the banner have no other way to know what it says.
- Complex images, such as graphs, charts or maps, need a short alt text that sums up the main point, with the detailed data explained in the surrounding content or in a table.
The difference between an empty alt and no alt at all matters a lot. If the alt attribute is missing entirely, some screen readers read out the file name instead, so the user may hear something like "IMG underscore 4 5 8 2 dot JPG", which is useless and irritating. An empty alt="" is a deliberate decision that the image does not need to be read. Leaving alt out is an oversight.
How to write alt text in Thai that works for SEO and accessibility
Good alt text answers one question: if you had to describe this image in one sentence to someone who cannot see it, what would you say? These guidelines work in practice.
- Write in the same language as the page. Thai pages get Thai alt text, English pages get English alt text. Screen readers choose their voice based on the language declared on the page, so English alt text on a Thai page may be pronounced wrongly.
- Start with the most important thing in the image. Say what the image is first, then add details that set it apart from other images, such as colour, material, angle or action.
- Write for the page's context. The same image may need different alt text depending on where it sits. A photo of a chef stir-frying pad kra pao on a menu page should focus on the dish, but on a kitchen job listing it should focus on the person and the work.
- Do not start with "image of" or "picture of". Screen readers already tell users that this is an image, so repeating it means they hear "image" twice. The exception is when the type of image is itself information, such as "watercolour painting" or "screenshot".
- Use words people actually search for, when they describe the image accurately. If the image is a particular running shoe, writing the model name and colour matches both the picture and what people type into search. There is no need to stuff in extra keywords.
- Do not add information that is not in the image. Prices, promotions or ad copy that the image does not show belong in the page content.
To see the difference side by side, imagine a product photo in an online shop of a hand-woven indigo cloth bag.
- Weak alt: "bag"
- Stuffed alt: "bag cloth bag cheap cloth bag handwoven bag buy bag online"
- Good alt: "Hand-woven indigo-dyed cotton shoulder bag with a brown leather strap"
The good version says what the image is, uses words people would naturally search with, and makes sense when read aloud.
How long should alt text be
Neither the HTML standard nor WCAG sets a maximum character count for alt text. The figure of about 125 characters that appears in many guides is a convention passed down over time, not a rule. What matters is brevity. Most of the time a single sentence or phrase is enough, because screen reader users have to listen to every word and find it hard to stop partway through a long description.
If an image genuinely needs a longer explanation, such as an infographic with many data points, write a short alt text that sums up what the image is, then put all the information on the page as text or a table. This works better for users and for search engines, because text on the page is read and indexed more completely.
How many keywords can go in alt text before it becomes keyword stuffing
Google's image guidance says plainly to write alt text that is useful and information-rich and that uses keywords appropriately, in the context of the page. It also warns that filling alt attributes with keywords creates a poor user experience and may cause the site to be seen as spam.
A simple way to judge it:
- If the keyword describes what is really in the image, use it once, in a form that reads like normal language.
- If you have to twist the sentence or put words in an unnatural order to fit the keyword in, it is already too much.
- If every image on a page has the same alt text, or repeats the same main keyword, that is a sign of stuffing, because each image shows something different.
- If it sounds like a list of search terms when read aloud rather than a description, rewrite it.
Where to add alt text in WordPress and Shopify
WordPress has two main places. The first is the Media Library: click an image and an Alternative Text field appears on the right. What you enter there becomes the default when that image is inserted into a new page. The second is the block editor: click an Image block and an Alternative text field appears in the settings sidebar. Worth knowing: editing the alt text in the Media Library later usually does not change images already inserted into older pages. Those have to be fixed page by page. Images shown through a theme or a page-builder plugin may pull alt text from the Media Library or have their own field, so check the result on the live page.
Shopify: for product images, open the product in the admin, click the image in the Media section, and choose to add or edit the alt text. For images in blog posts or pages, click the image in the text editor and edit its alternative text. For images in theme sections, such as a home page banner, it depends on the theme whether an alt field is offered. Some themes use the alt text from the Files library, and some do not output alt text at all.
Whatever platform you use, the surest check is to right-click the image on the live page, choose Inspect, and see whether the img tag has an alt attribute with the text you intended.
Summary table: image types and the alt text they need
| Image type | Alt text to use | Example |
|---|---|---|
| Product or informative image | Describe what is visible, specifically | White running shoe with a grey sole, side view |
| Decorative image | Empty alt (alt="") | A line pattern dividing two sections |
| Logo or icon used as a link | State the destination or action | Home |
| Chart or infographic | Sum up the main point, put the full data on the page | Monthly sales chart rising towards the end of the year |
Alt text on Thai-language websites: what to know
Thai websites tend to slip up in a handful of places. The first is bilingual sites that use the same image in both languages and end up with alt text in only one, for example a Thai page with English alt text. Many content management systems store alt text on the file itself, so check whether each language has its own alt field. The second is online shops that upload large batches of product photos at once, so the alt text becomes the camera's file name or the same product name on every photo, even though each photo shows a different angle or colour. The third is promotional banners with all their Thai text written into the image, which neither screen readers nor search engines can read as fully as real text. Key details like the promotion name and its conditions should also be in the alt text or in the page content.
When writing in Thai, use the words Thai people actually use for the thing. If people search with both a Thai word and a transliterated English one, such as "ครีมกันแดด" and "sunscreen", pick the one that matches the page content. There is no need to put both into every image.
FAQ about alt text
Does alt text actually help you rank on Google?
Alt text is one of the signals Google uses to understand images, so it directly affects image search and helps make the page's context clearer. It does not make a page rank on its own, though. The page's content and quality are still the main factors.
Do you lose SEO points by giving decorative images an empty alt?
No, because decorative images carry no information worth ranking in the first place. An empty alt is the correct approach under accessibility standards, and it is better than an unnecessary description or leaving the alt attribute out entirely.
Do the alt text and the image file name need to match?
No, they do not. The file name should be short and descriptive rather than generic like image1.jpg, and Google suggests translating file names when you localise images, while the alt text should be a sentence describing the image in the page's language. Both should be about the same subject, but they do not have to be the same text.
Can you use AI to generate alt text automatically?
You can use it for a first draft, but a person should check every one, because automated tools tend to describe what they see in broad terms without knowing the page's context or the product model name, and they sometimes get the description wrong. Images that matter to the business, such as product photos, should be written or corrected by hand.
Alt text is a small task you repeat every time you upload an image, but on a site with thousands of images, fixing it after the fact needs a system. If you want a check of where images on your site are missing alt text or using it the wrong way, see the SEO audit service. For online shops with large product catalogues, see ecommerce SEO and Shopify SEO, or for an SEO plan covering the whole site, see SEO services.







