دسترس‌پذیری، دسترس‌پذیری، دسترس‌پذیری، دسترس‌پذیری

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

نقص دید رنگی

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

برخی ابزارها می‌توانند به شما ایده‌ای کلی بدهند که طرح‌های رنگی شما برای افرادی با انواع مختلف بینایی رنگ چگونه به نظر می‌رسند.

تب دسترسی‌پذیری فایرفاکس شامل یک منوی کشویی با عنوان شبیه‌سازی (Simulate) به همراه فهرستی از گزینه‌ها است.

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

در Chrome DevTools، تب رندرینگ به شما امکان می‌دهد تا نقص‌های بینایی را شبیه‌سازی کنید .

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

در مک، به مسیر زیر بروید:

  1. تنظیمات سیستم
  2. دسترسی‌پذیری
  3. نمایش
  4. فیلترهای رنگی
  5. فیلترهای رنگی را فعال کنید

یکی از گزینه‌ها را انتخاب کنید.

گزینه‌های فیلتر رنگ در تنظیمات سیستم.

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

نکن 
a {
  color: red;
}
انجام دهید 
a {
  color: red;
  font-weight: bold;
}

کنتراست رنگ

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

در اینجا چند ابزار وجود دارد که می‌توانید برای آزمایش نسبت کنتراست رنگ متن و پس‌زمینه خود استفاده کنید:

ایده خوبی است که همیشه color و background-color در CSS خود با هم تعریف کنید. فرض نکنید که رنگ پس‌زمینه، رنگ پیش‌فرض مرورگر خواهد بود. افراد می‌توانند رنگ‌های مورد استفاده مرورگر خود را تغییر دهند و این کار را هم می‌کنند.

نکن 
body {
  color: black;
}
انجام دهید 
body {
  color: black;
  background-color: white;
}

کنتراست بالا

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

در مک، به مسیر زیر بروید:

  1. تنظیمات سیستم
  2. دسترسی‌پذیری
  3. نمایش

گزینه افزایش کنتراست را انتخاب کنید.

افزایش کنتراست در تنظیمات سیستم.

یک ویژگی رسانه‌ای وجود دارد که تشخیص می‌دهد آیا کسی حالت کنتراست بالا را فعال کرده است یا خیر. ویژگی رسانه‌ای prefers-contrast را می‌توان برای سه مقدار جستجو کرد: no-preference ، less و more . می‌توانید از این اطلاعات برای تنظیم پالت رنگ سایت خود استفاده کنید.

Browser Support

  • کروم: ۹۶.
  • لبه: ۹۶.
  • فایرفاکس: ۱۰۱.
  • سافاری: ۱۴.۱.

Source

افراد همچنین می‌توانند در سیستم عامل خود ترجیحی برای استفاده از رنگ‌های معکوس تنظیم کنند.

در مک، به مسیر زیر بروید:

  1. تنظیمات سیستم
  2. دسترسی‌پذیری
  3. نمایش

گزینه معکوس کردن رنگ‌ها را انتخاب کنید.

رنگ‌ها را در تنظیمات سیستم معکوس کنید.

مطمئن شوید که وب‌سایت شما هنوز برای کسی که با رنگ‌های معکوس در حال مرور است، قابل فهم باشد. مراقب سایه‌های کادر باشید - ممکن است هنگام معکوس شدن رنگ‌ها، نیاز به تنظیم داشته باشند.

اندازه فونت

رنگ تنها چیزی نیست که افراد می‌توانند در مرورگر خود تنظیم کنند، بلکه می‌توانند اندازه فونت پیش‌فرض را نیز تنظیم کنند. با کاهش بینایی، ممکن است اندازه فونت پیش‌فرض را در مرورگرها یا سیستم عامل‌های خود تنظیم کنند و با گذشت سال‌ها، اعداد را افزایش دهند.

شما می‌توانید با استفاده از اندازه‌های نسبی فونت به این تنظیمات پاسخ دهید. از استفاده از واحدهایی مانند px خودداری کنید. در عوض از واحدهای نسبی مانند rem یا ch استفاده کنید.

سعی کنید تنظیمات اندازه متن پیش‌فرض را در مرورگر خود تغییر دهید. می‌توانید این کار را در تنظیمات مرورگر خود انجام دهید. یا می‌توانید هنگام بازدید از یک صفحه وب با بزرگنمایی این کار را انجام دهید. آیا اگر اندازه فونت پیش‌فرض ۲۰۰٪ افزایش یابد، وب‌سایت شما همچنان کار می‌کند؟ ۴۰۰٪ چطور؟

کسی که از وب‌سایت شما با کامپیوتر رومیزی و اندازه فونت ۴۰۰٪ بازدید می‌کند، باید همان طرح‌بندی را داشته باشد که کسی که از سایت شما با دستگاهی با صفحه نمایش کوچک بازدید می‌کند.

وب‌سایت Clearleft dot com
وب‌سایتی که هم در دستگاه دسکتاپ و هم در دستگاه موبایل مشاهده می‌شود. اندازه فونت مرورگر دسکتاپ به ۴۰۰٪ افزایش یافته است.

پیمایش با صفحه کلید

همه از ماوس یا ترک‌پد برای پیمایش صفحات وب استفاده نمی‌کنند. صفحه‌کلید راه دیگری برای گشت و گذار در صفحه است و کلید tab به ویژه مفید است. کاربران می‌توانند به سرعت از یک لینک یا فیلد فرم به لینک بعدی بروند.

لینک‌هایی که با شبه‌کلاس‌های :hover و :focus استایل‌دهی می‌شوند ، صرف نظر از اینکه کاربر از ماوس، ترک‌پد یا کیبورد استفاده می‌کند، این استایل‌ها را نمایش می‌دهند. از شبه‌کلاس :focus-visible برای استایل‌دهی به لینک‌های خود فقط برای پیمایش کیبورد استفاده کنید. می‌توانید این استایل‌ها را بیشتر قابل توجه کنید.

a:focus,
a:hover {
  outline: 1px dotted;
}
a:focus-visible {
  outline: 3px solid;
}

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

مراقب ویژگی order CSS باشید. می‌توانید از این ویژگی در ترکیب با flexbox و grid برای قرار دادن عناصر با ترتیب بصری متفاوت از ترتیب آنها در HTML استفاده کنید. این یک ویژگی قدرتمند است، اما می‌تواند افرادی را که با صفحه کلید پیمایش می‌کنند، گیج کند.

صفحات وب خود را با استفاده از کلید tab روی صفحه کلید خود آزمایش کنید تا مطمئن شوید که ترتیب تب‌ها منطقی است.

در پنل دسترسی (Accessibility) در ابزارهای توسعه‌دهندگان مرورگر فایرفاکس، گزینه‌ای برای نمایش ترتیب تب‌ها (Show Tabbing Order) وجود دارد. فعال کردن این گزینه، اعداد را روی هر عنصر قابل فوکوس (focusable) قرار می‌دهد.

نمایش ترتیب تب‌ها با استفاده از تب دسترسی‌پذیری فایرفاکس

کاهش حرکت

انیمیشن و حرکت روش‌های فوق‌العاده‌ای برای جان بخشیدن به طراحی‌های وب هستند. اما برای برخی افراد این حرکات می‌تواند بسیار گیج‌کننده و حتی باعث حالت تهوع شود.

یک کوئری ویژگی وجود دارد که مشخص می‌کند آیا کاربر حرکت کمتری را ترجیح می‌دهد یا خیر. این کوئری prefers-reduced-motion نام دارد. آن را هر جا که از انتقال‌ها یا انیمیشن‌های CSS استفاده می‌کنید، قرار دهید.

Browser Support

  • کروم: ۷۴.
  • لبه: ۷۹.
  • فایرفاکس: ۶۳.
  • سافاری: ۱۰.۱.

Source

a:hover {
  transform: scale(150%);
}
@media (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
}

کوئری رسانه‌ای prefers-reduced-motion مخصوص حرکت روی صفحه است. اگر از انتقال روی رنگ یک عنصر استفاده می‌کنید که نباید تحت تأثیر prefers-reduced-motion قرار گیرد، می‌توانید از Transition با شفافیت و محو شدن متقاطع نیز استفاده کنید. Reduced motion به معنای عدم انیمیشن نیست.

صدا

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

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

پیش از این، یاد گرفتید که چگونه دکمه‌های فقط آیکونی باید شامل یک ویژگی باشند تا هدف دکمه را برای کاربران نابینا مشخص کنند. این تنها یک نمونه از اهمیت HTML پایه قوی است.

سرفصل‌ها

از عنوان‌هایی مانند <h1> ، <h2> ، <h3> و غیره به طور معقول استفاده کنید. صفحه‌خوان‌ها از این عنوان‌ها برای ایجاد یک طرح کلی از سند شما استفاده می‌کنند که می‌توان با میانبرهای صفحه‌کلید در آن پیمایش کرد.

نکن 
<div class="heading-main">Welcome to my page</div>

<div class="heading-secondary">About me</div>

<div class="heading-tertiary">My childhood</div>

<div class="heading-secondary">About this website</div>

<div class="heading-tertiary">How this site was built</div>
انجام دهید 
<h1>Welcome to my page</h1>
  <h2>About me</h2>
    <h3>My childhood</h3>
  <h2>About this website</h2>
    <h3>How this site was built</h3>

ساختار

از عناصر راهنما مانند <main> ، <nav> ، <aside> ، <header> و <footer> برای ساختاردهی محتوای صفحه خود استفاده کنید. کاربران صفحه‌خوان می‌توانند مستقیماً به این عناصر راهنما بروند.

نکن 
<div class="header">...</div>

<div class="navigation">...</div>

<div class="maincontent">...</div>

<div class="sidebar">...</div>

<div class="footer">...</div>
انجام دهید 
<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

فرم‌ها

مطمئن شوید که هر فیلد فرم دارای یک عنصر <label> مرتبط است. می‌توانید با استفاده از ویژگی for در عنصر <label> و ویژگی id مربوطه در فیلد فرم، یک برچسب را به یک فیلد فرم مرتبط کنید.

نکن 
<span class="formlabel">Your name</span>
<input type="text">
انجام دهید 
<label for="name">Your name</label>
<input id="name" type="text">

تصاویر

همیشه با استفاده از ویژگی alt توضیحات متنی تصاویر را ارائه دهید.

نکن 
<img src="dog.jpg">
انجام دهید 
<img src="dog.jpg" alt="A golden retriever sitting on the grass looking happy.">

اگر تصویر صرفاً جنبه نمایشی دارد، همچنان باید ویژگی alt را وارد کنید، اما می‌توانید مقدار خالی به آن بدهید.

نکن 
<img src="texture.png">
انجام دهید 
<img src="texture.png" alt="">

جیک آرچیبالد مقاله‌ای در مورد نوشتن متن alt عالی منتشر کرد.

سعی کنید متن توصیفی را در لینک‌ها ارائه دهید. از عباراتی مانند «اینجا کلیک کنید» یا «بیشتر» استفاده نکنید.

نکن 
<p>To find out more about our latest offers, <a href="/offers.html">click here</a>.</p>
انجام دهید 
<p>Find out more about <a href="/offers.html"> our latest offers</a>.</p>

آریا

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

برخی از ویجت‌های رابط کاربری که عنصر HTML متناظری ندارند، از جمله چرخ و فلک‌ها، تب‌ها و آکاردئون‌ها. این موارد باید از ابتدا با ترکیبی از HTML، CSS، جاوا اسکریپت و ARIA ساخته شوند.

ARIA مخفف Accessible Rich Internet Applications (برنامه‌های کاربردی غنی اینترنتی قابل دسترس) است. واژگان آن به شما امکان می‌دهد وقتی عنصر HTML مناسبی در دسترس نیست، اطلاعات معنایی ارائه دهید.

اگر نیاز به ایجاد عناصر رابط کاربری دارید که هنوز به عنوان عناصر HTML در دسترس نیستند، با ARIA آشنا شوید .

هرچه قابلیت‌های سفارشی بیشتری با جاوااسکریپت اضافه کنید، بیشتر نیاز به درک ARIA خواهید داشت. اگر به عناصر استاندارد HTML پایبند باشید، ممکن است به هیچ ARIA نیاز نداشته باشید.

اگر امکانش هست، با کاربران واقعیِ نرم‌افزارهای صفحه‌خوان (screen reader) تست کنید. این کار نه تنها درک بهتری از نحوه‌ی پیمایش وب توسط آن‌ها به شما می‌دهد، بلکه حدس و گمان را از طراحی با در نظر گرفتن دسترسی‌پذیری حذف می‌کند.

آزمایش با افراد واقعی راهی عالی برای آشکار کردن هرگونه فرضیه‌ای است که ممکن است در ذهن داشته باشید. در ماژول بعدی، در مورد روش‌های مختلف تعامل افراد با وب‌سایت‌های شما یاد خواهید گرفت - حوزه دیگری که در آن فرضیه‌سازی بسیار آسان است.

درک خود را بررسی کنید

دانش خود را در مورد دسترسی‌پذیری بیازمایید

با CSS، یک توسعه‌دهنده می‌تواند تنظیمات کاربر مانند اندازه فونت را تغییر دهد، یا حتی بدتر از آن؟

درست
استفاده از body { font-size: 12px; } کافی است.
نادرست
تنظیمات کاربر تأثیر زیادی دارد، اما کنترل کامل را ارائه نمی‌دهد.

برای جلوگیری از بازنویسی اندازه فونت دلخواه کاربر، از ... استفاده کنید؟

واحدهای مطلق مانند px .
اینها هنگام استفاده، ترجیح اندازه فونت کاربر را در نظر نمی‌گیرند.
واحدهای نسبی مانند rem .
این موارد به توسعه‌دهندگان اجازه می‌دهد تا با طول‌هایی که شامل تنظیمات اندازه فونت کاربر نیز می‌شود، بسازند.

همه در دنیا از ماوس استفاده می‌کنند.

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

تصویری با ویژگی alt خالی چه کاری انجام می‌دهد؟

مرورگر به طور خودکار آنها را برای کاربر اضافه می‌کند.
جزو ویژگی‌های هیچ مرورگری نیست.
تصویر به عنوان یک عنصر نمایشی در نظر گرفته می‌شود.
فرض بر این است که تصویر برای مصرف محتوا مهم نیست.
«رشته خالی» را برای صفحه‌خوان می‌خواند
این اتفاقی نیست که می‌افتد.
هیچی
قطعاً اتفاقی می‌افتد.
قبلی
موضوع بندی
بعدی
تعامل