إمكانية الوصول مع JavaScript
إمكانية الوصول في JavaScript تعني أن عنصر الطلب يعمل من لوحة المفاتيح، وأن تغيّر الحالة يُعلَن. تستخدم هذه الصفحة زرًا حقيقيًا. يضبط click السطر الظاهر على tea / regular.
ليست صفحة الأخطاء
رمت الصفحة السابقة missing size. كان سطرها caught / missing size. هذه الصفحة لا تستخدم throw. يبقى عنصر التحكم في الصفحة، وتُكتب النتيجة حيث يراها الناس.
استخدم زرًا
يشغّل <button type="button"> مستمع click لنقرة الفأرة، ولـ Enter، ولـ Space. يتجاهل div يحمل click فقط لوحة المفاتيح. نص الزر هو الاسم الذي يُسمَع.
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. يبقى الزر ظاهرًا. لا يعمل مستمع click.
const order = { drink: "tea" };
const button = document.querySelector("button");
if (!order.size) {
button.disabled = true;
}
الزر ما زال في الصفحة، ولا يُرسل الطلب. لا تحذف العنصر.
اترك التركيز على الزر
من فعّل الزر موجود هناك أصلًا. اكتب السطر، ثم استدعِ button.focus(). لا تستدعِ line.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>
بعد click يُقرأ السطر tea / regular. يفعل Enter وSpace الأمر نفسه. كان caught / missing size لصفحة الأخطاء.
عند المنضدة
- انقر الزر. يُقرأ السطر tea / regular.
- اضغط Enter على الزر نفسه. يعمل المستمع مرة أخرى.
- ضع aria-live="polite" على السطر حتى يُعلَن النص الجديد.
- بلا size اضبط button.disabled على true. يبقى الزر، ولا يعمل click.
- بعد click ناجح استدعِ button.focus(). لا تستدعِ line.focus().
أخطاء شائعة
click على 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
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى