ხელმისაწვდომობა

Bootstrap-ის მახასიათებლებისა და შეზღუდვების მოკლე მიმოხილვა ხელმისაწვდომი შინაარსის შესაქმნელად.

ამ გვერდზე

Bootstrap უზრუნველყოფს მზა სტილის, განლაგების ხელსაწყოების და ინტერაქტიული კომპონენტების ადვილად გამოსაყენებელ ჩარჩოს, რაც დეველოპერებს საშუალებას აძლევს შექმნან ვებსაიტები და აპლიკაციები, რომლებიც ვიზუალურად მიმზიდველი, ფუნქციურად მდიდარი და ხელმისაწვდომია.

მიმოხილვა და შეზღუდვები

Bootstrap-ით აშენებული ნებისმიერი პროექტის საერთო ხელმისაწვდომობა დიდწილად დამოკიდებულია ავტორის მარკირებაზე, დამატებით სტილზე და მათ მიერ შეტანილ სკრიპტირებაზე. თუმცა, იმ პირობით, რომ ისინი სწორად განხორციელდა, სავსებით შესაძლებელი უნდა იყოს ვებსაიტების და აპლიკაციების შექმნა Bootstrap-ით, რომლებიც აკმაყოფილებენ WCAG 2.1 (A/AA/AAA), სექცია 508 და მსგავსი ხელმისაწვდომობის სტანდარტებსა და მოთხოვნებს.

სტრუქტურული მარკირება

Bootstrap-ის სტილი და განლაგება შეიძლება გამოყენებულ იქნას მარკირების სტრუქტურების ფართო სპექტრზე. ეს დოკუმენტაცია მიზნად ისახავს დეველოპერებს მიაწოდოს საუკეთესო პრაქტიკის მაგალითები თავად Bootstrap-ის გამოყენების დემონსტრირებისთვის და შესაბამისი სემანტიკური მარკირების საილუსტრაციოდ, მათ შორის გზები, რომლითაც შესაძლებელია პოტენციური ხელმისაწვდომობის პრობლემების მოგვარება.

ინტერაქტიული კომპონენტები

Bootstrap-ის ინტერაქტიული კომპონენტები, როგორიცაა მოდალური დიალოგები, ჩამოსაშლელი მენიუები და პერსონალური ინსტრუმენტების რჩევები, შექმნილია შეხების, მაუსის და კლავიატურის მომხმარებლებისთვის. შესაბამისი WAI - ARIA როლებისა და ატრიბუტების გამოყენებით, ეს კომპონენტები ასევე უნდა იყოს გასაგები და ფუნქციონირებადი დამხმარე ტექნოლოგიების გამოყენებით (როგორიცაა ეკრანის წამკითხველები).

იმის გამო, რომ Bootstrap-ის კომპონენტები მიზანმიმართულად არის შექმნილი, რომ იყოს საკმაოდ ზოგადი, ავტორებს შეიძლება დასჭირდეთ შემდგომი ARIA როლები და ატრიბუტები, ისევე როგორც JavaScript ქცევა, რათა უფრო ზუსტად გადმოსცენ მათი კომპონენტის ზუსტი ბუნება და ფუნქციონირება. ეს ჩვეულებრივ მითითებულია დოკუმენტაციაში.

ფერის კონტრასტი

ფერების ზოგიერთმა კომბინაციამ, რომლებიც ამჟამად ქმნიან 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და კლასებთან შედარებით, Bootstrap 5 არის დამოუკიდებელი კლასი და არ უნდა იქნას გამოყენებული კლასთან ერთად..sr-only-focusable.visually-hidden-focusable.visually-hidden

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

შემცირებული მოძრაობა

Bootstrap მოიცავს prefers-reduced-motionმედია ფუნქციის მხარდაჭერას . ბრაუზერებში/გარემოებში, რომლებიც მომხმარებელს საშუალებას აძლევს განსაზღვროს თავისი უპირატესობა შემცირებული მოძრაობისთვის, CSS გადასვლის ეფექტების უმეტესობა Bootstrap-ში (მაგალითად, მოდალური დიალოგის გახსნისას ან დახურვისას, ან მოცურების ანიმაციის კარუსელებში) გამორთული იქნება და მნიშვნელოვანი ანიმაციები ( როგორიცაა სპინერები) შენელდება.

ბრაუზერებზე, რომლებიც მხარს უჭერენ prefers-reduced-motionდა სადაც მომხმარებელმა აშკარად არ მიუთითა, რომ უპირატესობას ანიჭებს შემცირებულ მოძრაობას (ანუ სად prefers-reduced-motion: no-preference), Bootstrap საშუალებას აძლევს გლუვ გადახვევას scroll-behaviorსაკუთრების გამოყენებით.