جاوا اسکریپت تقریباً در هر چیزی که ما ایجاد میکنیم نقش مهمی دارد - از کامپوننتهای پویای کوچکتر گرفته تا محصولات کاملی که روی یک چارچوب جاوا اسکریپت مانند React یا Angular اجرا میشوند.
این استفاده (یا استفاده بیش از حد) از جاوا اسکریپت، روندهای نگرانکننده زیادی را به همراه داشته است، مانند زمان بارگذاری طولانی به دلیل حجم زیاد کد، استفاده از عناصر HTML غیرمعنایی و تزریق HTML و CSS از طریق جاوا اسکریپت. و ممکن است مطمئن نباشید که چگونه دسترسیپذیری در هر یک از این موارد جای میگیرد.
جاوا اسکریپت میتواند تأثیر زیادی بر دسترسیپذیری سایت شما داشته باشد. در این ماژول، ما برخی از الگوهای کلی برای دسترسیپذیری که توسط جاوا اسکریپت بهبود یافتهاند، و همچنین راهحلهایی برای مشکلات دسترسیپذیری که از استفاده از چارچوبهای جاوا اسکریپت ناشی میشوند را به اشتراک خواهیم گذاشت.
رویدادهای محرک
رویدادهای جاوا اسکریپت به کاربران اجازه میدهند تا با محتوای وب تعامل داشته باشند و یک عمل خاص را انجام دهند. بسیاری از افراد، مانند کاربران صفحهخوان، افراد دارای معلولیتهای حرکتی ظریف، افراد بدون ماوس یا ترکپد و دیگران، برای تعامل با وب به پشتیبانی از صفحهکلید متکی هستند. بسیار مهم است که پشتیبانی از صفحهکلید را به اقدامات جاوا اسکریپت خود اضافه کنید، زیرا بر همه این کاربران تأثیر میگذارد.
بیایید به یک رویداد کلیک نگاهی بیندازیم. اگر یک رویداد onClick() روی یک عنصر HTML معنایی مانند <button> یا <a> استفاده شود، طبیعتاً شامل عملکرد ماوس و صفحه کلید میشود. با این حال، عملکرد صفحه کلید به طور خودکار هنگام اضافه شدن یک رویداد onClick() به یک عنصر غیر معنایی مانند یک <div> عمومی اعمال نمیشود.
<div role="button" tabindex="0" onclick="doAction()">Click me!</div>
<button onclick="doAction()">Click me!</button>
پیشنمایش این مقایسه را در CodePen ببینید.
اگر از یک عنصر غیرمعنایی برای یک رویداد trigger استفاده شود، باید یک رویداد keydown/keyup برای تشخیص فشردن کلید enter یا space اضافه شود. اضافه کردن رویدادهای trigger به عناصر غیرمعنایی اغلب فراموش میشود. متأسفانه، وقتی این کار فراموش شود، نتیجه کامپوننتی است که فقط با ماوس قابل دسترسی است. کاربرانی که فقط با صفحه کلید کار میکنند، به اقدامات مرتبط دسترسی ندارند.
عناوین صفحه
همانطور که در ماژول سند آموختیم، عنوان صفحه برای کاربران صفحهخوان ضروری است. این عنوان به کاربران میگوید که در چه صفحهای هستند و آیا به صفحه جدیدی هدایت شدهاند یا خیر.
اگر از یک چارچوب جاوا اسکریپت استفاده میکنید، باید نحوه مدیریت عناوین صفحات را در نظر بگیرید. این امر به ویژه برای برنامههای تک صفحهای (SPA) که از یک فایل index.html واحد بارگیری میشوند، بسیار مهم است، زیرا انتقالها یا مسیرها (تغییر صفحه) شامل بارگذاری مجدد صفحه نمیشوند. هر بار که کاربر صفحه جدیدی را در یک SPA بارگیری میکند، عنوان به طور پیشفرض تغییر نمیکند.
برای SPAها، مقدار document.title میتواند به صورت دستی یا با استفاده از یک بسته کمکی (بسته به چارچوب جاوا اسکریپت) اضافه شود. اعلام عناوین صفحات بهروز شده به کاربر صفحهخوان ممکن است کار اضافی ببرد، اما خبر خوب این است که گزینههایی مانند محتوای پویا دارید.
محتوای پویا
یکی از قدرتمندترین قابلیتهای جاوا اسکریپت، امکان اضافه کردن HTML و CSS به هر عنصری در صفحه است. توسعهدهندگان میتوانند برنامههای پویا را بر اساس اقدامات یا رفتارهای کاربران ایجاد کنند.
فرض کنید میخواهید هنگام ورود کاربران به وبسایت یا برنامهتان، پیامی برای آنها ارسال کنید. میخواهید این پیام از پسزمینه سفید متمایز باشد و این پیام را منتقل کند: «شما اکنون وارد سیستم شدهاید».
میتوانید از عنصر innerHTML برای تنظیم محتوا استفاده کنید:
document.querySelector("#banner").innerHTML = '<p>You are now signed in</p>';
شما میتوانید CSS را به روشی مشابه، با setAttribute اعمال کنید:
document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");
قدرت زیاد، مسئولیت زیادی به همراه دارد. متأسفانه، تزریق جاوا اسکریپت به HTML و CSS از دیرباز برای ایجاد محتوای غیرقابل دسترس مورد سوءاستفاده قرار گرفته است. برخی از سوءاستفادههای رایج در اینجا فهرست شدهاند:
| سوءاستفاده احتمالی | استفاده صحیح |
|---|---|
| رندر کردن بخشهای بزرگی از HTML غیرمعنایی | قطعات کوچکتر HTML معنایی را رندر کنید |
| عدم اختصاص زمان برای شناسایی محتوای پویا توسط فناوری کمکی | استفاده از تأخیر زمانی setTimeout() برای اینکه کاربران بتوانند پیام کامل را بشنوند |
اعمال ویژگیهای استایل برای onFocus() به صورت پویا | از :focus برای عناصر مرتبط در فایل استایل CSS خود استفاده کنید. |
| اعمال سبکهای درونخطی ممکن است باعث شود که شیوهنامههای کاربر به درستی خوانده نشوند. | استایلهای خود را در فایلهای CSS نگه دارید تا انسجام قالب حفظ شود. |
| ایجاد فایلهای جاوا اسکریپت بسیار بزرگ که عملکرد کلی سایت را کند میکنند | از جاوا اسکریپت کمتری استفاده کنید. ممکن است بتوانید عملکردهای مشابهی را در CSS (مانند انیمیشنها یا ناوبری چسبنده) انجام دهید که سریعتر تجزیه میشوند و عملکرد بهتری دارند. |
برای CSS، به جای اضافه کردن استایلهای درونخطی، کلاسهای CSS را فعال/غیرفعال کنید، زیرا این کار امکان استفاده مجدد و سادگی را فراهم میکند. از محتوای پنهان در صفحه استفاده کنید و کلاسها را برای پنهان کردن و نمایش محتوا برای HTML پویا فعال/غیرفعال کنید. اگر برای اضافه کردن پویای محتوا به صفحه خود نیاز به استفاده از جاوا اسکریپت دارید، مطمئن شوید که ساده و مختصر و البته قابل دسترس است.
مدیریت تمرکز
در ماژول فوکوس کیبورد ، ترتیب فوکوس و سبکهای نشانگر را پوشش دادیم. مدیریت فوکوس یعنی دانستن اینکه چه زمانی و کجا فوکوس را به دام بیندازیم و چه زمانی نباید آن را به دام بیندازیم.
مدیریت فوکوس برای کاربرانی که فقط از کیبورد استفاده میکنند بسیار مهم است.
سطح مؤلفه
شما میتوانید زمانی که تمرکز یک کامپوننت به درستی مدیریت نمیشود، تلههای کیبورد ایجاد کنید. تله کیبورد زمانی رخ میدهد که یک کاربر فقط با کیبورد در یک کامپوننت گیر میکند، یا تمرکز در زمانی که باید حفظ نمیشود.
یکی از رایجترین الگوهایی که کاربران در آن با مشکلات مدیریت تمرکز مواجه میشوند، در یک کامپوننت modal است. وقتی کاربری که فقط با صفحهکلید کار میکند با یک modal مواجه میشود، باید بتواند با استفاده از Tab بین عناصر قابل اجرا در modal حرکت کند، اما هرگز نباید بدون رد کردن صریح آن، اجازه خروج از modal را داشته باشد. جاوا اسکریپت برای به دام انداختن صحیح این تمرکز ضروری است.
سطح صفحه
همچنین وقتی کاربر از صفحهای به صفحه دیگر میرود، باید تمرکز (focus) حفظ شود. این امر به ویژه در SPAها صادق است، جایی که هیچ رفرش مرورگری وجود ندارد و همه محتوا به صورت پویا تغییر میکند. هر زمان که کاربر روی پیوندی کلیک میکند تا به صفحه دیگری در برنامه شما برود، تمرکز یا در همان مکان نگه داشته میشود یا به طور بالقوه به طور کامل در جای دیگری قرار میگیرد.
هنگام انتقال بین صفحات (یا مسیریابی)، تیم توسعه باید تصمیم بگیرد که هنگام بارگذاری صفحه، تمرکز روی کدام قسمت باشد.
برای رسیدن به این هدف، تکنیکهای متعددی وجود دارد:
- با اعلان
aria-liveفوکوس را روی کانتینر اصلی قرار دهید. - تمرکز را دوباره روی یک لینک قرار دهید تا به محتوای اصلی بروید.
- تمرکز را به عنوان سطح بالای صفحه جدید منتقل کنید.
اینکه تصمیم بگیرید تمرکز خود را روی چه چیزی بگذارید، به چارچوبی که استفاده میکنید و محتوایی که میخواهید به کاربرانتان ارائه دهید بستگی دارد. این موضوع ممکن است وابسته به زمینه یا عمل باشد.
مدیریت دولتی
یکی دیگر از حوزههایی که جاوا اسکریپت برای دسترسیپذیری حیاتی است، مدیریت وضعیت است، یا زمانی که وضعیت بصری فعلی یک کامپوننت یا صفحه به یک کاربر فناوری کمکی کمبینا، نابینا یا ناشنوا منتقل میشود.
اغلب، وضعیت یک کامپوننت یا صفحه از طریق ویژگیهای ARIA، همانطور که در ماژول ARIA و HTML معرفی شده است، مدیریت میشود. بیایید چند مورد از رایجترین انواع ویژگیهای ARIA را که برای کمک به مدیریت وضعیت یک عنصر استفاده میشوند، مرور کنیم.
سطح مؤلفه
بسته به محتوای صفحه شما و اطلاعاتی که کاربران شما نیاز دارند، حالتهای ARIA زیادی وجود دارد که باید هنگام انتقال اطلاعات مربوط به یک جزء به کاربر در نظر گرفته شوند.
برای مثال، میتوانید از یک ویژگی aria-expanded استفاده کنید تا به کاربر بگویید که آیا یک منوی کشویی یا لیست باز شده است یا بسته شده است.
یا میتوانید aria-pressed برای نشان دادن فشرده شدن یک دکمه استفاده کنید.
هنگام استفاده از ویژگیهای ARIA، انتخابگر باشید. جریان کاربری را به طور کامل بررسی کنید تا بفهمید چه اطلاعات مهمی باید به کاربر منتقل شود.
سطح صفحه
توسعهدهندگان اغلب از یک ناحیه بصری پنهان به نام ناحیه زنده ARIA برای اعلام تغییرات روی صفحه و پیامهای هشدار به کاربران فناوری کمکی (AT) استفاده میکنند. این ناحیه را میتوان با جاوا اسکریپت جفت کرد تا کاربران را از تغییرات پویای صفحه بدون نیاز به بارگذاری مجدد کل صفحه مطلع کند.
از نظر تاریخی، جاوا اسکریپت به دلیل ماهیت پویای خود، در اعلام محتوا در مناطق aria-live و alert با مشکل مواجه بوده است. افزودن ناهمگام محتوا به DOM، دریافت و اعلام آن را برای AT دشوار میکند. برای اینکه محتوا به درستی خوانده شود، منطقه live یا alert باید در DOM در حال بارگذاری باشد، سپس متن میتواند به صورت پویا جابجا شود.
اگر از یک چارچوب جاوا اسکریپت استفاده میکنید، خبر خوب این است که تقریباً همه آنها یک بسته «گوینده زنده» دارند که تمام کارها را برای شما انجام میدهد و کاملاً قابل دسترسی است. نیازی به نگرانی در مورد ایجاد یک منطقه زنده و مواجهه با مسائلی که در بخش قبلی توضیح داده شد، نیست.
در اینجا چند بستهی زنده برای فریمورکهای رایج جاوااسکریپت آورده شده است:
- واکنش: react-aria-live و react-a11y-announcer
- انگولار:
LiveAnnouncer - ویو: vue-a11y-utils
جاوا اسکریپت مدرن، زبانی قدرتمند است که به توسعهدهندگان وب اجازه میدهد تا برنامههای وب قوی ایجاد کنند. این امر گاهی اوقات منجر به مهندسی بیش از حد و در نتیجه، الگوهای غیرقابل دسترس میشود. با پیروی از الگوها و نکات جاوا اسکریپت در این ماژول، میتوانید برنامههای خود را برای همه کاربران قابل دسترستر کنید.