Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML
Webdesign

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

by
Length:ShortLanguages:
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:

altTagsBefore

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:

altTagsAfter

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
Advertisement
Advertisement
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.