♿ درس هشتم: HTML و دسترسپذیری (Accessibility)
🎯 هدف این درس: آشنایی با مفهوم دسترسپذیری در HTML و یادگیری روشهای ساخت صفحات وب قابل استفاده برای همه کاربران، از جمله استفاده صحیح از alt، Headingها، Labelها و HTML معنایی
مهمان عزیز! 👋
به درس هشتم از دوره HTML سطح مقدماتی خوش آمدی.
تا اینجا با ساختار HTML، تگهای معنایی، متن، تصاویر، فرمها، جدولها و لینکها آشنا شدی.
اما یک وبسایت حرفهای فقط نباید برای کاربرانی که شرایط استفاده معمولی دارند قابل مشاهده باشد.
یک صفحه وب استاندارد باید تا حد امکان برای همه کاربران قابل استفاده باشد؛
حتی کاربرانی که از صفحهخوان استفاده میکنند، نمیتوانند با ماوس کار کنند، بینایی محدودی دارند یا از روشهای دیگری برای تعامل با وب استفاده میکنند.
💡 یک نکته مهم مهمان:
دسترسپذیری یا Accessibility یعنی طراحی و ساخت صفحات وب به شکلی که افراد مختلف، با تواناییها و روشهای استفاده متفاوت، بتوانند محتوا و امکانات سایت را درک و استفاده کنند.
♿ بخش ۱: Accessibility چیست؟
واژه Accessibility به معنی «دسترسپذیری» است.
در طراحی وب، منظور این است که محتوای سایت و امکانات آن برای طیف گستردهای از کاربران قابل دسترسی باشد.
برای مثال، ممکن است یک کاربر نتواند تصاویر را ببیند و از Screen Reader یا صفحهخوان استفاده کند.
اگر تصویر سایت هیچ توضیح متنی نداشته باشد، این کاربر نمیتواند بفهمد تصویر چه محتوایی دارد.
👥 چه کاربرانی ممکن است به دسترسپذیری نیاز داشته باشند؟
- کاربرانی که از صفحهخوان استفاده میکنند.
- کاربرانی که بینایی محدودی دارند.
- کاربرانی که نمیتوانند از ماوس استفاده کنند.
- کاربرانی که با صفحهکلید با سایت کار میکنند.
- کاربرانی که مشکلات حرکتی دارند.
- کاربرانی که به دلایل موقت یا شرایط محیطی نمیتوانند از برخی امکانات استفاده کنند.
⚠️ نکته مهم:
دسترسپذیری فقط مخصوص افراد دارای معلولیت نیست. یک ساختار HTML درست میتواند تجربه استفاده از سایت را برای همه کاربران بهتر کند.
🖼️ بخش ۲: استفاده صحیح از alt برای تصاویر
یکی از اولین مواردی که هنگام ساخت یک صفحه دسترسپذیر باید یاد بگیری، استفاده صحیح از ویژگی alt در تصاویر است.
ویژگی alt مخفف Alternative Text یا متن جایگزین است.
این متن به مرورگر و فناوریهای کمکی کمک میکند بفهمند تصویر چه محتوایی دارد.
❌ تصویر بدون alt
تصویر بدون alt
HTML
HTML5
<img
src="laptop.jpg"
>
✅ تصویر با alt مناسب
تصویر با alt
HTML
HTML5
<img
src="laptop.jpg"
alt="لپتاپ روی میز کار"
>
متن alt باید کوتاه، واضح و متناسب با نقش تصویر باشد.
قرار نیست تمام جزئیات تصویر را همیشه در alt بنویسیم؛ باید اطلاعاتی را ارائه کنیم که برای درک محتوای صفحه لازم است.
🖼️ تصاویر تزئینی
اگر یک تصویر فقط برای زیبایی صفحه استفاده شده و اطلاعاتی به محتوای صفحه اضافه نمیکند، میتوانیم مقدار alt را خالی قرار دهیم.
تصویر تزئینی
HTML
HTML5
<img
src="decoration.png"
alt=""
>
⭐ قاعده ساده:
اگر حذف تصویر باعث شود بخشی از معنی صفحه از بین برود، برای آن یک alt مناسب بنویس. اگر تصویر صرفاً تزئینی است، معمولاً alt="" انتخاب مناسبی است.
📝 بخش ۳: استفاده صحیح از Headingها
تگهای h1 تا h6 فقط برای بزرگ کردن متن استفاده نمیشوند.
این تگها ساختار و سلسلهمراتب محتوای صفحه را مشخص میکنند.
صفحهخوانها و سایر فناوریهای کمکی میتوانند از Headingها برای درک ساختار صفحه استفاده کنند.
بنابراین انتخاب Heading مناسب، بخشی از دسترسپذیری HTML است.
🏗️ ساختار پیشنهادی Headingها
- h1: عنوان اصلی صفحه
- h2: بخشهای اصلی صفحه
- h3: زیربخشهای h2
- h4: زیربخشهای h3
- h5 و h6: برای سطوح عمیقتر محتوا
ساختار Heading
HTML
HTML5
<h1>آموزش طراحی وب</h1>
<h2>آموزش HTML</h2>
<h3>ساختار HTML</h3>
<h3>تگهای HTML</h3>
<h2>آموزش CSS</h2>
<h3>انتخابگرها</h3>
⚠️ اشتباه رایج:
فقط برای بزرگتر یا کوچکتر کردن متن از Headingها استفاده نکن. اگر یک متن فقط از نظر ظاهری باید بزرگ باشد، میتوانی بعداً با CSS ظاهر آن را تغییر دهی.
📝 بخش ۴: Label و دسترسپذیری فرمها
فرمها یکی از بخشهایی هستند که رعایت دسترسپذیری در آنها اهمیت زیادی دارد.
هر فیلد فرم باید مشخص کند که کاربر دقیقاً چه اطلاعاتی باید وارد کند.
برای این کار از تگ label استفاده میکنیم.
یکی از روشهای مناسب، اتصال label به input با استفاده از ویژگیهای for و id است.
❌ فرم بدون Label مناسب
فرم نامناسب
HTML
HTML5
<input
type="text"
placeholder="نام خود را وارد کنید"
>
✅ فرم با Label مناسب
فرم دسترسپذیر
HTML
HTML5
<label for="name">
نام و نام خانوادگی
</label>
<input
type="text"
id="name"
name="name"
>
مقدار for در label باید دقیقاً با مقدار id مربوط به فیلد یکسان باشد.
به این ترتیب رابطه بین عنوان فیلد و خود فیلد برای کاربر و فناوریهای کمکی مشخص میشود.
🧱 بخش ۵: استفاده از HTML معنایی
یکی از بهترین روشها برای افزایش دسترسپذیری، استفاده از عناصر Semantic HTML است.
در HTML معنایی، به جای اینکه همه چیز را با div بسازیم، از تگهایی استفاده میکنیم که معنی و نقش محتوای خود را مشخص میکنند.
🏷️ تگهای معنایی مهم
headerبرای بخش سربرگnavبرای بخش ناوبریmainبرای محتوای اصلی صفحهsectionبرای یک بخش مستقل از محتواarticleبرای محتوای مستقلasideبرای محتوای جانبیfooterبرای بخش پایانی
ساختار معنایی صفحه
HTML
HTML5
<header>
<h1>وبسایت آموزشی من</h1>
</header>
<nav>
<a href="/courses">دورهها</a>
<a href="/articles">مقالات</a>
</nav>
<main>
<section>
<h2>آخرین آموزشها</h2>
<article>
<h3>آموزش HTML</h3>
<p>
شروع یادگیری HTML از پایه.
</p>
</article>
</section>
</main>
<footer>
<p>تمام حقوق محفوظ است.</p>
</footer>
⭐ مزیت HTML معنایی:
وقتی از عناصر معنایی استفاده میکنی، مرورگر و فناوریهای کمکی راحتتر میتوانند نقش بخشهای مختلف صفحه را تشخیص دهند.
⌨️ بخش ۶: دسترسپذیری با صفحهکلید
همه کاربران با ماوس با سایت کار نمیکنند.
بعضی کاربران از صفحهکلید برای حرکت بین عناصر صفحه استفاده میکنند.
به همین دلیل باید تا حد امکان از عناصر HTML استاندارد برای تعامل با کاربر استفاده کنیم.
❌ استفاده نادرست از div به جای دکمه
عنصر تعاملی نامناسب
HTML
HTML5
<div>
کلیک کنید
</div>
✅ استفاده صحیح از button
دکمه استاندارد
HTML
HTML5
<button type="button">
کلیک کنید
</button>
عناصر استاندارد HTML مانند button، a و عناصر فرم، رفتارهای استانداردی دارند که مرورگر و فناوریهای کمکی میتوانند بهتر آنها را تشخیص دهند.
🔗 بخش ۷: لینکهای قابل فهم
متن لینک نیز باید معنی مشخصی داشته باشد.
کاربر باید بتواند بدون خواندن تمام متن اطراف لینک متوجه شود لینک به کجا میرود.
❌ متن نامناسب
لینک نامناسب
HTML
HTML5
<a href="/html">
اینجا کلیک کنید
</a>
✅ متن واضح
لینک واضح
HTML
HTML5
<a href="/html">
مشاهده دوره HTML
</a>
🧩 بخش ۸: ARIA چیست؟
احتمالاً در پروژههای حرفهای با ویژگیهایی مانند aria-label یا aria-describedby روبهرو خواهی شد.
ARIA مجموعهای از ویژگیهاست که میتواند اطلاعات بیشتری درباره نقش و وضعیت عناصر رابط کاربری در اختیار فناوریهای کمکی قرار دهد.
⚠️ قانون مهم برای شروع:
اگر بتوانی نیاز دسترسپذیری را با HTML استاندارد برطرف کنی، معمولاً بهتر است ابتدا از HTML معنایی استفاده کنی و سراغ ARIA بروی.
مثال aria-label
ARIA Label
HTML
HTML5
<button
type="button"
aria-label="باز کردن منوی اصلی"
>
☰
</button>
در این مثال، کاربر یک نماد منو میبیند، اما صفحهخوان میتواند عبارت «باز کردن منوی اصلی» را به کاربر اعلام کند.
🧪 پروژه عملی: ساخت یک صفحه دسترسپذیر
🚀 پروژه کوچک این درس
در این پروژه یک صفحه آموزشی ساده میسازیم که از HTML معنایی، Headingهای مناسب، تصویر دارای alt و فرم دارای Label استفاده میکند.
پروژه صفحه دسترسپذیر
HTML
HTML5
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
آموزش HTML
</title>
</head>
<body>
<header>
<h1>
آموزش طراحی وب
</h1>
<nav aria-label="منوی اصلی">
<a href="/html">
آموزش HTML
</a>
<a href="/css">
آموزش CSS
</a>
</nav>
</header>
<main>
<section>
<h2>
شروع یادگیری HTML
</h2>
<p>
HTML زبان اصلی ساختار صفحات وب است.
</p>
<img
src="html-course.jpg"
alt="تصویر دوره آموزش HTML"
>
</section>
<section>
<h2>
ثبتنام در دوره
</h2>
<form>
<label for="name">
نام شما
</label>
<input
type="text"
id="name"
name="name"
required
>
<button type="submit">
ثبتنام
</button>
</form>
</section>
</main>
<footer>
<p>
تمامی حقوق محفوظ است.
</p>
</footer>
</body>
</html>
🧠 بخش ۹: چکلیست دسترسپذیری HTML
قبل از اینکه صفحه HTML خود را نهایی کنی، میتوانی موارد زیر را بررسی کنی.
| مورد | بررسی |
|---|---|
| تصاویر | آیا تصاویر مهم دارای alt مناسب هستند؟ |
| Headingها | آیا ساختار Headingها منطقی است؟ |
| فرمها | آیا فیلدهای فرم Label مناسب دارند؟ |
| ساختار | آیا از HTML معنایی استفاده شده است؟ |
| لینکها | آیا متن لینکها واضح و قابل فهم است؟ |
| عناصر تعاملی | آیا از button و عناصر استاندارد HTML استفاده شده است؟ |
🧠 نکات کلیدی درس
- دسترسپذیری یعنی ساخت سایت به شکلی که کاربران مختلف بتوانند از آن استفاده کنند.
- برای تصاویر مهم از
altتوصیفی و مناسب استفاده کن. - برای تصاویر تزئینی میتوان از
alt=""استفاده کرد. - Headingها باید ساختار منطقی و سلسلهمراتب مشخص داشته باشند.
- برای فیلدهای فرم از
labelمناسب استفاده کن. - مقدار
forدر Label باید باidفیلد مربوطه یکسان باشد. - برای ساختار صفحه از عناصر Semantic HTML مانند
header،nav،mainوfooterاستفاده کن. - برای عناصر تعاملی از عناصر استاندارد مانند
buttonوaاستفاده کن. - متن لینک باید مقصد یا کاربرد لینک را برای کاربر مشخص کند.
- ARIA ابزار کمکی است و نباید جایگزین HTML معنایی شود.
📝 تمرینهای عملی
🎯 تمرین شماره ۱
یک صفحه درباره یک دوره آموزشی بساز و برای تصویر اصلی آن یک alt مناسب بنویس.
سپس بررسی کن که آیا متن alt واقعاً محتوای تصویر را توضیح میدهد یا خیر.
🎯 تمرین شماره ۲
یک ساختار Heading ایجاد کن که شامل یک h1، چند h2 و چند h3 باشد.
دقت کن که ترتیب Headingها منطقی باشد.
🎯 تمرین شماره ۳
یک فرم ثبتنام بساز که شامل نام، ایمیل و شماره تلفن باشد.
برای هر فیلد یک label مناسب ایجاد کن و مقدار for و id را بهدرستی به هم متصل کن.
🎯 تمرین شماره ۴
پروژه صفحه دسترسپذیر این درس را توسعه بده.
یک بخش مقاله، یک منوی ناوبری، تصویر، فرم و Footer به آن اضافه کن و تلاش کن تمام بخشها را با HTML معنایی بسازی.
🧩 جمعبندی درس
مهمان عزیز، در این درس یاد گرفتی که HTML فقط برای نمایش محتوا نیست.
نحوه ساختاردهی HTML میتواند روی تجربه کاربران مختلف و نحوه درک صفحه توسط فناوریهای کمکی تأثیر مستقیم داشته باشد.
با استفاده درست از alt، Headingها، Labelها، عناصر معنایی و عناصر تعاملی استاندارد، میتوانی صفحات HTML حرفهایتر و قابل دسترستری بسازی.
- ✅ مفهوم Accessibility
- ✅ استفاده صحیح از alt برای تصاویر
- ✅ مدیریت تصاویر تزئینی
- ✅ ساختار صحیح Headingها
- ✅ استفاده از Label در فرمها
- ✅ ارتباط صحیح for و id
- ✅ استفاده از Semantic HTML
- ✅ توجه به کاربران صفحهکلید
- ✅ ساخت لینکهای قابل فهم
- ✅ آشنایی مقدماتی با ARIA
در درس بعدی به سراغ HTML برای SEO میرویم و یاد میگیریم چگونه با استفاده صحیح از title، meta description، Headingها و لینکهای معنایی، ساختار HTML مناسبتری برای موتورهای جستجو ایجاد کنیم.
