برنامه نویسی

ویژگی نقش HTML ARIA – یک جدول پرس و جو کتابخانه آزمایشی مناسب

سال 2023 است و روند خوبی در استفاده وجود دارد testing-library و آن ...ByRole پرس و جو.
من کاملاً از این طریق پرس و جو عناصر را دوست دارم، اما صادقانه بگویم، گاهی اوقات کاملاً مشخص نیست که در صورت وجود چه نقشی در مؤلفه های خود دارید.
بنابراین فکر کردم یک پست کوچک در مورد آن بنویسم و ​​یک برگه تقلب برای رایج ترین نقش ها قرار دهم.

ویژگی نقش HTML ARIA توضیح داده شده است

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

برگه تقلب

نقش‌های پیش‌فرض عناصر HTML در جدول زیر فهرست شده‌اند.

لطفا توجه داشته باشید که نمونه هایی که دارند role ویژگی تعریف شده انجام دادن به آن ویژگی ها نیاز دارد. مثلا، will not work without `role="radiogroup"`, even though it's more semantically correct than say.

نقش شرح برچسب بزنید دسته بندی مثال
عنوان این عنصر را به عنوان عنوان یک صفحه یا بخش تعریف می کند h1..h6 ساختار سند

دکمه یک عنصر قابل کلیک دکمه ویجت <دکمه>
ارتباط دادن فقط با href صفت، در غیر این صورت generic آ ویجت
img یک تصویر img ساختار سند تصویر placeholder
فهرست لیستی از موارد ul،اول،منو ساختار سند
    فهرست یک مورد در یک لیست لی ساختار سند
  • جداکننده تقسیم‌کننده‌ای که بخش‌هایی از محتوا یا گروه‌ها را جدا و متمایز می‌کند ساعت ساختار سند
    اصلی محتوای اصلی صفحه اصلی نقطه عطف
    جهت یابی مجموعه ای از عناصر ناوبری (معمولاً پیوندها) برای پیمایش در سند یا اسناد مرتبط ناوبری نقطه عطف
    مکمل بخش پشتیبان سند، طراحی شده تا مکمل محتوای اصلی در سطح مشابهی در سلسله مراتب DOM باشد، اما زمانی که از محتوای اصلی جدا شود، معنادار باقی می ماند. گذشته از نقطه عطف
    اطلاعات محتوا پاورقی برای نزدیکترین محتوای برش یا عنصر ریشه برش پاورقی نقطه عطف
    فرم منطقه ای که شامل مجموعه ای از آیتم ها و اشیاء است که در مجموع با یکدیگر ترکیب می شوند تا یک فرم ایجاد کنند فرم نقطه عطف
    منطقه بخشی از صفحه که حاوی محتوایی است که به اندازه کافی مهم است که در خلاصه صفحه یا فهرست مطالب گنجانده شود بخش نقطه عطف
    جستجو کردن منطقه ای که شامل مجموعه ای از اقلام و اشیاء است که به عنوان یک کل ترکیب می شوند تا یک مرکز جستجو ایجاد کنند فرم نقطه عطف
    جعبه متن یک جعبه متن تک خطی ورودی ویجت
    چک باکس یک ورودی قابل بررسی که دارای سه مقدار ممکن است: true، false، یا mixed ورودی ویجت
    رادیو یک ورودی قابل بررسی که دارای دو مقدار ممکن است: true یا false ورودی ویجت
    جعبه جستجو یک کادر متنی تک خطی برای وارد کردن عبارت‌های جستجو ورودی ویجت
    جدول یک ظرف رومیزی جدول ساختار سند
    سر ردیف سلولی حاوی اطلاعات سرصفحه برای یک ردیف هفتم ساختار سند
    سر ستون یک سلول حاوی اطلاعات سرصفحه برای یک ستون هفتم ساختار سند
    گروه ردیف گروهی از سطرها که از سرصفحه سطر و سطرهای داده برای سرصفحه سطر تشکیل شده است سر،بدن،پا ساختار سند
    ردیف یک ردیف در ظرف رومیزی tr ساختار سند
    سلول یک سلول در یک ظرف جدول. (اگر عنصر جدول اجداد به عنوان یک نقش = جدول در معرض دید قرار گیرد) td،هفتم ساختار سند
    گروه گروهی از اشیاء رابط کاربری که قرار نیست توسط فناوری های کمکی در خلاصه صفحه یا فهرست مطالب گنجانده شوند. مجموعه فیلدها ویجت
    گروه رادیویی گروهی از دکمه های رادیویی ویجت
    مقاله بخشی از یک صفحه که شامل ترکیبی است که بخشی مستقل از یک سند، صفحه یا سایت را تشکیل می دهد مقاله ساختار سند
    مدت، اصطلاح تعریف یک اصطلاح dfn،dt ساختار سند
    تعریف تعریف یک اصطلاح ساختار سند
    شکل بخشی که حاوی محتوایی است که از جریان اصلی سند ارجاع داده شده است، اما می تواند بدون از دست دادن معنی از محتوای اصلی دور شود. شکل ساختار سند
    گزینه گزینه ای در لیست انتخابی گزینه ویجت
    نوار پیشرفت عنصری که وضعیت پیشرفت کارهایی را که زمان زیادی طول می کشد را نشان می دهد پیش رفتن ویجت
    لغزنده کنترلی که به کاربر اجازه می دهد مقداری را از داخل یک محدوده مشخص انتخاب کند ورودی ویجت
    دکمه چرخشی: شکلی از محدوده که از کاربر انتظار دارد از میان گزینه های گسسته انتخاب کند ورودی ویجت

    دفعه بعد که نمی دانید عناصر جزء شما چه نقشی دارند، به این جدول مراجعه کنید. می دانم که خواهم کرد

    نقش هایی که در جدول گنجانده نشده اند

    نقش‌ها بدون عنصر پیش‌فرض HTML

    • grid
    • gridcell
    • dialog
    • alert
    • alertdialog
    • combobox
    • menu
    • menubar
    • menuitem
    • menuitemcheckbox
    • menuitemradio
    • application
    • document
    • feed
    • tree
    • treegrid
    • treeitem
    • tab
    • tablist
    • tabpanel
    • log
    • marquee
    • note
    • scrollbar
    • status
    • switch
    • timer
    • toolbar
    • tooltip

    نقش های انتزاعی

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

    • command
    • composite
    • input
    • landmark
    • range
    • roletype
    • section
    • sectionhead
    • select
    • structure
    • widget
    • window

    نقش های دیگر

    • math نقش برای <math> عنصر را نمی توان توسط پرس و جو کرد testing-library
    • presentation و none – معنای ضمنی ARIA یک عنصر را از قرار گرفتن در معرض درخت دسترسی حذف می کند
    • comment – یک نقش برجسته که در حال حاضر در پیش نویس پیشنهاد است
    • mark نقش برای <mark> در حال حاضر نیز در حال تدوین است
    • banner – برای <header> عنصری که واقعاً آن را در برنامه های React خود آزمایش نمی کنید
    • generic – این یک نقش پیش فرض برای:

      • <div> و <span> عناصر
      • <a> یا <area> بدون href
      • <b>، <i>
      • <bdi>، <bdo>
      • <body>
      • <header>
      • <data>
      • hgroup>
      • <pre>
      • <q>
      • <samp>
      • <small>
      • <u>
    • meter – نقش برای <meter> عنصر در جدول گنجانده نشده است زیرا توسط آن پشتیبانی نمی شود testing-library
    • suggestion – نقشی که در حال حاضر در حال تدوین است

    منابع

    PS

    لطفاً به من بگویید که آیا فرمت سبک مستندسازی این مقاله چیزی است که به آن برگردید و به آن مراجعه کنید ❤️

    ابتدا در https://colthands.dev/blog/articles/html-aria-roles-a-convenient-testing-library-query-table پست شده است

    نوشته های مشابه

    دیدگاهتان را بنویسید

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

    دکمه بازگشت به بالا