النص البديل للصور: متى وكيف

ما النص البديل alt؟

القاعدة الذهبية

<!-- The test: if you removed this image,
     would the alt text give you the same information? -->

<!-- BAD: not descriptive -->
<img src="chart.png" alt="Chart">

<!-- GOOD: conveys the information -->
<img src="chart.png" alt="Bar chart showing 48% revenue increase from Q1 to Q4 2024">

الصور المعلوماتية

<img
  src="signup-flow.png"
  alt="Five-step signup flow: Email → Profile → Plan → Payment → Confirmation"
>

<!-- Describe what the image shows, not what it is -->
<!-- BAD: 'Image of a graph' -->
<!-- GOOD: 'Line graph showing download growth from 10k to 150k per month' -->

الصور الزخرفية: alt فارغة

<!-- Decorative separator -->
<img src="divider.png" alt="">

<!-- Icon beside text that already describes it -->
<img src="warning-icon.svg" alt=""> <span>Payment failed</span>
<!-- The icon duplicates the adjacent text — empty alt is correct -->

<!-- Never omit alt entirely — missing alt attribute is an error
     Empty alt="" = intentionally decorative
     Missing alt = unknown, screen readers may read the filename -->

الصور الوظيفية

<!-- Logo that links to home -->
<a href="/">
  <img src="logo.svg" alt="CoddyKit — Go to homepage">
</a>
<!-- Describes the destination, not the logo's appearance -->

<!-- Submit button using an image -->
<input type="image" src="submit.png" alt="Submit registration form">
<!-- Describes what happens when activated -->

الصور المعقدة: الأشكال والوصف الطويل

<figure>
  <img
    src="complex-diagram.png"
    alt="Network architecture diagram — see the description below"
    aria-describedby="diagram-desc"
  >
  <figcaption id="diagram-desc">
    <p>The diagram shows three tiers: a client layer with browsers and mobile apps,
       a middle tier with load balancers and app servers,
       and a data tier with primary and replica databases.</p>
  </figcaption>
</figure>

صور النصوص

<!-- Logo with text 'CoddyKit' -->
<img src="text-logo.png" alt="CoddyKit">

<!-- Promotional banner with text 'Save 50% this week only' -->
<img src="promo.jpg" alt="Save 50% this week only">

<!-- Better: use real HTML text styled with CSS
     Images of text fail at zoom and high contrast modes -->

السياق يغيّر النص البديل alt

<!-- As part of an article about dogs: -->
<img src="golden.jpg" alt="Golden retriever fetching a yellow tennis ball">

<!-- As a product photo for 'Golden Retriever Dog Toy':
<img src="golden.jpg" alt="Golden retriever playing with our premium fetch toy">

<!-- As a decorative header image:
<img src="golden.jpg" alt=""> -->

طول النص البديل alt

اختبار النص البديل alt

SVG والأسماء المتاحة للوصول

<!-- Standalone SVG with title: -->
<svg role="img" aria-labelledby="icon-title">
  <title id="icon-title">Settings</title>
  <!-- SVG paths -->
</svg>

<!-- Decorative SVG: -->
<svg aria-hidden="true">
  <!-- paths -->
</svg>

تحقق سريع

مراجعة: النص البديل alt