javascript - Is there an equivalent to the "alt" attribute for div elements?

Question

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

Screenreaders will read whatever string is set to the "alt" attribute. The use of this attribute is specifically for image tags.

If I have a div like so:

<div id=myCoolDiv tabindex="0"> 2 <div>

Is there a way to have a screen reader pickup an attribute to read a string the same way an alt tag is used?

So for the div listed below, the screen reader will say ie: "shopping cart items 2"?

I tried using aria-label but the screenreader won't pick it up:

<div id=myCoolDiv tabindex="0" aria-label="shopping cart items"> 2 <div>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-23T18:38:53+0000

There are two ways (which can be combined) to have screen reader to read alternative text:

However this should be used only in case the element really represent an image (e.g. the heart unicode character).

Do not mismatch it with aria-labeledby which should contain ID of an related element.

When more ARIA roles are defined, browser should use the first one that is supported and process the element with that role.

One last important thing is that you must set page type to HTML5 (which support ARIA by design).

<!DOCTYPE html>

Using HTML4 or XHTML requires special DTD to enable ARIA support.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+ARIA 1.0//EN"
   "http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">