Advertisement
  1. Web Design
  2. Accessibility

نصيحة سريعة: استخدم السمة "lang" لإمكانية وصول أفضل

Scroll to top
Read Time: 3 min

() translation by (you can also view the original English article)

تعتبر سمة lang واحدة من سمات HTML العامة التي يستطيع مطوروها تطبيقها على أي عنصر HTML ، ويمكن أن تساعد حقًا في إمكانية الوصول. تسمح لك بتحديد لغة عنصر ما وكل عناصره الفرعية باستخدام لغة "علامة فرعية" : كود الرقم 2 أو 3 تُحدد من قبل هيئة معايير دولية.

الاستخدام الأساسي

تعتبر lang أكثر شيوعًا في عنصر html ، حيث يمكن نشر الإعلان على كل المحتوى على الصفحة. على سبيل المثال ،حيث <"html lang="en> يخبر المتصفح بأن كافة محتويات الصفحة هي الإنجليزية.

قد يكون للغة الفرعية lang أيضًا نص برمجي أو منطقة مميزة ، والتي تسمح لك بتحديد نظام كتابة اللغة أو المنطقة الجغرافية. على سبيل المثال ، <"html lang="en-GB> يحدد تعريف اللغة الإنجليزية في المملكة المتحدة (اللون مقابل اللون ، والمركز في مقابل المركز ، وما إلى ذلك).

يمكنك تجاوز إعلان lang الحالي مع تعريف lang أكثر تحديدًا للبرمجة التي تحدد المحتوى الذي يستخدم لغة مختلفة عن باقي الصفحة. سيظهر قسم مكتوب بالإسبانية على صفحة باللغة الإنجليزية على النحو التالي:

1
<html lang="en">
2
    <head></head>
3
    <body>
4
        <!-- English page content -->
5
        <aside lang="es">
6
            <h2>Información para hispanohablantes</h2>
7
            <p><!-- Additional Spanish content --></p>
8
        </aside>
9
    </body>
10
</html>

فلماذا نريد أن نفعل هذا؟ سببان:

1. الترجمة وقابلية التشغيل البيني

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

Google Chrome prompting the user to translate a page ScreenshotGoogle Chrome prompting the user to translate a page ScreenshotGoogle Chrome prompting the user to translate a page Screenshot
"جوجل كروم" تسال المستخدم لترجمة صفحة.

كما يساعد وجود تصريح سمة سوية lang في الحصول على خدمات تلقائية أخرى تعمل على استيعاب محتوى موقع الويب وإعادة صياغته. بالإضافة إلى ذلك ، يمكن أن يكون بمثابة خطّ تصميم لأشياء مثل خاصية CSS’ quotes .

2. قارئات الشاشة

يمكن أيضًا لبعض البرامج التي تقرأ محتوى الشاشة بصوت عالٍ تحليل سمة lang ، مما يؤثر على كيفية نطقها لمحتوى الصفحة. هذا البرنامج لا يقتصر فقط على التكنولوجيا المساعدة ، إما. يمكن للمساعدين الصوتيين مثل "Alexa" ، وأوضاع قراءة المتصفّح المتخصصة ، وتطبيقات التنقل مثل خرائط "Google" ، وأنظمة العنوان العام ، وما إلى ذلك ،يستطيع الكل الحصول على هذه الوظيفة.

على أقل تقدير ، يمكن أن يضيف الاستخدام المناسب لخاصية lang إلى ذلك الخبرة "je ne sais quoi" الإضافية للتجربة ، بحيث يخبر البرنامج أن يقرأ المحتوى بصوت مرتفع كما يفعل الشخص.

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

في ما يلي مثال على كيفية تعامل قارئ الشاشات المعروف JAWS مع المحتوى الذي يتضمن سمة lang بشكل صحيح مطبق عليه. سيكون هناك مثالان على القراءة بصوت عال: واحد بسمة lang ، والأخرى بدون مطبقة بشكل صحيح على الجزء الفرنسي من العبارة ، "بالفرنسية ، العبارة" هل يمكنني استخدام حمامك؟ "، "Puis-je utiliser votre salle؟"

الاستنتاج

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.