دسترسی‌پذیری در JavaScript
دسترسی‌پذیری در JavaScript یعنی سفارش بدون ماوس هم ثبت شود و تغییر وضعیت اعلام شود. این صفحه یک دکمهٔ واقعی دارد. با کلیک، خط صفحه tea / regular می‌شود.
این صفحهٔ خطاها نیست
صفحهٔ قبل missing size را پرتاب کرد و خطش caught / missing size بود. اینجا چیزی پرتاب نمی‌شود. کنترل روی صفحه می‌ماند و نتیجه جایی نوشته می‌شود که دیده شود.
از دکمه استفاده کن
<button type="button"> شنوندهٔ click را برای کلیک ماوس، Enter و Space اجرا می‌کند. div که فقط شنوندهٔ کلیک دارد صفحه‌کلید را نادیده می‌گیرد. نامی که خوانده می‌شود همان متن دکمه است: Place order.
const button = document.querySelector("button");
const line = document.querySelector("#line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
});
خط tea / regular می‌شود. Enter و Space همان شنونده را اجرا می‌کنند.
خط جدید را اعلام کن
textContent فقط صفحه را عوض می‌کند. صفحه‌خوان ممکن است تغییر آرام را نبیند. aria-live="polite" می‌گوید متن جدید را بعد از جملهٔ جاری بخوان.
<p id="line" aria-live="polite">…</p>
تغییر اعلام می‌شود و جملهٔ جاری قطع نمی‌شود. assertive وسط حرف می‌پرد. این صفحه polite است.
اگر size نباشد دکمه غیرفعال است
سفارش { drink: "tea" } است و size ندارد. button.disabled را true بگذار. دکمه دیده می‌شود. شنوندهٔ کلیک اجرا نمی‌شود.
const order = { drink: "tea" };
const button = document.querySelector("button");
if (!order.size) {
button.disabled = true;
}
دکمه هنوز در صفحه است و سفارش ثبت نمی‌کند. عنصر را حذف نکن.
فوکوس روی دکمه بماند
کسی که دکمه را زده همان‌جا است. خط را بنویس و button.focus() را صدا بزن. فوکوس را به پاراگراف نبر و حاشیهٔ فوکوس را پنهان نکن.
const button = document.querySelector("button");
const line = document.querySelector("#line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
button.focus();
});
فوکوس روی دکمه می‌ماند. خط به tabindex نیاز ندارد. حاشیهٔ فوکوس دیده می‌شود.
چهار عادت
هر ردیف یک تصمیم برای همین کنترل سفارش است.
📊 کنترل سفارش دسترس‌پذیر
| عادت | استفاده کن | پرهیز کن |
|---|---|---|
| عمل | button با type="button" |
div که فقط به click گوش می‌دهد |
| وضعیت | aria-live="polite" روی خط |
عوض کردن بی‌صدای متن |
| غیرقابل‌استفاده | button.disabled = true |
حذف دکمه |
| فوکوس | button.focus() و حاشیهٔ دیده |
line.focus() یا outline: none |
دکمه عمل را می‌گیرد. خط زنده نتیجه را می‌گوید. disabled کنترلی را نگه می‌دارد که نباید اجرا شود. حاشیه نشان می‌دهد فوکوس کجاست.
خط صفحه
صفحه یک دکمه را به خط زنده وصل می‌کند. چیزی پرتاب نمی‌شود.
<!DOCTYPE html>
<html>
<body>
<button id="order" type="button">Place order</button>
<p id="line" aria-live="polite">…</p>
<script>
const button = document.getElementById("order");
const line = document.getElementById("line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
button.focus();
});
</script>
</body>
</html>
بعد از کلیک، خط tea / regular است. Enter و Space هم همین کار را می‌کنند. caught / missing size مال صفحهٔ خطاها بود.
پشت پیشخوان
- دکمه را بزن. خط tea / regular می‌شود.
- روی همان دکمه Enter را بزن. شنونده دوباره اجرا می‌شود.
- روی خط aria-live="polite" بگذار تا متن جدید اعلام شود.
- اگر size نیست، button.disabled را true کن. دکمه می‌ماند و کلیک اجرا نمی‌شود.
- بعد از کلیک موفق button.focus() را صدا بزن. line.focus() را صدا نزن.
اشتباه‌های رایج
کلیک روی div کنترل صفحه‌کلید نیست. disabled با حذف دکمه یکی نیست.
- گذاشتن عمل سفارش روی
div - عوض کردن خط و فراموش کردن
aria-live - حذف دکمه وقتی
sizeنیست - صدا زدن
line.focus()بعد از سفارش موفق - پنهان کردن حاشیهٔ فوکوس
- خواندن خط به‌شکل caught / missing size
جمع‌بندی
buttonعمل سفارش را از ماوس، Enter و Space اجرا می‌کندaria-live="polite"عبارت tea / regular را بدون قطع کردن اعلام می‌کند- نبود
sizeمقدارbutton.disabledراtrueمی‌کند و دکمه در صفحه می‌ماند - فوکوس روی دکمه می‌ماند
- خط صفحه tea / regular است
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود