كيفية جعل ملف Svg

من المهم التأكد من أن SVG الخاص بك في متناول الجميع ، بما في ذلك ذوي الإعاقة. فيما يلي بعض النصائح حول كيفية إنشاء svg يمكن الوصول إليه : 1. استخدم الترميز الصحيح: عند إنشاء svg ، من المهم استخدام الترميز الصحيح. هذا يضمن أن يتم تفسير svg بشكل صحيح بواسطة برامج قراءة الشاشة والتقنيات المساعدة الأخرى. 2. إضافة علامات العنوان والوصف: للتأكد من أن ملف svg الخاص بك في متناول الجميع ، يجب عليك إضافة علامات العنوان والوصف. توفر هذه العلامات معلومات حول svg ، ويتم قراءتها بواسطة برامج قراءة الشاشة. 3. استخدم الألوان الصحيحة: عند اختيار الألوان لملف svg الخاص بك ، من المهم استخدام الألوان ذات التباين الجيد. وهذا يضمن أن تكون svg مرئية للجميع ، بما في ذلك أولئك الذين يعانون من إعاقات بصرية. 4. تجنب استخدام الرسوم المتحركة: يمكن أن تكون الرسوم المتحركة مشتتة ويصعب فهمها بالنسبة لذوي الاحتياجات الخاصة. إذا كان يجب عليك استخدام الرسوم المتحركة ، فتأكد من إضافة عناصر تحكم بحيث يمكن للمستخدمين إيقاف سرعة الحركة أو إيقافها مؤقتًا أو ضبطها. 5. استخدام النص البديل: عند إضافة صور إلى ملف svg ، تأكد من استخدام نص بديل. تتم قراءة هذا النص بواسطة برامج قراءة الشاشة وهو يوفر معلومات حول الصورة. باتباع هذه النصائح ، يمكنك إنشاء ملف SVG يمكن الوصول إليه يمكن للجميع الاستمتاع به.

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

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

يجب عليك استخدام تطبيق برنامج رسومات متجه مثل Adobe Illustrator أو CorelDraw أو Inkscape (محرر رسومات متجه مجاني ومفتوح المصدر يعمل على أنظمة تشغيل Windows و Mac OS X و Linux) لفتح ملفات svg .

كيف يمكنني الوصول إلى صورة Svg الخاصة بي؟

من أجل إتاحة الوصول إلى صورة svg ، ستحتاج إلى إضافة عنوان ووصف إلى رمز الصورة. يمكن القيام بذلك عن طريق إضافة السمات التالية إلى رمز svg: عنوان صورتك هنا وصف صورتك هنا يتكون من رسومات متجهة تستند إلى XML بتنسيق Scalable Vector Graphic (SVG). السبب الرئيسي لذلك هو أنه يحتوي على خصائص تفاعلية وقابلة للتطوير وسريعة الاستجابة وقابلة للبرمجة ، مما يجعله شائعًا للغاية في تصميم الويب الحديث. سيوضح لك هذا البرنامج التعليمي كيفية جعل ملف an.sva قابلاً للوصول إلى برامج قراءة الشاشة. في جميع الحالات ، قد لا تتمكن متصفحات تحويل النص إلى كلام من قراءة علامات العنوان والوصف. من السهل التأكد من ذلك عن طريق إضافة سمات aria-labeling و ariandesignedby في عنصر thesvg. تتم إضافة هذه العناصر للتأكد من أن قارئ الشاشة يمكنه قراءتها. قد يكون من الأفضل الاحتفاظ بنص مباشر وعنوان على الرسومات الخاصة بك. يمكنك اتخاذ بعض الخطوات البسيطة لمنع هذه المعلومات. ابحث عن الكود في ملف SVG الذي يتضمن خطاب الفصل وأدخله في علامة النص الخاصة بك. يخبر هذا الكود قارئ الشاشة أن هذا النص مخصص للعرض فقط وليس له معنى. متصفح المستخدم والتكنولوجيا المساعدة ، ومستوى قدرة المستخدم. ومع ذلك ، بشكل عام ، من الممكن جعل محتوى SVG متاحًا للمستخدمين ذوي الاحتياجات الخاصة. اليوم ، HTML5 هو تنسيق رسومات الويب الأكثر استخدامًا ، مع Scalable Vector Graphics (SVG) يتبعه عن كثب. عندما يكون الرسم تزيينيًا بحتًا ، فإنه لا يتطلب أي نص إضافي. يجب أن تتضمن جميع علامات img> سمة alt صالحة ، على الرغم من أنه يمكن ترك السمة فارغة (فارغة) إذا لزم الأمر. من خلال إدراج SVG مباشرة في HTML ، ستتمكن من التحكم في محتويات الرسم. إذا كنت تستخدم Safari أو WebKit ، فقد تحتاج إلى استبدال role = img بـ role = group. لتوضيح الصورة ، أعد كتابة العنوان والوصف. أضف tabindex (tabfield) من 1: 0:. ستتم إضافة tabIndex = 1 إلى SVG إذا اخترت طريقة التضمين بناءً على اختيارك. يمكنك إدراج رسم في إطار iframe أو ملف مضمن في كائن. يرجى تضمين عنصر * title * (ل NVDA) يحتوي على كل من العنوان ومحتويات القسم. يعد استخدام فصل دراسي لإخفاء النص بصريًا مع السماح بعرض النص على برامج قراءة الشاشة خيارًا جيدًا. نتيجة لذلك ، يمكننا تحديد حجم خط إما JAWS أو NVDA ، وهو 0.2 لكلا البرنامجين. هل استخدام خط رمز وحل SVG هو أفضل طريقة لتسهيل إمكانية الوصول؟ ومع ذلك ، يمكنك تحقيق ذلك باستخدام الرمز نفسه ، لذلك سنوضح لك كيفية القيام بذلك في الفيديو أدناه. باستخدام منشئ الرموز ، من الشائع أن يكون رمز الرمز على النحو التالي. هذه الطريقة مشابهة جدًا لاستبدال الصورة الأساسية ، مثال SVG المضمن. عند استخدام تسمية aria على علامة الربط ، لا يكشف قارئ الشاشة عن النص الموجود داخل الرابط. يمكننا استخدام نص بديل هنا لأننا لسنا مطالبين بتضمين كل هذه التفاصيل في سمة النص البديل. يمكن تصدير الطبقات من أسفل Adobe Illustrator عن طريق سحبها إلى الأعلى. لحماية نفسي ، احتفظ بنسختين من SVG ، أحدهما للتحرير في Illustrator والآخر لتحرير الكود. إذا كنت تستخدم عنصر تحكم بالمصادر مستند إلى Git (git ، SourceTree ، إلخ) ، فيجب عليك تثبيت الملف ، ومن الأفضل إيقاف تحرير SVG مؤقتًا حتى يتضح تمامًا ماهية التصميم. يمكننا ربط العنوان والوصف بعنصر thesvg لأنهما عناصر نصية يمكن استخدامها بنفس الطريقة. يمكن إضافة الأشرطة والتسميات والمفتاح بشكل دلالي عن طريق إضافة بعض الأدوار الدلالية إلى المجموعات التي تحتوي عليها. يجب أن يتم عرض التسمية aria-label = "رسم بياني شريطي" في القائمة. تحقق من حل المشكلة باستخدام قارئ الشاشة. إذا كانت لديك أية مخاوف بشأن SVG ، أضف الدور = عنصر المجموعة إليها. يمكن إضافة الأدوار الدلالية إلى المجموعات التي تحتوي على جداول زمنية وأجزاء زمنية. أضف تسمية إلى قائمة الجدول الزمني: لضمان إمكانية الوصول إلى tabindex = ”0 في جميع المتصفحات ، يجب ضبطها على التركيز. في دلالات الروابط ، يجب عليك أولاً إصلاحها. يرجى أن تضع في اعتبارك أن الرابط يتم توفيره فقط من أجل راحتك. إنه ليس رابطًا دلاليًا لأنه لا يحتوي على أي معلومات يحتاجها مستخدم قارئ الشاشة. عند التنقل عبر عناصر الارتباط باستخدام SVGs ، ليس من الضروري دائمًا تغيير النافذة لضمان وجود العنصر في منفذ العرض. لا تتضمن بعض المتصفحات العناصر الفرعية التي قد تكون خارج الشاشة ، وتقوم بتمرير كل عنصر> svg> ككل. تساعد هذه الميزة ، التي يمكن تمكينها في Windows و High Mode Contrast ، الأشخاص الذين يعانون من ضعف في الرؤية على الرؤية بشكل أكثر وضوحًا ، من خلال النقر فوق علامة الجمع في الزاوية اليسرى السفلية من قسم الأنماط ، يمكنك إضافة نمط من القائمة المنسدلة. ستتم إضافة كل نصوص وأشكال ملف SVG إليه كنتيجة للنمط الذي تحدده. لإنشاء نمط ، حدد علامة تبويب النص ثم زر أنماط النص في الركن الأيمن السفلي من الشاشة. إذا كنت تريد تغيير الخط المستخدم في ملف SVG ، فانقر فوق الزر Fonts وحدد الخط الذي تريده. بالإضافة إلى تغيير لون النص والأشكال ، يمكنك اختيار لون مختلف من القائمة عن طريق تحديد زر الألوان. إذا كنت تريد تغيير خصائص شكل فارغ ليس له لون ، فحدد الشكل ثم انقر فوق تحرير الشكل لتغييره. إذا كنت تريد إضافة نص إلى ملف SVG ، فحدد أولاً النص الذي تريد إضافته من القائمة ، ثم اضغط على زر النص. عندما تختار شكلًا وتحدد خيار إضافة نص ، يمكنك إضافة نص إليه. بمجرد فتح ملف SVG ، اسحبه حول المستند ، وحرك المؤشر لتحريك النص أو الشكل. عند الانتهاء من تحرير ملف SVG ، اضغط على الزر حفظ في الزاوية اليسرى السفلية من علامة تبويب الرسومات ، ثم احفظ التغييرات على جهازك. بعض العوامل المهمة. قبل أن تبدأ ، يجب عليك أولاً تحديد عنوان "في التعليمات البرمجية الخاصة بك. ضع العنوان دائمًا> في بداية svg أو قبل المسار. يجب إضافة عنصر svg> الموصوف في الخطوة التالية. يمكن العثور على سمة aria هذه في الصفحة التي تصف أوصاف الأغنية. يتوفر الترميز مباشرة داخل SVG ، مما يسمح بإضافة المزيد من المعلومات داخل الصورة نفسها ، وهو أمر مفيد للأشخاص الذين يستخدمون قارئ الشاشة أو أي جهاز آخر يساعد في القراءة. بالإضافة إلى ذلك ، نظرًا لأنه يمكن تحرير SVG باستخدام محرر نصوص ، فيمكن البحث عنه وضغطه ، ويمكن إنشاؤه ومعالجته تلقائيًا ، ويمكن دمجه في (X) HTML ، ويمكن أن يكون متحركًا ، ويمكن استخدامه في جميع أنواع صفحات الويب. لقد غطينا سابقًا الطرق التي يمكنك من خلالها تسهيل الوصول إلى صور sva. للتلخيص ، هناك بعض الأشياء التي يجب وضعها في الاعتبار. تتمثل الخطوة الأولى في استخدام ملفات SVG القابلة للتطوير ، والتي تسمح للقارئ بتكبيرها وتوسيع نطاقها لتلبية متطلبات محددة. بالإضافة إلى ذلك ، تتيح الأدوات المتعددة الإنشاء التلقائي ومعالجة صور SVG ، مما يقلل من الوقت المستغرق في إنشاء تنسيقات صور مختلفة. مع إضافة (X) HTML ، أصبح من الممكن الآن تضمين صور (SVG) في صفحة الويب. يمكن لقارئات الشاشة قراءة وتحديد علامات إمكانية الوصول التي تحدد ما يمثله SVG أو المقصود منه تمثيله. لقد حققوا انتعاشًا هائلاً في شعبيته في السنوات الأخيرة. تصف المقالة اثني عشر نمطًا مميزًا من SVG تم اكتشافها في البرية باستخدام هذا المورد. يتوفر وصف بديل واحد بمجرد اكتشافه باستخدام مجموعة مختلفة من أنظمة التشغيل والمتصفحات وقارئات الشاشة. استنادًا إلى مجموعة متنوعة من أنظمة التشغيل والمتصفحات ، يمكننا رؤية ظهور أنماط واضحة في جدول النتائج النهائية نتيجة تشغيل برامج قراءة الشاشة المختلفة على مجموعات مختلفة من أنظمة التشغيل والمتصفحات. هناك بعض الرابحين والخاسرين الواضحين في SVG ، بالإضافة إلى بعض الأنماط التي يمكن تنفيذها طالما كنت على دراية بحدودها. من الأهمية بمكان ملاحظة أن كل منشئ قارئ شاشة يوفر مستعرضًا (مستعرضات) موصى به يمكنهم استخدامه بشكل كامل. هذا لا يعني أنه لا يمكنك استخدام قارئ الشاشة في متصفح مختلف ؛ يمكنك ، مع ذلك ، إذا لم يكن لديك وصول إلى نظام التشغيل. باستخدام هذه الاختبارات ، يجب أن تكون قادرًا على تحديد أفضل قرارات SVG لاحتياجات وقيود النمط الخاص بك. المعلومات الإضافية موجودة في الصورة نفسها ، وهو أمر مفيد للأشخاص ذوي الإعاقة الذين يعتمدون على التكنولوجيا للتنقل. في برامج قراءة الشاشة ، قم بتمكين أو تعطيل السمة aria-hidden = "true". وبالمثل ، يمكن استخدام خاصية التركيز = "false" لمنع Internet Explorer من عرض مفتاح Tab عند تصفح SVG.Does Svg Support Alt Text؟ المصدر: preminspiration نعم ، يدعم SVG استخدام سمة alt. تحدد السمة alt نصًا بديلاً للصورة ، إذا تعذر عرض الصورة. يمكنك تضمين سمة alt في SVG. عندما تستخدم VScript ، يمكن عرض النص الخاص بك. يمكنك استخدام ملفات svega في المستعرض الخاص بك. رموز Svg التي يمكن الوصول إليها يشير المصطلح "رموز SVG التي يمكن الوصول إليها" إلى الرموز التي يمكن للأشخاص ذوي الاحتياجات الخاصة استخدامها. يجب تصميم الرموز بطريقة يمكن استخدامها من قبل الأشخاص الذين يعانون من إعاقات بصرية وضعف سمعي وإعاقات أخرى. مستند HTML باستخدام العناصر ، وعندما لا تحدد ارتفاع أو عرض SVG ، فسيتم عرضه بالحجم الذي يسمح به إطار العرض. سيتم بعد ذلك تجاوز القيم من خلال فئة مساعدة CSS واحدة تتناول رموز SVG الخاصة بنا ، وسيتم تحجيمها لتلائم نص الصفحة تمامًا. عندما نستخدم SVG مضمنًا ، يمكننا إضافة عنصر العنوان كأول عنصر تابع لعنصر thesvg وتقديم معرفه. عندما يختار شخص ما التركيز على الزر ، سيتم عرض نص في عنصر العنوان. يمكن استخدام عنصر الامتداد> لالتفاف النص في التفاف ثم إخفائه بصريًا عن العارض. يمكنك تقديم شرح للزر دون تعديله باستخدام النص بدلاً من التصميم. يجب إخفاء الصورة أو الرسم الزخرفي عن شجرة إمكانية الوصول عندما يتعلق الأمر بإمكانية الوصول ، وتتمثل الطريقة في وضع عنصر HTML فارغ كأول عنصر فرعي للعلامة الافتتاحية> الجسم>. لا يمكن عرض ورقة الأنماط الخاصة بنا أثناء قيام المتصفح بتحميلها ؛ لذلك ، يجب ألا تكون الشاشة مضمنة: لا يوجد إعداد مطلوب. تعلمنا سارة سويدان بتفصيل كبير كيفية إنشاء SVG باستخدام جميع المزايا والعيوب. عند الإشارة إلى رمز واحد في عنصر ما ، يجب أن تختار ما إذا كنت تريد تسميته أو إخفائه. يمكننا تحسين وتبسيط الشفرة المستخدمة في SVG باستخدام مجموعة متنوعة من الطرق قبل تحميلها إلى مستند HTML الخاص بنا. عندما تفتح SVG في محرر وتزيل كل الفوضى غير الضرورية يدويًا ، تكون أكثر مهمة مجزية. هناك العديد من الرموز في وثيقتنا ، ولكل منها معرّف فريد ، لذا يمكننا الرجوع إليها في مكان آخر ، ويمكننا إعادة استخدام رمز إعلان لا نهائي لجعله يبدو مختلفًا وفقًا لاحتياجات المستخدم. لا يوجد فرق مرئي ، لكن مقدار الكود المطلوب لعرض الرموز هائل. الهدف من هذه المقالة هو التحقق من إمكانية الوصول على الويب وما يمكننا القيام به لجعله مكانًا يسهل الوصول إليه. ساعدت قراءة الكتب والمدونات والبرامج التعليمية ، بالإضافة إلى متابعة عمل الأشخاص الذين يعملون في هذا المجال ، في فهمي لهذا المجال على مر السنين. لتسهيل الوصول إلى صور SVG: - استخدم العلامات والعلامات لتوفير سياق ومعلومات حول صورتك. - تأكد من إمكانية تحجيم صور SVG دون فقدان الجودة ، بحيث يمكن للمستخدمين تغيير حجمها حسب الحاجة. - استخدم أدوار وسمات ARIA المناسبة لوصف محتويات صورتك. - قم بتضمين نص بديل لصورتك ، للمستخدمين الذين لا يمكنهم رؤيتها. ملف Scalable Vector Graphics (SVG) هو ملف مضغوط ومنظم بطريقة مثالية للرسومات. يتم إنشاء رسومات الويب باستخدام صور XML المنظمة والقابلة للتطوير. نظرًا لأن SVGs سريعة الاستجابة ، يمكنها تغيير الحجم أو التكبير / التصغير إلى أي حجم دون تشويه أو فقدان الدقة. يعد SVG تنسيق صورة أعلى جودة من PNG أو JPG عندما يتعلق الأمر بالتدريس عبر الإنترنت نظرًا لهيكله وعرضه وحجمه. من الممكن إنشاء SVGs باستخدام XML بطريقة متسقة وديناميكية. يمكن تصميم جميع أنواع SVGs بشكل عام باستخدام CSS ، مما يعني أنه يمكن لـ Hawkes تحديد مجموعة من الأنماط وتطبيقها عليها جميعًا. تتميز SVGs بسهولة تحريكها ومعالجتها ، وذلك بفضل استخدام كل من JavaScript و CSS. يتمركز الرسم البياني ثلاثي الأبعاد في الفضاء ثلاثي الأبعاد على مكافئ دائري مقعر لأعلى z = x 2 y 2 = 2. لأنه جزء من الترميز ، تعرض المتصفحات نصًا مباشرًا تمامًا كما تفعل مع أي نص آخر. نتيجة لذلك ، يمكن تخصيصه من قبل المستخدم ويمكن قراءته باستخدام مجموعة متنوعة من التقنيات المساعدة. تدعم إمكانية الوصول إلى نص vg ميزات إمكانية الوصول التالية: • يوفر عنصر العنوان تلميح أداة لكائن SVG. • يعرّف العنصر ارتباطًا تشعبيًا. • يوفر عنصر الوصف وصفًا أطول لكائن SVG. • يدعم SVG ميزات الوصول WAI-ARIA. • يمكن تحويل نص SVG إلى كلام باستخدام قارئ الشاشة. يتضمن ذلك توفير نص بديل للصورة ، والتأكد من أن الصورة مرئية في جميع أنظمة الألوان ، وتوفير بديل يعتمد على النص للصورة. القراء في نمط الترميز هذا. لمنع Internet Explorer من استخدام مفتاح Tab في SVG ، يمكن التركيز = "false". نظرًا لأن المقصود من SVG أن يكون مخفيًا ، فليست هناك حاجة لتضمين سمة دور ، حيث سيتم تجاهلها. يتم التخلص التدريجي من رموز SVG المضمنة لصالح طرق أكثر كفاءة لتقديم المعلومات. في معظم الحالات ، تضيف الأيقونة مظهرًا مرئيًا وتستخدم كإشارة بصرية إضافية. عند استخدام عنصر img بسمة alt فارغة (alt =) ، لن يتم عرض SVG. ستتجاهل برامج قراءة الشاشة SVG لأنها تشبه أي صورة أخرى. قد يحتوي ملف SVG على عنصر عنوان ، والذي قد يتم عرضه أو لا يتم عرضه لقارئات الشاشة. تم حل المشكلة بعد القليل من البحث عندما أضفت aria-hidden = "true" إلى عنصر thesvg. إذا كنت تستخدم SVG لتضمين صورة غير مرئية ، فتأكد من أنها تحتوي على خيار نص بديل.