بلاگ فنی با تمرکز بر فرانت‌اند

بازگشت به فهرست مطالب

دسترس‌پذیری (Accessibility)

[ منبع ]
دسترس‌پذیری (Accessibility)

پیاده‌سازی روش‌های دسترس‌پذیری#

برای اطمینان از حفظ دسترس‌پذیری، از همان ابتدا این قوانین را در پروژه خود اعمال کنید:

چرا

محتوای وب به‌طور پیش‌فرض دسترسی‌پذیر است. این ویژگی زمانی به خطر می‌افتد که پیچیدگی‌های غیرضروری ایجاد شود. در نظر گرفتن دسترس‌پذیری از ابتدا بسیار آسان‌تر از تلاش برای بازبینی و اصلاح آن در مراحل بعدی است.

  • با استفاده از ابزارهایی مانند lighthouse یا افزونه axe DevTools برنامه‌ریزی‌هایی جهت بررسی ادواری دسترسی‌پذیری به طور منظم انجام دهید. بر اساس نیاز پروژه، اهداف و امتیازات حداقلی‌ای برای دسترس‌پذیری تعیین و توافق کنید و این امتیازات را بر اساس تأثیر کاربر ارزیابی کنید.

چرا

این افزونه‌ها به‌صورت خودکار بخشی از الزامات اولیه دسترس‌پذیری را کنترل می‌کنند و پیاده‌سازی آن‌ها ساده است.

  • با استفاده از ابزارهایی مانند axe-core یا مشابه آن، می‌توانید تست‌های دسترسی‌پذیری را راه‌اندازی و اجرا کنید.

  • اگر از Storybook استفاده می‌کنید، دستورالعمل‌های آن را دنبال کنید.

چرا

این تست‌ها به شناسایی تغییراتی که ممکن است بر دسترس‌پذیری تأثیر منفی بگذارند کمک می‌کنند.

چرا

این کامپوننت‌ها به‌صورت پیش‌فرض از سطح بالایی از دسترس‌پذیری برخوردار هستند.

قوانین پایه دسترس‌پذیری#

  • از دسترس‌پذیر بودن نام لینک‌ها اطمینان حاصل کنید. از aria-label برای توصیف لینک‌ها استفاده کنید.

چرا

لینک‌های نامفهوم و غیرقابل دسترس می‌توانند برای دسترس‌پذیری موانعی ایجاد کنند.

  • اطمینان حاصل کنید که لیست‌ها به‌درستی ساختاربندی شده باشند تا معتبر و قابل درک باشند.

چرا

لیست‌ها باید دارای عناصر والد و فرزند باشند تا معتبر و قابل درک باشند. صفحه‌خوان‌ها (Screen Readers) کمک می‌کند تا اطلاعات دقیق‌تری در مورد تعداد آیتم‌ها و ساختار لیست ارائه دهند.

  • از رعایت ترتیب معنایی سرفصل‌ها (Heading Order) اطمینان حاصل کنید.

چرا

سرفصل‌ها ساختار کلی صفحه را منتقل می‌کنند. وقتی به‌درستی استفاده شوند، پیمایش در صفحه برای کاربر آسان‌تر می‌شود.

  • از کُنتراست (تضاد رنگی) مناسب میان متن و پس‌زمینه اطمینان حاصل کنید.

چرا

افرادی که دچار ضعف بینایی هستند به کنتراست (تضاد رنگی) بالایی نیاز دارند تا بتوانند خطوط، حاشیه‌ها و جزئیات متن را به‌راحتی تشخیص دهند. اگر رنگ متن بیش از حد به رنگ پس‌زمینه نزدیک باشد، به سختی آن متن قابل خواندن خواهد بود.

  • برای تصاویر، متن جایگزین کوتاه و توصیفی (Alt Text) ارائه دهید.

چرا

صفحه‌خوان‌ها قادر به تفسیر و توضیح تصاویر به کلمات خوانا نیستند؛ حتی اگر تصویر فقط حاوی متن باشد. بنابراین، متن جایگزین (Alt Text) به کاربران کمک می‌کند تا محتوای تصویر و هدف آن را درک کنند.

برای آشنایی بیشتر با دیگر قوانین دسترس‌پذیری می‌توانید به این منبع مراجعه کنید.