ویژگی‌ها aria چیست ؟ و چه کاربردی دارد؟

شاید تا به حال لابه‌لای بعضی کدهای HTML متوجه ویژگی‌هایی که با aria شروع می‌شوند شده باشید. اما دقیقا این ویژگی‌ها (Attributes) چی هستند و چرا از اون‌ها استفاده می‌شه؟

ARIA سرواژه Accessible Rich Internet Applications است که امکان ساختن وب‌سایت‌ها و محتواهای قابل دسترسی به افراد دارای معلولیت را می‌دهد.

مفهوم ARIA تنها مختص HTML نیست و در بقیه زبان‌های Markup مانند SVG نیز می‌توان از آن استفاده کرد. در ادامه به این که دقیقا چطور باید از اتریبیوت‌های ARIA استفاده کرد می‌پردازیم.

در بحث ARIA می‌توان گفت که مهم‌ترین اتریبیوت، role است که دقیقا مشخص می‌کند وظیفه یک عنصر در این پرونده HTML چیست. یک تگ div می‌تواند با اهداف گوناگونی در صفحه استفاده شود برای مثال می‌تواند یک پنجره دیالوگ، اسلاید، محتوای تب و … باشد.

با مثال tab شروع می‌کنیم:

همون‌طور که از کد مشخصه، role=tablist مشخص‌کننده‌ی لیستی از عناوین تب هست که ما معمولا به اون «منو» هم می‌گیم. آیتم‌های هر تب هم اتریبیوت rol=tab دارند و در مورد پنل هر تب هم role=tabpanel وجود دارد که در اصل نشان‌دهنده محتوای تب‌هاست.

حالا دقیقا این roleها به چه دردی می‌خورند؟

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

Description, Tab 1 of 2

Price, Tab 2 of 2

به این ترتیب کاربر متوجه نقش هر عنصری که به آن می‌رسد خواهد شد. برای درک بهتر پیشنهاد میکنم این ویدئو رو تماشا کنید. ویدئوی یک مثال از نقشه آفریقاست که با SVG ساخته شد و سورس اصلی رو از اینجا میتونید دریافت کنید.

برای آشنایی بیش‌تر با ARIA مطالعه این مطلب در MDN را پیشنهاد می‌کنم.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

محمد محبی‌فر

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

همچنین ممکن است دوست داشته باشید ...

۵ واکنش

  1. طه گفت:

    سلام. خیلی جالب بود، ممنون!

  2. درود فراوان و سپاس که یکی از مجهولترین سوالات زندگی من رو پاسخ دادید!!
    چند سالی هست که با arya آشنا شدم و می دونستم برای معلولین هست. اما نتونستم درک کنم کاربردش واقعا کجاست.
    الان با خوندن این مطلب فهمیدم.
    سپاسگزارم.

  3. مازیار دانیالی گفت:

    عالی بود.
    تشکر

  4. آرمیشا گفت:

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

  5. قیصر گفت:

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *