جاوا اسکریپت تقریباً در همه چیزهایی که ما ایجاد می کنیم - از اجزای پویا کوچکتر گرفته تا محصولات کاملی که بر روی یک چارچوب جاوا اسکریپت اجرا می شوند، مانند 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 پیش‌نمایش کنید.
اگر یک عنصر غیر معنایی برای یک رویداد ماشه استفاده می شود، یک رویداد keydown/keyup باید اضافه شود تا فشار کلید enter یا space را تشخیص دهد. افزودن رویدادهای ماشه ای به عناصر غیر معنایی اغلب فراموش می شود. متأسفانه، وقتی فراموش می شود، نتیجه یک جزء است که فقط با ماوس قابل دسترسی است. کاربران فقط صفحه کلید بدون دسترسی به اقدامات مرتبط باقی می مانند.
عنوان صفحات
همانطور که در ماژول Document آموختیم، عنوان صفحه برای کاربران صفحه‌خوان ضروری است. به کاربران می گوید در چه صفحه ای هستند و آیا به صفحه جدیدی رفته اند یا خیر.
اگر از فریم ورک جاوا اسکریپت استفاده می کنید، باید در نظر بگیرید که چگونه عناوین صفحه را مدیریت می کنید. این امر به ویژه برای برنامه‌های تک صفحه‌ای (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 پویا تغییر دهید. اگر برای افزودن پویا محتوا به صفحه خود نیاز به استفاده از جاوا اسکریپت دارید، مطمئن شوید که ساده و مختصر و البته قابل دسترسی است.
مدیریت تمرکز
در ماژول فوکوس صفحه کلید ، ترتیب فوکوس و سبک های نشانگر را پوشش دادیم. مدیریت تمرکز بدان معناست که چه زمانی و کجا باید تمرکز را به دام انداخت و چه زمانی نباید آن را به دام انداخت.
مدیریت فوکوس برای کاربرانی که فقط صفحه کلید دارند بسیار مهم است.
سطح مؤلفه
وقتی تمرکز یک جزء به درستی مدیریت نمی شود، می توانید تله های صفحه کلید ایجاد کنید. تله صفحه کلید زمانی رخ می دهد که یک کاربر فقط صفحه کلید در یک جزء گیر کند یا فوکوس در زمانی که باید حفظ نشود.
یکی از رایج‌ترین الگوهایی که کاربران در آن مشکلات مدیریت تمرکز را تجربه می‌کنند، در یک جزء مودال است. هنگامی که یک کاربر فقط صفحه کلید با یک مودال مواجه می شود، کاربر باید بتواند بین عناصر قابل اجرا مدال برگه بزند، اما هرگز نباید بدون رد صریح آن، اجازه خروج از مدال را داشته باشد. جاوا اسکریپت برای به دام انداختن مناسب این تمرکز ضروری است.
سطح صفحه
هنگامی که کاربر از صفحه ای به صفحه دیگر حرکت می کند، تمرکز باید حفظ شود. این امر به ویژه در SPA ها صادق است، جایی که مرورگر به روزرسانی نمی شود و تمام محتوا به صورت پویا تغییر می کند. هر زمان که کاربر روی پیوندی کلیک می کند تا به صفحه دیگری در برنامه شما برود، تمرکز یا در همان مکان قرار می گیرد یا به طور بالقوه در جای دیگری قرار می گیرد.
هنگام انتقال بین صفحات (یا مسیریابی)، تیم توسعه باید تصمیم بگیرد که وقتی صفحه بارگیری می شود، تمرکز بر کجا باشد.
تکنیک های متعددی برای رسیدن به این هدف وجود دارد:
- با اعلان
aria-liveروی ظرف اصلی تمرکز کنید. - برای پرش به محتوای اصلی، تمرکز را به یک پیوند برگردانید.
- تمرکز را به عنوان سطح بالای صفحه جدید منتقل کنید.
جایی که تصمیم می‌گیرید تمرکز کنید به چارچوبی که استفاده می‌کنید و محتوایی که می‌خواهید به کاربران خود ارائه دهید بستگی دارد. ممکن است وابسته به زمینه یا عمل باشد.
مدیریت دولتی
حوزه دیگری که جاوا اسکریپت برای دسترسی حیاتی است، مدیریت وضعیت است، یا زمانی که وضعیت بصری فعلی یک جزء یا صفحه به کاربر فناوری کمکی کم بینا، نابینا یا ناشنوا منتقل می شود.
اغلب، وضعیت یک جزء یا صفحه از طریق ویژگی های ARIA مدیریت می شود، همانطور که در ماژول ARIA و HTML معرفی شده است. بیایید چند مورد از رایج ترین انواع ویژگی های ARIA را که برای کمک به مدیریت وضعیت یک عنصر استفاده می شود، مرور کنیم.
سطح مؤلفه
بسته به محتوای صفحه شما و اطلاعاتی که کاربران شما نیاز دارند، بسیاری از حالت های ARIA وجود دارد که باید هنگام انتقال اطلاعات مربوط به یک جزء به کاربر در نظر بگیرید.
برای مثال، می‌توانید از یک ویژگی aria-expanded استفاده کنید تا به کاربر بگویید که آیا یک فهرست یا منوی کشویی باز شده یا جمع‌شده است.
یا ممکن است برای نشان دادن فشار دادن یک دکمه aria-pressed استفاده کنید.
مهم است که هنگام اعمال ویژگی های ARIA انتخابی باشید. از طریق جریان کاربر فکر کنید تا بفهمید چه اطلاعات مهمی باید به کاربر منتقل شود.
سطح صفحه
توسعه دهندگان اغلب از یک منطقه پنهان بصری به نام منطقه زنده ARIA برای اعلام تغییرات روی صفحه و پیام های هشدار به کاربران فناوری کمکی (AT) استفاده می کنند. این قسمت را می توان با جاوا اسکریپت جفت کرد تا کاربران را از تغییرات پویا در صفحه بدون نیاز به بارگیری مجدد کل صفحه مطلع کند.
از لحاظ تاریخی، جاوا اسکریپت به دلیل ماهیت پویای خود برای اعلام محتوا در مناطق aria-live و هشدار دهنده مشکل داشته است. افزودن ناهمزمان محتوا به DOM، انتخاب منطقه و اعلام آن را برای AT دشوار می کند. برای اینکه محتوا به درستی خوانده شود، منطقه زنده یا هشدار باید در DOM در حال بارگذاری باشد، سپس متن را می توان به صورت پویا تعویض کرد.
اگر از یک فریم ورک جاوا اسکریپت استفاده می کنید، خبر خوب این است که تقریباً همه آنها یک بسته "گوینده زنده" دارند که همه کارها را برای شما انجام می دهد و کاملاً در دسترس است. نیازی به نگرانی در مورد ایجاد یک منطقه زنده و رسیدگی به مسائلی که در قسمت قبل توضیح داده شد وجود ندارد.
در اینجا چند بسته زنده برای چارچوب های رایج جاوا اسکریپت آمده است:
- React: react-aria-live و react-a11y-nuncher
- Angular:
LiveAnnouncer - Vue: vue-a11y-utils
جاوا اسکریپت مدرن یک زبان قدرتمند است که به توسعه دهندگان وب اجازه می دهد تا برنامه های کاربردی وب قوی ایجاد کنند. این گاهی اوقات منجر به مهندسی بیش از حد و در نتیجه، الگوهای غیرقابل دسترس می شود. با پیروی از الگوها و نکات جاوا اسکریپت در این ماژول، می توانید برنامه های خود را برای همه کاربران در دسترس تر کنید.
درک خود را بررسی کنید
دانش خود را از جاوا اسکریپت تست کنید
کدام راه برای تغییر سبک یک عنصر با جاوا اسکریپت بهتر است؟
آیا همه اقدامات جاوا اسکریپت می توانند از کاربران صفحه کلید پشتیبانی کنند؟