aria attributes چیست ؟ بررسی کاربرد Aria در BootStrap و html5

کاربرد اصلی اتربیوت آریا aria attributes این است که به عناصر HTML معنای قابل درک تری برای فناوری های کمکی مانند صفحه خوان ها می‌دهند. این ویژگی ها به کاربرانی دارای ناتوانی های بینایی، حرکتی یا شناختی هستند کمک می کنند تا بهتر با اجزای تعاملی و پیچیده صفحات وب ارتباط برقرار کنند. با استفاده از ARIA در طراحی سایت می توان وضعیت اجزا مانند باز یا بسته بودن، فعال یا غیرفعال بودن، نوع آن ها مثل دکمه یا تب، و ارتباطشان با دیگر عناصر را به طور دقیق مشخص کرد.

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

aria attributes چیست؟

ویژگی آریا ARIA مخفف Accessible Rich Internet Applications است و مجموعه ای از ویژگی هایی است که می توانید به تگ های HTML اضافه کنید تا افراد دارای معلولیت بتوانند با کمک فناوری های کمکی at به محتوای وب سایت و برنامه ها ی شما دسترسی داشته باشند. بدون وجود آریا دسترسی به محتوای سایت برای افراد با شرایط خاص امکان پذیر نیست.

اجزا اصلی aria attributes

اتربیوت ARIA از سه جزء اصلی تشکیل شده است: نقش ها، حالت ها و ویژگی‌ها.

نقش ها در aria attributes

نقش ها role در aria attributes برای مشخص کردن نوع عنصر رابط کاربری UI به کار می روند، مانند role="button". وقتی نقشی به عنصری اختصاص داده می شود، تغییر نمی کند.

نقش های انتزاعی

نقش های انتزاعی که پایه و اساس نقش های دیگر هستند و توسط مرورگرها استفاده می شوند، ولی نباید مستقیماً در کد به کار روند. این نقش ها در پس زمینه فعالیت می کنند و برای افزودن معنا به نقش های دیگر کاربرد دارند.

نقش های ساختار سند Document structure

نقش های ساختار سند Document structure سند معمولاً تعاملی نیستند، بلکه توضیحاتی برای بخش‌های درون یک صفحه ارائه می‌دهند. مثال های رایج نقش های ساختار سند شامل موارد زیر است:

• img (تصویر)
• document (سند)
• heading (عنوان)
• list (فهرست)
• listitem (آیتم فهرست)
• toolbar (نوارابزار) با نقش role="toolbar"

کاربران فناوری های کمکی (AT) از نقش Document structure برای شناسایی و درک ساختار محتوا هنگام پیمایش صفحه استفاده می کند. این موضوع به آنها کمک می‌کند تا بهتر بفهمند محتوای صفحه در چه زمینه ای قرار دارد. هرچند HTML5 بخش زیادی از این ساختار را ارائه می دهد، اما گاهی پشتیبانی صفحه خوان‌ها از HTML5 کامل نیست. بنابراین، بهترین روش استفاده همزمان از نقش های ساختار سند ARIA و عناصر HTML5 است تا دسترسی پذیری بهینه فراهم شود.

نقش های برجسته یا لندمارک رول Landmark roles

نقش های برجسته یا لندمارک رول Landmark roles قسمت ها مهم صفحه را مشخص میکنند تا کاربران بتوانند راحت تر صفحه را پیمایش کنند. بخش هایی از سایت مثل banner، contentinfo، form، main navigation و search .

نقش های ویجت

نقش های ویجت به عناصر و بخش های رابط کاربری معنا می دهند که در HTML به‌طور مستقیم تعریف نشده‌اند. ویجت های مستقل شامل مواردی مانند هشدار (alert)، دکمه (button)، کادر انتخاب (checkbox)، لینک (link)، آیتم منو (menuitem)، تب (tab) و پنل تب (tabpanel) هستند. همچنین ویجت‌های ترکیبی مثل کادر ترکیبی (combobox)، جدول (grid)، جعبه لیست (listbox)، منو (menu)، گروه رادیویی (radiogroup) و لیست تب‌ها (tablist) وجود دارند. کاربران فناوری‌های کمکی (AT) با این نقش‌ها تعامل می‌کنند، مثلاً برای پر کردن فرم‌ها، باز و بسته کردن تب‌ها یا پیمایش منوها.

حالت ها و ویژگی ها در آریا aria

حالت ها و ویژگی های که به تگ های html اضافه می شوند برای پشتیبانی از نقش های ARIA کاربرد دارند. حالت ها معمولاً با تعامل کاربر تغییر می کنند مثل aria-checked و aria-disabled و ویژگی ها معمولاً ثابت هستند مثل aria-labelledby و aria-describedby. در ادامه هر کدام مثال های رایج ویژگی های ARIA را بررسی میکنیم.

اتربیوت aria-describedby

اتربیوت aria-describedby به یک عنصر دیگر اشاره می کند که توضیح بیشتری درباره آن عنصر ارائه می‌دهد. برای مثال، اگر یک دکمه توضیح خاصی دارد، با استفاده از aria-describedby می‌توان آن توضیح را به صفحه خوان ها معرفی کرد تا کاربر بهتر بفهمد این دکمه چه کاری انجام می‌دهد.

اتربیوت aria-haspopup

اتربیوت aria-haspopup نشان میدهد که یک تگی ، یک دکمه یا منو، یک منوی کشویی یا پنجره پاپ آپ مرتبط دارد. این ویژگی به صفحه خوان اطلاع می دهد که با انتخاب این عنصر، یک منوی اضافی یا محتوا باز می شود.

اتربیوت aria-hidden

اتربیوت aria-hidden مشخص می کند که یک عنصر باید برای فناوری های کمکی مثل صفحه خوان ها مخفی باشد. یعنی اگر aria-hidden="true" تنظیم شود، آن عنصر توسط صفحه خوان ها خوانده نمی شود و از نظر دسترسی نادیده گرفته می‌شود.

اتربیوت aria-label

اتربیوت aria-label یک برچسب متنی واضح و کوتاه برای یک عنصر تعریف می کند که توسط صفحه خوان ها خوانده می‌شود. وقتی یک عنصر بصری واضح نیست یا متن قابل مشاهده ندارد، aria-label به عنوان توضیح یا نام آن عمل می‌کند.

چه زمانی نباید از ARIA استفاده کنم؟

چه زمانی نباید از ARIA استفاده کنم؟ پاسخ این سوال را سازمان W3C با مشخص کردن 5 قانون داده است. این قوانین به ما کمک کند تا بدانیم در چه شرایطی نباید از ARIA استفاده کنیم.

قانون اول: همیشه از HTML استفاده کنید.

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

قانون دوم: معانی عناصر HTML را تغییر ندهید.

تغییر نقش یا عملکرد یک تگHTML استاندارد بدون دلیل درست، اشتباه است. به عنوان مثال، برای دکمه ها به جای استفاده از یک تگ span با نقش دکمه، بهتر است از تگ button استفاده کنید تا همه امکانات تعاملی مثل فعال سازی با صفحه‌کلید به درستی کار کند.

قانون سوم: همه کنترل های تعاملی ARIA باید با صفحه کلید قابل دسترسی باشند.

تمام عناصر تعاملی که توسط ARIA ساخته می شوند باید قابل دسترسی با کیبورد باشند. اگر عنصری به طور پیش فرض قابلیت دریافت فوکوس صفحه کلید را ندارد، باید با استفاده از tabindex="0" آن را قابل دسترسی کنید. اما هرگز از عدد مثبت برای tabindex استفاده نکنید چون باعث برهم خوردن ترتیب منطقی تب ها و سردرگمی کاربران می‌شود.

قانون چهارم: از ترکیب role="presentation" و aria-hidden="true" روی عناصر قابل فوکوس استفاده نکنید.

نباید به عناصری که می توانند فوکوس صفحه کلید بگیرند، ویژگی aria-hidden="true" یا نقش presentation بدهید. این کار باعث می‌شود کاربران صفحه کلید روی عناصری فوکوس کنند که برای آنها قابل استفاده نیستند و باعث سردرگمی می شود. این شامل لینک ها، عناصر فرم و هر عنصری که tabindex="0" داشته باشد، می شود.

قانون پنجم: به همه عناصر تعاملی نام قابل دسترس بدهید

هر عنصر تعاملی باید یک نام قابل خواندن توسط فناوری‌های کمکی داشته باشد. این نام می تواند با استفاده از تگ یا ویژگی aria-label مشخص شود.

این قوانین کمک می‌کنند تا وب‌سایت‌ها و برنامه‌ها به بهترین شکل برای همه کاربران، از جمله کسانی که نیاز به فناوری‌های کمکی دارند، قابل استفاده باشند. همیشه ابتدا از امکانات بومی HTML استفاده کنید و تنها وقتی واقعاً لازم است، ARIA را به کار ببرید.

آریا برای چه کسانی مناسب است؟

آریا aria-expanded بیشتر برای افرادی طراحی شده که در استفاده از وب و مطالعه سایت ها با محدودیت های فیزیکی یا حسی روبه رو هستند. دو گروه اصلی از کاربران که بیشترین استفاده را از ARIA دارند :

• افراد نابینا یا کم بینا که از صفحه خوان (Screen Reader) استفاده می‌کنند.
• افرادی که نمی توانند از ماوس استفاده کنند و باید فقط با صفحه کلید با سایت تعامل داشته باشند. این افراد معمولاً دارای ناتوانی های حرکتی، لرزش دست، یا قطع عضو هستند و فقط با صفحه کلید یا ابزارهای کمکی مثل سوییچ و ردیاب چشم با سایت تعامل دارند.

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

سازمان W3C در صفحه‌ی رسمی WAI-ARIA خودش، به‌طور مفصل هدف ARIA و مشکلاتی که حل می‌کند را توضیح داده و مشخص کرده چرا برای دسترسی پذیر بودن وب سایت وجودش ضروری است.

چه فناوری هایی از aria پشتیبانی می کنند ؟

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

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

ARIA و HTML5

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

1. اول ببینید سایت شما روی کدام مرورگرها و دستگاه‌ها کار می‌کند.
2. بعد وضعیت پشتیبانی این عناصر را با کمک منابعی مثل سایت «Can I Use»، مستندات MDN و ابزارهای تست دسترسی مثل Power Mapper مقایسه کنید.
3. همچنین بهتر است بررسی کنید که صفحه خوان هایی مثل JAWS چطوری نقش های ARIA را پشتیبانی می کنند.

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

استفاده از ARIA برای چه مواردی ضروری است؟

استفاده از ARIA زمانی ضروری است که المان‌های HTML به‌تنهایی اطلاعات کافی برای تکنولوژی‌های کمکی مثل صفحه‌خوان‌ها فراهم نکنند. مثل :
ساخت کامپوننت های سفارشی مثل اسلایدر، تب، مودال با جاوااسکریپت که معادل HTML بومی ندارند.
افزودن اطلاعات کمکی مثل وضعیت، نقش، رابطه بین اجزا برای دسترسی پذیری بهتر.
زمانی که نیاز دارید وضعیت‌های داینامیک را به کاربران دارای ناتوانی اطلاع دهید مثل باز یا بسته بودن منو.

مزایای استفاده ARIA چیست؟

ARIA کمک می‌کند رابط های کاربری پیچیده در وب برای افراد دارای ناتوانی نیز قابل استفاده باشد، به ویژه کسانی که از تکنولوژی های کمکی مانند صفحه‌خوان screen reader استفاده می‌کنند. این ویژگی به توسعه دهندگان امکان می‌دهد وضعیت اجزای رابط مانند "فعال یا غیرفعال بودن"، "انتخاب شده یا نشده بودن" و "باز یا بسته بودن منو ها" را به‌طور واضح به کاربر اطلاع دهند. با استفاده از ARIA، دسترس پذیری برای همه کاربران افزایش می یابد و تجربه کاربری برای افرادی با اختلالات بینایی، حرکتی یا شناختی نیز به شکل قابل توجهی بهبود پیدا می‌کند.

کاربرد ویژگی aria-expanded چیست؟

ویژگی aria-expanded مشخص می‌کند که عنصر قابل گسترش مثل منو، دراپ داون، آکاردئون در حال حاضر باز است یا بسته. مقدار trueیعنی منو باز شده و مقدار falseیعنی منو بسته است.

ویژگی aria-hidden پنهان ARIA چه کاری انجام می‌دهد؟

ویژگی aria-hidden=true باعث می‌شود که یک عنصر از دسترس تکنولوژی های کمکی خارج شود، حتی اگر در صفحه قابل مشاهده باشد. مثل پنهان کردن اطلاعات تزئینی یا تکراری از screen reader یا جلوگیری از خوانده شدن المان هایی که برای همه کاربران لازم نیستند.

جمع بندی

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