سپانو

دستورالعمل ساده بهبود دسترسی صفحات وب (WCAG) - بخش اول


این دستورالعمل بر اساس استاندارد WCAG 2 و WCAG 2.1 ایجاد گردیده است و به برنامه نویسان و افراد فعال در این زمینه کمک می‌کند ساده تر و سریع‌تر صفحات وب خود را بهینه کنند.

 

1- زبان صفحه را مشخص کنید:

در کد HTML صفحه خود دقت کنید که زبان صفحه مشخص باشد. این زبان به Screen Readerها و دستگاه‌های کمک کننده به افراد کم توان کمک می‌کند تا تشخیص بهتری از محتوای صفحه و همچنین خواندن متن صفحه داشته باشند.

مثال:

<html lang=“en-US">

<html lang=“fa-IR”>

Level A | 3.1.1

 

2- امکان تغییر اندازه فونت‌ها و متن‌ها را ایجاد کنید:

   •باید امکان بزرگنمایی متن صفحه تا 200%  بدون ایجاد مشکل در نمایش وجود داشته باشد.

   •برای اندازه و سایز در CSS حتماً از rem یا em استفاده نمایید.

   •در تنظیم تگ مربوط به Viewport اجازه تغییر اندازه صفحه را به کاربر بدهید.

   •بهترین حالت تنظیم Viewport به شکل زیر است:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, shrink-to-fit=no”>

 

Level AA | 1.4.4

 

 

3- حداقل کنتراست متن‌ها  را رعایت کنید

   •کنتراست کلیه متن‌ها نسبت به پس زمینه باید حداقل 4.5 به 1 باشد.

   •برای متن‌هایی که بر روی تصاویر قرار می‌گیرند از shadow و background-color استفاده نمایید تا نسبت را رعایت نمایند.

Level AA | 1.4.3

 

4- پیاده سازی ساختار صفحه با استفاده از Landmarks

برای پیاده سازی صفحات وب از HTML5 و Landmarks استفاده نمایید. استفاده از header,Main,aside,footer به مرورگرها و Screen Readerها کمک می‌کند تا بهتر بتوانند قسمت های مختلف صفحه را پیمایش کنند.

* دقت نمایید که هر صفحه فقط می تواند شامل یک Main باشد.

* یک ساختار حداقلی از Landmarks به شکل زیر است:

<header>

   <nav>

   </nav>

</header>

<main>

</main>

<aside>

   <nav>

   </nav>

</aside>

<footer>

</footer>

 

Level A | 1.3.1

 

 

5- استفاده مناسب از headings

   •استفاده از h1 در هر صفحه الزامی است.

   •h1 باید دقیقا اولین تگ بعد از main باشد.

   •h1 باید عنوان صفحه باشد.

   •ترتیب heading ها باید در صفحه رعایت شود. به عنوان مثال بعد از h1 نباید از h3 استفاده کرد. باید از h2 استفاده کرد.

 

Level A | 2.4.6
Level A | 1.3.1

 

 


آخرین مطالب