خطوات إبداعية عملية
إتاحة شعار SVG: سمِّ العنصر الصحيح
لعلامة كوب المقهى ثلاث وظائف: تعريف النشاط وحدها، أو تزيين اسم ظاهر، أو الوجود داخل رابط للرئيسية. وضع العنوان نفسه على كل نسخة قد يكرر المعلومات دون توضيح وظيفة التحكم.
يستخدم مثال Cedar Cup الخيالي المسار نفسه في ثلاثة سياقات HTML حقيقية. أنشأ Ciyo الكود والعرض، ثم فتحنا الملف المحفوظ وفحصنا أسماء الصور والروابط المكشوفة. إنه مثال تسمية محدد، لا شهادة توافق مع قارئات الشاشة.
حدد وظيفة الشعار في سياقه
ابدأ بالصفحة المحيطة لا SVG وحده. هل هو المعرّف الوحيد للنشاط؟ هل يظهر الاسم نصياً بالفعل؟ هل المنطقة كلها رابط؟ تحدد الإجابات العنصر الذي يجب أن يحمل المعلومات.
جهزنا مسار كوب بــviewBox 0 0 120 100 وتعبئة #7A4A2A. تحافظ الأمثلة الثلاثة على الهندسة نفسها. التغيير في الأسماء والمحتوى الزخرفي المخفي ونص الرابط، لا رسم الهوية.
استخدم مسار SVG الموجود دون تغيير. ابنِ HTML فعلياً يعرض شعاراً معلوماتياً مستقلاً باسم Cedar Cup ونسخة زخرفية بجانب نص Cedar Cup المرئي ورابط رئيسية باسم Cedar Cup home مع أيقونة زخرفية. استخدم title وrole وARIA المناسبة. اعرض الصفحة وافحص الأسماء المكشوفة وتركيز لوحة المفاتيح، وأعد HTML نفسه.سمِّ العلامة المعلوماتية المستقلة
يستخدم المثال المستقل role="img" وaria-labelledby الذي يشير إلى عنصر title بوصفه أول ابن. نص العنوان Cedar Cup. يكشف المتصفح صورة واحدة بهذا الاسم لتعريف النشاط دون وصف هندسة الكوب الزخرفية.
استخدم معرّف title فريداً لكل نسخة مضمنة تحتاج إليه. تكرار المعرّف في مكوّن مستخدم عدة مرات قد يربط الاسم بعنصر خاطئ. يستخدم العرض نسخة معلوماتية واحدة ومعرّفاً صريحاً.
أخفِ النسخة الزخرفية المتكررة
عندما يقول النص المرئي Cedar Cup، يصبح الكوب المجاور زائداً في هذا المثال. يستخدم aria-hidden="true" وfocusable="false". يعرّف النص النشاط وتبقى العلامة مرئية فقط.
لا تطبق ذلك على علامة تحمل معلومة لا توجد في مكان آخر. إخفاء محتوى ذي معنى لأنه يشبه مثالاً زخرفياً يحذف معلومة يحتاجها القارئ.
| السياق | مصدر الاسم | معاملة SVG |
|---|---|---|
| علامة مستقلة | عنوان مشار إليه: Cedar Cup | role="img" |
| علامة بجانب اسم النشاط | نص Cedar Cup المرئي | aria-hidden="true" |
| رابط الرئيسية | نص Cedar Cup home المرئي | SVG زخرفي داخل الرابط |
امنح رابط الرئيسية اسماً مفيداً
نص الرابط المرئي Cedar Cup home. SVG زخرفي، لذا يأتي اسم التحكم من النص. يشير الملف إلى #home كعرض محلي؛ على الموقع الحقيقي استخدام وجهته الفعلية للرئيسية.
ضغطنا Tab في العرض المفتوح مستقلاً. انتقل التركيز إلى رابط الرئيسية وكشف المتصفح Cedar Cup home اسماً له. لم ينشئ SVG الزخرفي مدخلاً إضافياً للصورة. هذه نتيجة محدودة يمكن ملاحظتها في هذه الصفحة.
افحص الأسماء في الصفحة المنشورة
افتح HTML المحفوظ وافحص شجرة الإتاحة وترتيب لوحة المفاتيح والتسمية المرئية. راجع التنفيذ بعد إدراجه في الرأس: زر محيط أو اسم مكرر أو رابط آخر قد يغير ما يواجهه المستخدم.
عنوان SVG لا يستبدل نص التحكم ذا المعنى. يجب أن يوضح العنصر الوظيفي غرضه. في سياق آخر اختر نصاً مرئياً واضحاً أو اسماً متاحاً مفحوصاً، لا تنسخ الكود دون فهم الاستخدام.
ضمّن السياق في التسليم
أرسل للمطور الأصل ومثال السياقات الثلاثة وملاحظة تحدد النسخ المعلوماتية والزخرفية. اطلب فحص الصفحة النهائية بالتقنيات المساعدة المناسبة لجمهورك.
اجعل اللون والتسمية مراجعتين منفصلتين. قد يختفي شعار صحيح الاسم على خلفية داكنة، وقد يبقى شعار مرئي باسم رابط غير مفيد.
أسئلة عملية
هل يحتاج كل شعار SVG إلى title؟
حدد ذلك حسب السياق. هذا العرض يسمّي العلامة المستقلة ويخفي النسخ الزخرفية الزائدة.
هل يكفي title في SVG لتسمية الرابط؟
سمِّ العنصر الوظيفي بوضوح. هنا يُستخدم نص Cedar Cup home المرئي اسماً للرابط.
هل اختُبر بكل قارئات الشاشة؟
لا. تحققنا من أسماء المتصفح والتركيز بلوحة المفاتيح. راجع الواجهة النهائية بالتقنيات المساعدة المناسبة.
راجع شعاراً واحداً في سياقه الحقيقي
اطلب من Ciyo مثالاً معلوماتياً وزخرفياً ومرتبطاً، ثم انقل الكود الملائم إلى تنفيذ موقع مفحوص.