دەستڕاگەیشتن

کورتەیەک لە تایبەتمەندییەکان و سنوورەکانی 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 )، بە تایبەتی کاتێک لە بەرامبەر پاشبنەمایەکی سووکدا بەکاردەهێنرێت. نووسەران هاندەدرێن کە بەکارهێنانە تایبەتەکانیان لە ڕەنگ تاقی بکەنەوە و لە شوێنی پێویستدا، بە دەست دەستکاری/درێژکردنەوەی ئەم ڕەنگە پێشوەختانە بکەن بۆ دڵنیابوون لە ڕێژەی کۆنتراستی ڕەنگی گونجاو.

ناوەڕۆکێک کە پێویستە بە شێوەیەکی بینراو بشاردرێتەوە، بەڵام بە تەکنەلۆژیا یارمەتیدەرەکانی وەک خوێنەری شاشە دەستڕاگەیشتن بمێنێتەوە، دەتوانرێت بە بەکارهێنانی .visually-hiddenپۆلەکە ستایل بکرێت. ئەمە دەتوانێت لەو بارودۆخانەدا بەسوود بێت کە زانیاری یان ئاماژەی بینراوی زیادە (وەک مانا کە لە ڕێگەی بەکارهێنانی ڕەنگەوە دیاری دەکرێت) پێویستە بگەیەنرێتە بەکارهێنەرانی غەیرە بینراو.

<p class="text-danger">
  <span class="visually-hidden">Danger: </span>
  This action is not reversible
</p>

بۆ کۆنتڕۆڵە کارلێککەرەکانی شاراوەی بینراو، وەک بەستەری تەقلیدی "پەڕینەوە"، .visually-hidden-focusableپۆلەکە بەکاربهێنە. ئەمەش دڵنیای دەدات لەوەی کە کۆنتڕۆڵەکە کاتێک فۆکەس دەکرێت، دیار دەبێت (بۆ بەکارهێنەرانی کیبۆرد کە بینراون). ئاگاداربە، بە بەراورد لەگەڵ هاوتا .sr-onlyو .sr-only-focusableپۆلەکانی وەشانی ڕابردوو، Bootstrap 5's .visually-hidden-focusableپۆلێکی سەربەخۆیە، و نابێت لەگەڵ .visually-hiddenپۆلەکەدا بەکاربهێنرێت.

<a class="visually-hidden-focusable" href="#content">Skip to main content</a>

کەمکردنەوەی جووڵە

بووتستراپ پشتگیری لە prefers-reduced-motionتایبەتمەندی میدیا لەخۆدەگرێت . لە وێبگەڕەکان/ژینگەیەکدا کە ڕێگە بە بەکارهێنەر دەدات ئارەزووی خۆی بۆ کەمکردنەوەی جووڵە دیاری بکات، زۆربەی کاریگەرییەکانی گواستنەوەی CSS لە Bootstrap (بۆ نموونە، کاتێک دیالۆگێکی مۆداڵی دەکرێتەوە یان دادەخرێت، یان ئەنیمەیشنی خلیسک لە کارۆسێلەکاندا) لەکاردەخرێن، و ئەنیمەیشنە مانادارەکان ( وەکو سپینەر) خاو دەبێتەوە.

لەسەر ئەو وێبگەڕانەی کە پشتگیری لە prefers-reduced-motion, و لەو شوێنانەی کە بەکارهێنەر بە ڕوونی ئاماژەی نەداوە کە ئەوان پێیان باشە جووڵەی کەم بکرێتەوە (واتە لە کوێ prefers-reduced-motion: no-preference)، Bootstrap ڕۆشتنی نەرم بە بەکارهێنانی scroll-behaviorتایبەتمەندییەکە چالاک دەکات.