اگر وقت و پول ندارید، با این نکات حداقل دسترسی‌پذیری ممکن را ایجاد کنید

وب متعلق به همگان است و این موضوع باید به صورتی جدی در نظر گرفته شود. زمانی که وبسایتی را ایجاد می‌کنید باید آن را برای همگان قابل دسترس نگه دارید. اگر نمی‌خواهید وقت زیادی را به این موضوع اختصاص دهید مشکلی نیست، ما در این مطلب ۹ نکته کلی را در نظر گرفته‌ایم که با رعایت آن‌ها می‌توانید به یک حداقل از دسترسی‌پذیری برسید. در بیشتر موارد و حالات استاندارد برخی از این موارد به صورت پیشفرض وجود دارد اما شما نیاز دارید که از وجود آن‌ها مطمئن شوید.

۱. دسترسی‌پذیری از طریق کیبورد

تمام المان‌های تعاملی وبسایت شما اعم از تکست‌باکس‌ها، دکمه‌ها، ورودی‌ها و… از طریق کیبورد قابلیت دسترسی داشته باشند. یعنی شما باید بتوانید قابلیتی را ایجاد کنید که کاربر بتواند از طریق کلیدهای Tab و Shift+Tab به آن‌ها پیدا بکند.
بیشتر المان‌های تعاملی وبسایت به صورت پیشفرض این قابلیت را دارند، مرورگر نیز نقش مهمی در اعمال چنین قابلیتی روی وبسایت‌ها دارد.
المان‌هایی وجود دارند که نیاز به داشتن دسترسی‌پذیری از طریق کیبورد ندارند، چرا که کاربر نیازی به تعامل با آن‌ها را ندارد، به همین دلیل سعی در ایجاد چنین قابلیتی نکنید. تصاویر، Divها و… از جمله این المان‌ها هستند.

۲. ترتیب Tab

زمانی که یک کاربر در یک وبسایت کلید Tab را بارها و بارها فشار می‌دهد المان‌های مختلفی را برای تعامل انتخاب می‌کند، توسعه دهنده وبسایت باید مراقب باشد که این انتخاب‌ها در یک ترتیب منطقی قرار بگیرند. برای مثال از نقطه بالا به پایین. برای وبسایت هایی نیز که RTL هستند، همزمان با جهت‌گیری از بالا به پایین باید المان‌ها را از راست به چپ انتخاب نماید. اگر با Tab زدن المان‌های تعاملی در صفحه بین همدیگر به صورتی نامناسب جابجا شوند، تجربه کاربری بدی نتیجه کار خواهد بود.
ترتیب Tabها براساس ترتیب DOM صورت می‌گیرد. بنابراین شما باید مراقب HTML باشید. المان‌هایی که در بالا قرار بگیرند اولویت بالاتری برای دسترسی دارند.
برخی اوقات توسعه‌دهندگانی از CSS برای ایجاد تغییر در ترتیب DOM استفاده می‌کند. یک مثال از این حالت را می‌توانید در زیر مشاهده بکنید:

<a href="#" style="float:right;">Right aligned link</a> 
<a href="#">Link 1</a> 
<a href="#">Link 2</a>

در حالت بالا، ترتیب Tabها از سمت چپ به راست تغییر می‌کند چرا که ابتدا سراغ لینکی می‌رود که در سمت راست صفحه قرار گرفته و در درخت DOM اولین المان است.

۳. Tabindex

اگر بخواهید یک المان غیر تعاملی را تعاملی کنید می‌توانید از tabindex=0 استفاده نمایید. برای مثال:

<div id=”myDiv” tabindex = 0>Dummy text</div>

در حالت برعکس اگر بخواهید یک المان تعاملی را به المانی غیر تعاملی تبدیل بکنید از مقدار -1 می‌کنید. بهتر است تنها زمانی به این صورت عمل نمایید که المان‌های تعاملی شما در پشت یکسری المان‌های متحرک پنهان شده و نیازی به دسترسی نداشته باشند.
بهتر است زیاد از این ویژگی استفاده نکنید، چرا که گاهی اوقات باعث از دست دادن کنترل کامل روی ترتیب المان‌ها می‌شود.

۴. استفاده از یک المان محلی

تا جایی که ممکن است لطفا از المان‌های محلی استفاده کنید. برای مثال زمانی که قصد ایجاد یک دکمه در صفحه را دارید بجای استفاده از div و span تگ button را به کار بگیرید.
المان‌های تعاملی مانند دکمه‌ها و ورودی‌های مختلف دیگر ویژگی‌های دسترسی‌پذیری بسیار زیادی را در خود دارند که همگی می‌توانند به خوبی توسط مرورگر شناسایی و استفاده شوند، بنابراین بهتر است اقدام به ساختن المان‌های سفارشی نکنید.

۵. استفاده از راهنما برای ایجاد المان‌های سفارشی

اگر قصد ساخت یک المان سفارشی را دارید پس بهتر است از راهنماها پیروی کنید. در این لینک می‌توانید راهنماهای وبسایت w3.org را مطالعه نمایید.
این راهنماها به شما می‌گویند که تعاملات کیبوردی برای یک المان باید به چه صورتی باشند.
لازم نیست که تمام مستندات را بخوانید، تنها قسمت‌هایی را مطالعه کنید که مربوط به المان سفارشی شما هستند. برای مثال اگر قصد ساخت یک چک-باکس سفارشی را دارید خواندن تنها این قسمت کفایت می‌کند.

۶. Screen Reader

بسیاری از افرادی که مشکلات بینایی دارند از Screen Readerها استفاده می‌کنند. برای آنکه این دست از افراد به خوبی بتوانند سایت‌تان را مطالعه کنند چند نکته مهم وجود دارد:
برای تصاویر حتما از متن alt یا جایگزین استفاده کنید.
به درستی از تگ‌های h1...h6 و… استفاده کنید. برای مثال هیچوقت سعی نکنید که برای عنوان از تگ p استفاده کنید و بعدا با استفاده از CSS آن را به شکل یک عنوان نمایش بدهید.
مطمئن شوید که تگ‌های معناداری را به کار می‌برید. <header>، <footer> و… تگ‌هایی از این دست هستند. اگر می‌خواهید بیشتر در این رابطه مطالعه داشته باشید این لینک را مطالعه کنید.
دوباره: بجای ساختن المان‌های غیر استاندارد از المان‌های استاندارد استفاده کنید. در غیر اینصورت تشخیص ماهیت آن برای Screen Reader بسیار سخت خواهد بود.

۷. خصوصیات aria و برچسب‌ها

هر کدی که در HTML نوشته می‌شود، فارغ از نمایشی بودن آن، یک لایه معنایی نیز دارد که به آن درخت دسترسی‌پذیری گفته می‌شود. درخت دسترسی‌پذیری توسط ابزارهای کمکی مانند Screen Readerها استفاده می‌شود تا به کاربران در ارتباط با ماهیت کلی تگ، نام، وضعیت و مقدار آن اطلاع دهد. مقادیری که این خصوصیات تولید می‌کنند توسط مرورگر محاسبه می‌شود.

در این مثال محتوای تگ <label> به عنوان نام المان در نظر گرفته می‌شود.
اگر از خصوصیت aria-label استفاده کنید، می‌توانید برای هر المان یک نام تعیین نمایید. برای مثال تصور کنید که شما یک دکمه برای ذخیره کردن دارید اگر aria-label آن را برابر ذخیره قرار دهید می‌تواند در شناسایی آن کمک بالایی بکند.
می‌توانید لیست کاملی از این دست خصوصیات را در این لینک مشاهده نمایید.

۸. استفاده از ابزارها

aXe ابزاری عالی است که به شما در وجود قابلیت دسترسی‌پذیری برای برگه‌ها کمک می‌کند.
کروم نیز یک ابزار عالی دیگر را از طریق Inspector خود ارائه می‌کند که می‌توانید آن را از طریق این لینک مشاهده کنید.

۹. کتابخانه‌ها

اگر می‌خواهید برخی قسمت‌های وبسایت تان را از دسترسی‌پذیری Tab خارج کنید می‌توانید از کتابخانه inert.js استفاده کنید.
Focus-ring نام کتابخانه دیگری است که به شما این امکان را می‌دهد تا بتوانید در زمان فوکوس روی المان‌ها آن‌ها را مدیریت کنید.

در پایان

در این مقاله ما شما را با حداقل‌ترین نکاتی آشنا کردیم که برای پیاده سازی دسترسی پذیری در وبسایت‌ها کاربرد داشته و می‌تواند به وبسایت یا اپلیکیشن شما کمک بکند تا از هر نظر امتیاز بهتری را دریافت کند. جدای از اینکه وبسایت شما قابلیت استفاده توسط افراد بیشتری را پیدا خواهد کرد، گوگل و دیگر موتورهای جستجوگر نیز از وبسایت شما بیشتر لذت خواهند برد.