شاید تا به حال لابه‌لای بعضی کدهای HTML متوجه ویژگی‌هایی که با aria شروع می‌شوند شده باشید. اما دقیقا این ویژگی‌ها (Attributes) چی هستند و چرا از اونها استفاده می‌شه؟
ARIA سرواژه Accessible Rich Internet Applications است که امکان ساختن وب‌سایت‌ها و محتواهای قابل دسترسی به افراد دارای معلولیت را می‌دهد.
مفهوم ARIA تنها مختص HTML نیست و در بقیه زبان‌های Markup مانند SVG نیز می‌توان از آن استفاده کرد. در ادامه به این که دقیقا چطور باید از اتریبیوت‌های ARIA استفاده کرد می‌پردازیم.
در بحث ARIA می‌توان گفت که مهم‌ترین اتریبیوت، role است که دقیقا مشخص می‌کند وظیفه یک عنصر در این پرونده HTML چیست. یک تگ div می‌تواند با اهداف گوناگونی در صفحه استفاده شود برای مثال می‌تواند یک پنجره دیالوگ، اسلاید، محتوای تب و … باشد.
با مثال tab شروع می‌کنیم:
<ul class="tablist" role="tablist"> <li id="tab1" class="tab" role="tab" ...>Description</li> <li id="tab2" class="tab" role="tab" ...>Price</li> </ul> <div id="panel1" class="panel" role="tabpanel" ...> Description Content </div> <div id="panel2" class="panel" role="tabpanel" ...> Price Content </div>
همون‌طور که از کد مشخصه، `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
سلام. خیلی جالب بود، ممنون!
درود فراوان و سپاس که یکی از مجهولترین سوالات زندگی من رو پاسخ دادید!!
چند سالی هست که با arya آشنا شدم و می دونستم برای معلولین هست. اما نتونستم درک کنم کاربردش واقعا کجاست.
الان با خوندن این مطلب فهمیدم.
سپاسگزارم.
عالی بود.
تشکر
خیلی فوق العادست که وب رو برای این دسته از کاربران گرانقدر خودمون کاربردی تر کنیم و اونها قادر باشند به صورت مستقل استفاده بیشتری از وب ببرند .
عالی بود
سلام
تشکر از اینکه علم خودتون رو به اشتراک میگذارید.
با آرزوی توفیق روزافزون برای شما
عالی بود .ممنون میشم راجع به دسترسی پذیری وب برای افراد نابینا مطلب بگذارید.