دسترسپذیری وب
دسترسپذیری معمولاً بهعنوان کاری برای «گروه کوچکی از کاربران» فهمیده میشود و به فاز آخر موکول میشود — جایی که هیچوقت نمیرسد.
هر دو فرض غلط است.
چه کسانی واقعاً نفع میبرند
ناتوانی دائمی: نابینایی و کمبینایی، ناشنوایی، محدودیت حرکتی، نابینایی رنگ — که تنها همین آخری حدود هشت درصد مردان را شامل میشود.
ناتوانی موقت: دست شکسته، عفونت چشم، محیط پرنور.
محدودیت موقعیتی: کسی که در آفتاب گوشیاش را میبیند، کسی که یک دستش بند است، کسی که در محیط پرسروصدا نمیتواند صدا بشنود.
و سالمندان، که کاهش تدریجی بینایی و دقت حرکتی دارند. با پیر شدن جمعیت، این بزرگترین گروه است — و در سامانههای سلامت و بانکی، بخش اصلی کاربران.
پس دسترسپذیری، طراحی برای اقلیت نیست. طراحی برای شرایط واقعی است.
هفت کاری که بیشترین اثر را دارند
اگر فقط همینها انجام شوند، بخش بزرگی از مشکلات رفع میشود.
۱. HTML معنایی
از تگ درست استفاده کنید: <button> برای دکمه، <a> برای پیوند، <nav> برای
ناوبری، <main> برای محتوای اصلی.
<div>ی که با جاوااسکریپت شبیه دکمه شده، با صفحهکلید کار نمیکند و
صفحهخوان آن را دکمه نمیشناسد.
این تنها مؤثرترین کار در کل فهرست است و هزینهاش صفر — فقط انتخاب تگ درست هنگام نوشتن.
۲. کار با صفحهکلید
هر کاری که با ماوس ممکن است، باید با صفحهکلید هم ممکن باشد.
آزمون ساده و رایگان: ماوس را کنار بگذارید و با Tab کل صفحه را طی
کنید. اگر جایی گیر کردید یا نتوانستید به چیزی برسید، همانجا اشکال است.
سه نکته:
- نشانگر فوکوس را حذف نکنید. آن حلقهٔ دور عنصر فعال، برای کاربر صفحهکلید تنها راه فهمیدن موقعیت است. اگر زشت است، زیباترش کنید، نه حذفش.
- ترتیب پیمایش باید منطقی باشد.
- در پنجرهٔ بازشو، فوکوس باید داخلش بماند و با
Escبسته شود.
۳. متن جایگزین تصاویر
alt که محتوا را توصیف کند، نه اینکه اسم فایل باشد.
تصویر تزئینی باید alt="" خالی داشته باشد — یعنی صفحهخوان از آن رد
شود. حذف کامل صفت alt باعث میشود صفحهخوان نام فایل را بخواند، که بدتر
است.
۴. کنتراست رنگ
متن خاکستری روشن روی زمینهٔ سفید، برای خیلیها خوانا نیست.
استاندارد: نسبت ۴٫۵ به ۱ برای متن معمولی. ابزارهای رایگان زیادی این را میسنجند.
و رنگ نباید تنها حامل معنا باشد. «فیلدهای قرمز اجباریاند» برای کسی که رنگ را تشخیص نمیدهد بیمعنی است. نشانه یا متن هم اضافه کنید.
۵. برچسب فرم
هر ورودی باید <label> واقعی داشته باشد که با for به آن وصل است.
متن راهنمای داخل فیلد (placeholder)، جایگزین برچسب نیست — با شروع تایپ ناپدید میشود و کاربر دیگر نمیداند این فیلد چه بود.
و پیام خطا باید به فیلد وصل باشد و بگوید چه چیزی اشتباه است، نه فقط «خطا».
۶. ساختار عنوانها
یک h1، بعد h2، بعد h3. سطح را نپرید.
کاربر صفحهخوان با همین عنوانها در صفحه حرکت میکند — مثل فهرست مطالب. اگر عناوین برای اندازهٔ فونت انتخاب شده باشند نه برای ساختار، این فهرست بیمعنی است.
۷. زبان و جهت
lang="fa" و dir="rtl" روی تگ html.
بدون lang، صفحهخوان ممکن است متن فارسی را با آوای انگلیسی بخواند — که
کاملاً نامفهوم است. برای بخشهای انگلیسی داخل متن، lang="en" روی همان
عنصر.
آنچه در فارسی خاص است
اندازهٔ قلم را بزرگتر بگیرید. متن فارسی در اندازهٔ کوچک سختتر از لاتین خوانده میشود، بهدلیل نقطهها و اشکال اتصالی. اگر برای لاتین ۱۶ پیکسل مناسب است، برای فارسی ۱۷ تا ۱۸ نقطهٔ شروع بهتری است.
فاصلهٔ سطرها را بیشتر کنید، حدود ۱٫۸ برابر اندازهٔ قلم.
فونتهای خیلی نازک را برای متن اصلی استفاده نکنید. زیبا هستند و کنتراست مؤثرشان پایین است.
صفحهخوانهای فارسی محدودترند از معادلهای انگلیسی. یعنی HTML معنایی درست، اهمیت بیشتری دارد — چون ابزار کمتر میتواند ضعف ساختار را جبران کند.
چطور تست کنیم بدون ابزار خاص
چهار آزمون که همین امروز میتوانید انجام دهید:
۱. بدون ماوس. فقط با Tab و Enter کل سایت را استفاده کنید.
۲. بزرگنمایی ۲۰۰ درصد. آیا چیدمان میشکند؟ آیا محتوایی از دست میرود؟
۳. سیاهوسفید کنید. اگر در حالت خاکستری، معنایی گم میشود، شما به رنگ وابستهاید.
۴. ابزار خودکار. افزونههای رایگان مرورگر بخش قابل توجهی از مشکلات را پیدا میکنند. اما توجه کنید که ابزار خودکار حدود نیمی از مسائل را میگیرد — بقیه به قضاوت انسانی نیاز دارد.
اشتباهاتی که ناخواسته آسیب میزنند
حذف نشانگر فوکوس برای زیبایی.
استفاده از div بهجای عنصر تعاملی واقعی.
پنجرهٔ بازشویی که با صفحهکلید بسته نمیشود — کاربر گیر میافتد.
انیمیشن بدون احترام به prefers-reduced-motion. برای کسانی که حساسیت
حرکتی دارند، انیمیشن مداوم واقعاً آزاردهنده است.
پخش خودکار ویدیو با صدا.
زمانسنج بدون امکان تمدید، در فرمهای طولانی.
هزینه و بازده
اگر از ابتدا باشد، تقریباً رایگان است. انتخاب تگ درست، نوشتن alt، و
بررسی کنتراست، وقت اضافهای نمیگیرند.
اگر بعداً باشد، پروژه است — چون بیشترش به ساختار HTML برمیگردد و اصلاحش یعنی بازنویسی رابط کاربری.
و یک نکتهٔ جانبی که کمتر گفته میشود: بخش زیادی از کارهای دسترسپذیری، همان کارهای سئوی فنی است. ساختار معنایی، متن جایگزین، عنوانهای مرتب — هم صفحهخوان از آنها استفاده میکند، هم موتور جستوجو. جزئیاتش در سئوی فنی.
و سود اصلی نصیب همه میشود. سایتی که با صفحهکلید کار میکند برای کاربر حرفهای سریعتر است. کنتراست خوب در آفتاب به کار میآید. ساختار روشن، برای همه خواناتر است.
دسترسپذیری، کیفیت است — نه لطف به گروهی خاص.