الفرق بين المراجعتين لصفحة: «Bootstrap/breadcrumb»
إضافة محتوى الصفحة |
لا ملخص تعديل |
||
| سطر 3: | سطر 3: | ||
== نظرة عامّة == | == نظرة عامّة == | ||
تُضاف الفواصل تلقائيًّا بين عناصر القائمة التفصيليّة بتنسيقات CSS عبر الخاصيّتين | تُضاف الفواصل تلقائيًّا بين عناصر القائمة التفصيليّة بتنسيقات CSS عبر الخاصيّتين [[CSS/::before|<code>::before</code>]] و [[CSS/content|<code>content</code>]]. <syntaxhighlight lang="html"> | ||
[[CSS/::before|<code>::before</code>]] و [[CSS/content|<code>content</code>]].<syntaxhighlight lang="html"> | |||
<nav aria-label="breadcrumb"> | <nav aria-label="breadcrumb"> | ||
<ol class="breadcrumb"> | <ol class="breadcrumb"> | ||
| سطر 31: | سطر 29: | ||
== سهولة الوصول Accessibility == | == سهولة الوصول Accessibility == | ||
بما أنّ عناصر التنقّل تخدُم التنقّل داخل الموقع فمن الجيّد إضافة لافتة Label مفيدة مثل <code>aria-label="breadcrumb"</code> لوصف نوعيّة قائمة التنقّل ضمن العنصُر <code><nav></code> إضافةً إلى تطبيق التنسيق <code>aria-current="page"</code> على العنصُر الأخير من | بما أنّ عناصر التنقّل تخدُم التنقّل داخل الموقع فمن الجيّد إضافة لافتة Label مفيدة مثل <code>aria-label="breadcrumb"</code> لوصف نوعيّة قائمة التنقّل ضمن العنصُر <code><nav></code> إضافةً إلى تطبيق التنسيق <code>aria-current="page"</code> على العنصُر الأخير من القائمة للإشارة إلى أنّه يمثّل الصفحة الحاليّة. | ||
انظُر [https://www.w3.org/TR/wai-aria-practices/#breadcrumb الممارسات المنصوح بها ضمن المعيار WAI-ARIA في ما يتعلّق بعناصر التنقّل] للمزيد من التفاصيل. | انظُر [https://www.w3.org/TR/wai-aria-practices/#breadcrumb الممارسات المنصوح بها ضمن المعيار WAI-ARIA في ما يتعلّق بعناصر التنقّل] للمزيد من التفاصيل. | ||
مراجعة 11:45، 23 مارس 2018
وضِّح موقع الصفحة الحاليّة ضمن تسلسل هرميّ تُضاف إليه تلقائيًّا فواصل باستخدام CSS ويمكن من خلاله تصفّح محتوى الموقع.
نظرة عامّة
تُضاف الفواصل تلقائيًّا بين عناصر القائمة التفصيليّة بتنسيقات CSS عبر الخاصيّتين ::before و content.
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">الرئيسيّة</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">الرئيسيّة</a></li>
<li class="breadcrumb-item active" aria-current="page">المكتبة</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">الرئيسيّة</a></li>
<li class="breadcrumb-item"><a href="#">المكتبة</a></li>
<li class="breadcrumb-item active" aria-current="page">البيانات</li>
</ol>
</nav>
سهولة الوصول Accessibility
بما أنّ عناصر التنقّل تخدُم التنقّل داخل الموقع فمن الجيّد إضافة لافتة Label مفيدة مثل aria-label="breadcrumb" لوصف نوعيّة قائمة التنقّل ضمن العنصُر <nav> إضافةً إلى تطبيق التنسيق aria-current="page" على العنصُر الأخير من القائمة للإشارة إلى أنّه يمثّل الصفحة الحاليّة.
انظُر الممارسات المنصوح بها ضمن المعيار WAI-ARIA في ما يتعلّق بعناصر التنقّل للمزيد من التفاصيل.