دەستڕاگەیشتن
کورتەیەک لە تایبەتمەندییەکان و سنوورەکانی Bootstrap بۆ دروستکردنی ناوەڕۆکی دەستڕاگەیشتن.
بووتستراپ چوارچێوەیەکی ئاسان بۆ بەکارهێنان لە ستایلە ئامادەکراوەکان، ئامرازەکانی نەخشە و پێکهاتە کارلێککەرەکان دابین دەکات، ڕێگە بە گەشەپێدەران دەدات ماڵپەڕ و بەرنامە دروست بکەن کە لە ڕووی بینراوەوە سەرنجڕاکێش بن، لە ڕووی کاراییەوە دەوڵەمەند بن و لە دەرەوەی سندوقەکە دەستیان پێ بگات.
تێڕوانینێکی گشتی و سنووردارکردنەکان
دەستڕاگەیشتن بە گشتی هەر پرۆژەیەک کە بە Bootstrap دروست بکرێت بە بەشێکی زۆر بەندە بە نیشاندانی نووسەر، ستایلکردنی زیادە و سکریپت کە ئەوان لەخۆیان گرتووە. بەڵام بە مەرجێک ئەمانە بە دروستی جێبەجێ بکرێن، دەبێ بە تەواوی بتوانرێت ماڵپەڕ و بەرنامەکان بە Bootstrap دروست بکرێت کە WCAG 2.1 (A/AA/AAA)، بەشی 508 و ستاندارد و پێداویستییەکانی دەستڕاگەیشتنێکی هاوشێوە بەدی بهێنن.
مارکاپی پێکهاتەیی
دەتوانرێت ستایل و شێوازی Bootstrap بۆ کۆمەڵێک پێکهاتەی مارکاپ بەکاربهێنرێت. ئەم بەڵگەنامەیە ئامانجی ئەوەیە کە باشترین نموونەی پراکتیک بە گەشەپێدەران بدات بۆ نیشاندانی بەکارهێنانی خودی بووتستراپ و وێناکردنی نیشانەکردنی ماناسازی گونجاو، لەوانەش ڕێگاکانی چارەسەرکردنی نیگەرانییە ئەگەرییەکانی دەستڕاگەیشتن.
پێکهاتە کارلێکەکان
پێکهاتە کارلێککەرەکانی بووتستراپ- وەک دیالۆگەکانی مۆداڵی، مینیوی دابەزین و ئامرازە تایبەتەکان- بۆ بەکارهێنەرانی تاچ، ماوس و کیبۆرد دیزاین کراون. لە ڕێگەی بەکارهێنانی ڕۆڵ و تایبەتمەندییە پەیوەندیدارەکانی WAI - ARIA ، ئەم پێکهاتانە دەبێ بە بەکارهێنانی تەکنەلۆژیای یارمەتیدەر (وەک خوێنەری شاشە) تێبگەین و کاربکەن.
لەبەر ئەوەی پێکهاتەکانی بووتستراپ بە مەبەست دیزاین کراون بۆ ئەوەی تا ڕادەیەک گشتی بن، ڕەنگە نووسەران پێویستیان بە ڕۆڵ و تایبەتمەندی زیاتری ARIA هەبێت، هەروەها هەڵسوکەوتی جاڤاسکڕێپت، بۆ ئەوەی بە وردی سروشتی و کارایی وردی پێکهاتەکەیان بگەیەنن. بەزۆری ئەمە لە بەڵگەنامەکاندا ئاماژەی پێکراوە.
کۆنتراستی ڕەنگەکان
هەندێک لە پێکهاتەکانی ڕەنگەکان کە لە ئێستادا پالێتی پێشوەختەی Bootstrap پێکدەهێنن- کە لە سەرانسەری چوارچێوەکەدا بەکاردەهێنرێت بۆ شتەکانی وەک گۆڕانی دوگمە، گۆڕانکارییەکانی ئاگادارکردنەوە، نیشاندەری چەسپاندنی فۆرم- لەوانەیە ببێتە هۆی کۆنتراستی ڕەنگی کەم (لە خوار ڕێژەی کۆنتراستی ڕەنگی دەقی پێشنیارکراوی WCAG 2.1 کە 4.5:1 یە و ڕێژەی کۆنتراستی ڕەنگی نادەقی WCAG 2.1 3:1 )، بە تایبەتی کاتێک لە بەرامبەر پاشبنەمایەکی سووکدا بەکاردەهێنرێت. نووسەران هاندەدرێن کە بەکارهێنانە تایبەتەکانیان لە ڕەنگ تاقی بکەنەوە و لە شوێنی پێویستدا، بە دەست دەستکاری/درێژکردنەوەی ئەم ڕەنگە پێشوەختانە بکەن بۆ دڵنیابوون لە ڕێژەی کۆنتراستی ڕەنگی گونجاو.
ناوەڕۆکی شاراوەی بینراو
ناوەڕۆکێک کە پێویستە بە شێوەیەکی بینراو بشاردرێتەوە، بەڵام بە تەکنەلۆژیا یارمەتیدەرەکانی وەک خوێنەری شاشە دەستڕاگەیشتن بمێنێتەوە، دەتوانرێت بە بەکارهێنانی .sr-only
پۆلەکە ستایل بکرێت. ئەمە دەتوانێت لەو بارودۆخانەدا بەسوود بێت کە زانیاری یان ئاماژەی بینراوی زیادە (وەک مانا کە لە ڕێگەی بەکارهێنانی ڕەنگەوە دیاری دەکرێت) پێویستە بگەیەنرێتە بەکارهێنەرانی غەیرە بینراو.
<p class="text-danger">
<span class="sr-only">Danger: </span>
This action is not reversible
</p>
بۆ کۆنتڕۆڵە کارلێککەرەکانی شاراوەی بینراو، وەک بەستەری تەقلیدی "بازدان"، .sr-only
دەتوانرێت لەگەڵ .sr-only-focusable
پۆلەکەدا تێکەڵ بکرێت. ئەمەش دڵنیای دەدات لەوەی کە کۆنتڕۆڵەکە کاتێک فۆکەس دەکرێت، دیار دەبێت (بۆ بەکارهێنەرانی کیبۆرد کە بینراون).
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
کەمکردنەوەی جووڵە
بووتستراپ پشتگیری لە prefers-reduced-motion
تایبەتمەندی میدیا لەخۆدەگرێت . لە وێبگەڕەکان/ژینگەیەکدا کە ڕێگە بە بەکارهێنەر دەدات ئارەزووی خۆی بۆ کەمکردنەوەی جووڵە دیاری بکات، زۆربەی کاریگەرییەکانی گواستنەوەی CSS لە Bootstrap (بۆ نموونە، کاتێک دیالۆگێکی مۆداڵی دەکرێتەوە یان دادەخرێت، یان ئەنیمەیشنی خلیسک لە کارۆسێلەکاندا) لەکاردەخرێن، و ئەنیمەیشنە مانادارەکان ( وەکو سپینەر) خاو دەبێتەوە.
سەرچاوەی زیادە
- ڕێنماییەکانی دەستڕاگەیشتن بە ناوەڕۆکی وێب (WCAG) 2.1
- پڕۆژەی A11Y
- بەڵگەنامەکانی دەستڕاگەیشتن بە MDN
- Tenon.io پشکنەری دەستڕاگەیشتن
- شیکارکەری کۆنتراستی ڕەنگەکان (CCA)
- ئاماژەیەکی "HTML Codesniffer" بۆ دیاریکردنی کێشەکانی دەستڕاگەیشتن
- تێگەیشتنەکانی دەستڕاگەیشتن بە مایکرۆسۆفت
- ئامرازەکانی تاقیکردنەوەی Deque Ax