web-dev-qa-db-fra.com

Comment souligner et ponctuer les mots dans un attribut 'alt'?

Dites, quand vous avez une bonne quantité de texte que vous devez modifier. (Je réalise qu'il est préférable d'extraire l'image d'une image en texte brut, si possible ... mais les choses ne sont pas toujours idéales, malheureusement ... et si ce n'est pas le cas, il serait bon d'avoir une cohérence , approche fiable.)

Parfois, vous souhaitez souligner un titre, des sauts de ligne, etc.

Je pense que pour la meilleure lecture par les humains (en utilisant des lecteurs d'écran, etc.) et les moteurs de recherche. L’optimisation pour les humains malvoyants est assez simple: on peut utiliser des astérisques, une autre ponctuation visuelle, des espaces, etc.

** HEADLINE **  
I would really like to know how to 
properly *emphasize* things in alt-texts.

And how about line breaks and whitespace?

<Latest specials are here>

Mais comment cela se produit-il aux moteurs de recherche? Pour filtrer les lecteurs? Existe-t-il une meilleure pratique concernant ce type de choses, un langage commun de conventions que les gens/Google comprennent?

seohtmlaccessibilityalt-attribute
1
Aaron Wallentine

Vous pouvez styler le texte alternatif. Vous pouvez mettre le texte alt en gras, ajouter un arrière-plan ou changer sa couleur. Vous pouvez également ajouter des sauts de ligne. Je ne pense pas qu'il soit possible de rendre certains mots audacieux et certains mots normaux, mais s'il y a une solution, j'aimerais aussi l'avoir.

Voici un exemple:

<img src="foo.jpg" alt="Line 1
Line 2" />
<br><br>
<img src="foo.jpg" alt="someText" style="color:#54C5D0; font-weight: bold;" src="IMG_URL"/> 
<br><br>
<div style="color:#54C5D0;font-weight:bold">
<img src="foo.jpg" alt="line1
line2" style="border:1px solid #aaeedd" src="IMG_URL"/> 
</div> 
        <style>img{white-space:pre}</style>

http://jsfiddle.net/o3keo9bp/

2
Michael d

En plus d’utiliser du texte (comme *…*, **…**, __…__, (!!) etc.), qui pourrait être compris ou non par vos utilisateurs (ou lu par leur écran lecteurs), il n’ya pas moyen.

Si vous avez une description alternative complexe, l'attribut alt n'est pas la bonne solution. Utilisez l’attribut longdesc, un figure avec figcaption, ou (au lieu de img) l’élément object. Exemples dans cette réponse.

1
unor