پنج‌شنبه ۱ آذر ۱۴۰۳ |  عضویت / ورود

فهرستی از نکات مربوط به دسترسی‌پذیری یا کاربردپذیری در طراحی وب


در دوره‌های برنامه‌نویسی وب، یک جلسه درباره مفهوم Accessiblity (دسترسی‌پذیری) یا Usability (کاربردپذیری) صحبت می‌کنم.

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

https://img.aftab.cc/news/1403/accessibility.png
نماد دسترسی‌پذیری

حالا ممکن است در نگاه اول بپرسید «مگر ما چقدر معلول داریم که نگران آن‌ها باشیم؟» اما اگر این صفحه از W3Schools که درباره «تنوع معلولیت» صحبت می‌کند را بخوانید (ترجمه فارسی)؛ متوجه می‌شوید که خودِ شما که مثلاً سالم هستید، چند معلولیت داشته‌اید که خبر نداشته‌اید!! (مثلاً اگر شما الان در کلاس یا در جلسه‌ای هستید و نمی‌توانید به یک فایل صوتی گوش کنید، به نوعی ناشنوا به حساب می‌آیید (ناشنوای موقعیتی) یا اگر در همان جلسه نمی‌توانید صحبت کنید؛ لال موقعیتی به حساب می‌آیید.

به هر حال، یک طراحی خوب طراحی‌ای است که برای همه نوع معلولیت (چه دائمی و چه موقتی و چه موقعیتی) چاره‌ای اندیشیده باشد و کاربران در هر حالت بتوانند به راحتی با آن برنامه کار کنند.

یک پیشنهاد خوب این است که بخش Accessibility در سایت W3Schools را به طور کامل مطالعه کنید.

اما اگر نیاز به یک Checklist (فهرست وارسی) از مواردی که باید در طراحی در نظر گرفته باشید می‌خواهید، سایت design.dev (که اگر عضو خبرنامه آن باشید هر روز برایتان نکات ارزشمندی ایمیل می‌کند) یک فهرست خوب در خبرنامه اخیرش فرستاده که من برای مراجعات بعدی خودم اینجا قرار می‌دهم:

Accessibility in web development is not a nice-to-have, it's a requirement. We crafted a prelaunch checklist for you to run through before pushing your next project Live.

✓ Semantic HTML

Use appropriate HTML elements for their intended purpose (e.g., headings, lists, buttons, forms).

✓ Keyboard Navigation

Ensure all interactive elements are accessible via keyboard (e.g., using Tab, Enter, and Space keys).

✓ Focus States

Provide visible focus indicators for interactive elements.

✓ Alternative Text

Add descriptive alt attributes for images and non-text content.

✓ ARIA Attributes

Use ARIA roles, states, and properties to enhance accessibility when necessary.

✓ Contrast Ratio

Ensure sufficient contrast between text and background colors.

✓ Text Resize

Make sure your design is adaptable to text resizing or zooming.

✓ Clear Labels

Provide clear and descriptive labels for form inputs and buttons.

✓ Skip Links

Add skip links to allow users to bypass repetitive navigation elements.

✓ Descriptive Link Text

Use meaningful link text instead of generic phrases like "click here" or "learn more."

✓ Accessible Multimedia

Provide captions, transcripts, or audio descriptions for video and audio content.

✓ Logical Reading Order

Arrange content in a logical and meaningful order.

✓ Accessible Tables

Use table headers and captions to enhance table accessibility.

✓ Error Messaging

Provide clear and specific error messages for form inputs.

✓ Test with Screen Readers

Test your website with screen readers like NVDA, JAWS, or VoiceOver.

موفق باشید؛
حمید رضا نیرومند
 





[ارسال شده در مورخه : جمعه، 18 آبان، 1403 توسط Hamid]
[ #برنامه‌‌نویسی]



بازدیدها از این مطلب: 121 بار   امتیاز متوسط : 0  تعداد آراء: 0   امتیاز دهید:

نظرات طرح شده

نام: [ کاربر جدید ]
ایمیل:

نظر:


اجازه استفاده از تگهای HTML را ندارید


جمع عدد 7 با 11 را در كادر زیر وارد نمایید:
(این كار برای جلوگیری از فعالیت موتورهای اسپمر است)


* توجه: نظر شما بعد از بررسی، نمایش داده خواهد شد.