In HTML, how can I get text that is read-only from the screen (i.e., for the blind)?

Question

I have a website that has colored divs with numbers, like a red block with the number 2 inside. Color is important for understanding. A blind user sent me an email asking if I could say “2 red” for his screen reader.

I tried adding this as alt = "2 red", but he said he did nothing. He thinks he can only read alternative tags for images.

Is there a good way to do this for divs?

Answer 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; : 0pxp >

, , , , . HTML . 0 , , .

:

• WebAIM
• Fangs Screen Reader Emulator Mozilla

Answer 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/}}

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

Answer 4

: , ( HTML ) , . , , , img alt dysfunct src " CSS, - , , ( ).

, , ,

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

" ", , .

, . , , , - ; , , .

, . . WCAG 2.0: .

Answer 5

, ? , , .

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