ເຊື່ອງໄວ້ທາງສາຍຕາ

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

<h2 class="visually-hidden">Title for screen readers</h2>
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
<div class="visually-hidden-focusable">A container with a <a href="#">focusable element</a>.</div>

ທັງສອງ visually-hiddenແລະ visually-hidden-focusableຍັງສາມາດຖືກນໍາໃຊ້ເປັນ mixins.

// Usage as a mixin

.visually-hidden-title {
  @include visually-hidden;
}

.skip-navigation {
  @include visually-hidden-focusable;
}