Alt Text and Image Accessibility Guide for Inclusive Websites in 2026
15 min read
Images can make an inclusive website feel warm, human, and trustworthy.
They can show the owner behind a business. They can help a customer recognize the entrance. They can show a wheelchair-accessible patio, a gender-neutral restroom sign, a product detail, a restaurant dish, a salon chair, a wedding venue, or a community event.
But images can also create barriers when they carry information that is not available to people who cannot see them.
That is where alt text comes in.
Alt text is not a place to stuff keywords. It is not a caption. It is not a legal magic spell. It is a short text alternative that communicates the meaning or function of an image when the image is not available visually.
In 2026, alt text is still one of the most common accessibility gaps. WebAIM’s 2026 Million report found that 53.1% of home pages had missing alternative text for images, and missing alt text remains one of the six dominant automatically detectable accessibility error categories across the web.
This guide explains how to write useful alt text, when to leave alt text empty, how to handle business profile images, and how to avoid the most common mistakes.
What alt text is
Alt text is text that describes the purpose of an image for people who cannot access the image visually.
In HTML, alt text usually appears in the alt attribute:
<img src="bakery-owner.webp" alt="Owner Daniela Rivera smiling behind the counter at her bakery.">
When someone uses a screen reader, the screen reader can announce that text. When an image fails to load, browsers may display the alt text. Search systems and other tools may also use image text alternatives, but accessibility comes first.
The rule: describe the purpose, not just the pixels
The best alt text depends on why the image is on the page.
The same photo can need different alt text in different contexts.
Imagine a photo of a restaurant owner standing at the front door.
| Page context | Better alt text |
|---|---|
| Owner profile | “Chef and owner Marcus Lee standing outside Harbor Table.” |
| Accessibility details page | “Step-free entrance at Harbor Table with wide glass double doors.” |
| Restaurant guide hero image | “People dining on the patio at Harbor Table.” |
| Decorative background behind text | alt="" if the image is not adding information |
The image did not change. The purpose changed.
The main types of images
Use this table when deciding what to write.
| Image type | What it means | What to do |
|---|---|---|
| Decorative | Adds visual style only | Use empty alt text: alt="" |
| Informative | Communicates a simple idea or visual detail | Write a short description of the meaning |
| Functional | Acts as a button or link | Describe the action or destination |
| Text image | Contains words not repeated nearby | Include the important words in alt text or real text |
| Complex image | Chart, map, infographic, diagram | Use short alt text plus a nearby detailed explanation or data table |
| Logo | Identifies a brand or organization | Name the organization |
| Gallery image | Helps users evaluate a place/product/service | Describe the useful customer-facing detail |
Decorative images: when empty alt text is correct
Not every image needs a spoken description.
If an image is purely decorative, give it empty alt text:
<img src="rainbow-divider.webp" alt="">
That tells assistive technology to skip it. This prevents clutter and repetition.
Decorative images may include:
- Background patterns
- Borders
- Decorative flourishes
- Abstract shapes
- Ambiance photos that repeat nearby text
- Icons that sit next to visible text and add no new meaning
Example
A card says:
Women-Owned Restaurants Near Me
There is a small decorative icon of a fork beside the title.
Bad alt text:
alt="Fork icon"
Better:
alt=""
Why? The icon does not add new information. Reading it aloud would add noise.
Informative images: describe the useful meaning
Informative images communicate something the reader should know.
Examples:
- A storefront photo that helps people find the entrance
- A product image that shows a specific item
- A headshot of a business owner
- A photo showing accessibility features
- A food photo on a restaurant profile
- A salon interior photo showing private rooms or wash stations
- A wedding venue photo showing outdoor ceremony layout
Good informative alt text examples
| Image | Good alt text |
|---|---|
| Business owner photo | “Owner Priya Shah arranging flowers in her studio.” |
| Storefront | “Front entrance of Luna Books with a ramp leading to the door.” |
| Restaurant dish | “Plate of jerk chicken with rice, plantains, and cabbage.” |
| Salon interior | “Salon suite with adjustable chair, mirror, and privacy curtain.” |
| Product | “Black ceramic mug with the words Support Queer Artists.” |
| Event photo | “Panelists speaking at a small business supplier diversity event.” |
Bad informative alt text examples
| Bad alt text | Why it fails |
|---|---|
| “Image” | Says nothing useful |
| “Photo of business” | Too vague |
| “Best LGBTQ-owned restaurant near me Orlando Tampa Miami Pride brunch” | Keyword stuffing |
| “A beautiful amazing inspiring entrepreneur living their dreams” | Too fluffy and not specific |
| “Owner” | Too short to convey meaning |
Functional images: describe the action
If an image is a link or button, the alt text should describe what the user can do, not just what the image looks like.
Example: social icon link
Bad:
<img src="instagram.svg" alt="camera icon">
Better:
<img src="instagram.svg" alt="Visit Bloom Studio on Instagram">
Example: image-only button
Bad:
<button><img src="search.svg" alt="magnifying glass"></button>
Better:
<button aria-label="Search businesses"><img src="search.svg" alt=""></button>
The button needs a clear accessible name. The icon can be decorative if the button label handles the action.
Logos: keep them simple
For a logo, the alt text should identify the organization.
Good:
Usually unnecessary:
The exception is when the logo design itself is being discussed, such as in a brand review or design case study.
Images of text: avoid them when possible
If important words are trapped inside an image, many users may miss them.
Common examples:
- Event flyers
- Menus
- Holiday hours
- Sale announcements
- Hiring notices
- Pricing sheets
- Grant deadlines
- Certification badges with tiny text
Better approach
- Put the important information in real text on the page.
- Use the image as a supporting visual.
- Use alt text only for the image’s purpose.
Example
An event flyer says:
“Supplier Diversity Workshop, August 12, 2026, 10 AM, Orlando Business Center, Free registration.”
Better page structure:
## Supplier Diversity Workshop
Date: August 12, 2026
Time: 10:00 AM
Location: Orlando Business Center
Cost: Free registration
Then the image can have:
alt="Flyer for the Supplier Diversity Workshop. Event details are listed below."
Complex images: charts, infographics, maps, and diagrams
Complex images need more than a short alt text.
Use short alt text to identify the image, then provide a longer explanation nearby.
Example: chart
Short alt text:
alt="Bar chart showing growth in certified suppliers by year."
Nearby text:
The chart shows certified suppliers increasing from 120 in 2023 to 185 in 2024, 260 in 2025, and 340 in 2026. The largest increase occurred between 2025 and 2026.
Even better: include a data table.
| Year | Certified suppliers |
|---|---|
| 2023 | 120 |
| 2024 | 185 |
| 2025 | 260 |
| 2026 | 340 |
Example: map
A map image of businesses should not be the only way to find those businesses. Provide a list view with names, addresses, categories, and links.
Short alt text:
alt="Map showing inclusive business listings in downtown Orlando. A list of locations appears below."
Business profile image examples
Storefront image
Good:
alt="Front entrance of The Green Table Cafe with a step-free doorway and outdoor seating."
Use when the image helps visitors recognize the place or understand access.
Owner image
Good:
alt="Founder Aisha Brooks standing inside her plant shop."
Avoid unnecessary identity assumptions. If a profile says the business is Black-owned, women-owned, LGBTQ-owned, or disability-owned, the alt text does not need to repeat that unless it is directly relevant to the image context.
Product image
Good:
alt="Handmade soy candle in a glass jar labeled Lavender Cedar."
Certification badge
If the badge is decorative because the certification is already written in text nearby:
alt=""
If the badge is the only place certification is visible:
alt="Certified LGBT Business Enterprise badge."
Better still: write certification in real text on the profile.
Gallery image
Good:
alt="Private salon room with adjustable chair and fragrance-free product shelf."
A gallery should not contain ten images all labeled “salon photo.” Each should communicate what helps a visitor.
Alt text for inclusive identity content
Be careful when writing alt text for identity-related pages.
Do not assume identity from appearance
Do not write:
alt="Latina owner helping customer"
unless the person’s identity is confirmed and relevant in that context.
Better:
alt="Owner helping a customer choose pastries at the bakery counter."
If the page is about a confirmed Latino-owned bakery, the surrounding text can communicate ownership.
Avoid outing people
If a business is LGBTQ-owned publicly, the profile may say that. But do not add identity details to every image in a way that feels invasive or unnecessary.
Good:
alt="Two staff members arranging books on a display table."
Not needed:
alt="Two LGBTQ staff members arranging books on a display table."
Be precise with disability-related images
If an image shows an access feature, describe the feature.
Good:
alt="Portable ramp placed over a single step at the shop entrance."
Avoid:
alt="Disabled-friendly entrance"
The first one tells users what is actually there.
Alt text examples by category
Restaurants
| Image | Better alt text |
|---|---|
| Dish | “Bowl of pozole rojo topped with cabbage, radishes, and lime.” |
| Dining room | “Dining room with wide aisles between tables.” |
| Entrance | “Restaurant entrance with one step and a narrow doorway.” |
| Patio | “Covered outdoor patio with movable chairs and tables.” |
| Menu photo | “Printed brunch menu. Menu items are listed in text below.” |
Salons and spas
| Image | Better alt text |
|---|---|
| Styling chair | “Salon station with adjustable styling chair and large mirror.” |
| Braiding studio | “Braiding studio with four styling chairs and product shelves.” |
| Treatment room | “Quiet facial treatment room with dim lighting and single table.” |
| Entrance | “Spa entrance with step-free sidewalk access.” |
| Team photo | “Salon team standing together near the reception desk.” |
Wedding vendors
| Image | Better alt text |
|---|---|
| Venue | “Outdoor wedding ceremony setup with ramp access to the aisle.” |
| Photographer | “Wedding photographer adjusting camera during a ceremony.” |
| Floral design | “Bright floral centerpiece with orange, pink, and white flowers.” |
| Dessert table | “Wedding dessert table with cupcakes and a small cutting cake.” |
| Seating chart | “Wedding seating chart. Guest list is provided in text below.” |
Business owner guides
| Image | Better alt text |
|---|---|
| Mentor meeting | “Business owner reviewing financial documents with a mentor.” |
| Workshop | “Entrepreneurs sitting at tables during a procurement workshop.” |
| Funding checklist | “Checklist notebook next to laptop and calculator.” |
| Store shelf | “Shelf of handmade skincare products in amber jars.” |
| Office | “Small business owner packing online orders at a desk.” |
Alt text and SEO
Alt text can help search engines understand images, but SEO should never override accessibility.
Do not write alt text like this:
alt="best Black-owned restaurants near me Black-owned restaurants Orlando Black-owned food Tampa Black-owned brunch"
That is bad for users and low quality.
Better:
alt="Plate of shrimp and grits served at a brunch table."
If the page is well-written, the surrounding headings, captions, schema, and body content can handle SEO. Alt text should serve the image’s meaning.
AI-generated alt text: useful, but risky
AI tools can help draft image descriptions, but they should not be trusted blindly.
AI may:
- Misidentify people, objects, or locations
- Assume race, ethnicity, gender, disability, or age
- Over-describe irrelevant details
- Miss the image’s purpose on the page
- Hallucinate text in signs or documents
- Produce generic descriptions that do not help users
Safer workflow
- Let AI draft a description if useful.
- Check the image yourself.
- Remove assumptions.
- Match the alt text to the page context.
- Keep it concise.
- Confirm any text shown in the image.
Alt text decision tree
Use this simple decision process.
| Question | If yes | If no |
|---|---|---|
| Is the image purely decorative? | Use alt="" |
Continue |
| Is the image a link or button? | Describe the action or destination | Continue |
| Does the image contain important text not repeated nearby? | Include that text or put it in real page text | Continue |
| Does the image communicate useful information? | Write short meaningful alt text | Use alt="" if it adds no information |
| Is the image complex? | Add short alt text plus detailed explanation/table nearby | Short alt text is enough |
Common alt text mistakes and fixes
| Mistake | Why it hurts | Fix |
|---|---|---|
| Missing alt attribute | Screen readers may announce file names | Add alt text or empty alt |
| Generic alt text | Gives users no useful information | Describe purpose or meaning |
| Keyword stuffing | Bad experience and low trust | Write for people first |
| Repeating captions | Creates noise | Use empty alt if caption fully describes image |
| Over-describing decoration | Adds clutter | Use alt="" |
| Wrong identity assumptions | Can be inaccurate or invasive | Describe observable and relevant details |
| Images of text only | Excludes users and hurts SEO | Put text in HTML |
| AI alt text unchecked | Can hallucinate or mislabel | Human review required |
FAQ
How long should alt text be?
Usually one short phrase or sentence is enough. Complex images may need a longer explanation nearby, not a huge alt attribute.
Should I start alt text with “image of” or “picture of”?
Usually no. Screen readers already announce that it is an image. Use “logo,” “illustration,” “chart,” or “screenshot” when that format matters.
Should decorative images have no alt attribute?
No. Decorative images should usually have an empty alt attribute: alt="". A missing alt attribute and an empty alt attribute are not the same.
Can I use the same alt text for every gallery image?
No. If the images are meaningful, each should describe the useful detail. If several images are decorative, consider whether they should be hidden from assistive technology.
Do captions replace alt text?
Sometimes. If a caption fully describes the image and the image adds no additional meaning, empty alt text may be appropriate. If the image is a link, button, or adds meaning beyond the caption, it still needs an appropriate accessible name or alt text.
Should alt text include identity labels like Black-owned, LGBTQ-owned, or women-owned?
Only when relevant, confirmed, and useful. In most images, the surrounding profile or article text should communicate ownership. Alt text should describe the image’s purpose.
External sources and further reading
- W3C Images Tutorial: https://www.w3.org/WAI/tutorials/images/
- W3C Alt Decision Tree: https://www.w3.org/WAI/tutorials/images/decision-tree/
- W3C Decorative Images guidance: https://www.w3.org/WAI/tutorials/images/decorative/
- Section508.gov alternative text guide: https://www.section508.gov/create/alternative-text/
- WebAIM Alternative Text: https://webaim.org/techniques/alttext/
- WebAIM Million 2026: https://webaim.org/projects/million/
Own or know an inclusive business?
List it free so people can discover it year-round — with a source you control.
List your business