خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

درک تکنیک های HTML برای بهبود دسترسی به وب

وب سایت ها باید برای همه قابل دسترسی باشد. در اینجا چیزی است که شما باید بدانید.

ایجاد یک صفحه وب فقط ایجاد یک صفحه وب نیست. یکی از جنبه‌های مهم توسعه front-end، اطمینان از دسترسی به رابط‌های کاربری برای همه افراد در اینترنت، از جمله افراد دارای ناتوانی بینایی و شنوایی است. شما باید کد خود را با در نظر گرفتن این افراد بنویسید. چگونه به افراد دارای چالش بصری دسترسی برابر به وب سایت خود را به عنوان افرادی که دارای چالش بصری نیستند، می دهید؟ برای درک موضوع این مقاله را بخوان.

چرا توسعه دهندگان باید نگران دسترسی به وب باشند؟

دسترسی به وب حول این ایده می چرخد ​​که همه باید بدون توجه به هر گونه ناتوانی یا ناتوانی، دسترسی برابر به وب داشته باشند. داشتن یک وب‌سایت در دسترس، دسترسی به مخاطبان بزرگ‌تری را آسان‌تر می‌کند (حدود 16 درصد از جهان از این یا آن معلول رنج می‌برند).

دسترسی دیجیتال نباید گزینه ای برای توسعه دهندگان باشد. برای هر برند حرفه ای یک ضرورت است. این مورد جدی گرفته می شود: همانطور که توسط Variety گزارش شده است، شخصی در سال 2019 از شرکت پوکمون به دلیل یک وب سایت غیرقابل دسترسی شکایت کرد.

دسترسی به وب با HTML

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

از عناصر معنایی استفاده کنید

عناصر معنایی در HTML عناصری هستند که دارای معانی هستند. در HTML5 حدود 100 عنصر وجود دارد. برخی از عناصر، مانند

و غیر معنایی هستند، در حالی که سایر تگ های HTML معنایی هستند. اگرچه ممکن است توقف استفاده از این عناصر غیرمعنای غیرممکن باشد، اما مهم است که تا آنجا که می توانید عناصر معنایی را در کار خود بگنجانید. در اینجا لیستی از عناصر معنایی محبوب آمده است:

  1. <مقاله>
  2. <کنار>
  3. <پانویس>
  4. <اصلی>

<article>

<aside>

<footer>

<header>

<main>

<nav>

به این مثال از Taaskly توجه کنید:

صفحه اصلی Taaskly که دو بزرگسال را نشان می دهد که در سمت چپ مشت های خود را به هم می زنند و برخی از متن توضیحات در سمت راست

با نگاهی اجمالی به تصویر بالا، عناصر زیر آشکار می شوند:

  • یک عنوان
  • یک تصویر
  • یک پاراگراف
  • سه دکمه

به راحتی می توان فرض کرد که توسعه دهندگان از تگ های

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

<section>
<img src="/hero.png" alt="hero">
<article>
<h1>Find the right Products and Services at the right time.</h1>
<p>
Handmade footwear, hair revamp, social media manager, sending errands, source of income</b> &mdash; you name it, Taaskly got it. Find every product or service you need today when you sign up and use Taaskly.
</p>
<a href="/main/home">Outsource a Task</a>
<a href="/main/services"> Find a service</a>
<a href="/main/marketplace" >Find a shop</a>
</article>
</section>

از قطعه HTML، می توانید موارد زیر را مشاهده کنید:

  1. تصاویر، متن و دکمه ها در داخل عنصر
    قرار دارند.
  2. عنصر
    به طور مساوی عناصر و

    را تقسیم می کند.
  3. عنصر
  4. دکمه ها به عنوان عناصر کدگذاری می شوند. از این رو، آنها پیوند هستند، نه دکمه. به عنوان یک قاعده کلی، همیشه از پیوندها برای هدایت کاربر به صفحه یا نمای دیگری استفاده کنید و زمانی از دکمه ها استفاده کنید که فقط می خواهید کاربر عملی را در همان نمای انجام دهد. برای اطلاعات بیشتر در مورد این، صفحه دکمه Angular را ببینید.

از نشانه‌ها برای ارائه ساختار صفحه واضح استفاده کنید

نشانه‌ها برچسب‌های معنایی هستند که به کاربران نابینا کمک می‌کنند تا با صفحه‌خوان‌ها در یک صفحه وب حرکت کنند. با نشانه‌ها، تعریف بخش‌های مختلف یک صفحه وب آسان است. وب سایت اپل از Landmarks استفاده می کند.

صفحه اصلی اپل که نقاط دیدنی را نشان می دهد

تصویر بالا چهار نقطه عطف مختلف را نشان می دهد. می‌توانید از افزونه Accessibility Insights برای تجسم این نشانه‌ها استفاده کنید.

در تصویر، می‌توانیم یک

Please turn AdBlock off