В HTML, как я могу получить текст, доступный только для чтения с экрана (т.е. Для слепых)?

Ответ 1

Что касается alt text, вы правы, это работает только для изображений. Но вы можете использовать aria-label вместо атрибута alt для таких элементов без изображения:

Решения, которые работают

Маркировка ARIA ★ ★ ★ ★ ★ ★

aria-label (чтобы не сфокусироваться на aria-labeledby) используется для добавления внеэкранного описательного содержимого к элементу, значительно отличающемуся от атрибута alt=, добавляющего внеэкранный описательный контент к изображениям, которые будут использоваться, когда изображения не отображаются.

Разница заключается в том, что aria-label может использоваться для элементов без изображения.

<div aria-label="test A"><p aria-hidden="true">test B</p></div>
<!--
     result (screenreaders):  test A
     result (regular):        test B
-->

Добавление атрибута aria-hidden скрывает внутренний текст.

Позиция + Клип + Свернуть ★ ★ ★ ★

.screenreader {
    position: absolute !important; /* Outside the DOM flow */
    height: 1px; width: 1px; /* Nearly collapsed */
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE 7+ only support clip without commas */
    clip: rect(1px, 1px, 1px, 1px); /* All other browsers */
}

Клип используется, чтобы полностью скрыть элемент 1px x 1px, в противном случае он все равно будет отображаться на экране.

Позиция ★ ★ ★

.screenreader {
    position: absolute;
    left:-9999px;
}

<div>Wed<span class="screenreader">nesday</span>, Sept<span class="screenreader">ember</span> 24, 2014</div>

Отступ ★

.screenreader {
    text-indent: -5000px;
}

Фактическое значение отступа не имеет значения, если оно находится вне диапазона макета ваших страниц. Пример приведет к перемещению содержимого влево на 5 000 пикселей.

Это решение работает только для полных блоков текста. Он не будет работать хорошо на якорях или формах, или на языках справа налево, или на встроенный текст, смешанный с другим текстом.

Не работает

видимость: скрытая; и/или отображение: none;

Эти стили будут скрывать текст от всех пользователей. Текст удаляется из визуального потока страницы и игнорируется программами чтения с экрана. Не используйте этот CSS, если вы хотите, чтобы содержимое считывалось с помощью программы чтения с экрана. Но НЕ используйте его для контента, который вы не хотите читать читателями экрана.

<ударa > ширина: 0px; высота: 0pxудаp >

Как указано выше, поскольку элемент, не имеющий высоты или ширины, удаляется из потока страницы, большинство считывателей экрана игнорируют это содержимое. Ширина и высота HTML могут дать тот же результат. Не производите размер содержимого до 0 пикселей, если вы хотите, чтобы содержимое считывалось устройством чтения с экрана.

Далее:

• Центр WebAIM для людей с ограниченными возможностями
• Fangs Screen Reader Emulator для Mozilla

Ответ 2

Если иное не указано в принятом ответе, по крайней мере, Chromevox ¹и NVDA ² также читают элементы со стильным display:none или visibility: hidden атрибуты CSS, если установлено aria-hidden=false. Однако в настоящее время только в Chrome (65), а не в Firefox или Edge (по моим тестам).

Итак (в настоящее время, к сожалению, только в Chrome) также можно сделать что-то вроде этого:

<h1 aria-hidden="false" style="display: none;">Heading only for Screen Readers</h1>
<h1 aria-hidden="false" style="visibility: hidden;">Second Heading only for Screen Readers</h1>
<h1 aria-hidden="true">Heading only for Screen</h1>

где Chromevox и NVDA читают первый и второй заголовок. Также см. Это: https://jsfiddle.net/4y3g6zr8/6/

Если бы все браузеры согласились на это поведение, это было бы намного более чистое решение, чем все трюки CSS, предложенные в других решениях.

^{1 _{Chromevox https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn}2 _{NVDA https://www.nvaccess.org/}}

Ответ 3

Вы можете поместить визуально скрытый элемент внутри:

<div>
    <span class="visually_hidden">2 red</span>
</div>

Чтобы "визуально скрывать", вы можете охарактеризовать, как это делает HTML5:

.visually_hidden { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
}

Ответ 4

Относительно вопроса в заголовке: Нет, нет способа (в HTML или иначе) иметь текст, доступный только для чтения с экрана. Независимо от того, что вы можете сделать, например, с помощью элемента img с непустым атрибутом alt и отсутствующим или dysfunct src атрибутом "или с помощью CSS, чтобы скрыть что-то визуально, будет доступно любое программное обеспечение, которое его прочитает (и могут быть недоступны для чтения с экрана по той или иной причине).

С другой стороны, если вы действительно используете, например,

<div class=foo>2 <img alt=red></div>

тогда большинство читателей экрана будут считать это "двумя красными", но так же будут вести себя в нормальных браузерах, поэтому эффект не ограничивается экранными программами.

Что вы должны сделать для доступности, это другая проблема и зависит от контекста и с целью использования красного цвета. Обратите внимание, что даже когда браузер отображает поле красного цвета, пользователь может не видеть его красным, из-за слепоты цвета; в частности, если уместно различать красный и зеленый, многие люди не смогут этого сделать.

В конкретном случае может быть простое решение, или это может быть сложной проблемой без хорошего решения. Общие замечания и различные методы см. В документе Как встретить WCAG 2.0: использование цвета.

Ответ 5

Как насчет того, чтобы сделать цвет шрифта полностью прозрачным? У меня нет программы чтения с экрана, чтобы проверить, читается ли этот тип текста программами чтения с экрана.

.hovereffect a.info {
    color: #9c27b000 !important;
}