مقدمه
دسترسی یک لوکس نیست – این یک الزام برای توسعه گسترده وب است. ویژگی های ARIA (برنامه های اینترنتی غنی در دسترس) به توسعه دهندگان این امکان را می دهد تا برنامه های خود را برای افرادی که به فن آوری های کمکی مانند خوانندگان صفحه نمایش تکیه می کنند ، قابل استفاده کنند. امروز ، ما به عمیق چگونگی افزایش ARIA دسترسی و چگونگی استفاده صحیح از آن را شروع خواهیم کرد.
چرا قابلیت دسترسی مهم است
- 1 از 6 نفر در سراسر جهان با نوعی معلولیت زندگی کنید.
- ساختن برنامه در دسترس مخاطبان شما را گسترده تر کرده و سئو را بهبود می بخشد.
- دسترسی به طور فزاینده ای با مقررات قانونی (ADA ، WCAG) اجرا می شود.
آریا چیست؟
آریا مجموعه ای از ویژگی ها است که می تواند به HTML به:
- معنی و نقش ها
- ارتباط با حالت و خواص
- به خوانندگان صفحه نمایش کمک کنید محتوای پویا را تفسیر می کنند
مهم!
آریا فقط باید در مورد عناصر HTML بومی استفاده شود (مانند با با
نقش های مشترک آریا
| نقش آریا | شرح |
|---|---|
role="button" |
یک عنصر را به عنوان یک دکمه تعریف می کند |
role="dialog" |
یک پنجره گفتگوی پنجره را نشان می دهد |
role="navigation" |
پیوندهای اصلی ناوبری را مشخص می کند |
ویژگی های رایج آریا
| ویژگی | هدف |
|---|---|
aria-label |
یک نام در دسترس را تعریف می کند |
aria-hidden="true" |
محتوا را از Assive Tech پنهان می کند |
aria-expanded="false" |
بیان می کند که آیا یک عنصر گسترش یافته یا فرو ریخته است |
نمونه های عملی
مثال 1: دکمه سفارشی قابل دسترسی
<div
role="button"
tabIndex="0"
aria-pressed="false"
onClick={() => alert('Clicked!')}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
alert('Clicked!');
}
}}
>
Custom Button
div>
✅ اضافه می کند role="button"، پشتیبانی صفحه کلید و تمرکز (tabIndex="0").
مثال 2: پانل قابل جمع شدن با آریا
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<button
aria-expanded={isOpen}
aria-controls="collapseSection"
onClick={() => setIsOpen(!isOpen)}
>
Toggle Details
button>
<div id="collapseSection" hidden={!isOpen}>
<p>Here are more details...p>
div>
div>
);
✅ به روزرسانی aria-expanded به صورت پویا ، بهبود اعلامیه های صفحه نمایش صفحه نمایش.
بهترین روشها هنگام استفاده از آریا
- ابتدا از HTML معنایی استفاده کنیدبشر
- تست با خوانندگان صفحه نمایش (Voiceover ، NVDA ، فک).
- از آریا در صورت لزوم خودداری کنید – آریا غیر ضروری می تواند دسترسی را از بین ببرد.
- ویژگی های آریا را نگه دارید همزمان با تغییرات UIبشر
پایان
ساخت برنامه های قابل دسترسی اختیاری نیست. این مهم است آریا ابزاری قدرتمند در هنگام استفاده از اندیشه و کم مصرف است و به اطمینان از استفاده از برنامه شما توسط همه کمک می کند. ساده را شروع کنید ، اغلب آزمایش کنید و همیشه HTML معنایی را در صورت امکان ترجیح دهید!
