7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. HTML

Gyorstipp: Ne feledd stilizálni az ALT szövegedet

Scroll to top
Read Time: 1 min
This post is part of a series called Strange and Unusual HTML.
Quick Tip: Consider Wrapping Your Code With a “figure” Element
Quick Tip: Set Relative URLs With the “base” Tag

Hungarian (Magyar) translation by Szabó Péter (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.

Ha vetünk egy pillantást a fájlunkra kikapcsolt képekkel, valahogy így néz ki:

altTagsBeforealtTagsBeforealtTagsBefore

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:

Hozzáadunk némi szöveg stilizálást, hogy így nézzen ki:

És stilizáljuk a közösségi média linkjeinket, hogy fehérré váljanak:

altTagsAfteraltTagsAfteraltTagsAfter

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.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.