() translation by (you can also view the original English article)
Az alt attribútum az <img> tagen belül alternatív tartalmat biztosít azon felhasználóknak, akik nem tudják letölteni a képeket, vagy akik egy az egyben kikapcsolták a képeket. Ezt az attribútumot mindig arra használjuk, hogy a tartalmunkat még inkább elérhetővé tegyük, de gondoltál-e valaha arra, hogy hogy is néz ki ténylegesen?
Az előző bemutatóban készített email sablonunkat fogjuk példaként használni, de az alapelvek alkalmazhatóak a böngésző alapú webdizájnnál is.
1 |
<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" /> |
Ha vetünk egy pillantást a fájlunkra kikapcsolt képekkel, valahogy így néz ki:
Tisztán látható, hogy az ALT szöveg nem figyelemfelkeltő – különösen a linkek nem azok. Tehetünk pár dolgot, hogy felrázzuk.
A fő fejlécnél sokkal nagyobbá tesszük a szöveget és sötétkékre változtatjuk fekete helyett. Ezt úgy tesszük meg, hogy a szülő elemhez stílusokat adunk (ebben az esetben egy cellához). Ezek a stílusok hozzárendelődnek az alt tagekhez a cellán belül.
Ez a cellánk:
1 |
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;"> |
2 |
<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" /> |
3 |
</td>
|
Hozzáadunk némi szöveg stilizálást, hogy így nézzen ki:
1 |
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0; color: #153643; font-size: 28px; font-weight: bold; font-family: Arial, sans-serif;"> |
2 |
<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" /> |
3 |
</td>
|
És stilizáljuk a közösségi média linkjeinket, hogy fehérré váljanak:
1 |
<table border="0" cellpadding="0" cellspacing="0"> |
2 |
<tr>
|
3 |
<td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;"> |
4 |
<a href="http://www.twitter.com/" style="color: #ffffff;"> |
5 |
<img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" /> |
6 |
</a>
|
7 |
</td>
|
8 |
<td style="font-size: 0; line-height: 0;" width="20"> </td> |
9 |
<td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;"> |
10 |
<a href="http://www.twitter.com/" style="color: #ffffff;"> |
11 |
<img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" /> |
12 |
</a>
|
13 |
</td>
|
14 |
</tr>
|
15 |
</table>
|
Ilyen egyszerű! Most már biztosak lehetünk abban, hogy az emailünk megfelelően jelenik meg, még akkor is, ha a képek ki vannak kapcsolva.
