Fragment strony widzialny tylko przy screen readerze

Question

Hej :) Mam pytanie bo niby przeczytałem że stosując taki zapis:

.sr-only{	
position:absolute;
left:-10000px;
width:1px;
height:1px;
top:auto;
overflow:hidden;
}

Ukrywam na stronie klase która będzie widoczna tylko dla screen readerów, ale na jakiej zasadzie to właściwie działa? po co to left:-10000px; ten width:1px i height:1px; Co ja mam umieścić w tej klasie ma być to np jakiś tekst poza ekranem który zwykły uzytkownik nie widzi a reader go odczyta? Tak to ma działać?  Proszę o wytłumaczenie/potwierdzenie. I moze jakieś rady odnośnie stosowania tego na stronach. Pozdrawiam Michał.

 

Answer 1

https://a11yproject.com/posts/how-to-hide-content/

Ogólnie takich klas używa się np. jako etykiet dla ikon, czyli w tych miejscach, które dla użytkownika widzącego są oczywiste, ale dla użytkownika niewidomego – niekoniecznie.

Comments

Dzięki za odpowiedź Tomku, jeszcze nie wiem jak działa to SVG, ale jutro z samego rana postaram się to ogarnąć i stosować do tego co piszesz w przytoczonym przez Cb linku :) Choć nie wszystko do mnie, dociera ale jak by co będę pytał w trakcie tu, albo tam ;] Pozdrawiam, dobrej nocki!