إمكانية الوصول في Go: جعل البرامج متاحة للجميع

عندما يقول الكود: «أنا أسمعك»

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

إمكانية الوصول (أو a11y - من «a» + 11 حرفًا + «y») ليست مجرد «وضع علامة من أجل العلامة». إنها تتعلق بضمان ألا يطفئ خدمة Go الخاصة بك الضوء عن 15% من سكان الأرض. في هذه المقالة، سنشرح كيفية دمج إمكانية الوصول في مشاريع Go دون تعصب، ولكن بفائدة حقيقية. هيا بنا!

لماذا إمكانية الوصول في Go ليست خيارًا، بل معيارًا

Go هي لغة للخادم الخلفي، لكن هذا لا يعني أنها لا تشارك في إنشاء واجهة متاحة. إذا كنت تكتب API للواجهة الأمامية، أو تُنشئ HTML على الخادم، أو تنشئ أدوات CLI - فأنت بالفعل تؤثر على إمكانية الوصول. الخبر السيئ: العديد من مطوري Go يعتقدون أن «a11y هي مسؤولية مطوري الواجهة الأمامية». الخبر الجيد: يمكنك إصلاح ذلك في أمسية واحدة.

ما هي إمكانية الوصول للويب من وجهة نظر Go؟

إمكانية الوصول للويب (web accessibility) هي قدرة موقع أو تطبيق على أن يُستخدم من قبل أشخاص ذوي إعاقات مختلفة: البصر، السمع، الحركة، القدرات المعرفية. في سياق Go، هذا يعني:

\n
• ترميز HTML صحيح تم إنشاؤه بواسطة الخادم (على سبيل المثال، عبر html/template)؛
\n
• سمات ARIA صحيحة للمحتوى الديناميكي؛
\n
• تنقل منطقي باستخدام لوحة المفاتيح؛
\n
• رسائل خطأ واضحة (ليس «خطأ 500»، بل «تعذر حفظ الملف: مساحة غير كافية»).
\n

ونعم، Go هي اللغة المثالية لهذا. كتابتها الصارمة وأدواتها المدمجة تسمح بالتحقق من القوالب أثناء التنفيذ. لكن دعنا نأخذ الأمور بالترتيب.

الترميز الدلالي: أساس إمكانية الوصول في Go

عندما تُنشئ HTML عبر html/template، فأنت مهندس الواجهة. إذا كان كودك يبصق <div> على كل زر، فإن قارئات الشاشة (screen readers) لن تفهم ما هو هذا العنصر. ولكن إذا استخدمت <button> - فستقول: «زر. اضغط لإرسال النموذج».

مثال: نموذج متاح بلغة Go

لنفترض أنك تكتب نموذج تسجيل. الخيار السيئ:

// سيئ: لا يوجد دلالة\ntmpl := `<div class="form">\n    <div>الاسم</div>\n    <input type="text" id="name">\n    <div class="error">{{.NameError}}</div>\n</div>`\n

الخيار الجيد - مع <label> و aria-describedby:

// جيد: ترميز دلالي + ARIA\ntmpl := `<form>\n    <label for="name">الاسم</label>\n    <input type="text" id="name" aria-describedby="name-error">\n    <span id="name-error" role="alert">{{if .NameError}}{{.NameError}}{{end}}</span>\n</form>`\n

ما الذي تغير؟ تعرف قارئ الشاشة الآن: هذا نموذج، حقل الإدخال مرتبط بالتسمية، والخطأ هو تنبيه. سيسمع المستخدم: «الاسم. تحرير نص. خطأ: الحقل إلزامي».

سمات ARIA: عندما لا يكفي HTML

أحيانًا لا تكفي الوسوم القياسية. على سبيل المثال، تقوم بإنشاء علامات تبويب (tabs) باستخدام Go + HTMX. بدون ARIA، ستبدو كـ «رابط، رابط، رابط...». ولكن مع ARIA - ستبدو كـ «التبويب 1، محدد. التبويب 2. التبويب 3».

كيفية إضافة ARIA في قوالب Go

تُمرر سمات ARIA كسمات عادية في HTML. إليك مثال للعلامات التبويب:

<div role="tablist" aria-label="إعدادات الملف الشخصي">\n    <button role="tab" aria-selected="{{if eq .Tab "profile"}}true{{else}}false{{end}}" \n            aria-controls="panel-profile" id="tab-profile">الملف الشخصي</button>\n    <button role="tab" aria-selected="{{if eq .Tab "security"}}true{{else}}false{{end}}" \n            aria-controls="panel-security" id="tab-security">الأمان</button>\n