У меня есть веб-сайт, на котором есть цветные div с цифрами, например, красный блок с цифрой 2 внутри. Цвет важен для понимания. Слепой пользователь отправил мне электронное письмо с вопросом, могу ли я сказать "2 красных" для его программы чтения с экрана.
Я попытался добавить это как alt= "2 red", но он сказал, что ничего не сделал. Он думает, что он может читать только альтернативные теги для изображений.
Есть ли хороший способ сделать это для divs?
Что касается alt text, вы правы, это работает только для изображений. Но вы можете использовать aria-label вместо атрибута alt для таких элементов без изображения:
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 пикселей.
Это решение работает только для полных блоков текста. Он не будет работать хорошо на якорях или формах, или на языках справа налево, или на встроенный текст, смешанный с другим текстом.
Эти стили будут скрывать текст от всех пользователей. Текст удаляется из визуального потока страницы и игнорируется программами чтения с экрана. Не используйте этот CSS, если вы хотите, чтобы содержимое считывалось с помощью программы чтения с экрана. Но НЕ используйте его для контента, который вы не хотите читать читателями экрана.
Как указано выше, поскольку элемент, не имеющий высоты или ширины, удаляется из потока страницы, большинство считывателей экрана игнорируют это содержимое. Ширина и высота HTML могут дать тот же результат. Не производите размер содержимого до 0 пикселей, если вы хотите, чтобы содержимое считывалось устройством чтения с экрана.
Если иное не указано в принятом ответе, по крайней мере, Chromevox 1и NVDA 2 также читают элементы со стильным 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/kgejglhpjiefppelpmljglcjbhoiplfn2 NVDA https://www.nvaccess.org/
Вы можете поместить визуально скрытый элемент внутри:
<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;
}
Относительно вопроса в заголовке: Нет, нет способа (в HTML или иначе) иметь текст, доступный только для чтения с экрана. Независимо от того, что вы можете сделать, например, с помощью элемента img с непустым атрибутом alt и отсутствующим или dysfunct src атрибутом "или с помощью CSS, чтобы скрыть что-то визуально, будет доступно любое программное обеспечение, которое его прочитает (и могут быть недоступны для чтения с экрана по той или иной причине).
С другой стороны, если вы действительно используете, например,
<div class=foo>2 <img alt=red></div>
тогда большинство читателей экрана будут считать это "двумя красными", но так же будут вести себя в нормальных браузерах, поэтому эффект не ограничивается экранными программами.
Что вы должны сделать для доступности, это другая проблема и зависит от контекста и с целью использования красного цвета. Обратите внимание, что даже когда браузер отображает поле красного цвета, пользователь может не видеть его красным, из-за слепоты цвета; в частности, если уместно различать красный и зеленый, многие люди не смогут этого сделать.
В конкретном случае может быть простое решение, или это может быть сложной проблемой без хорошего решения. Общие замечания и различные методы см. В документе Как встретить WCAG 2.0: использование цвета.
Как насчет того, чтобы сделать цвет шрифта полностью прозрачным? У меня нет программы чтения с экрана, чтобы проверить, читается ли этот тип текста программами чтения с экрана.
.hovereffect a.info {
color: #9c27b000 !important;
}