إنشاء شعار يمكن الوصول إليه باستخدام رسومات موجهة قابلة للتحجيم

تنسيق svg ، أو Scalable Vector Graphics ، هو تنسيق ملف يتيح رسومات سهلة ومستقلة عن الدقة على الويب. بينما لا يمكنك إنشاء ملف svg مباشرة في Photoshop ، يمكنك تصدير عملك الفني من Photoshop كملف svg.
عندما يتعلق الأمر باستخدام svg كشعار ، فإن إمكانية الوصول هي المفتاح. تريد التأكد من أن شعارك يمكن رؤيته وفهمه بسهولة من قبل الجميع ، بغض النظر عن القدرة أو الإعاقة.
هناك بعض الأشياء التي يجب وضعها في الاعتبار عند استخدام svg كشعار. أولاً ، تذكر إضافة نص بديل إلى ملف svg. سيضمن ذلك إمكانية قراءة شعارك بواسطة برامج قراءة الشاشة والتقنيات المساعدة الأخرى.
بعد ذلك ، اجعل شعارك بسيطًا. كلما زاد تعقيد شعارك ، زادت صعوبة فهمه على الأشخاص ذوي الإعاقات المعرفية.
أخيرًا ، تأكد من أن شعارك مقروءًا. هذا يعني استخدام خط واضح يسهل قراءته.
باتباع هذه النصائح ، يمكنك إنشاء شعار يمكن للجميع الوصول إليه.

منذ عام 1999 ، ارتفع استخدام رسومات المتجهات القابلة للتحجيم (SVGs). يجب التمييز بين الصور الزخرفية والتعليمية. إذا كان المقصود من الصورة أن تكون مزخرفة ، فيجب أن تحتوي على سمة نص بديل فارغ / فارغ. يجب ألا يزيد المحتوى الوصفي والهادف عن 250 حرفًا ، ويجب ألا يزيد طوله عن 800 حرف. إذا كنت تستخدم صورة بسيطة أو أساسية أو مزخرفة ، فيمكنك حفظها كملف باستخدام علامة <img>. بالنسبة إلى SVGs الأكثر تعقيدًا أو الأساسية ، يجب أن تتضمن HTML ترميزًا لها. نتيجة لذلك ، سيكون لجافا سكريبت و CSS نطاق أوسع من الخيارات لعرض أنماط الصور والرسوم المتحركة.

عند إخبار المحتوى البديل الأساسي ، لم يكن من الواضح من الذي سيأتي في المقدمة في حالة أفضل عرض. نظرًا لأن العديد من الأنماط يمكنها عرض محتوى بديل ، فإن المصممين والمطورين لديهم مجموعة واسعة من الأنماط للاختيار من بينها. عندما يتعلق الأمر بتوفير المزيد من المحتوى الوصفي البديل لـ SVGs ، فإن النمط 11 هو الخيار الأكثر موثوقية للعديد من برامج قراءة المستعرضات والشاشات.

نظرًا لسهولة استخدامها ، يمكن استخدام الرسومات المتجهة في الرسم الخطي والشعارات والصور المتحركة والرسوم البيانية. النوعان الأكثر شيوعًا من الشعارات هما الشعارات التي يسهل على المستخدمين التعرف عليها ، والأيقونات التي يمكن أن تغير الألوان أو تكون متحركة عندما يتفاعل المستخدمون معها.

لا تعمل بشكل جيد مع الصور التي تحتوي على الكثير من التفاصيل الدقيقة والقوام كما تفعل الصور الفوتوغرافية لأنها تعتمد على المتجهات. الشعار والأيقونة والرسومات المسطحة الأخرى ذات الألوان والأشكال الأكثر بساطة هي الأنسب للتنسيق. علاوة على ذلك ، في حين أن معظم المتصفحات الحديثة تدعم SVG ، فإن المتصفحات القديمة قد لا تفعل ذلك.

من ناحية أخرى ، لا تحتوي ملفات JPEG و PNG و GIF على وظائف HTML5 قابلة للتطوير ولن تكون مثالية للبكسل بأي دقة. نظرًا لأن الملفات الموجودة في صورة متجهة تكون متجهة ، فإنها عادةً ما تكون أصغر حجمًا في حجم الملف من الصور النقطية. يمكن استخدام نمط CSS لإنشاء SVGs مضمنة.

هل يمكن الوصول إلى ملفات Svg؟

نعم ، يمكن الوصول إلى ملفات SVG. إنها ملفات XML يمكن قراءتها بواسطة برامج قراءة الشاشة وأدوات الوصول الأخرى.

تعد SVGs الذكية من التصميم المكافئ رسومات متجهة قابلة للتحجيم يمكن أن تتغير في الحجم والتخطيط واللون لتلبية احتياجات وتفضيلات أي مستخدم. تستجيب جميع الملفات لأحجام الشاشات المختلفة ويمكن تخصيصها باستخدام مجموعة متنوعة من إعدادات إمكانية الوصول ، بما في ذلك الوضع المظلم. بالإضافة إلى تباين الألوان المتوافق مع ADA ، نستخدم لوحة ألوان ملائمة لعمى الألوان وخطوط واضحة ورسائل واضحة واعتبارات أخرى تتعلق بإمكانية الوصول عند التصميم للأشخاص المكفوفين بالألوان. يتم عادةً إنشاء الصور المستندة إلى البكسل باستخدام مجموعة متنوعة من المربعات الملونة المحددة بواسطة دقة وضوح الصورة. XML هو برنامج كمبيوتر يقوم بإنشاء كافة المعلومات الهندسية والرياضية الموجودة في الأعمال الفنية القائمة على المتجهات. نظرًا لحجم الكود ، يمكن الآن تحسين الصورة ليتم تحميلها بسرعة لأنها تحتوي فقط على كمية صغيرة من التعليمات البرمجية. هذا هو نوع ملف ذكي يمكن الوصول إليه.

تم إنشاؤه للحفاظ على أوقات التحميل تحت السيطرة. يجب أن تكون قادرًا على استخدام أي متصفح رئيسي. تصبح تجربة قارئ الشاشة أكثر جمالًا عندما يتم تكبير أوصاف Aural. يمكنك إنشاء الرسوم المتحركة. يمكنك استخدام شعار أو رمز أو رسم توضيحي أو رسم بياني. ستكون SVGs الذكية هذه متوافقة مع ADA و WCAP Level AA ، مما يضمن أنها تلبي كلا من أهداف إمكانية الوصول الخاصة بالإعاقة.

يمكن إنشاء رسومات بسيطة باستخدام ملفات SVG بسيطة ، وهي سهلة التعديل والتخصيص. من السهل تحرير ملفات SVG في محرر نصوص أو محرر رسومات مثل CorelDRAW. بالإضافة إلى ذلك ، تدعم متصفحات الويب الأكثر شيوعًا استخدام ملفات SVG ، بحيث يمكنك مشاركة عملك مع الآخرين بسهولة.

نص Svg يمكن الوصول إليه

يمكنك الحصول على النص بتنسيق svega. تسمح هذه الطريقة بإضافة المزيد من المعلومات إلى SVG مباشرةً ، مما يسمح للأشخاص الذين يستخدمون تقنية يمكن الوصول إليها مثل قارئ الشاشة برؤيتها بشكل أكثر وضوحًا.

هل نص Svg يمكن الوصول إليه؟

لا توجد إجابة واحدة على هذا السؤال لأنه يمكن أن يعتمد على مجموعة متنوعة من العوامل ، مثل نوع نص svg والسياق الذي يستخدم فيه وكيفية تنفيذه. ومع ذلك ، بشكل عام ، يمكن إتاحة الوصول إلى نص svg باتباع بعض الإرشادات الأساسية ، مثل استخدام العناصر والسمات الصحيحة ، وتوفير نص بديل ، والتأكد من أن النص مرئي لقارئات الشاشة.

إنه تنسيق رسوم متجه يعتمد على XML ويعتمد على Scalable Vector Graphics (SVG). تُستخدم هذه التقنية على نطاق واسع في تصميم الويب الحديث لأنها تفاعلية وقابلة للتكيف وسريعة الاستجابة وقابلة للبرمجة. يهدف هذا البرنامج التعليمي إلى توضيح كيفية إتاحة الوصول إلى ملف SVG لقارئات الشاشة. قد لا تكون علامات العنوان والوصف مرئية دائمًا لمتصفحات تحويل النص إلى كلام في جميع الأوقات. يمكن إضافة سمات Aria-labelledby و ariandesignedby إلى عنصر> svg> للتأكد من صحة قيمها. تضمن إضافة هذه العناصر أن يقرأها قارئ الشاشة للزائر. ليس من الضروري دائمًا إظهار نص مباشر في رسوماتك أو عنوان قمت بتضمينه.

يمكن إزالة هذه المعلومات ببضع خطوات بسيطة. يمكنك العثور على الكود التالي وتضمينه في ملف SVG الخاص بك مع خطاب الفصل من خلال البحث عنه وإدخاله في علامة النص الخاصة بك. يخبر هذا الرمز قارئ الشاشة أن هذا النص مخصص فقط للعرض عبر العرض التقديمي.

إمكانية الوصول إلى Svg: كيفية إتاحة الوصول إلى الرمز الخاص بك

يمكن إدراج SVGs الخاصة بإمكانية الوصول مباشرة في الصورة ، مما يسمح بإضافة المزيد من المعلومات داخل الصورة - مما يساعد الأشخاص ذوي الإعاقة مثل قارئات الشاشة. ما هي أفضل طريقة للوصول إلى رمز SVG ؟ عند إنشاء الكود الخاص بك ، تأكد من تضمين العنوان *. يجب أن يظهر العنوان دائمًا في بداية thesvg وقبل المسار. لإدخال aria- الموصوفة بواسطة ، يجب ضبط svg> على. يمكنك أن تقرأ عن سمة aria هذه في الصفحة التي تصف وصف Anastoevsky. في سياق صفحة الويب ، إنه تنسيق يمكن قراءته بواسطة الإنسان ويمكن تحريره في محرر نصوص ، ويمكن البحث عنه وضغطه ، ويمكن إنشاؤه ومعالجته تلقائيًا ، ويمكن دمجه في (X) HTML ، و يمكن أن تكون متحركة كذلك.

إمكانية الوصول رموز Svg

هناك العديد من الطرق لجعل أيقونات SVG أكثر سهولة. الأول هو استخدام aria-labelledby لتقديم وصف للأيقونة. آخر هو استخدام role = ”img” لمنح الرمز اسمًا يمكن قراءته بواسطة برامج قراءة الشاشة. آخر هو توفير نصوص حقيقية.

إمكانية الوصول إلى Svg المضمنة

إمكانية الوصول المضمنة svg هي عملية جعل محتوى svg متاحًا للأشخاص ذوي الإعاقة. يمكن القيام بذلك باستخدام الأدوار والحالات والخصائص المناسبة على عناصر svg ، ومن خلال توفير نص بديل لمحتوى svg.

أصبح استخدام رسومات المتجهات القابلة للتحجيم (SVG) على الويب شائعًا بشكل متزايد. لكي يكون الرسم مزخرفًا تمامًا ، يجب ألا يكون النص مختلفًا. يجب أن تحتوي جميع العلامات> على سمة alt ، ولكنها ليست مطلوبة (لا توجد مساحة مطلوبة). يمكنك الآن استخدام HTML مباشرة عن طريق إدراج SVG مباشرة فيه. قد تحتاج إلى استبدال role = ”img” بـ role = ”group” في الإصدارات القديمة من Safari أو WebKit إذا كنت تستخدم الأدوار. من خلال تغيير العنوان أو الوصف ، يمكنك جعل الصورة أكثر وضوحًا. سيكون فهرس علامات التبويب 20.

أضف قيمة tabIndex إلى SVG التي ترغب في تضمينها باستخدام الطريقة التي اخترتها. يمكن استخدام الكائنات أو إطارات iframes لتضمين رسم. يجب أن يكون عنوان المستند (الخاص ب NVDA) موجودًا في نص المستند. تعد إضافة فصل لإخفاء النص بصريًا مع السماح لقراء الشاشة بقراءته فكرة جيدة. يمكن تحقيق ذلك عن طريق ضبط حجم الخط لكل من JAWS و NVDA على 0.2. هل من الممكن تنفيذ خط رمز يسهل الوصول إليه باستخدام SVG؟ ومع ذلك ، كما ذكرنا سابقًا ، سنوضح لك كيفية القيام بذلك باستخدام الرمز نفسه في هذا الدرس.

عادةً ما تكون الرموز رمزًا بهذه الطريقة من منشئ الرموز. يوضح المثال الأساسي لاستبدال الصورة ، البرنامج النصي المضمن كيفية استخدام هذه الطريقة. لا يعرض قارئ الشاشة النص داخل علامة الارتساء ما لم يتم تمييزه بعلامة aria. نظرًا لوجود الكثير من التفاصيل في سمة النص البديل ، يمكننا استخدام نص بديل بدلاً من ذلك. يمكن إجراء عمليات تصدير الطبقات في Adobe Illustrator من الأسفل إلى الأعلى عن طريق إدراجها في SVG. في حالة حدوث أي شيء لـ SVG الخاص بي ، احتفظ بالإصدارين في المرجع المصدق ، أحدهما للتحرير في Illustrator والآخر لتحرير الكود. يجب عليك تثبيت الملف إذا كنت تستخدم تباينًا قائمًا على git للتحكم في المصدر (git ، SourceTree ، إلخ).

قبل تحرير SVG يدويًا ، من الأفضل الانتظار حتى تتأكد بنسبة 100٪ من اكتمال التصميم. في هذه الحالة ، دعنا نربط العنوان والوصف بعناصر النص المقابلة ، بحيث تبدو تمامًا مثل العنوان والوصف. إنشاء الأدوار الدلالية - أضف الأدوار الدلالية إلى المجموعات التي تحتوي على الأشرطة والتسميات والمفاتيح. إذا كنت تريد تضمين رسم بياني شريطي ، فأضف تسمية إلى المجموعة التي تحتوي على القائمة. التحقق من وجود أخطاء - سنستخدم قارئ الشاشة لاختبارها. للتأكد من إمكانية عرض SVG في جميع المتصفحات ، قم بتضمين role = ”group” في كود HTML. يمكن تعيين مخطط زمني أو مقطع زمني معنويًا لأدوار دلالية محددة في المجموعات التي تحتوي عليه.

الرجاء إضافة تسمية: الجدول الزمني. أفضل طريقة للتأكد من أن tabindex [[0]] موضع التركيز هي إضافته إلى جميع المتصفحات. يجب إصلاح دلالات الارتباط. انها تماما على مسؤوليتك الخاصة. إن وجود عنوان URL هذا في صفحة ويب لا توجه إلى أي موقع آخر وقد يتسبب في إرباك قارئي الشاشة ليس ارتباطًا دلاليًا. عند استخدام SVGs ، لا تحتاج دائمًا إلى تغيير النافذة للتأكد من أن العنصر في منفذ العرض. تظهر بعض المتصفحات لتمرير عنصر HTML بأكمله دون النظر إلى العناصر الفرعية الموجودة خارج الشاشة. يستفيد الأشخاص ضعاف البصر من هذه الميزة في Windows والتباين العالي بسبب ضعف البصر لديهم.

الوصول إلى Svg: إضافة عنوان ونسخة موصوفة بواسطة

عندما تقوم بتضمين عنوان ووصف للنسخة في yoursvg ، يمكن للأشخاص ذوي الإعاقة استخدامه بسهولة أكبر. إذا كنت تريد معرفة المزيد حول موضوع svg أو ما هو المقصود منه تمثيله ، فاقرأ العلامات. بالإضافة إلى ذلك ، تتمتع ملفات SVG المضمنة بعدد من المزايا مقارنة بملفات svg المضمنة. علاوة على ذلك ، نظرًا لأنه يمكن معاملة svgs بشكل مشابه للعناصر الأخرى داخل المستند ، فإن تفاعل CSS يكون أسهل بكثير. هذه ميزة مهمة من حيث التفاعلات مثل تأثيرات التمرير.

Svg> إمكانية الوصول إلى العلامات

نظرًا لاستخدام علامة svg> لإنشاء رسومات ، فمن المهم مراعاة إمكانية الوصول عند استخدام هذه العلامة. هناك عدة طرق لتسهيل الوصول إلى محتوى svg>. أولاً ، استخدم سمة العنوان لتوفير وصف للرسم. سيتم قراءة هذا بواسطة برامج قراءة الشاشة. ثانيًا ، استخدم سمة الدور لإعطاء الرسم دورًا محددًا. سيتم قراءة هذا أيضًا بواسطة برامج قراءة الشاشة. أخيرًا ، استخدم سمة aria-label لتوفير تسمية للرسم.

اجعل Svgs سهل الوصول إليه عن طريق إضافة عنوان

يمكنك زيادة إمكانية الوصول إلى ملف svg الخاص بك عن طريق إضافة عنوان *. لتحديد ما هو svg ، أضف aria الموصوفة به. طالما تم تشفير svgs للسماح بقراءة الشاشة ، يمكن قراءتها. إذا كان القصد من svg أن يكون كائنًا تزيينيًا ، فتجنب استخدام aria-hidden = true.

إمكانية الوصول إلى الديكور Svg

هناك العديد من الطرق للتأكد من إمكانية الوصول إلى svg الزخرفية . يمكنك استخدام مجموعة متنوعة من الطرق لإضافة نص بديل ، والتأكد من تنسيق الملف بشكل صحيح ، وإضافة رمز إضافي للتأكد من أنه يمكن قراءته بواسطة برامج قراءة الشاشة. يمكنك أيضًا استخدام أدوات مثل Inkscape للتأكد من إمكانية الوصول إلى ملف svg الخاص بك.

الوصول إلى عنوان Svg

تعد إضافة عنوان إلى رسم SVG إحدى الطرق لتسهيل الوصول إليه. يُستخدم عنصر العنوان لربط اسم برسم SVG. عند استخدام عنصر العنوان داخل عنصر svg ، فإنه يوفر وصفًا للرسم. يمكن استخدام عنصر العنوان لتوفير وصف أطول للرسم ، والذي يمكن أن يكون مفيدًا بشكل خاص للأشخاص الذين يستخدمون برامج قراءة الشاشة.

نص بديل لإمكانية الوصول إلى Svg

تُستخدم سمة "alt" في مستند HTML لتحديد نص بديل (نص بديل) يتم عرضه إذا تعذر عرض العنصر الذي تم تطبيقه عليه. في مستند HTML ، يتم تطبيق النص البديل على الصور عبر سمة النص البديل. قيمة السمة هي النص الذي يصف الصورة ، والتي يمكن قراءتها بواسطة برامج قراءة الشاشة. يتم استخدام النص البديل لإمكانية الوصول إلى svg لتوفير وصف يمكن الوصول إليه للصورة لمن لا يمكنهم رؤيتها. يجب أن يكون النص قصيرًا ووصفيًا ، ويجب وضعه في سمة النص البديل للعنصر img.

مضيفا الأغنية الموصوفة من قبل إلى Svgs

في معظم الحالات ، ستخبر aria الموصوفة بواسطة svg> المتصفحات أن هذا svg> يحتوي على معلومات حول الرمز ، والذي يكون عادةً نوع المحتوى. إذا كان لدى المستخدم قارئ شاشة ، فيمكنه الاستماع إلى الأغنية الموصوفة بالسمة واتخاذ قرارات مستنيرة حول الرمز بناءً على ما يجده.

الوصول Svg

SVG يمكن الوصول إليه هو الذي يمكن فهمه واستخدامه من قبل الأشخاص ذوي الإعاقة. قد يشمل ذلك إضافة أوصاف نصية ، وتوفير نص بديل للصور ، والتأكد من إمكانية التنقل في SVG باستخدام لوحة مفاتيح أو جهاز مساعد آخر.

يمكن أن تدعم Svgs النص البديل

svgs ، بالإضافة إلى القدرة على دعم النص البديل ، مدعومة أيضًا. إذا تم تحديد سمة alt ، فسيظهر هذا بجوار الصورة إذا تم النقر عليها أو إذا تم النقر فوق الصورة.