دسترس پذیری

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Html-menu.png
موارد آموزشی
فرم‌های HTML
گرافیک در HTML
رسانه در HTML
APIها در HTML
مثال‌ها
۱مثال‌ها
۲خلاصه
۳دسترس‌پذیری
مرجع HTML


دسترس پذیری HTML

HTML را با قابلیت دسترسی در ذهن بنویسید. HTML برای کاربر راه خوبی برای راهبری (به انگلیسی: Navigate) و جهت‌یابی در سایت شما فراهم می‌کند. کد HTML خود را تا حد ممکن معنایی (به انگلیسی: Semantic) کنید، تا فهم کد برای بازدیدکنندگان و صفحه خوان‌ها ساده باشد.[۱]

HTML معنایی

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

Semantic (به فارسی: معنایی)

<button>Click Me</button>

Non-semantic (به فارسی: غیرمعنایی)

<div>Click Me</div>

HTML معنایی به صفحه خوان‌ها متن می‌دهد که محتوای یک صفحه را بلند می‌خوانند.

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

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

قابل کلیک کردن است

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

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

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

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

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

مثال

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

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

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

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

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

متن جایگزین

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

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

مثال

<img src="img_chania.jpg" alt="Flowers in Chania">

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

مثال

<img src="wrongname.gif" alt="Flowers in Chania">

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

اعلام کردن زبان برای صفحه خوان‌ها و موتور‌های جستجو مهم است، و با ویژگی lang اعلام می‌شود. از کد زیر برای نشان داده صفحه ای به زبان انگلیسی استفاده کنید:

1 <!DOCTYPE html>
2 <html lang="en">
3 <body>
4 
5 ...
6 
7 </body>
8 </html>

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

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

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

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

لینک های مناسب بنویسید

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

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

خوب

دربارهٔ زبان HTML اطلاعات بیشتری کسب کنید

اطلاعات بیشتر در مورد نحوه تغذیه سالم را بخوانید

بلیط‌های مریخ را اینجا بخرید

بد

اینجا کلیک کنید

بیشتر بخوانید …

بلیط‌های مریخ را اینجا بخرید خودت آن را امتحان کن

عنوان های لینک

ویژگی title اطلاعات اضافه ای در مورد یک عنصر می‌دهد. این اطلاعات اغلب به شکل متن Tooltip (به فارسی: راهنمای ابزار) هنگامی که اشاره گر ماوس روی عنصر قرار می‌گیرد نمایش داده می‌شوند.

مثال

<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>


منابع آموزشی