WAI-Aria: انقلاب نامرئی وب قابل دسترس

Summarize this content to 400 words in Persian Lang

درک دسترسی به وب از طریق WAI-ARIA

مقدمه

در مورد چیست؟

WAI-ARIA مجموعه ای از مقررات آیین نامه ساختمانی است از یک وب سایت که هدف آن دستیابی به دسترسی بیشتر است.

ویژگی های اضافی HTML را تعریف می کند، که می تواند روی عناصر اعمال شود امکان دسترسی را در جایی که فاقد آن است فراهم کند با کد پایه

درک معنی

WAI-ARIA به گسترش معنای تعاملات وب سایت شما کمک می کند. وقتی تگ های HTML5 آمدند، از قبل شروع شده بودند یک کار مهم برای معنا بخشیدن به ساختارهای چیدمان.

میتونی الان رزرو کنی منوی ناوبری، نوار کناری، هدر، پاورقی و غیره چیست.. این کار بسیار مهم است زیرا کمک می کند اهمیت عناصری که هر عنصر شامل آن است را تعریف کنید.

با همه اینها، معیار WAI-ARIA تبدیل به انقلابی برای جهانی شدن وب و در نتیجه دسترسی بیشتر می شود.

با این حال، آن را گسترده نیست و توسط بسیاری از توسعه دهندگان بسیار کمتر شناخته شده است، که آن را در دنیای فناوری نامرئی می کند و مستقیماً بر نحوه ساخت برنامه های وب تأثیر می گذارد.

بنابراین، ما به عنوان توسعه‌دهندگان باید در هنگام ایجاد هر سرویس، به کاربران به عنوان یک تمرکز فکر کنیم، j*دسترسی فراتر از حصول اطمینان از اینکه افراد دارای معلولیت می توانند به سیستم دسترسی داشته باشند، اما در مورد هر کسی که بتواند از آن استفاده کند فراتر است*.

اکنون در بخش گنجاندن به نحوه تبدیل وب برای افراد دارای معلولیت اشاره کردیم.

چه کسی WAI-ARIA را توسعه می دهد؟

مدارک فنی آریا-آب توسط قابل دسترس کارگروه برنامه های کاربردی اینترنت غنی (ARIA WG) که بخشی از جهان است کنسرسیوم وب گسترده (W3C) ابتکار دسترسی به وب (آب).

Usando WAI-ARIA

شیوه‌هایی که ما در WAI-ARIA داریم به بسیاری از آنها گسترش می‌یابد تا WWW (وب جهانی) قابل دسترسی باشد.

در داخل این اکوسیستم می‌توانیم مواردی مانند:

محتوا را کارآمد بسازید قابل خواندن توسط صفحه خوان ها:

تصویر Etec توسط فرانسیسکو موراتو بالا

تصویر Etec توسط Francisco Morato بخشی از منوی فعال شده است

عناصر خاصی در وب سایت ها همیشه توسط صفحه خوان ها شناسایی نمی شوند. استفاده از صفحه خوان برای افراد کم بینا را دشوار می کند.

عناصری را در کد اختصاص دهید و مشخص کنید هر قسمت چیست:

role=”arvore”>
role=”itensDaArvore”>
Frutas

role=”grupo”>
role=”fruta”>
Maças

role=”fruta”>
Bananas

role=”fruta”>
Laranjas

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ویژگی های WAI-ARIA در یک کد استفاده می شود تا آن را قابل درک تر و در نتیجه قابل دسترسی تر کند.

با استفاده از HTML معنایی، با ورود آن، W3C به جستجوی وب روی می آورد بر خلاف قبل به محتوا معنا دهید، زیرا تمرکز فقط ساخت محتوا و نمایش عناصر بود.
در HTML5، معیارهایی برای داده شده است محتوا را بر اساس معانی بسازید، یعنی وب سایت خود را با معناشناسی بنویسید.

تصویر نشان‌دهنده بلوک‌های علامت‌گذاری منسوخ در سمت چپ با استفاده از div برای همه چیز. روش فعلی که در آن از عناصر معنایی استفاده می شود

استفاده از بلوک های برچسب جدید مانند: سرصفحه، اصلی، پاورقی، بخش، مقاله، نوار کناری، hgroup، h1 a h6، شکل، thead، tbody، tfooter، entre outras چندین مورد که اکنون به دنبال معنی دادن به آنچه روی صفحه است برای به دست آوردن معیارهای بهتر در موارد زیر هستند: سئو و برای مثال در مورد صفحه خوان ها.

سپس استفاده از div فقط گروه بندی عناصری که نیاز به معنا ندارند ضروری می شود.

راه حل های فنی

آریا-آب چارچوبی برای افزودن ویژگی ها برای شناسایی منابع برای تعامل با کاربر، نحوه ارتباط آنها با یکدیگر و وضعیت فعلی آنها فراهم می کند.

WAI-ARIA تکنیک های ناوبری را برای علامت گذاری مناطق و ساختارهای وب رایج توصیف می کند مانند منوها، محتوای اولیه، محتوای ثانویه، اطلاعات بنر و انواع دیگر ساختارهای وب.

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

انطباقات WAI-ARIA در مورد چیست؟

بخش ها را تعریف کنید هنجارها ه اطلاعات از مشخصات

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

بخش های اطلاعاتی اطلاعات مفیدی را برای درک مشخصات ارائه می دهند. از آنجایی که آنها آنها می توانند دنبال کنید

دستورالعمل استانداردها

همه WAI-ARIA در DOM:قوانین WAI-ARIA را ترک کنید هنگام دستکاری DOM
اطلاعیه های فناوری کمکی ارتباطی برای برنامه های کاربردی وب:استفاده از اعلان‌های فناوری‌های کمکی ارتباطی در برنامه‌های کاربردی وب، یعنی استفاده از WAI-ARIA به این معنی است که برنامه وب کاربر را تماشا کند و به او اطلاع دهد.
بررسی کننده های انطباق:این عوامل یا نرم افزار هستند که بررسی می کنند آیا برنامه وب از انطباق (قوانین) WAI-ARIA پیروی می کند یا خیر.
الزامات منسوخ شده:تجزیه و تحلیل نیازمندی هایی که مستهلک می شوند (عدم استفاده)، اینها الزاماتی هستند که دیگر مورد استفاده قرار نمی گیرند، زیرا آنها مورد بهتری دارند که در برخی موارد جایگزین آن می شود.

نمونه ای از استفاده از انطباق ها

نمونه Tablist

در این مثال، هنگام ایجاد این Tablist اصلی که به صورت معنایی و طبق قوانین WAI-ARI ایجاد شده است، یعنی از ویژگی های زیر استفاده شده است. آریا (انتخاب شده، کنترل ها)، برچسب زدن، شناسه، نقش، کلاس، برچسب های معنایی که با معنایی، کمکی و فراگیر کردن وب همراه هستند.

WAI-ARIA معناشناسی را به دو بخش تقسیم می کند:

نقش ها، که تعریف می کند – کاربر با چه نوع عنصری در تعامل است.
State/Properties – که توسط Roles پشتیبانی می شوند که وضعیت آن عنصر را تعریف می کنند.

الف نقش شما این را می گویید عنصر معین الف است فروپاشی

با ایالت ها/خواص شما نشان می دهد که آیا این فروپاشی باز است یا بسته.

تعریف شده است مستقیم در عنصر، یا از طریق ویژگی ها.

نمونه ای از فروپاشی:

نمونه جمع کن

در مثال Collapse ما یک عنصر والد داریم که حاوی کل Collapse است که یک ظرف است، ما مواردی را داریم که حاوی محتوای مربوطه هستند.

اگر متوجه شدید، Collapse چیزی نیست جز لیستی که در آن کاربر می تواند اقدامات باز کردن یا بستن Collapse را انجام دهد.

پس به دو کلمه اصلی این پاراگراف توجه کنید: عنصر ه اقدامات. همانطور که قبلا ذکر شد:

نقش – می گوید که عنصر چیست.

State/Properties – برای مثال، وضعیتی را که آن عنصر در آن قرار دارد، بر اساس برخی اقدامات انجام شده از طریق ویژگی ها تعریف کنید.

نقش ها

هر نقش است مسئول یک ژانر عنصر معین.

انواع:

ابزارک ها
ساختار سند
نقاط دیدنی

ابزارک ها

ویجت‌هایی برای علامت‌گذاری عناصر رابط شل، مانند جعبه‌های هشدار، دکمه‌ها، چک باکس‌ها، پیوندها، برگه‌ها و غیره.

مثال ها:

option
progressbar
radio
searchbox
tabpanel
textbox

ساختار سند

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

مثال ها:

heading
figure
table
presentation
img
article

نقاط دیدنی

نقاط دیدنی پاراگراف مناطق صفحه که نقاط مهمی هستند که کاربر می‌تواند در آنها پیمایش کند.

مثال ها:

banner
complementary
contentinfo
navigation
form
region

ایالات و خواص

شما می توانید از این خواص استفاده کنید اطلاع دهید که آیا یک عنصر خاص پنهان یا قابل مشاهده است برای کاربر، اطلاعات متنی را ارائه دهید یا حتی عناصر بصری غیر ضروری را پنهان کنید.

به دو مورد از آنها خواهیم پرداخت:

آریا پنهان

استفاده از aria-hidden

در مثال بالا، پیوند دارای نمادی با فقط یک معنای بصریاز آنجایی که اطلاعات مهم در متن موجود است.

بنابراین، aria-hidden=”true علل صفحه خوان ها این عنصر را نادیده می گیرند.

برچسب آریا

برای استفاده می شود در صورتی که متن روی صفحه در دسترس نباشد، اطلاعاتی در مورد عنصر ارائه دهید.دوباره یک مثال با یک نماد:

Uso do aria-label

به جای استفاده از aria-hidden=”true”، برای اطلاع از معنی نماد از برچسب aria استفاده می کنیم.

نمونه های استفاده – WAI-ARIA

اجزای CSS خالص (felipefialho.com)

آکاردئون

تصویر آکاردئون نمونه با استفاده از WAI-ARIA

کشویی

تصویر یک نمونه کشویی با استفاده از WAI-ARIA

راهنمای ابزار

تصویر یک نمونه راهنمای ابزار با استفاده از WAI-ARIA

منابع

 role="arvore">
   
 role="itensDaArvore">
     Frutas

     
 role="grupo">
       
 role="fruta">
         Maças
       

       
 role="fruta">
         Bananas
       

       
 role="fruta">
         Laranjas