برچسب ها و روابط ARIA

استفاده از برچسب های ARIA برای ایجاد توضیحات عناصر در دسترس

Alice Boxhall

Dave Gash

Meggin Kearney

برچسب ها

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

برچسب آریا

aria-label به ما امکان می دهد رشته ای را برای استفاده به عنوان برچسب قابل دسترسی مشخص کنیم. این هر مکانیسم برچسب‌گذاری بومی دیگری، مانند عنصر label را لغو می‌کند - برای مثال، اگر یک button دارای محتوای متنی و aria-label باشد، فقط از مقدار aria-label استفاده می‌شود.

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

aria-labelledby

aria-labelledby به ما اجازه می دهد شناسه عنصر دیگری را در DOM به عنوان برچسب یک عنصر مشخص کنیم.

این بسیار شبیه به استفاده از یک عنصر label است، با برخی تفاوت های کلیدی.

1. aria-labelledby ممکن است روی هر عنصری استفاده شود، نه فقط عناصر برچسب‌پذیر.
2. در حالی که یک عنصر label به چیزی که برچسب گذاری می کند اشاره دارد، این رابطه در مورد aria-labelledby معکوس می شود - چیزی که برچسب گذاری می شود به چیزی اشاره دارد که آن را برچسب گذاری می کند.
3. فقط یک عنصر برچسب ممکن است با یک عنصر برچسب‌پذیر مرتبط باشد، اما aria-labelledby می‌تواند فهرستی از IDREFها را برای ایجاد یک برچسب از چندین عنصر بگیرد. برچسب به ترتیبی که IDREF ها ارائه می شوند به هم متصل می شوند.
4. می‌توانید از aria-labelledby برای اشاره به عناصری استفاده کنید که پنهان هستند و در غیر این صورت در درخت دسترسی نبودند. برای مثال، می‌توانید در کنار عنصری که می‌خواهید برچسب‌گذاری کنید، یک span پنهان اضافه کنید و با aria-labelledby به آن اشاره کنید.
5. با این حال، از آنجایی که ARIA فقط درخت دسترسی را تحت تأثیر قرار می دهد، aria-labelledby رفتار آشنایی با کلیک روی برچسب را که از استفاده از عنصر label دریافت می کنید، به شما ارائه نمی دهد.

نکته مهم، aria-labelledby همه منابع نام دیگر را برای یک عنصر لغو می کند. بنابراین، برای مثال، اگر یک عنصر دارای هر دو aria-labelledby و aria-label ، یا aria-labelledby و label HTML بومی باشد، برچسب aria-labelledby همیشه اولویت دارد.

روابط

aria-labelledby نمونه ای از یک ویژگی رابطه است. یک ویژگی رابطه یک رابطه معنایی بین عناصر موجود در صفحه بدون توجه به رابطه DOM آنها ایجاد می کند. در مورد aria-labelledby ، آن رابطه عبارت است از "این عنصر توسط آن عنصر برچسب گذاری شده است".

مشخصات ARIA هشت ویژگی رابطه را فهرست می کند. شش مورد از اینها، aria-activedescendant ، aria-controls ، aria-describedby ، aria-labelledby ، و aria-owns ، ارجاع به یک یا چند عنصر برای ایجاد یک پیوند جدید بین عناصر در صفحه دارند. تفاوت در هر مورد در معنای آن لینک و نحوه ارائه آن به کاربران است.

آریا مالک است

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

aria-activedescendant

aria-activedescendant نقش مرتبطی دارد. همانطور که عنصر فعال یک صفحه، عنصری است که فوکوس دارد، تنظیم نوادگان فعال یک عنصر به ما امکان می‌دهد به فناوری کمکی بگوییم که یک عنصر باید به عنوان عنصر متمرکز به کاربر ارائه شود، زمانی که والد آن واقعاً فوکوس را داشته باشد. به عنوان مثال، در یک لیست باکس، ممکن است بخواهید فوکوس صفحه را روی ظرف فهرست باکس رها کنید، اما ویژگی aria-activedescendant آن را به آیتم فهرست انتخاب شده فعلی به روز نگه دارید. این امر باعث می‌شود که آیتم انتخاب‌شده در حال حاضر برای فناوری کمکی به نظر برسد که گویی مورد متمرکز شده است.

aria-describedby

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

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

aria-posinset & aria-setsize

ویژگی های رابطه باقی مانده کمی متفاوت هستند و با هم کار می کنند. aria-posinset ("موقعیت در مجموعه") و aria-setsize ("اندازه مجموعه") در مورد تعریف رابطه بین عناصر خواهر و برادر در یک مجموعه هستند، مانند یک لیست.

هنگامی که اندازه یک مجموعه را نمی توان با عناصر موجود در DOM تعیین کرد - مانند زمانی که از رندر تنبل برای جلوگیری از داشتن یک لیست بزرگ در DOM به یکباره استفاده می شود - aria-setsize می تواند اندازه مجموعه واقعی و aria-posinset را مشخص کند. aria-posinset می تواند موقعیت عنصر را در مجموعه مشخص کند. به عنوان مثال، در مجموعه‌ای که ممکن است شامل 1000 عنصر باشد، می‌توانید بگویید که یک عنصر خاص دارای aria-posinset برابر با 857 است، حتی اگر ابتدا در DOM ظاهر شود، و سپس از تکنیک‌های HTML پویا استفاده کنید تا اطمینان حاصل کنید که کاربر می‌تواند کامل را کاوش کند. لیست درخواستی