هل عناوين Svg مقروءة بواسطة قارئات الشاشة

نشرت: 2022-11-25

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

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

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

بصرف النظر عما إذا كان المحتوى مضمّنًا مباشرةً في HTML أو متعدد الطبقات ، فإننا نقوم بفهرسته.

هل Svg يمكن للبشر قراءته؟

هل Svg يمكن للبشر قراءته؟
المصدر: pinimg

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

من الواضح أن SVG يمكن قراءتها من قبل البشر. لا يوجد شيء أكثر من رسم خط. لا يمكن للبشر قراءة علامة المسار ذات السمة "d" من 500 إلى 600 عنصر. ما زلنا نحاول حل مشكلة كيفية توصيل الرسوم البيانية / المخططات المعقدة بعدد كبير من البيانات دون الاعتماد على أي وسيط مرئي. إذا كنت لا تعتقد أن تنسيق SVG يضيف معلومات مفيدة إلى شكله ، فلن تضيع وقتك في إرسال هذه المعلومات ليتم عرضها. يمكن إرسال صورة نقطية صغيرة عبر السلك في شكل نصي ، ويمكنني وضع قطعة من ورق الشبكة والحبر في مربعات حتى تتمكن من رؤية النتيجة النهائية.

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

الاستخدامات العديدة لملف Svg

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

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

هل يمكن الوصول إلى ملفات Svg؟
المصدر: pinimg

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

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

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

باستخدام تنسيق الرسوم المتجهية ، يمكنك إنشاء شعارات وأيقونات ورسوم توضيحية وصور ثابتة. نظرًا لأن ملفات SVG تتكون من أشكال ، يمكن تحريرها باستخدام أدوات متجه ، بدلاً من الصور النقطية ، والتي تتكون من وحدات بكسل. لهذا السبب ، فهو تنسيق متعدد الاستخدامات يمكن استخدامه في مجموعة متنوعة من التطبيقات ، بما في ذلك رسومات الويب والتصميم بمساعدة الكمبيوتر.
من المرجح أنك تستخدم SVG بالفعل لإنشاء رسومات لموقع الويب الخاص بك إذا كنت معتادًا عليها. نظرًا لأنه ملف متجه ، يمكن تصغيره أو تصغيره دون فقدان الجودة. نتيجة لذلك ، يمكنك بسهولة إنشاء موقع ويب متجه يمكنك تحميله إلى موقع ويب أو إرساله إلى عميل بتنسيق نقطي.
إذا لم تكن معتادًا على SVG ، فقد حان الوقت للتعرف عليه. يمكن استخدام SVG في مجموعة متنوعة من التطبيقات ، بما في ذلك رسومات الويب والرسم في التصميم بمساعدة الكمبيوتر (CAD). لا يلزم أن يكون محرر رسومات متخصصًا ، ويمكنك استخدام محرر نصوص بسيط ، مثل Microsoft Word ، أو محرر رسومات أكثر تقدمًا ، مثل CorelDRAW.
لماذا تحظى SVG بشعبية كبيرة؟ نظرًا لتنسيق الرسم المتجه الخاص به ، يمكن زيادة جودة تنسيق الرسم المتجه أو تصغيره.
علاوة على ذلك ، يمكنك إنشاء رسومات بأقل جهد باستخدام جميع متصفحات الويب الرئيسية ، مما يضمن أنك لست بحاجة إلى قضاء أي وقت في الترميز. إذا لم تكن معتادًا على SVG ، فتعلم المزيد عنه الآن.

يمكن الوصول إلى ملفات Svg ويمكن تكبيرها وتغيير حجمها بواسطة القارئ.

ما هي تنسيقات ملف aresvg؟ هل هم سهل الاستخدام؟
نعم ، هناك خيار لتكبير وتحجيم ملفات SVG ، ويمكن للقارئ القيام بذلك أيضًا.

كيف أجعل Svg قابلاً للقراءة؟

كيف أجعل Svg قابلاً للقراءة؟
المصدر: pinimg

يمكنك جعل SVG قابلاً للقراءة عن طريق إضافة السطر التالي إلى HTML: متصفحك لا يدعم SVG. صورة SVG هي صورة جميلة وقابلة للاستخدام ، بغض النظر عن حجمها. يمكن استخدام هذه التنسيقات للبحث عن محتوى في محركات البحث ، وغالبًا ما تكون أصغر من التنسيقات الأخرى ، ويمكن أن تكون ديناميكية. سيرشدك هذا الدليل إلى كيفية استخدام هذه الملفات ، ويشرح متى وكيف تستخدمها ، ويوضح لك كيفية إنشاء SVG. لأن الصور الفلكية لها دقة ثابتة ، فإن زيادة حجمها يقلل من جودة الصورة. تخزن تنسيقات الرسوم المتجهية مجموعة من النقاط والخطوط بينها في شكل صور. XML هي لغة الترميز المستخدمة لإنشاء هذه التنسيقات. يتم تحديد كل شكل ولون ونص في صورة ما في ملف XML باستخدام ملف SVG ، لأن كود XML ليس مثيرًا للإعجاب عند النظر إليه فحسب ، بل يجعله أيضًا قويًا جدًا لتطوير مواقع الويب وتطبيقات الويب. يمكن الحفاظ على جودة SVG ، سواء تم توسيعها أو تقليصها إلى أي حجم. الصور التي يتم عرضها باستخدام sva دائمًا ما تكون بالحجم نفسه بغض النظر عن نوع العرض. هناك سبب لعدم وجود تفاصيل في SVGs. يمكن لفرق التصميم والتطوير أن تتحكم بشكل كامل في صورتها من خلال استخدام SVGs. طور اتحاد شبكة الويب العالمية تنسيق ملف كتنسيق عالمي لرسومات الويب. من السهل على المبرمجين فهم كود XML إذا فهموه كملف نصي بداخله SVG. من خلال دمج CSS و JavaScript في تصميمهم ، يمكنك تغيير مظهر SVGs. يمكن أن يكون استخدام الرسومات المتجهة البسيطة في مجموعة متنوعة من المواقف مفيدًا. يمكنك إنشاء نماذج تفاعلية ثلاثية الأبعاد باستخدام أي محرر رسومات وهي سهلة الاستخدام. لكل برنامج مجموعته الخاصة من منحنيات التعلم والقيود. قبل تحديد خيار مجاني أو مدفوع ، جرب بعض الخيارات وتعرّف على الميزات قبل اتخاذ القرار. ستتمكن برامج قراءة الشاشة من الحصول على فهم أفضل لكيفية هيكلة الرسم الخاص بك. يمكن إضافة عنصر العنوان وعنصر الوصف إلى أي ملف SVG يمكن الوصول إليه باستخدام محرر التعليمات البرمجية المصدر. عند تحميل صورة تحتوي على نفس أبعاد البكسل مثل المساحة التي تريد استهدافها ، تصبح الصورة غير واضحة. والسبب في ذلك هو أن أجهزة التلفزيون لديها الآن شاشات أكبر بكثير. لحل المشكلة ، قد ترغب في استخدام برنامج التحرير الخاص بك لتعيين الحجم المطلوب لـ SVG الخاص بك ثم محاذاة جميع وحدات البكسل الخاصة بك إلى الشبكة. على الرغم من أن SVG الخاص بك سيكون أكبر من حجمه الأصلي ، ستتمكن من تصغيره. كيف أجعل Svg Inline Accessible؟ هناك عدة طرق لجعل SVGs مضمنة قابلة للوصول. تتمثل إحدى الطرق في استخدام سمات العنوان والوصف على عناصر SVG نفسها. هناك طريقة أخرى وهي استخدام سمات aria-labelledby و aria-الموصوفة للإشارة إلى العناصر الأخرى التي تحتوي على عنوان SVG ووصفها. قد يتطلب الأمر بعض الجهد لجعل مستند SVG مضمّنًا يمكن الوصول إليه ، لكن تعلم خمس قواعد بسيطة سيفي بالغرض. في حالة ارتباط صورة SVG ، تظل سمة النص البديل مطلوبة ، تمامًا مثل سمة الصورة النقطية في الصورة العادية. في SVG مع عناصر متعددة ، ستحتاج على الأرجح إلى عنوان لكل عنصر أو مجموعة. ليس من الضروري تقديم عنوان المستند أو وصف جميع العناصر إذا كان المستند تزيينيًا بحتًا. لا يدعم Adobe Illustrator حاليًا إمكانية الوصول إلى SVG ؛ ستحتاج بالتأكيد إلى إضافة إمكانية الوصول الكامل يدويًا إلى مستند SVG الذي تم إنشاؤه باستخدام أدوات الرسم التوضيحي المتجه. سيبدو المستند كما يلي: عند تقديمه مضمّنًا ، سيبدو المستند هكذا. من المفيد تمثيل بلدك في الخارج. مخطط شريطي لمبيعات الشركة حسب الدولة بملايين الدولارات. تمثل فرنسا ما يقرب من 50٪ من إجمالي المبيعات في الولايات المتحدة. في المقام الأول ، قد تشغل SVGs المضمنة مساحة أكبر. علاوة على ذلك ، نظرًا لأنه من غير المحتمل أن يتم تخزينها مؤقتًا بواسطة محركات البحث ، فقد يستغرق تحميل الصفحة وقتًا أطول للمستخدمين. . يتم أيضًا استخدام قيمة منطقية قابلة للتركيز للتأكد من أن مفتاح Tab لا يصل إلى SVG. نظرًا لأنه من المفترض أن يكون SVG مخفيًا ، فلا داعي لإضافة سمة دور ؛ سيتم تجاهلها ببساطة. سيتم التخلص التدريجي من رموز SVG المضمنة لصالح تقنية أكثر قوة والتي من المرجح أن تكون مفيدة. من الشائع جدًا استخدام رمز كإشارة بصرية إضافية بجانب بعض النصوص. إذا كان عنصر img يحتوي على سمة alt فارغة (alt =) ، فسوف يتجاهل SVG. لا يوجد فرق بين كيفية إدراك صورة SVG وكيفية ظهور الصور الأخرى. قد يتم حجب عنصر العنوان في ملف SVG بواسطة برامج قراءة الشاشة ، أو قد يكون مصدر الملف. تم اكتشاف حل المشكلة ببساطة باستخدام aria-hidden = "true" في عنصر thesvg أثناء عملية الاختبار. إذا كنت تنوي تضمين صورة ليست مزخرفة فحسب ، بل تحتوي أيضًا على خيار نصي ، فتأكد من تضمين هذا الخيار. الذي تستخدمه يعتمد على نوع SVG الذي تقوم بتصنيفه. إذا كانت صورة زخرفية ، فيجب عليك استخدام تسمية aria. إذا كانت صورة وظيفية (مثل رسم بياني أو خريطة) ، فيجب عليك استخدام العنوان.