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

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 ), განსაკუთრებით მსუბუქი ფონზე გამოყენებისას. ავტორებს ურჩევენ შეამოწმონ ფერის მათი სპეციფიკური გამოყენება და, საჭიროების შემთხვევაში, ხელით შეცვალონ/გაფართოვონ ეს ნაგულისხმევი ფერები, რათა უზრუნველყონ შესაბამისი ფერის კონტრასტის კოეფიციენტები.

კონტენტი, რომელიც ვიზუალურად უნდა იყოს დამალული, მაგრამ ხელმისაწვდომი იყოს დამხმარე ტექნოლოგიებისთვის, როგორიცაა ეკრანის წამკითხველები, შეიძლება სტილიზებული იყოს .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>

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

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