100% کامل شده تا

دسترسی به اچ‌تی‌ام‌ال (HTML Accessibility)

از موتو کد، دانشنامهٔ برنامه‌نویسی


HTML را با قابلیت دسترسی در ذهن بنویسید!


دسترس پذیری HTML

راهی مناسب برای پیمایش و تعامل با سایت خود در اختیار کاربر قرار دهید. کد HTML خود را تا حد امکان معنایی (Semantic) کنید.[۱]

HTML معنایی

HTML معنایی یعنی تا حد ممکن از عناصر صحیح HTML برای هدف درست آنها استفاده کنید. عناصر معنایی، عناصری دارای معنی هستند؛ اگر به یک کلید نیاز دارید، از عنصر <button> استفاده کنید (و نه یک <div>).

معنایی
<button>Click Me</button>
غیرمعنایی
<div>Click Me</div>

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

با به خاطر داشتن داشتن مثال button:

  • دکمه‌ها به‌طور پیش‌فرض استایل دهی مناسب تری دارند
  • یک صفحه خوان آن را بعنوان دکمه شناسایی می‌کند
  • قابل Focus (به فارسی: تمرکز) است
  • قابل کلیک کردن است

همچنین دکمه برای افرادی که تنها از کیبورد استفاده می‌کنند نیز در دسترس است؛ هم با کلیدها و هم با ماوس قابل کلیک‌کردن است، و می‌توان در بین آنها از Tab استفاده کرد (استفاده از کلید Tab در صفحه کلید).

مثال‌هایی از عناصر غیرمعنایی: <div> و <span> - هیچ اطلاعی در مورد محتوای خود نمی‌دهند.

مثال‌هایی از عناصر معنایی: <form>، <table> و <article> - به وضوح محتوای خود را تعریف می‌کنند.

عنوان گذاری‌ها مهم هستند

عناوین با تگ‌های <h1> تا <h6> مشخص می‌شوند:

مثال
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Responsive demo.svg


موتورهای جستجو از عناوین برای شاخص گذاری ساختار و محتوای صفحات وب‌سایت شما استفاده می‌کنند.

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

عنوان <h1> باید برای عناوین اصلی استفاده شوند، به همراه عناوین <h2>، سپس <h3> با اهمیت کمتر و به همین ترتیب.

توجه: از عناوین HTML فقط برای عنوان استفاده کنید. از عنوان‌ها برای بزرگ یا برجسته (Bold) کردن متن استفاده نکنید.

متن جایگزین

اگر کاربر به دلایلی نتواند یک تصویر را ببینید، ویژگی alt متن جایگزینی را برای آن فراهم می‌کند (به دلیل اتصال کُند، خطایی در ویژگی src یا اگر کاربر از صفحه خوان استفاده کند).

مقدار ویژگی alt باید تصویر را توصیف کند:

مثال
<img src="img_chania.jpg" alt="Flowers in Chania">

Responsive demo.svg


اگر مرورگر نتواند تصویری را پیدا کند، مقدار ویژگی alt را نمایش خواهد داد:

مثال
<img src="wrongname.gif" alt="Flowers in Chania">

Responsive demo.svg

زبان را اعلام کنید

همیشه باید ویژگی lang را در تگ <html> قرار دهید تا زبان صفحه وب را اعلام کنید. این برای کمک به موتورهای جستجو و مرورگرها است.

مثال زیر انگلیسی را به عنوان زبان مشخص می‌کند:

مثال برای en
<!DOCTYPE html>
<html lang="en">
<body>

...

</body>
</html>

استفاده از زبان واضح و مفهومی

از زبان واضحی که فهم آن ساده باشد استفاده کنید و سعی کنید از مجموعه کاراکترهایی که به وضوح توسط صفحه خوان‌ها خوانده نمی‌شود خودداری کنید. برای مثال:

تا حد امکان از جملات کوتاه استفاده کنید

  • از گذاشتن خط تیره‌ها خودداری کنید. به جای نوشتن ۳–۱ بنویسید ۱ تا ۳
  • از مخخف‌ها جلوگیری کنید. به جای نوشتن Feb بنویسید February
  • از کلمات عامیانه خودداری کنید

متن لینک خوب ایجاد کنید

یک لینک باید به خوبی توضیح دهد که خواننده با کلیک کردن برروی آن، چه اطلاعاتی به دست می‌آورد.

نمونه‌ای از لینک‌های خوب و بد:

ویژگی title

ویژگی title اطلاعات اضافه ای در مورد یک عنصر می‌دهد.

این اطلاعات اغلب به شکل متن Tooltip هنگامی که اشاره گر ماوس روی عنصر قرار می‌گیرد نمایش داده می‌شوند.

ویژگی title را می‌توان در هر عنصر HTML استفاده کرد (این ویژگی روی هر عنصر HTML اعتبار سنجی می‌کند. با این حال، لزوماً مفید نیست).

مثال
<p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

<p title="Free Web tutorials">W3Schools.com</p>

Responsive demo.svg



منابع آموزشی




به‌روزرسانی شده: ۳۵ روز پیش