وب سایت ها باید برای همه قابل دسترسی باشد. در اینجا چیزی است که شما باید بدانید.
ایجاد یک صفحه وب فقط ایجاد یک صفحه وب نیست. یکی از جنبههای مهم توسعه front-end، اطمینان از دسترسی به رابطهای کاربری برای همه افراد در اینترنت، از جمله افراد دارای ناتوانی بینایی و شنوایی است. شما باید کد خود را با در نظر گرفتن این افراد بنویسید. چگونه به افراد دارای چالش بصری دسترسی برابر به وب سایت خود را به عنوان افرادی که دارای چالش بصری نیستند، می دهید؟ برای درک موضوع این مقاله را بخوان.
چرا توسعه دهندگان باید نگران دسترسی به وب باشند؟
دسترسی به وب حول این ایده می چرخد که همه باید بدون توجه به هر گونه ناتوانی یا ناتوانی، دسترسی برابر به وب داشته باشند. داشتن یک وبسایت در دسترس، دسترسی به مخاطبان بزرگتری را آسانتر میکند (حدود 16 درصد از جهان از این یا آن معلول رنج میبرند).
دسترسی دیجیتال نباید گزینه ای برای توسعه دهندگان باشد. برای هر برند حرفه ای یک ضرورت است. این مورد جدی گرفته می شود: همانطور که توسط Variety گزارش شده است، شخصی در سال 2019 از شرکت پوکمون به دلیل یک وب سایت غیرقابل دسترسی شکایت کرد.
دسترسی به وب با HTML
در HTML قوانینی برای اطمینان از توسعه وب سایت های قابل دسترس وجود دارد. در این بخش برخی از این قوانین توضیح داده خواهد شد.
از عناصر معنایی استفاده کنید
عناصر معنایی در HTML عناصری هستند که دارای معانی هستند. در HTML5 حدود 100 عنصر وجود دارد. برخی از عناصر، مانند
و غیر معنایی هستند، در حالی که سایر تگ های HTML معنایی هستند. اگرچه ممکن است توقف استفاده از این عناصر غیرمعنای غیرممکن باشد، اما مهم است که تا آنجا که می توانید عناصر معنایی را در کار خود بگنجانید. در اینجا لیستی از عناصر معنایی محبوب آمده است:
<مقاله>
<کنار>
<پانویس>
<اصلی>
<article>
<aside>
<footer>
<header>
<main>
<nav>
به این مثال از Taaskly توجه کنید:
با نگاهی اجمالی به تصویر بالا، عناصر زیر آشکار می شوند:
یک عنوان
یک تصویر
یک پاراگراف
سه دکمه
به راحتی می توان فرض کرد که توسعه دهندگان از تگ های
برای چیدمان عناصر روی صفحه استفاده کرده اند. با نگاهی دقیق تر به کدها، متوجه خواهید شد که به جای آن از شش تگ معنایی استفاده کرده اند. کد ساده شده به شکل زیر است:
<section> <imgsrc="/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>— you name it, Taaskly got it. Find every product or service you need today when you sign up and use Taaskly. </p> <ahref="/main/home">Outsource a Task</a> <ahref="/main/services"> Find a service</a> <ahref="/main/marketplace" >Find a shop</a> </article> </section>
از نشانهها برای ارائه ساختار صفحه واضح استفاده کنید
نشانهها برچسبهای معنایی هستند که به کاربران نابینا کمک میکنند تا با صفحهخوانها در یک صفحه وب حرکت کنند. با نشانهها، تعریف بخشهای مختلف یک صفحه وب آسان است. وب سایت اپل از Landmarks استفاده می کند.
تصویر بالا چهار نقطه عطف مختلف را نشان می دهد. میتوانید از افزونه Accessibility Insights برای تجسم این نشانهها استفاده کنید.