اصول پایه‌ای اعمال accessibility
وقتی صحبت از اجزای User Interface (UI) می‌شود، اصول پایه‌ای accessibility صرف‌نظر از نحوه‌ی پیاده‌سازی آن‌ها باید رعایت شوند — چه در اپلیکیشن‌هایی با وابستگی زیاد به JavaScript، چه در وب‌سایت‌های محتوامحور، چه در پروژه‌های ساده با stackهای ابتدایی وب.
آن‌چه اهمیت دارد، خروجی نهایی و تأثیر آن بر تجربه‌ی کاربر است.
ما از همان ابتدا با در نظر گرفتن دسترسی طراحی می‌کنیم: کنتراست بصری مناسب، اندازه‌ی خوانا برای فونت، آیکون‌های قابل فهم، رابط‌های تعاملی شهودی، و سایر نکات مهم.
در این بخش روی بخش‌های فنی مرتبط با UIهای accessible تمرکز می‌کنیم تا بتوانیم مشکلات را زود تشخیص دهیم و در پیاده‌سازی‌های accessible مشارکت داشته باشیم. هدف این است که یاد بگیریم به چه نکاتی توجه کنیم تا بتوانیم در code reviewها نظر تخصصی ارائه دهیم و مشکلات مربوط به accessibility را در چرخه توسعه پیش‌بینی کنیم.
نشانه‌گذاری معنایی معتبر با HTML و ARIA
پایه‌ای‌ترین اصل در accessibility وب، استفاده از نشانه‌گذاری معنایی با HTML است. استفاده از تگ‌های پیش‌فرض HTML باعث افزایش سرعت تیم شما می‌شود، چون بسیاری از ویژگی‌ها به‌صورت پیش‌فرض در دسترس هستند و نیاز به بازسازی آن‌ها نیست. رجوع به منابع آنلاین برای نحوه استفاده از المنت‌ها و ویژگی‌ها کاملاً طبیعی است.
ARIA مجموعه‌ای استاندارد از ویژگی‌های role، state و property است که برای تعامل با Assistive Technology (AT) طراحی شده‌اند.
ساختاردهی با headings و landmarks
ساختار معنایی با استفاده از تگ‌های h1 تا h6، و landmarks مانند main، nav، footer، section (همراه با label منحصربه‌فرد) ایجاد می‌شود. همچنین لیست‌هایی مانند ul و ol نیز در این دسته قرار می‌گیرند. این ساختار برای کاربرانی که به AT وابسته هستند بسیار حیاتی است تا بتوانند درک درستی از ساختار صفحه داشته باشند.
تعامل با کیبورد و screen reader
تعاملی کردن اجزا برای کاربران کیبورد و screen reader اهمیت زیادی دارد. باید مطمئن باشید که هر عملی که کاربر با ماوس انجام می‌دهد، از طریق کیبورد هم قابل انجام است. در صورت نیاز می‌توانید عملکردهای ویژه‌ای برای AT اضافه کنید.
برای مثال، تگ <button> به‌صورت پیش‌فرض قابلیت focus دارد. این تگ به‌طور خودکار دارای نقش button است و به رویدادهای click واکنش نشان می‌دهد.
<button onClick={handleClick}>Use buttons</button>ساده‌ترین روش برای درک این موضوع، شروع تست با استفاده از کیبورد است. آیا می‌توانید به همه کنترل‌های تعاملی دسترسی پیدا کنید و از آن‌ها استفاده کنید؟ یا اینکه جایگزین‌های accessible برای انجام همان عملکرد وجود دارد؟