ການເຂົ້າເຖິງ

ສະຫຼຸບໂດຍຫຍໍ້ກ່ຽວກັບລັກສະນະແລະຂໍ້ຈໍາກັດຂອງ Bootstrap ສໍາລັບການສ້າງເນື້ອຫາທີ່ສາມາດເຂົ້າເຖິງໄດ້.

ໃນໜ້ານີ້

Bootstrap ສະຫນອງກອບທີ່ງ່າຍຕໍ່ການໃຊ້ຂອງຮູບແບບທີ່ກຽມພ້ອມ, ເຄື່ອງມືການຈັດວາງ, ແລະອົງປະກອບແບບໂຕ້ຕອບ, ໃຫ້ຜູ້ພັດທະນາສ້າງເວັບໄຊທ໌ແລະແອັບພລິເຄຊັນທີ່ດຶງດູດສາຍຕາ, ມີປະໂຫຍດຫຼາຍ, ແລະສາມາດເຂົ້າເຖິງໄດ້ຈາກກ່ອງ.

ພາບລວມ ແລະຂໍ້ຈຳກັດ

ການເຂົ້າເຖິງໂດຍລວມຂອງໂຄງການໃດກໍ່ຕາມທີ່ສ້າງຂຶ້ນດ້ວຍ Bootstrap ແມ່ນຂຶ້ນກັບເຄື່ອງຫມາຍຂອງຜູ້ຂຽນ, ຮູບແບບເພີ່ມເຕີມ, ແລະການຂຽນອັກສອນທີ່ເຂົາເຈົ້າໄດ້ລວມເຂົ້າ. ຢ່າງໃດກໍຕາມ, ສະຫນອງໃຫ້ວ່າສິ່ງເຫຼົ່ານີ້ໄດ້ຖືກປະຕິບັດຢ່າງຖືກຕ້ອງ, ມັນຄວນຈະເປັນໄປໄດ້ຢ່າງສົມບູນເພື່ອສ້າງເວັບໄຊທ໌ແລະຄໍາຮ້ອງສະຫມັກທີ່ມີ Bootstrap ທີ່ປະຕິບັດຕາມ WCAG 2.1 (A/AA/AAA), ພາກທີ 508 , ແລະມາດຕະຖານການເຂົ້າເຖິງທີ່ຄ້າຍຄືກັນແລະຄວາມຕ້ອງການ.

ເຄື່ອງໝາຍໂຄງສ້າງ

ຄໍເຕົ້າໄຂ່ທີ່ແລະຮູບແບບຂອງ Bootstrap ສາມາດຖືກນໍາໃຊ້ກັບລະດັບຄວາມກ້ວາງຂອງໂຄງສ້າງ markup. ເອກະສານນີ້ມີຈຸດປະສົງເພື່ອໃຫ້ນັກພັດທະນາມີຕົວຢ່າງການປະຕິບັດທີ່ດີທີ່ສຸດເພື່ອສະແດງໃຫ້ເຫັນເຖິງການນໍາໃຊ້ Bootstrap ຕົວຂອງມັນເອງແລະສະແດງໃຫ້ເຫັນເຄື່ອງຫມາຍ semantic ທີ່ເຫມາະສົມ, ລວມທັງວິທີການທີ່ອາດຈະໄດ້ຮັບການແກ້ໄຂຄວາມກັງວົນໃນການເຂົ້າເຖິງ.

ອົງປະກອບການໂຕ້ຕອບ

ອົງປະກອບການໂຕ້ຕອບຂອງ Bootstrap ເຊັ່ນ: ກ່ອງໂຕ້ຕອບແບບໂມດູນ, ເມນູແບບເລື່ອນລົງ, ແລະຄໍາແນະນໍາທີ່ກໍາຫນົດເອງ - ຖືກອອກແບບມາເພື່ອເຮັດວຽກສໍາລັບຜູ້ໃຊ້ສໍາຜັດ, ເມົ້າ, ແລະແປ້ນພິມ. ໂດຍຜ່ານການນໍາໃຊ້ບົດບາດແລະຄຸນລັກສະນະຂອງ WAI - ARIA ທີ່ກ່ຽວຂ້ອງ , ອົງປະກອບເຫຼົ່ານີ້ຍັງຄວນຈະເຂົ້າໃຈໄດ້ແລະສາມາດປະຕິບັດໄດ້ໂດຍໃຊ້ເຕັກໂນໂລຢີຊ່ວຍເຫຼືອ (ເຊັ່ນ: ເຄື່ອງອ່ານຫນ້າຈໍ).

ເນື່ອງຈາກວ່າອົງປະກອບຂອງ Bootstrap ໄດ້ຖືກອອກແບບຢ່າງຕັ້ງໃຈເພື່ອໃຫ້ມີລັກສະນະທົ່ວໄປ, ຜູ້ຂຽນອາດຈະຕ້ອງລວມເອົາ ບົດບາດແລະຄຸນລັກສະນະຂອງ ARIA ຕື່ມອີກ , ເຊັ່ນດຽວກັນກັບພຶດຕິກໍາຂອງ JavaScript, ເພື່ອສະແດງລັກສະນະທີ່ຊັດເຈນແລະຫນ້າທີ່ຂອງອົງປະກອບຂອງພວກເຂົາ. ນີ້ແມ່ນປົກກະຕິແລ້ວສັງເກດເຫັນຢູ່ໃນເອກະສານ.

ກົງກັນຂ້າມສີ

ການປະສົມບາງສີທີ່ປະຈຸບັນປະກອບເປັນ palette ເລີ່ມຕົ້ນຂອງ Bootstrap - ຖືກນໍາໃຊ້ໃນທົ່ວກອບສໍາລັບສິ່ງຕ່າງໆເຊັ່ນການປ່ຽນແປງປຸ່ມ, ການປ່ຽນແປງການແຈ້ງເຕືອນ, ຕົວຊີ້ບອກການກວດສອບແບບຟອມ - ອາດຈະເຮັດໃຫ້ ຄວາມຄົມຊັດຂອງສີ ທີ່ບໍ່ພຽງພໍ (ຕ່ໍາກວ່າ WCAG 2.1 ອັດຕາສ່ວນສີຂໍ້ຄວາມທີ່ແນະນໍາຂອງ 4.5:1. ແລະ WCAG 2.1 ອັດຕາສ່ວນຄວາມຄົມຊັດຂອງສີທີ່ບໍ່ແມ່ນຂໍ້ຄວາມຂອງ 3: 1 ), ໂດຍສະເພາະໃນເວລາທີ່ໃຊ້ກັບພື້ນຫລັງແສງສະຫວ່າງ. ຜູ້ຂຽນໄດ້ຖືກຊຸກຍູ້ໃຫ້ທົດສອບການນໍາໃຊ້ສີສະເພາະຂອງເຂົາເຈົ້າແລະ, ຖ້າຈໍາເປັນ, ແກ້ໄຂ / ຂະຫຍາຍສີເລີ່ມຕົ້ນເຫຼົ່ານີ້ດ້ວຍຕົນເອງເພື່ອຮັບປະກັນອັດຕາສ່ວນກົງກັນຂ້າມຂອງສີທີ່ພຽງພໍ.

ເນື້ອຫາທີ່ຄວນຈະຖືກເຊື່ອງໄວ້ດ້ວຍສາຍຕາ, ແຕ່ຍັງຄົງສາມາດເຂົ້າເຖິງເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອເຊັ່ນເຄື່ອງອ່ານຫນ້າຈໍ, ສາມາດຖືກຈັດຮູບແບບໂດຍໃຊ້ .visually-hiddenຊັ້ນຮຽນ. ນີ້ສາມາດເປັນປະໂຫຍດໃນສະຖານະການທີ່ຂໍ້ມູນຕາເພີ່ມເຕີມຫຼື cues (ເຊັ່ນ: ຄວາມຫມາຍທີ່ສະແດງໃຫ້ເຫັນໂດຍຜ່ານການນໍາໃຊ້ສີ) ຈໍາເປັນຕ້ອງໄດ້ຖ່າຍທອດໃຫ້ກັບຜູ້ໃຊ້ທີ່ບໍ່ແມ່ນສາຍຕາ.

<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>

ການເຄື່ອນໄຫວຫຼຸດລົງ

Bootstrap ປະກອບມີການສະຫນັບສະຫນູນສໍາລັບ prefers-reduced-motionຄຸນນະສົມບັດສື່ມວນຊົນ . ໃນຕົວທ່ອງເວັບ / ສະພາບແວດລ້ອມທີ່ອະນຸຍາດໃຫ້ຜູ້ໃຊ້ສາມາດກໍານົດຄວາມມັກຂອງເຂົາເຈົ້າສໍາລັບການເຄື່ອນໄຫວທີ່ຫຼຸດລົງ, ຜົນກະທົບຂອງການປ່ຽນແປງ CSS ສ່ວນໃຫຍ່ໃນ Bootstrap (ຕົວຢ່າງເຊັ່ນ, ເມື່ອກ່ອງໂຕ້ຕອບແບບໂມດູນຖືກເປີດຫຼືປິດ, ຫຼືການເຄື່ອນໄຫວເລື່ອນໃນ carousels) ຈະຖືກປິດໃຊ້ງານ, ແລະການເຄື່ອນໄຫວທີ່ມີຄວາມຫມາຍ (. ເຊັ່ນ spinners) ຈະຊ້າລົງ.

ໃນຕົວທ່ອງເວັບທີ່ສະຫນັບສະຫນູນ prefers-reduced-motion, ແລະບ່ອນທີ່ຜູ້ໃຊ້ ບໍ່ໄດ້ ໃຫ້ສັນຍານຢ່າງຊັດເຈນວ່າພວກເຂົາຕ້ອງການການເຄື່ອນໄຫວທີ່ຫຼຸດລົງ (ເຊັ່ນ: ບ່ອນທີ່ prefers-reduced-motion: no-preference), Bootstrap ຊ່ວຍໃຫ້ເລື່ອນໄດ້ໂດຍນໍາໃຊ້ scroll-behaviorຄຸນສົມບັດ.