توانیابی در وب امروز صرفاً یک ویژگی جانبی نیست؛ بخشی از هویت حرفهای یک وبسایت است. هر کاربری، با هر سطحی از توانایی، باید بتواند بدون مانع به محتوا دسترسی پیدا کند، مسیرها را بفهمد، با رابط تعامل کند و تجربهای برابر با دیگران داشته باشد.
استانداردهای جهانی مانند WCAG این مسیر را روشن کردهاند و نقش ما بهعنوان سازنده یا مدیر وب این است که ابزارها و ساختارها را بر اساس این معیارها طراحی کنیم.
وردپرس 6.9 در همین مسیر یک گام مهم برداشته است. این نسخه مجموعهای از بهبودهای دقیق و کاربردی در حوزه دسترسپذیری ارائه میکند؛ از اصلاح رفتار فوکوس گرفته تا خوانایی پیامها برای ابزارهای کمکی، برچسبگذاری صحیح عناصر، بهبود فرمها و طراحی معناییتر اجزای رابط. نتیجه آن است که مدیران سایتها و توسعهدهندگان میتوانند با کمترین تغییرات اضافی، خروجی کار خود را با استانداردهای وب توانیار هماهنگتر کنند.
این مقاله به بهانه ۳ دسامبر، روز جهانی تکریم معلولین نوشته شده تا نقش وردپرس را در تقویت دسترسپذیری وب مرور کند و نشان دهد چگونه این بهبودها میتوانند تجربه کاربران را واقعیتر، قابلاعتمادتر و انسانیتر کنند.
1. بهبود اعلانها برای Screen Reader و مدیریت بهتر Focus
این بخش شامل اصلاح پیامهای وضعیت (status messages) و تثبیت موقعیت فوکوس هنگام استفاده از autocomplete است.
نیاز کاربر:
کاربران نابینا یا کمبینا که از screen reader استفاده میکنند باید پیامها، خطاها، موفقیتها یا تغییرات وضعیت را بدون جستوجوی دستی دریافت کنند. همچنین کاربران کیبورد باید در زمان انتخاب گزینهها فوکوس خود را از دست ندهند.
استانداردهای مرتبط (WCAG 2.2):
-
4.1.3 Status Messages
پیامهای سیستمی بدون ایجاد تغییر فوکوس باید برای ابزارهای کمکی قابلتشخیص باشند. وردپرس پیامهای اعلان و هشدار را semantic و قابلتشخیصتر کرده است. -
2.4.3 Focus Order
ترتیب فوکوس باید منطقی باشد. در 6.9 مکاننما پس از انتخاب گزینههای autocomplete منتقل نمیشود یا از دست نمیرود. -
2.4.7 Focus Visible
فوکوس همیشه قابل مشاهده و پایدار میماند.
این اصلاحات نیاز «تشخیص تغییر وضعیت بدون وابستگی به بینایی» را پوشش میدهد.
2. پنهانسازی محتوای CSS ایجادشده از ابزارهای کمکی
وردپرس 6.9 محتوای تزریقشده توسط CSS (مثل آیکنهای pseudo-element) را از screen reader مخفی میکند.
نیاز کاربر:
کاربران screen reader نباید اطلاعات «غیرواقعی» یا «تزئینی» را بشنوند؛ چون باعث گیج شدن آنها و افزایش بار شناختی میشود.
استانداردهای مرتبط:
-
1.1.1 Non-text Content
محتوای غیرمتنیِ صرفاً تزئینی نباید در خروجی خوانش شود. وردپرس این محتوا را aria-hidden میکند یا آن را semantically حذف میکند. -
1.3.1 Info and Relationships
روابط و اطلاعات واقعی باید از تزئینات جدا شوند. حذف pseudo-content مانع مخدوش شدن معنای ساختاری میشود.
این اصلاح نیاز «عدم آلودگی اطلاعاتی در خوانش صوتی» را برطرف میکند.
3. ارتقای ساختار معنایی HTML در بلوکها و اجزای UI
وردپرس بسیاری از اجزای رابط را از div/span به عناصر صحیح مانند button، nav، hr و غیره تغییر داده.
نیاز کاربر:
ابزارهای کمکی باید بتوانند ساختار صفحه را تشخیص دهند؛ مثل اینکه کدام بخش دکمه است، کدام لینک است، کدام زیرمنو است.
استانداردهای مرتبط:
-
1.3.1 Info and Relationships
استفاده از عناصر صحیح، روابط معنایی را برای screen reader و کاربران کیبورد حفظ میکند. -
4.1.2 Name, Role, Value
عناصر interactive باید نقش (role)، نام (name) و وضعیت (state) قابلدرک داشته باشند.
این اصلاح نیاز «درک عملکرد عناصر بدون تکیه بر ظاهر» را حل میکند.
4. بهبود ناوبری با کیبورد در ادیتور و مدیریت وردپرس
وردپرس در نسخه 6.9 رفتار دکمهها، لیستها، کنترلها و منوها را برای ناوبری با کیبورد اصلاح کرده است.
نیاز کاربر:
افرادی که از موس استفاده نمیکنند—شامل کاربران دارای محدودیت حرکتی یا کاربران screen reader باید بتوانند تمام بخشهای سایت را فقط از طریق کیبورد کنترل کنند.
استانداردهای مرتبط:
-
2.1.1 Keyboard
تمام عملکردهای UI باید با کیبورد قابل دسترسی باشد. -
2.1.2 No Keyboard Trap
کاربر نباید در یک بخش گیر کند؛ وردپرس گردش فوکوس در نواحی مختلف را اصلاح کرده. -
2.4.3 Focus Order
ترتیب فوکوس در ادیتور منظمتر شده است.
این بخش نیاز «کنترل کامل صفحه بدون موس» را برطرف میکند.
5. رفع باگهای دسترسپذیری در هسته و Gutenberg
وردپرس برای بیش از ۳۰ مشکل دسترسپذیری، شامل aria-labelهای ناقص، نقشهای نادقیق، و مشکلات رنگ و کنتراست اصلاحاتی اعمال کرده است.
نیاز کاربر:
دریافت نام دقیق عناصر، برچسبگذاری درست دکمهها و خوانایی بصری برای کاربران کمبینا.
استانداردهای مرتبط:
-
1.4.3 Contrast (Minimum)
کنتراست برخی بخشها و کنترلهای رابط بهبود یافته. -
4.1.2 Name, Role, Value
نقشگذاری (role) و برچسبها در بخشهایی از ادیتور اصلاح شدهاند.
این مجموعه نیاز «درک صحیح نقشها و قابلیتها» را پوشش میدهد.
6. بهبود فرمهای ورود و مدیریت (Login, Profile, Admin)
نمونهها: پیام هشدار Caps-Lock، سادهسازی فیلدها، افزودن autocomplete مناسب به فیلدهای نام، ایمیل، و غیره.
نیاز کاربر:
کاربران دارای اختلالات شناختی یا حرکتی باید بتوانند فرمها را بدون خطای اضافی تکمیل کنند. همچنین هشدارها باید برای افراد کمبینا و screen reader قابلتشخیص باشند.
استانداردهای مرتبط:
-
3.3.1 Error Identification
خطاها باید واضح اعلام شوند؛ هشدار Caps-Lock یک مثال دقیق است. -
3.3.2 Labels or Instructions
دستورالعملهای فرمها و برچسبها روشنتر شدهاند. -
3.3.7 Redundant Entry (WCAG 2.2)
autocomplete کمک میکند تا فرم کمتر نیازمند وارد کردن دادههای تکراری باشد.
این بخش نیاز «کاهش خطاهای ورودی» را برطرف میکند.
7. اصلاحات کتابخانه رسانه (Media Library) و آپلود
مواردی مثل اعلانهای قابلخوانش برای خطا، اصلاح فوکوس دکمهها و بهتر شدن رابط آپلودر.
نیاز کاربر:
کاربران screen reader باید در زمان آپلود تصویر بفهمند چه اتفاقی افتاده (مثلاً خطا، حجم بالا، موفقیت). کاربران کیبورد نیز باید بتوانند کنترلهای رسانهای را بدون مشکل استفاده کنند.
استانداردهای مرتبط:
-
4.1.3 Status Messages
هشدارها و اعلانهای آپلود رسانه semantic و قابلفهم شدهاند. -
2.1.1 Keyboard
کنترلهای رسانه قابلاستفادهتر شدهاند. -
1.3.1 Info and Relationships
بخشهای رسانه نقشگذاری semantic بهتری دریافت کردهاند.
این تغییر نیاز «درک نتایج عملیات» را حل میکند.
جمعبندی
وردپرس 6.9 مجموعه بزرگی از الزامات WCAG 2.2 را در حوزههای زیر بهبود داده است. درک ساختار صفحه، ناوبری با کیبورد، برچسبگذاری دقیق، پیامهای وضعیت، رنگ و کنتراست، خطاهای فرم و اعلانها.
حاصل این اصلاحات تجربهای پایدارتر برای کاربران نابینا، کمبینا، افراد دارای محدودیت حرکتی یا شناختی، و همه کاربران کمکی-محور است.
تحریریه ژاکت
مشاهده تیم تحریریه
