الصور المعقدة: المخططات والخرائط والأوصاف الطويلة
تعامل مع الصور التي تحتاج إلى أكثر من عبارة قصيرة.
الصور المعقدة: المخططات والخرائط والأوصاف الطويلة درس مجاني في Web Accessibility Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Web Accessibility Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Web Accessibility Academy 4 دروس في المجموع.
بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.
When Alt Is Not Enough
Some images carry too much information for a short phrase. Charts, maps, and diagrams need a longer description plan.
Start With a Short Alt
Even a complex image still gets a brief alt that names it, like a bar chart of monthly sales for 2024.
<img src="chart.png" alt="Bar chart of monthly sales for 2024">Then Add the Detail
The short alt names the image; a nearby long description then conveys the actual data or relationships it shows.
Describe the Insight
A great long description gives the takeaway, like sales peaked in December, not a dry list of every single value.
The Data Table Fallback
For charts, the strongest alternative is often a real HTML table with the same numbers right below the graphic.
Linking to a Description
You can place a long description on the page and connect it with aria-describedby pointing to its element id.
<img src="map.png" alt="Store map" aria-describedby="mapdesc">Figure and Figcaption
Wrap an image and its visible explanation in figure and figcaption so the pairing is clear to everyone.
<figure><img src="flow.png" alt="Checkout flow"><figcaption>Three-step checkout</figcaption></figure>Maps Need Their Data
A map image is useless without the underlying facts, so provide an address, directions, or list as the text equivalent.
Diagrams and Flows
For a flowchart, describe the steps and their order in prose, so the logic survives without the visual layout.
Keep It Discoverable
Make sure the long description is easy to find. A hidden text equivalent users cannot reach is no help at all.
Match Effort to Complexity
The richer the image, the more your text equivalent must do. Let the image's complexity set how much you write.
Quick Check
Choose the best plan for a complex chart.
Recap
You did it! Complex images get a short alt plus a real text equivalent, a data table, figcaption, or aria-describedby that conveys the insight.
الأسئلة الشائعة
هل درس «الصور المعقدة: المخططات والخرائط والأوصاف الطويلة» مجاني؟
نعم — نص درس «الصور المعقدة: المخططات والخرائط والأوصاف الطويلة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Web Accessibility Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Web Accessibility Academy 4 دروس في المجموع.
ماذا ستتعلم في «الصور المعقدة: المخططات والخرائط والأوصاف الطويلة»؟
تعامل مع الصور التي تحتاج إلى أكثر من عبارة قصيرة. تتمرن على Web Accessibility Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Web Accessibility Academy؟
لا تُشترط خبرة سابقة. Web Accessibility Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «الصور المعقدة: المخططات والخرائط والأوصاف الطويلة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Web Accessibility Academy هذا؟
نعم. كل درس في Web Accessibility Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- إعلامية أم زخرفية: القرار الأول
- كتابة alt ينقل الغرض لا وحدات البكسل
- alt فارغ والصورة الزخرفية المخفية
- الصور المعقدة: المخططات والخرائط والأوصاف الطويلة