دسترسی‌پذیری HTML
درس قبل datalist پیشنهاد را به یک input وصل کرد. دسترسی‌پذیری کار گسترده‌تری است: کل صفحه با صفحه‌کلید، خوانندهٔ صفحه و بزرگ‌نمایی قابل استفاده باشد. HTML خوب — landmark، label، alt، عنوان، دکمهٔ واقعی — پایه است نه پرداخت نهایی.
چرا دسترسی‌پذیری مهم است
بعضی بدون ماوس مرور می‌کنند، متن را بزرگ می‌کنند یا صفحه را می‌شنوند. نمودار بدون alt بی‌صداست؛ جستجو بدون label بی‌نام است؛ div کلیک‌پذیر شاید هرگز فوکوس صفحه‌کلید نگیرد. نشانه‌گذاری فراگیر به همه کمک می‌کند. بیشتر عادت‌هایی است که هنگام نوشتن HTML اعمال می‌کنید.
پاسخ مستقیم
۱) ناحیه‌های معنایی و کنترل‌های بومی. ۲) برای هر کنترل label با for/id. ۳) alt معنادار برای تصویرهای اطلاعاتی؛ alt خالی فقط برای تزئینی. ۴) یک h1 روشن و تودرتوی منطقی بدون پرش وحشی. ۵) با Tab لینک و دکمه را برسید. ۶) ARIA وقتی HTML بومی کافی نیست — اول ساختار را درست کنید.
📊 Accessibility habits beginners use
| Habit | Why it helps | Beginner tip |
|---|---|---|
| Semantic landmarks | Tools jump to regions | Prefer main/nav over anonymous divs |
| Labels on controls | Names fields clearly | for= must match the control id |
| Alt on images | Describes non-text content | Say what the image communicates |
| Logical headings | Outlines the page | Do not jump h1 → h4 for style |
| Keyboard-operable controls | Not everyone uses a pointer | Prefer button/a over clickable divs |
| Native before ARIA | Roles come built-in | Repair HTML; do not wallpaper broken markup |
جستجوی برچسب‌دار با landmark
نوار جستجوی کوچک: nav با نام دسترس‌پذیر، فیلد برچسب‌دار و دکمهٔ واقعی. خوانندهٔ صفحه ناحیه و نام کنترل را اعلام می‌کند؛ با Tab به input و دکمه می‌رسید.
<nav aria-label="Site">
<label for="q">Search</label>
<input id="q" name="q" type="search">
<button type="submit">Search</button>
</nav>
خواندن دموی جستجو
- nav یک landmark ناوبری است؛ aria-label وقتی چند nav دارید تمایز می‌دهد
- label for و input id نام دسترس‌پذیر می‌دهند
- name برای ارسال است — جدا از نام دسترس‌پذیر
- type=search کنترل بومی است
- button واقعی با Enter/Space فعال می‌شود
- درس قبل پیشنهاد بود؛ اینجا نام‌گذاری و دسترسی
عنوان‌ها، alt و دکمهٔ واقعی
قطعهٔ دوم: h1، h2 تودرتو، تصویر اطلاعاتی با alt توصیفی و عمل با button. مخالف لینک «اینجا کلیک کنید» و نمودار بدون توضیح.
<main>
<h1>Monthly sales</h1>
<h2>Q1 results</h2>
<img src="chart.png" alt="Bar chart: sales rose from 10 to 18">
<p>Sales climbed through March.</p>
<button type="button">Download report</button>
</main>
خواندن دموی ساختار
- یک h1 موضوع صفحه؛ h2 زیر آن بدون پرش به h4
- alt نمودار پیام را می‌گوید نه فقط «تصویر»
- فاصله‌ساز تزئینی alt خالی می‌گیرد؛ این نمودار اطلاعاتی است
- عمل با button است نه div
- main محتوای اصلی را landmark می‌کند
- درس بعد جاوااسکریپت؛ این عادت‌های HTML را نگه دارید
اول چه چیزی را درست کنیم
- فیلد بی‌نام: قبل از placeholder فانتزی label بگذارید
- تصویر معنادار بی‌صدا: alt بنویسید
- کنترل جعلی: div کلیک‌پذیر را با button یا a عوض کنید
- سوپ عنوان: طرح منطقی برگردانید
- وصلهٔ فقط-ARIA: اگر عنصر بومی هست همان را بگیرید
- بن‌بست صفحه‌کلید: هر چیزی که کلیک می‌شود باید با Tab برسد
تمرین — عادت‌های صفحه‌گسترده
- دموی جستجو؛ label را بردارید و بازرسی کنید؛ بعد for/id را برگردانید
- nav دوم اضافه کنید و به هر کدام aria-label متمایز بدهید
- alt نمودار را خالی کنید؛ بعد alt معنادار برگردانید
- عمداً از h1 به h4 بپرید؛ بعد به h1→h2 برگردانید
- دکمه را با div عوض کنید؛ بعد button واقعی و Tab
- جمله: دسترسی‌پذیری با ساختار HTML شروع می‌شود نه کاغذدیواری ARIA
- درس بعد script می‌آید — label و دکمه را نگه دارید
اشتباهات آسان
- لینک «اینجا کلیک کنید» بدون زمینه
- تصویر اطلاعاتی بدون alt یا با alt خالی
- div کلیک‌پذیر که صفحه‌کلید را نادیده می‌گیرد
- سطح عنوان فقط برای اندازهٔ ظاهری
- placeholder به‌جای label
- نقش‌های ARIA روی نشانه‌گذاری شکسته
- فراموش اینکه datalist درس قبل هم به label نیاز داشت
خلاصه
- دسترسی‌پذیری یعنی ساختار قابل استفاده برای افراد و ابزارهای بیشتر
- landmark، label، alt، عنوان و دکمهٔ بومی مهم‌اند
- دسترسی با صفحه‌کلید بخشی از کار است
- HTML محکم قبل از ARIA سنگین
- datalist یک کنترل بود؛ این درس کل صفحه را می‌بیند
- بعدی: افزودن جاوااسکریپت به HTML
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود