All geek questions in one place

Alt attribute for ASCII art in HTML?

This is a very important question ( very ), but would it be wise to use the attribute altfor the tag prewhen using this to display ASCII art? This essentially resembles an image (would not be understandable with a screen reader), so use altmakes sense.

<pre alt="A cute little blob creature">༼ つ ◕_◕ ༽つ</pre>

Will a screen reader be read? Will it be fit or fit?

(I could have imagined other situations where this might arise, for example, using a typographic object to indicate a specific action, for example, a "home" link.)

+4
source share
2 answers

An attribute exists for this purpose aria-label.

<pre aria-label="A cute little blob creature">༼ つ ◕_◕ ༽つ</pre>

For more information, check out this MDN article on it .

+4
source

You have different options to consider, since screen readers are just one step in a great accessibility journey.

  • Attribute title

The attribute is altspecific to imgand tags area. For another element, you can use an attribute titlethat will give access to the tooltip in many browser implementations:

See the HTML5 document :

title , , . ; ; , ; , ; ; . - .

! title , , (, , , , , touch-only, , , ).

title : ( tabindex=0), , javascript , , , , (, ,...).

  1. aria-label

title, aria-label, - . , , aria-label, title.

, , title , aria-label .

<pre aria-label="Welcome!" title="A cute little blob creature">༼ つ ◕_◕ ༽つ</pre>
  1. .

, , aria-hidden.

<pre aria-hidden="true">༼ つ ◕_◕ ༽つ</pre>
+1

Source: https://habr.com/ru/post/1617541/

More articles:


All Articles