شرح صفوف ومحتوى الفقرة
تنقسم الأيقونات من منظور إمكانية الوصول إلى فئتين حاسمتين لا يجوز الخلط بينهما:
- أيقونة تزيينية بجانب نص ظاهر: عندما تضع أيقونة بجانب عبارة واضحة مثل «حفظ التعديلات»، أضف سمة
aria-hidden="true"على عنصر الأيقونة حتى يتجاهلها قارئ الشاشة ويكتفي بقراءة النص الواضح. - أيقونة دلالية مستقلة بدون نص: عندما تعرض أيقونة حذف أو بحث بمفردها دون كلمة مكتوبة بجوارها، يجب تزويد العنصر التفاعلي الأب (أو غلاف الأيقونة المزود بـ
role="img") بسمةaria-labelتشرح وظيفتها بوضوح تام.
HTML
<!-- 1. Decorative icon beside text -->
<p><i class="bi bi-globe" aria-hidden="true"></i> Docs</p>
<!-- 2. Standalone icon with aria-label -->
<a href="#search" aria-label="Open site search">
<i class="bi bi-search" aria-hidden="true"></i>
</a>