aria-5

ARIA یا ( Assistive Rich Internet Applications ) یکی از استانداردهایی هست که W3C برای ارتقای خوانایی سایتتون تعریف کرده که میشه با استفاده از اون اطلاعات بیشتری رو در اختیار ابزارهایی که به Screen Reader معروف هستند قرار داد. با توجه به اینکه Screen Reader‌ها میتونن با کدهای HTML خالص هم کار کنند و اونا رو تفسیر کنن ، اما میشه با اضافه کردن Aria به کدهاتون این اطلاعات رو بامفهموتر کنید تا Screen Reader درک واضحی از سایت شما داشته باشند. Screen Reader رو میشه یک روبات دونست که وارد سایت میشه و با توجه به کدهاتون ، نوشته‌ها رو تبدیل به صوت میکنه و به کاربر میرسونه. هدف اصلی Aria نابینایان هستند که میتونن با شنیدن این صداها با سایت شما آشنا بشن و با اون ارتباط برقرار کنن. فرض کنید یک متن خالی میزارید و یکی از کلمات اون رو Bold میکنید. با اینکار زمانی که روبات به کلمه مورد نظر میرسه صدایی بلندتر رو بوجود میاره که کسی که داره این صدا رو میشنوه بفهمه که این کلمه خاص و Bold هست.

Aria هیچ تغییری در ظاهر سایت شما بوجود نمیاره و تنها هدفش ارتقای اطلاعات و عملکرد برای Screen Reader‌ها هست.

خصوصیات ARIA

خصوصیات ARIA در استاندارد تعریف شده هستند و به دو دسته کلی roles و states & Properties تقسیم بندی میشن. همه این موارد میتونن بصورت مستقیم در کدهای HTML وارد بشن و یا بصورت داینامیک با استفاده از Javascript اضافه بشن و یا اینکه با توجه به رفتار کاربران اونا رو تغییر بدین. قوانین و استانداردهایی وجود داره که مشخص میکنه که از چه خصوصیتی باید در چه زمانی و در پاسخ به چه رفتاری از کاربر استفاده بشه.

لینکها:

Roles : لینک

States & Properties : لینک

Design Pattern : لینک

Roles

Aria Role بصورت [tag]role=”<ROLE TYPE>”[/tag] اضافه میشه و به محضی که برای یه المنت این ویژگی رو مشخص کردیم امکان اینکه تغییرش بدین وجود نداره. چهار دسته کلی برای Aria Role وجود داره:

  • Landmark
  • Document
  • Widget
  • Abstract

States & Properties

این نوع ویژگی‌ها بیشتر زمانی که در صفحه Aria Role وجود داره مورد استفاده قرار میگیره. Properties در اکثر موارد رابطه بین المنتهارو مشخص میکنه و سعی کنید زمانی که این ویژگی رو مشخص کردید اونو تغییر ندید.

State بیشتر بصورت داینامیک هستند و محتوای اونا با استفاده از Javascript تغییر میکنه و متناسب با رفتارهای کاربر جهت میگیره. Screen Reader‌ها این تغییرات و بروزرسانی‌ها رو بسرعت متوجه میشن و به کاربران میفهمونن که چه تغییری در صفحه بوجود اومده. یعنی شما میتونین با استفاده از این Aria با کاربران سایتتون که از طریق Screen Reader سایت شما رو میبینن حرف بزنید.

چه زمانی از Aria استفاده کنیم

HTML بصورت ساده هم میتونه برای Screen Reader‌ها کاربرد داشته باشه اما با استفاده از Aria میتونین کارهای سختی که Screen Reader از پسشون بر نمیاد رو آسونتر کنید. برای مثال یک تب بندی پیچیده رو در نظر بگیرید که تقریبا هیچ کد HTML معناگرایی رو برای خودش نداره. شما میتونین با اضافه کردن [tag]role=”tablist”[/tag] و ویژگی‌های مرتبط دیگه اطلاعات جامع و مفیدی رو در اختیار Screen Reader‌ها قرار بدین.

مثالهایی از Aria

مثلا فرض کنید که یک منو در بالای سایتمون داریم که کاربر میتونه با استفاده از اون در سایتمون جابجا بشه. بهتره که بجای div برای این منو از nav که در HTML5 اضافه شده استفاده کنیم. اما با این وجود میشه با اضافه کردن یک role با مقدار navigation این منو رو برای Screen Reader‌ها بامعنی‌تر کرد:

<nav role="navigation">
  <ul>
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/contact">Contact Page</a>
    </li>
  </ul>
</nav>

یک مثال از کاربرد aria-labelledby:

<section aria-labelledby="KittensHeader">
  <h2 id="KittensHeader">All Abbout Kittens</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</section>

همونطور که دیدید یک ویژگی [tag]aria-labelledby[/tag] برای section قرار داده شده و در اون به عنصری که id اون برای با KittensHeader هست اشاره داره. اون عنصر یک تگ h2 هست. با اینکار Screen Reader زمانی که به این Section میرسه این تگ h2 رو به صوت تبدیل میکنه و کاربری که به این صوت گوش میده متوجه میشه که این h2 قسمتی از این section هست و عنوان اصلی اون هست.

در مثال آخر هم یک سیستم کنترل تب رو داریم که بصورت همزمان state و property و Role در اون قرار داده شده:

<ul role="tablist">
  <li>
    <a href="#first-tab" role="tab" aria-selected="true" aria-controls="first-tab">Panel 1</a>
  </li>
  <li>
    <a href="#second-tab" role="tab" aria-selected="false" aria-controls="second-tab">Panel 2</a>
  </li>
</ul>
<div id="first-tab" role="tabpanel"></div>
<div id="second-tab" role="tabpanel"></div>

میبینید که این المنتها رو به هم ربط دادیم و با اینکار Screen Reader براحتی معنای سیستم تب بندی مارو متوجه میشه.

لینکهای بدربخور در این موضوع:

periodic-aria-roles

html5accessibility

امیدوارم که از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

 
ارسال دیدگاه
ما همه سوالات و دیدگاه ها رو می خونیم و پاسخ میدیم
۲ دیدگاه
حسام ۰۴ اسفند ۱۳۹۸، ۱۹:۱۱
واقعا دمت گرم
تشکر ۱۵ مرداد ۱۳۹۸، ۱۲:۵۶
سلام دم شما گرم