كل مخطط يحتاج إلى بديل نصي
لخّصوا المعلومة المهمة بالكلمات لا بالبكسلات
كل مخطط يحتاج إلى بديل نصي درس مجاني في Web Accessibility Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Web Accessibility Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Web Accessibility Academy 4 دروس في المجموع.
بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.
A Chart Is Just Pixels
To a screen reader, a chart is often a silent image. The insight lives in the picture, so blind users get nothing unless you spell it out in text.
Describe the Point, Not the Paint
Nobody needs to hear about gridlines and axes first. Lead with the takeaway: what does this chart actually tell the reader?
Alt Text for an img Chart
If your chart is an image, its alt attribute should state the conclusion, not say chart. 📊
<img src="sales.png" alt="Sales rose 40% from Q1 to Q4, peaking in December.">Short Alt, Long Description
A short alt gives the headline. When the data is rich, pair it with a longer description nearby for the full story.
Inline SVG Charts Need Naming
SVG charts are not images by default. Add role="img" plus a name so assistive tech treats the whole graphic as one labeled unit.
<svg role="img" aria-label="Revenue doubled over five years."> ... </svg>title Inside SVG
A title element as the first child of an SVG also names it. Reference it with aria-labelledby for solid support across screen readers.
<svg role="img" aria-labelledby="t1"><title id="t1">Visitors per month</title></svg>State the Trend
Most charts exist to show a trend or comparison. Write it in plain words: rising, falling, flat, or one bar towering over the rest.
Name the Extremes
Call out the high and low points by name and value. That single sentence often carries the chart's whole meaning for a listener.
Give Real Numbers
Vague words like a lot help nobody. Include the actual figures so a listener can reason about the data the way a sighted reader does.
A Visible Caption Helps Everyone
Put a short text summary right under the chart as a visible caption. Sighted users skim it too, so it is never wasted effort. ✨
<figure><svg>...</svg><figcaption>Sales climbed steadily all year.</figcaption></figure>Skip Decorative Sparklines
A tiny decorative spark beside a number adds no new meaning. Hide it with aria-hidden so it does not clutter the listening experience.
<span aria-hidden="true"><svg>...spark...</svg></span> 1,204 usersQuick Check
What should a chart's text alternative lead with?
Recap: Words Over Pixels
You learned that every chart needs a text alternative that states the insight, names extremes with real numbers, and hides purely decorative graphics. 🎯
الأسئلة الشائعة
هل درس «كل مخطط يحتاج إلى بديل نصي» مجاني؟
نعم — نص درس «كل مخطط يحتاج إلى بديل نصي» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Web Accessibility Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Web Accessibility Academy 4 دروس في المجموع.
ماذا ستتعلم في «كل مخطط يحتاج إلى بديل نصي»؟
لخّصوا المعلومة المهمة بالكلمات لا بالبكسلات تتمرن على Web Accessibility Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Web Accessibility Academy؟
لا تُشترط خبرة سابقة. Web Accessibility Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «كل مخطط يحتاج إلى بديل نصي»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Web Accessibility Academy هذا؟
نعم. كل درس في Web Accessibility Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- كل مخطط يحتاج إلى بديل نصي
- البديل بجدول بيانات
- الألوان والأنماط والتسميات المباشرة
- مخططات تفاعلية قابلة للتنقل بلوحة المفاتيح