Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. HTML
Webdesign

Γρήγορη Συμβουλή: Να θυμάστε να δίνεται Style στο Alt text σας

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

Greek (ελληνικά) translation by Panagiotis Papavramopoulos (you can also view the original English article)

Το alt attribute (χαρακτηριστικό) μέσα σε ένα <img> tag παρέχει εναλλακτικό περιεχόμενο για χρήστες που δεν μπορούν να κάνουν λήψη εικόνων ή έχουν απενεργοποιήσει εντελώς την εμφάνιση τους. Χρησιμοποιούμε αυτό το attribute για να δημιουργήσουμε ένα πιο προσιτό περιεχόμενο, αλλά έχετε αναρωτηθεί ποτέ πως πραγματικά φαίνεται;

Θα χρησιμοποιήσουμε το email template που δημιουργήσαμε σε προηγούμενο μάθημα ως παράδειγμα, αλλά μπορούν να εφαρμοστούν οι ίδιες αρχές και σε ένα browser-based web design

Αν ρίξουμε μια ματιά στο αρχείο μας, οπού έχουμε απενεργοποιήσει τις εικόνες, θα εμφανίζεται έτσι:

altTagsBefore

Σαφέστατα το κείμενο που εμφανίζεται μέσω του ALT attribute δεν είναι ελκυστικό και ιδιαίτερα τα links. Μπορούμε να κάνουμε μερικές αλλαγές για να γίνουν πιο εμφανίσιμα.

Στον κύριο τίτλο του email template, θα κάνουμε το κείμενο αρκετά μεγαλύτερο και θα αλλάξουμε το χρώμα του σε σκούρο μπλε, αντί του μαύρου. Αυτό πραγματοποιείται προσθέτοντας style στο parent element (σε αυτήν την περίπτωση στο κελί). Αυτό το style στην συνέχεια θα εφαρμοστεί στο alt attribute εντός του συγκεκριμένου κελιού.

Αυτό είναι το κελί μας:

Θα του προσθέσουμε style, οπότε θα γίνει έτσι:

Και θα δώσουμε style στα links κοινωνικής δικτύωσης, ώστε να γίνουν άσπρα:

altTagsAfter

Τόσο απλά!! Τώρα μπορούμε να είμαστε σίγουροι ότι το email μας θα είναι εμφανίσιμο, ακόμη και με απενεργοποιημένες τις εικόνες.

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.