Считыватели экрана: как сделать слово с тегами, окружающими его буквы, произноситься как одно слово, а не буквой?

Question

У меня есть заголовок, как это:

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

тегах вокруг буквы «е» причина Mac OS X Voiceover читать отдельные буквы слова по отдельности, а не полное слово. Так, он говорит:

«Это т. Е.».

Вместо:

"Это тест".

Учитывая, что мне нужно приложить букву слова в теге *, как я могу убедиться, что читатель экрана говорит это слово как обычно?

• N.B: любой тег будет делать. Я пробовал <b>, <i> и <em>, и все они генерируют такой же эффект.

Answer 1

Это не решение, но это может оказаться полезным обходным решением, если ваша ситуация позволит вам.

Я чувствовал, что вы хотите обернуть одну букву, чтобы визуализировать ее по-другому, вместо этого вы можете показать слово «тест» как изображение, сделав так, чтобы вы могли его создать любым способом, и поместите слово «тест» в качестве атрибута alt на изображении

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

Так что, если это так, то голосом OS X будет читать его правильно. Потому что, если я правильно помню, он читает атрибут alt изображения.

Теперь в этом случае может возникнуть проблема. Любой хочет выбрать его как текст, тогда это было бы невозможно. Вы можете решить это, вызвав функцию javascript для динамического изменения внутреннего html тега span (с id = «specialWord»), чтобы «проверить» из img.

Надеюсь, вы сможете воспользоваться этим.

Answer 2

Один из способов обойти эту причуду, предлагая чтения с экрана только вариант текста вместе с лакомым кусочком, который сбросив чтения с экрана, такие как:

CSS сниппет:

.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; 
} 

Разметка пример:

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

Там, атрибут aria-hidden скрывает неприятное лакомство от читателей экрана (<span aria-hidden="true">t<strong>e</strong>st</span>) и offscreen class визуально скрывает версию текста для чтения с экрана (<span class="offscreen">test</span>).

Конечным результатом является то, что пользователи экранного чтения услышат «Это тест», и увиденные пользователи увидят «Это тест» на странице.