إنشاء محتوى SVG يمكن الوصول إليه لمستخدمي قارئ الشاشة
نشرت: 2022-12-06برامج قراءة الشاشة هي برامج تتيح للمستخدمين المكفوفين وضعاف البصر قراءة النص المعروض على شاشة الكمبيوتر. تتوفر مجموعة متنوعة من برامج قراءة الشاشة ، ويمكن استخدامها مع مجموعة متنوعة من أنظمة التشغيل ومتصفحات الويب. هناك بعض الأشياء التي يجب وضعها في الاعتبار عند إنشاء محتوى SVG أو تحريره لجعله أكثر سهولة لمستخدمي قارئ الشاشة. أولاً ، يجب تضمين كل النص في SVG في العناصر. يتيح ذلك لقارئات الشاشة التعرف على النص في SVG وقراءته بصوت عالٍ. بالإضافة إلى ذلك ، يجب أن يتضمن SVG وصفًا للصورة باستخدام العنصر. يمكن قراءة هذا الوصف بواسطة برامج قراءة الشاشة وسيوفر سياقًا للصورة. أخيرًا ، ضع في اعتبارك أن بعض برامج قراءة الشاشة قد تواجه صعوبة في قراءة محتوى SVG المعقد . إذا تضمن SVG الكثير من التفاصيل أو الرسوم المتحركة ، ففكر في تقديم نسخة مبسطة أو وصف نصي بديل يمكن قراءته بواسطة برامج قراءة الشاشة.
Scalable Vector Graphics (SVG) هو نوع من تنسيق الرسوم يمكن أن يتكون من عناصر XML. نظرًا لأنه تفاعلي وقابل للتطوير وسريع الاستجابة وقابل للبرمجة ، فإنه يستخدم على نطاق واسع في تصميم الويب الحديث. في هذا البرنامج التعليمي ، سنوضح لك كيفية جعل ملف SVG الخاص بك في متناول برامج قراءة الشاشة. عند استخدام ميزة تحويل النص إلى كلام ، قد لا تتمكن من قراءة علامات العنوان والوصف. تشتمل العناصر على سمات aria-labeling بواسطة وسمات ariandesignedby للتأكد من أنها تفعل ذلك. سيقرأ قارئ الشاشة هذه العناصر للزائر بالإضافة إلى إضافة هذه العناصر. قد لا تتضمن رسوماتك عنوانًا مباشرًا أو نصًا مباشرًا إذا كنت لا تريد ذلك.
يمكن منع المعلومات في بضع خطوات بسيطة. قم بإنشاء فئة خطاب الفصل وابحث عن الكود التالي في ملف SVG الخاص بك باستخدام classspeech class. يشير هذا الرمز لقارئ الشاشة إلى أن هذا النص مخصص فقط للعرض أثناء العرض.
يمكنك معاينة SVG بالضغط على زر تبديل "الإعدادات" في مستكشف الملفات. يجب أن يكون لديك View> PreviewPane ممكّنًا في File Explorer من أجل استخدام PreviewPane. لعرض معاينات الصور المصغرة ، قد تحتاج إلى إعادة تشغيل الكمبيوتر.
هل يمكن لقارئات الشاشة قراءة Svgs؟
يمكن لقارئ الشاشة قراءة SVG طالما أنه مكتوب لقراءته. يتم تضمين علامات إمكانية الوصول التي يمكن استخدامها بواسطة برامج قراءة الشاشة لوصف ما يمثله SVG أو من المفترض أن يمثله في SVG نفسه.
سرعان ما أصبح هذا التنسيق النظام الأساسي المفضل لإنشاء رسومات قابلة للتطوير ، حيث يستخدمه بالفعل العديد من أكبر الناشرين عبر الإنترنت في العالم. يجب أن تبدأ في استخدام SVG إذا كنت ترغب في إنشاء رسومات يمكن عرضها في جميع المتصفحات وتكون سهلة الاستخدام.
3 نصائح لتسهيل الوصول إلى صور Svg
نظرًا لميزات التحرير السهلة في SVG ، يمكن للأشخاص الذين يستخدمون الكراسي المتحركة أو أجهزة الوصول الأخرى إدارة الصور وترميزها بسهولة. يمكنك إتاحة الوصول إلى صورة SVG من خلال تضمين عنوان> وعنصر موصوف من قبل> في التعليمات البرمجية الخاصة بك. كلتا هاتين الخاصيتين ستكون مفيدة للأشخاص ذوي الإعاقات. هل يمكنني قراءة ملفات SVG؟ تدعم معظم المتصفحات الحديثة استخدام ملفات SVG ، والتي يمكن تحريرها باستخدام محرر نصوص أساسي ومحرر رسومات متطور. إذا كنت تستخدم SVG ، فمن الأفضل تجنب الشعارات والأيقونات والرسومات التي تستخدم ألوانًا وأشكالًا بسيطة. علاوة على ذلك ، قد لا تتمكن المتصفحات القديمة من التعامل مع صور SVG بشكل صحيح.
كيف أجعل Svg قابلاً للقراءة؟
لجعل SVG قابلاً للقراءة ، تحتاج إلى فتحه في برنامج تحرير متجه مثل Adobe Illustrator أو Inkscape أو CorelDRAW. بمجرد فتح الملف في برنامج التحرير ، يمكنك تحديد أداة النص والنقر فوق النص الموجود في الصورة. سيسمح لك ذلك بتعديل النص وجعله قابلاً للقراءة.
عند استخدام SVG ، ستبدو الصور دائمًا جيدة بغض النظر عن حجمها. تم تحسين هذه التنسيقات لمحركات البحث ، وعادة ما تكون أصغر من غيرها ، وقادرة على الرسوم المتحركة الديناميكية. سيتناول هذا الدليل ماهية هذه الملفات ، ومتى يتم استخدامها ، وكيفية إنشاء SVG من البداية. نظرًا لأن دقة الصورة النقطية ثابتة ، فإن حجمها يقلل من جودة الصورة. في تنسيق رسم متجه ، يتم تخزين مجموعة من النقاط والخطوط بين الصور. يتم استخدام XML ، وهي لغة ترميز ، لهذه الأنواع من الملفات. يتم تحديد جميع الأشكال والألوان والنص في كود XML الذي يعرف صورة في ملف sVG.
قد لا يكون رمز XML البسيط مثيرًا للإعجاب مثل رمز SVG الرائع ، ولكنه قد يكون قويًا جدًا لمواقع الويب وتطبيقات الويب. لا يوجد حد لعدد SVGs التي يمكن تكبيرها أو تقليصها بأي ترتيب دون فقدان الجودة. لا يهم حجم الصورة ونوع العرض في عالم sva. عندما تكون الصورة عبارة عن SVGs ، فإنها تفتقر إلى تفاصيل الصورة المأخوذة من نقطية. إنها تسمح للمصممين والمطورين بالتحكم في مظهرهم بعدة طرق. أنشأ اتحاد شبكة الويب العالمية تنسيق الملف كمعيار لرسومات الويب. لفهم رمز XML بسرعة ، يجب على المبرمجين البحث في ملفات SVG أولاً.
من خلال استخدام CSS و JavaScript ، يمكنك تغيير مظهر SVGs ديناميكيًا. الرسومات ذات التكلفة المنخفضة الرسومات المتجهة قابلة للتحجيم مناسبة تمامًا لمجموعة متنوعة من الأغراض. هذا التطبيق سهل الاستخدام وتفاعلي ومتعدد الاستخدامات ، مما يجعله اختيارًا جيدًا للمصممين المبتدئين. هناك دائمًا بعض القيود ومنحنيات التعلم للبرنامج. قبل اتخاذ قرار بشأن إصدار مجاني أو مدفوع ، جرب بعض الخيارات وتعرّف على الأدوات المتاحة.
يتم تضمين العلامات مباشرة في الكود المصدري ، مما يجعل الوصول إلى الصور أكثر سهولة. قد يجد الأشخاص ذوو الإعاقة ، مثل برامج قراءة الشاشة ، هذا مفيدًا.
كمثال ، هذا مثال:
تستخدم هذه الصفحة ملف .JPG كصفحة HTML.
فيما يلي قائمة بالمخرجات.
العنوان: كيفية جعل صور Svg قابلة للقراءة وليست ضبابية
يمكن عرض ملف PDF مع صورة SVG. إذا كنت قد أنشأت رسم SVG من قبل ، فمن المحتمل أنك لاحظت مدى صعوبة قراءتها. ستتمكن محركات البحث وقارئات الشاشة من فهم الرسم الخاص بك إذا قمت بتضمين عنوان ووصف في كود XML الخاص بـ SVG. بالإضافة إلى فتح أي ملف SVG ، فإن إضافة عنصر العنوان والوصف إلى محرر التعليمات البرمجية المصدر يعد طريقة رائعة لدمج العناوين وعناصر الوصف في أي كود. عند استخدام SVG ، من الشائع أن تظهر ضبابية. نظرًا للدقة العالية للشاشات الحديثة ، فقد تم تصميم صور SVG ليتم عرضها بحجم معين. لمنع صور SVG الضبابية ، تأكد من محاذاة جميع وحدات البكسل الخاصة بك مع الشبكة وأن حجم SVG قد تم تعيينه في برنامج التحرير الخاص بك. سيسمح الحجم الأصغر لـ SVG بالارتقاء مع الحفاظ على جودة العرض كما هي.
كيف يمكنني تعطيل Svg في قارئ الشاشة؟
لا توجد إجابة واحدة تناسب الجميع على هذا السؤال ، لأن أفضل طريقة لتعطيل SVG في قارئ الشاشة قد تختلف اعتمادًا على قارئ الشاشة المعني. ومع ذلك ، قد تتضمن بعض النصائح حول كيفية تعطيل SVG في قارئ الشاشة استخدام الخيارات أو الميزات المضمنة في قارئ الشاشة ، أو تنزيل وتثبيت ملحق قارئ شاشة تابع لجهة خارجية أو مكون إضافي يعطل دعم SVG على وجه التحديد.
نظرًا لأن التكنولوجيا أكثر ملاءمة للاستخدام ، يتم التخلص التدريجي من رمز SVG المضمن . كإشارة بصرية ، في معظم الأحيان ، يكون الرمز هو كل ما تحتاجه. إذا استخدمت سمة alt فارغة (alt =) في عنصر img ، فسيتم تجاهل SVG. لن يتم التعامل مع SVG بشكل مختلف عن الصور الأخرى عندما تحدد برامج قراءة الشاشة أنها مناسبة للاستخدام. في ملف SVG ، قد يكون هناك عنصر عنوان يمكن أو لا يتم الإعلان عنه بواسطة برامج قراءة الشاشة. بعد بعض الاختبارات ، قررت أن وضع aria-hidden = "true" في عنصر thesvg يحل المشكلة. إذا كنت تستخدم SVG لتضمين صورة ليست مزخرفة فحسب ، بل نصًا أيضًا ، فتأكد من أنها تحتوي على بديل نصي.
هل يمكن للمتصفح عرض Svg؟
بنفس الطريقة التي يمكنك من خلالها عرض صفحات الويب ، يمكنك عرض صور SVG في متصفحك. لقد درسنا تضمين مستند SVG مع * iframe] من خلال القيام بنفس الشيء الذي فعلناه مع التضمين من * object * إلى * iframe *.
تدعم جميع متصفحات الويب الرئيسية ، بما في ذلك Internet Explorer ، تنسيق Scalable Vector Graphics (SVG). تشتمل مجموعة برامج محرر الصور على Inkscape ، وهو أحد أكثر البرامج شيوعًا. ما هي الأنواع المختلفة لدعم متصفح الويب؟ ما هي الاختلافات بين محركات التقديم المختلفة؟ هل لديهم نفس طريقة عرضها؟ ما هي ميزات Snapchat التي لا تمتلكها التطبيقات الأخرى؟ اختبرنا العديد من محركات / متصفحات العرض في الإصدارات الحديثة ووجدنا أنها تمر بألوان متطايرة.
دعنا نلقي نظرة على الأفلام التي لم تحقق أداءً جيدًا في قائمتنا لأسوأ الأفلام. يبدو أن محرك Gecko يواجه مشكلة في عرض العناصر الأولية لمرشح Specular Lighting بشكل صحيح. تصف مواصفات تأثيرات مرشح 1.1 SE عددًا من تأثيرات المرشح المتوفرة في Maxthon ، ولكن لا يدعم المتصفح الصيني أيًا من هذه التأثيرات. كان أداء CM Browser رائعًا في اختبارنا لجهاز Samsung Galaxy S3 ، لكنه يفتقر إلى دعم الفلتر. متصفح افتراضي لبيئة سطح مكتب Linux الشائعة ، متصفح Konqueror. لقد اختبرنا SVG بنجاح عندما تم تمكين WebKit. على الرغم من أن محرك العرض الافتراضي KHTML ، KHTML ، يفتقر إلى بعض الميزات ، إلا أنه لا يبدو أنه غير متوافق. تم اختبار ما مجموعه أربعة محركات عرض رئيسية ، وكذلك 15 متصفحًا مختلفًا ، بما في ذلك متصفحات شائعة مثل Maxthon و Dolphin.
تنسيق ملف SVG هو امتداد لتنسيق ملف PostScript الذي يمكن استخدامه لإنشاء رسومات لمواقع الويب والتطبيقات. الآن بما أن المتصفحات تدعم ملفات SVG ، يمكن إنشاء الرسومات ومشاركتها بسهولة أكبر من أي وقت مضى. يتحسن دعم المستعرض لـ SVG ، وتتيح لك جميع المتصفحات الرئيسية فتح الملفات باستخدامه. من خلال تحديد ملف> فتح من القائمة ، يمكنك عرض الملف الذي تريد فتحه. عند الانتهاء من التصفح ، انقر فوق الزر "عرض هذه الصفحة" في متصفحك. إذا كنت تريد تحويل ملف SVG إلى HTML ، فيجب عليك أولاً إضافة ملف إلى المشروع. اختر ملفًا أو اسحبه وأفلته في المنطقة البيضاء بالنقر داخل المنطقة البيضاء. للتحويل ، اضغط على زر التحويل. عند اكتمال تحويل SVG إلى HTML ، يمكنك تنزيل ملف HTML.
صور Svg: دليل لاستخدامها في متصفحات مختلفة
يمكن استخدام العديد من تنسيقات الصور المختلفة لإنشاء صور بضغط SVG . تسمح لك المتصفحات باستخدام عناصر HTML (img> أو svg>) في الصور في sva. خلفيات CSS هل هناك طريقة لتشغيل ملفات vg على Chrome؟ يدعم Chrome و Edge و Safari و Firefox الآن فتح ملفات vo flac ، بغض النظر عما إذا كان جهاز الكمبيوتر الخاص بك يعمل بنظام التشغيل Mac OS X أو Windows. بعد تشغيل المستعرض الخاص بك ، انقر فوق الزر ملف. بمجرد تحديد عنوان URL ، ستتمكن من عرضه في متصفحك. أي متصفح يدعم svg؟ يتمتع Chrome بدعم كامل لـ SVG على جميع إصدارات 4-106 ، ولكن ليس في جميع الإصدارات أدناه 4. يمكن استخدام SVG (الدعم الأساسي) في Safari 3.2-16 ، ولكن ليس في الإصدارات السابقة من المتصفح (مثل 3.1- 5.1).