Nneɛma a wotumi nya

Bootstrap no nneɛma ne anohyeto ahorow a ɛwɔ nneɛma a wotumi nya mu a wɔyɛ no ho nsɛm tiawa.

Wɔ kratafa yi so

Bootstrap ma nhyehyɛe a ɛnyɛ den sɛ wode bedi dwuma a ɛyɛ akwan a wɔasiesie, nhyehyɛe nnwinnade, ne nkitahodi afã horow, na ɛma wɔn a wɔyɛ no tumi yɛ wɛbsaet ne aplikeshɔn ahorow a ɛyɛ anigye wɔ aniwa so, ɛyɛ adwuma yiye, na wotumi kɔ so fi adaka no mu.

Nsɛm a wɔaka abom ne anohyeto ahorow

Dwumadie biara a wɔde Bootstrap asi no nyinaa a wɔbɛtumi anya no gyina ɔkyerɛwfoɔ no agyiraeɛhyɛdeɛ, styling foforɔ, ne scripting a wɔde aka ho no so kɛseɛ. Nanso, sɛ wɔde eyinom adi dwuma yiye a, ɛsɛ sɛ ɛyɛ yiye koraa sɛ wode Bootstrap bɛyɛ wɛbsaet ne aplikeshɔn ahorow a edi WCAG 2.1 (A/AA/AAA), Ɔfa 508 , ne gyinapɛn ne ahwehwɛde ahorow a ɛte saa ara a ɛfa akwan a wɔfa so nya nneɛma ho no ba mu.

Nhyehyɛe ho agyiraehyɛde

Bootstrap no styling ne layout betumi adi dwuma wɔ markup nhyehyɛe ahorow pii mu. Saa nwoma yi botae ne sɛ ɛbɛma developers anya nhwɛsoɔ a ɛyɛ papa a wɔde bɛkyerɛ Bootstrap ankasa a wɔde di dwuma na akyerɛ nkyerɛaseɛ agyiraeɛhyɛdeɛ a ɛfata, a akwan a wɔbɛfa so adi nsɛm a ɛbɛtumi aba sɛ wɔbɛnya no ho dwuma ka ho.

Nneɛma a ɛma wotumi ne afoforo di nkitaho

Wɔayɛ Bootstrap no nkitahodi afã horow—te sɛ modal dialogs, dropdown menus, ne custom tooltips—sɛ ɛbɛyɛ adwuma ama wɔn a wɔde wɔn nsa ka, mouse, ne keyboard di dwuma. Ɛnam WAI - ARIA dwumadie ne su ahodoɔ a ɛfa ho a wɔde di dwuma so no, ɛsɛ sɛ saa nneɛma yi nso yɛ nea wɔte aseɛ na ɛyɛ adwuma denam mfiridwuma a ɛboa (te sɛ screen readers) so.

Esiane sɛ wɔahyɛ da ayɛ Bootstrap no afã horow no sɛnea ɛbɛyɛ a ɛbɛyɛ nea ɛfa nneɛma nyinaa ho yiye nti, ebia ɛho behia sɛ akyerɛwfo de ARIA dwumadi ne su afoforo ka ho, ne JavaScript nneyɛe nso, na ama wɔada wɔn fã no su ne ne dwumadi pɔtee adi pɛpɛɛpɛ. Wɔtaa hyɛ eyi nsow wɔ nkrataa no mu.

Kɔla ahorow a ɛne ne ho bɔ abira

Kɔla ahorow bi a wɔaka abom a mprempren ɛyɛ Bootstrap default palette no—a wɔde di dwuma wɔ nhyehyɛe no nyinaa mu ma nneɛma te sɛ bɔtɔn nsakrae, kɔkɔbɔ nsakrae, kratasin a ɛkyerɛ sɛ ɛyɛ nokware—betumi ama kɔla ahorow a ɛne ne ho bɔ abira a ɛnnɔɔso (wɔ WCAG 2.1 nkyerɛwee kɔla nsonsonoe ratio a wɔkamfo kyerɛ a ɛyɛ 4.5:1 ase no ne WCAG 2.1 a ɛnyɛ nsɛm a wɔakyerɛw no kɔla a ɛne ne ho bɔ abira a ɛyɛ 3:1 ), titiriw bere a wɔde di dwuma wɔ akyi a ɛyɛ hann no. Wɔhyɛ akyerɛwfo nkuran sɛ wɔnsɔ wɔn kɔla a wɔde di dwuma pɔtee no nhwɛ na, baabi a ɛho hia no, wɔmfa nsa nsakra/ntrɛw kɔla ahorow a wɔahyɛ da ayɛ yi mu na ama wɔanya kɔla ahorow a ɛne ne ho bɔ abira a ɛfata.

Nsɛm a ɛsɛ sɛ wɔde sie wɔ aniwa so, nanso ɛkɔ so yɛ nea mfiridwuma a ɛboa te sɛ screen readers betumi anya bi no, wobetumi de .visually-hiddenadesuakuw no ayɛ no sɛnea wɔpɛ. Eyi betumi ayɛ nea mfaso wɔ so wɔ tebea horow a ɛho hia sɛ wɔde nsɛm foforo a wɔde aniwa hu anaa nsɛnkyerɛnne (te sɛ ntease a wɔde kɔla a wɔde di dwuma kyerɛ) nso ma wɔn a wɔnyɛ nea wɔde di dwuma no mu.

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

Sɛ wopɛ nkitahodi controls a wɔde aniwa hu, te sɛ atetesɛm “skip” links a, fa .visually-hidden-focusableadesuakuw no di dwuma. Wei bɛhwɛ sɛ control no bɛyɛ nea wotumi hu bere a wɔde w’adwene asi so pɛn (ma wɔn a wɔde keyboard di dwuma a wohu ade). Hwɛ yiye, sɛ wode toto nea ɛne no sɛ .sr-onlyne .sr-only-focusableadesua ahorow a ɛwɔ nkyerɛase ahorow a atwam no mu ho a, Bootstrap 5's .visually-hidden-focusableyɛ adesuakuw a egyina hɔ ma ne ho, na ɛnsɛ sɛ wɔde di dwuma de ka .visually-hiddenadesuakuw no ho.

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

Kankyee a wɔatew so

Bootstrap no ka ho bi ne mmoa a wɔde ma prefers-reduced-motionmedia afã no . Wɔ browser/atwa yɛn ho ahyia a ɛma nea ɔde di dwuma no kwan ma ɔkyerɛ nea ɔpɛ ma kankyee a wɔatew so no, CSS nsakrae nsunsuanso dodow no ara wɔ Bootstrap mu (sɛ nhwɛso no, bere a wɔabue modal nkɔmmɔbɔ bi anaa wɔato mu, anaasɛ sliding animation wɔ carousels mu) no bɛyɛ adwuma, ne animations a ntease wom ( te sɛ spinners) no bɛbrɛ ase.

Wɔ browser ahorow a ɛboa prefers-reduced-motion, ne baabi a nea ɔde di dwuma no nkyerɛɛ pefee sɛ ɔbɛpɛ sɛ wɔtew kankyee so (kyerɛ sɛ baabi a prefers-reduced-motion: no-preference), Bootstrap ma wotumi de scroll-behavioragyapade no di dwuma yiye.