Czytniki ekranu: jak zrobić słowo z etykietami otaczającymi jego litery, które powinno być wypowiadane jako pojedyncze słowo, a nie seria liter?

Question

Mam nagłówek tak:

<h1>This is a t<span>e</span>st.</h1>

tagów wokół litery „e” przyczyna Mac OS X VoiceOver odczytać poszczególne litery słowa osobno, zamiast pełnego wyrazu. Tak więc, mówi:

"To jest t st."

Zamiast:

"To jest test".

Biorąc pod uwagę, że muszę umieścić w tekście literę słowa *, w jaki sposób mogę się upewnić, że czytnik ekranu odczytuje słowo tak jak zwykle?

• N.B: dowolny znacznik zrobi. Próbowałem już <b>, i <em> i wszystkie one generują ten sam efekt.

Answer 1

To nie jest rozwiązanie, ale może to być przydatne rozwiązanie, jeśli pozwala na to Twoja sytuacja.

Czułem, że chcesz zawijać jedną literę, aby renderować to inaczej, zamiast tego możesz pokazać słowo "test" jako obraz, robiąc to, aby utworzyć je w dowolny sposób i umieścić słowo "test" jako atrybut alt w obrazie

<h1>This is a <span id="specialWord" ><img src = "testImage.jpg" alt = "test"></span>. </h1> 

Więc jeśli tak jest OS X Voice over będzie go odczytać prawidłowo. Ponieważ jeśli dobrze pamiętam, odczytuje atrybut alt obrazu.

Teraz w takim przypadku może pojawić się problem. Ktoś chce wybrać go jako tekst, wtedy nie będzie to możliwe. Możesz rozwiązać ten problem, wywołując funkcję javascript, aby dynamicznie zmieniać wewnętrzny html tagu span (z id = "specialWord"), aby "przetestować" z pliku img.

Mam nadzieję, że możesz z tego skorzystać.

Answer 2

Jednym ze sposobów obejścia tego dziwactwo jest oferując screen-reader tylko wersję tekstu obok smakołyk, który rzuca się czytniki ekranu, takie jak:

CSS urywek:

.offscreen 
{ 
    position: absolute; 
    clip: rect(1px 1px 1px 1px); /* for Internet Explorer */ 
    clip: rect(1px, 1px, 1px, 1px); 
    padding: 0; 
    border: 0; 
    height: 1px; 
    width: 1px; 
    overflow: hidden; 
} 

znaczników przykład:

<h1>This is a 
    <span aria-hidden="true">t<strong>e</strong>st</span> 
    <span class="offscreen">test</span>. 
</h1> 

tam atrybut aria-hidden ukrywa kłopotliwe smakołyk z czytników ekranu (<span aria-hidden="true">t<strong>e</strong>st</span>) i offscreen class wizualnie ukrywa wersję tekstu czytnika ekranu (<span class="offscreen">test</span>).

Rezultatem jest to, że użytkownicy czytników ekranu usłyszą "To jest test", a widzący użytkownicy zobaczą "To jest test" na stronie.