درس شانزدهم: دسترس‌پذیری (Accessibility) در HTML
مقدمه
دسترس‌پذیری یا Accessibility یعنی صفحه وب رو طوری بسازیم که «همه» بتونن راحت ازش استفاده کنن، حتی افرادی که نابینا هستند یا مشکل حرکتی و شنیداری دارن.
یه سایت دسترس‌پذیر به آدم‌ها و همچنین ربات‌های موتور جستجو (گوگل و…) کمک می‌کنه محتوای سایتت رو بهتر بفهمن.
چرا دسترس‌پذیری مهمه؟
- آدم‌هایی که از نرم‌افزار‌های خواندن صفحه (Screen Reader) استفاده می‌کنند هم بتونن سایت رو ببینن و بخونن.
- گوگل سایت‌هایی که دسترس‌پذیرترند رو بیشتر دوست داره! (برای سئو خوبه)
- شاید خودت روزی نیاز به امکانات دسترس‌پذیری داشته باشی!
کارهای ساده برای دسترس‌پذیری بهتر
۱. استفاده از alt برای تصاویر
برای همه تصاویرت متن جایگزین بذار. مثلاً:
<img src="dog.jpg" alt="یک سگ در حال دویدن">اگر تصویر برای زیبایی است و محتوای خاصی نداره، alt رو خالی بذار:
<img src="border.png" alt="">۲. تیترها را به ترتیب درست بنویس
تیترهای h1 و h2 و h3 باید به ترتیب و منظم باشن. هر صفحه فقط یک h1 باید داشته باشه.
۳. استفاده از تگ‌های معنایی (semantic tags)
استفاده از تگ‌هایی مثل <nav>, <header>, <main>, <footer>, <article> باعث میشه ربات‌ها و خواننده‌های صفحه راحت‌تر ساختار رو متوجه بشن.
۴. استفاده از لیبل (label) برای فرم‌ها
برای هر input یک label داشته باش:
<label for="email">ایمیل:</label>
<input type="email" id="email" name="email">این کار کمک می‌کنه فرم با صفحه‌خوان‌ها هم قابل استفاده باشه.
۵. ترتیب صحیح و قابل فهم برای کاربران صفحه کلید
اگر کاربر فقط با صفحه کلید (Tab) حرکت کرد، سایت باید منطقی کار کنه و فیلدها و لینک‌ها به ترتیب مناسب فعال بشن.
مثال یک فرم دسترس‌پذیر
<form>
<label for="username">نام کاربری:</label>
<input type="text" id="username" name="username">
<label for="password">رمز عبور:</label>
<input type="password" id="password" name="password">
<button type="submit">ورود</button>
</form>تمرین
یک صفحه ساده بساز که:
- یک تصویر با alt مناسب داشته باشه
- تیتر h1 و h2 داشته باشه
- یک فرم کوچک با label برای هر input داشته باشه
