Dostępność: sr-only lub aria-label

Question

From MDN:

W poniższym przykładzie, przycisk jest stylizowany wyglądać typowy przycisk na "Close", z X w środku. Ponieważ nic nie wskazuje na to, że celem przycisku jest zamknięcie okna dialogowego, atrybut etykiety arii jest używany do dostarczenia etykiety dowolnej technologii wspomagającej.

<button aria-label="Close" onclick="myDialog.close()">X</button> 

Zgodnie z dokumentacją bootstrap:

ukryć elementu do wszystkich urządzeń z wyjątkiem czytników ekranu z .sr tylko

Więc myślę, że mogę również napisać:

<button onclick="myDialog.close()"><span class="sr-only">Close</span>X</button> 

W Bootstrap pro Jak mogę wybrać, który z nich preferować?

Answer 1

W przykładzie MDN czytnik ekranu odczyta tylko słowo "zamknij", ponieważ aria-label przesłania tekst w przycisku. To zadziała, nawet jeśli ponownie użyjesz kodu bez Bootstrap.

W twoim przykładzie, czytnik ekranu będzie mówić "zamknij x", ponieważ nic nie robisz, aby ukryć "x" od czytników ekranu. Dodajesz także węzeł tekstowy, a następnie ukrywasz go w klasie.

Chciałbym użyć przykładu z MDN.