کاربرد aria- attributes چیه؟
سوال جدیدکاربرد این نوع اتریبیوت ها چیه؟
aria-hidden="true"
aria-label="Close"
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
این ویژگی ها به قابلیت دسترسی پذیری وب web accessibility مربوط می شوند.
ARIA که مخفف Accessible Rich Internet Applications می باشد ( برنامه هایی اینترنتی غنی با قابلیت دسترسی پذیری) مجموعه ای از خصوصیات است که برای دسترسی بهتر به وب سایت ها و محتوای وب برای افرادی که دچار ناتوانی هستند و از ابزار های کمکی مثل صفحه خوان ها ( screen readers) استفاده می کنند، امکاناتی را فراهم می کند.( این مطلب برای اشنایی بیشتر پیشنهاد می شود )
خصوصیت “aria-hidden= “true : وقتی یک عنصری چنین ویژگی دارد در واقع از دید ابزارهای کمک دسترسی معلولین مثل صفحه خوان ها مخفی می ماند، اگر چه از نظر نمایش در مرورگر قابل مشاهده می باشد.
این ویژگی معمولا برای آیتم هایی به کار می رود که بیشتر جنبه نمایشی و بصری دارند و بار معنایی چندانی ندارند مثل آیکن ها. در واقع این خصوصیت به ابزارهای کمکی این اجازه را می دهد که وجود یک عنصر ( یا فرزندان آن عنصر) را نادیده بگیرند و از انتقال اطلاعاتی که معنایی برای کاربری که از ابزار کمکی استفاده می کند ندارد، جلوگیری به عمل آید.
خصوصیت aria-label به کاربر اطلاعات اضافه در مورد عنصر می دهد و در واقع عنصر را با یک برچسب معرفی می کند. و بین عنصر و برچسب آن ارتباط ایجاد می‌کند تا کاربرد و هدف عنصر بهتر مشخص شود. معمولا استفاده از این ویژگی برای عناصری که برچسب متنی قابل مشاهده ای ندارند که آنها را توصیف کند، توصیه می شود.
برای مثال، در مورد کدی که نوشتین: یک دکمه بستن معمولی است که فقط با یک علامت x مشخص شده است بدون هیچ متن و نشانه ای که مشخص کند کاربرد آن چیست.( البته علامت x در اینجا برای کاربران عادی، علامت بستن می باشد و کاربرد دکمه قابل تشخیص است، اما برای افرادی که از صفحه خوان استفاده می کنند، شاید هیچ مفهومی نداشته باشد)
در اینجا “aria-label=”close با ارتباط برچسب close به عنصر button ، به کاربرد آن که همان دکمه بستن است، اشاره می کند. بنابراین از نظر قابلیت دسترسی پذیری برای افرادی که از صفحه خوان استفاده می کنند، چنین ویژگی باید لحاظ شود تا کاربرد دکمه قابل تشخیص باشد.
و در مورد تگ span که برای علامت x در نظر گرفته شده، ویژگی “aria-hidden= “true آنرا از ابزارهای کمک دسترسی مخفی می کند و به آنها این اجازه را می دهد که آنرا در نظر نگیرند. ( در نتیجه فردی که در حال استفاده از این ابزارهاست درگیر اطلاعات اضافه و گیج کننده که برایش مفهومی ندارد، نمی شود )
