كيفية استخدام روابط التخطي لتسهيل الوصول إلى موقع WordPress الخاص بك
نشرت: 2023-02-26في مقدمتنا لسلسلة إمكانية الوصول ، تحدثنا عن الأساس لمختلف إرشادات الوصول إلى محتوى الويب (WCAG). حان الوقت الآن لاتخاذ الخطوة التالية من خلال النظر في بعض الإرشادات الرئيسية وتوضيح كيفية جعل موقعك أكثر سهولة. لنبدأ بكتل التجاوز ، والمعروفة أكثر باسم تخطي الروابط.
ما هو رابط التخطي؟
رابط التخطي هو رابط خاص يتم إخفاؤه على موقعك حتى يأتي إلى :focus عبر مفتاح tab أو قارئ الشاشة. والغرض منها هو منح مستخدمي التكنولوجيا البديلة (الأشخاص الذين يستخدمون لوحات المفاتيح وقارئات الشاشة) القدرة على تخطي كتل المحتوى. مباشرة من المعايير:
"آلية متاحة لتجاوز كتل المحتوى التي تتكرر على صفحات ويب متعددة." - معيار WCAG 2.4.1 - الكتل الالتفافية
2.4.1 هو مستوى قياسي. هذا يعني أنه مشمول بالقسم 508 ، ويفرضه القانون. تحتاج إلى تخطي الروابط.
هل يمكنك تخمين الكتلة الأكثر شيوعًا التي تنطبق عليها روابط تخطي المحتوى؟ إذا خمنت "القائمة" ، فأنت على حق. تظهر القوائم في كل صفحة من صفحات الموقع تقريبًا. يميل المستخدمون المبصرون ومستخدمو الماوس إلى التمرير من جانبهم مباشرةً لأنه أحد عناصر الموقع التي تتوقع وجودها هناك. لكن قوائم التنقل ليست هي الكتل الوحيدة التي تحتاج إلى تخطي الروابط.
المنطقة التي يتم تجاهلها بشكل شائع لتخطي الروابط هي الأشرطة الجانبية اليسرى (أو الأشرطة الجانبية اليمنى للمواقع باللغات التي تكتب من اليمين إلى اليسار مثل العربية). نظرًا للمكان الذي يميلون فيه إلى الوقوع في الترتيب الدلالي ، سيحتاج المستخدمون إلى طريقة لتخطي الشريط الجانبي المتكرر بانتظام للوصول مباشرة إلى المحتوى.
الأمر نفسه ينطبق على مجموعات المنشورات المميزة التي تظهر خارج الصفحة الرئيسية. تحمل بعض تصميمات الموقع أقسام منشورات مميزة أو أشرطة تمرير إلى الصفحات الداخلية. ما لم يتغير محتوى هذه الأقسام ، على سبيل المثال: صفحات التصنيف أو الأرشيف ، يجب أن يكون هناك ارتباط تخطي في مكانه.
كيف تضيف روابط التخطي؟
الآن بعد أن عرفت ما هو ارتباط التخطي ، حان الوقت لإضافتها إلى موقعك. هناك طريقتان لحل هذه المشكلة. الطريقة السهلة (والطريقة الوحيدة بالنسبة لك لغير المبرمجين) هي تثبيت مكون إضافي. الطريقة الصعبة هي ترميزها في موضوعك بنفسك.
باستخدام البرنامج المساعد
أحد المكونات الإضافية التي نوصي بها عندما يتعلق الأمر بتخطي الروابط: WP Accessibility by Joe Dolson. إنه يحل العديد من مشكلات الوصول ، بما في ذلك إضافة روابط التخطي الأساسية لك.
ترميزها بنفسك
خيارك الآخر هو رمز تخطي الروابط بنفسك. الكود نفسه بسيط إلى حد ما ولا يتطلب سوى بعض المعرفة الأساسية بلغة HTML و CSS ، ولكن عليك أن تكون مرتاحًا لكيفية عمل قوالب ووردبريس قبل تجربة هذه الطريقة. من الآن فصاعدًا ، سنفترض أنك تعرف كيفية العثور على الملفات المشار إليها وكيفية تحريرها.
سنبدأ بكتابة روابط التخطي الفعلية أولاً. سيسمح ذلك بسهولة النسخ واللصق في ملفات القالب. عند استدعاء معرفة HTML ، ستحتاج إلى كتابة علامة ارتساء. لاحظ أن التنسيق هنا لسهولة القراءة.
&amp;lt;a href=”[don't fill this in yet]” class=”skip-link”&amp;gt; Skip to Main Content &amp;lt;/a&amp;gt; لقد تركنا سمة href فارغة عمدًا. هذا لأننا نحتاج إلى تحديد المكان الذي سيرتبط به رابط التخطي. في هذا المثال ، سنستخدم العنصر <main> كهدف. نظرًا لأنه لا يمكننا الارتباط مباشرة بعنصر بدون معرف ، فسنحتاج إلى التأكد من احتواء عنصر <main> على واحد. من المحتمل أن يتم العثور على عنصر <main> في header.php ، ولكن ليس دائمًا. بمجرد تحديد موقع العنصر ، ستحتاج إلى التأكد من احتوائه على معرف. إذا لم يكن كذلك ، أضف واحدًا على النحو التالي:
&amp;lt;main id=”main-content”&amp;gt; [a bunch more code below]القيمة المحددة للمعرف ليست مهمة ، ولكن عليك تذكرها. الآن سترغب في تحديث رمز ارتباط التخطي بقيمة المعرف.
&amp;lt;a href=”#main-content” class=”skip-link”&amp;gt; Skip to Main Content &amp;lt;/a&amp;gt; الآن بعد أن تم إنشاء رابط التخطي الخاص بك ، ارجع إلى ملف header.php الخاص بك أو أينما توجد علامة <body> الخاصة بفتح السمة الخاصة بك. تعد علامة <body> موضعًا أساسيًا لتخطي الروابط لأنها تحتاج إلى أن تكون أول ما يأتي :focus على مستخدمي لوحة المفاتيح وقارئ الشاشة.
بعد علامة <body> مباشرةً ، تجاوز HTML المكتمل. فيما يلي مثال أكثر تفصيلاً مع روابط تخطي متعددة. إذا كنت ترغب في إضافة روابط متعددة إلى موقعك ، فتأكد من تطبيق المعرفات بشكل صحيح.
&amp;lt;body&amp;gt; &amp;lt;a href=”#left-sidebar” class=”skip-link”&amp;gt;Skip to Sidebar&amp;lt;/a&amp;gt; &amp;lt;a href=”#featured-posts-block” class=”skip-link”&amp;gt;Skip to Featured Posts&amp;lt;/a&amp;gt; &amp;lt;a href=”#main-content” class=”skip-link”&amp;gt;Skip to Main Content&amp;lt;/a&amp;gt; [Header navigation goes here]الآن لديك تخطي الروابط في التعليمات البرمجية الخاصة بك ، لكنك لم تنته بعد! إذا قمت بتحميل صفحتك الآن ، فسترى روابط التخطي في الأعلى. حان الوقت لإضافة بعض CSS. تصميم روابط التخطي بسيط جدًا ، باستخدام المثال أدناه:
.skip-link { position: absolute; top: 0; z-index: 9999; right: 100%; padding: 5px; padding: 0.5rem; font-size: 20px; font-size: 2rem; color: #000; background: #FFF; } .admin-bar .skip-link { top: 32px; } .skip-link:focus { right: auto; } ما لا تراه هو استخدام display: none . سيؤدي استخدامه إلى قيام قارئ الشاشة بتخطي الارتباط تمامًا ، مما يؤدي إلى تعطيل الغرض تمامًا. يتم الإخفاء عن طريق وضع النص خارج الشاشة باستخدام right: 100% وتحويله إلى right: auto :focus .
مع تطبيق CSS الخاص بك ، أنت جاهز تمامًا. روابط التخطي الخاصة بك موجودة ، لكنها مخفية. عندما يقوم مستخدم لوحة المفاتيح أو قارئ الشاشة بتحميل صفحتك عند البدء :focus ، ستسمح لهم روابط التخطي بالانتقال مباشرة إلى المحتوى الذي أتوا من أجله.
قم بتغليفه
تعد روابط التخطي مثالًا رائعًا على ميزة إمكانية الوصول التي تبدو وكأنها تتطلب الكثير من العمل ، ولكنها في الحقيقة ليست كذلك. كل ما فعلناه في جانب الكود هو إضافة سطرين من HTML و CSS. بالنسبة للنهج غير التقني ، قمنا بتثبيت مكون إضافي. لا تستغرق أي من الطريقتين وقتًا طويلاً ، ومن المهم ملاحظة ذلك لأن تخطي الروابط هي معيار من المستوى A لـ WCAG 2.0 (أحدث معايير WCAG). أنت مطالببموجب القانون بوضعها على موقعك.لا تعرض نفسك للخطر. أضف روابط التخطي اليوم!