• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

شروع کار با ARIA در HTML

0 444 ۲۹ آبان ۹۴

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 بصورت role="<ROLE TYPE>" اضافه میشه و به محضی که برای یه المنت این ویژگی رو مشخص کردیم امکان اینکه تغییرش بدین وجود نداره. چهار دسته کلی برای 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 معناگرایی رو برای خودش نداره. شما میتونین با اضافه کردن role="tablist" و ویژگی های مرتبط دیگه اطلاعات جامع و مفیدی رو در اختیار Screen Reader ها قرار بدین.

مثالهایی از Aria

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

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

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

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

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

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

periodic-aria-roles

html5accessibility

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

موفق باشید

یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram