Chỉ dẫn nhanh: Hãy nhớ định phong cách cho thuộc tính ALT của bạn

Thuộc tính alt bên trong một thẻ <img> cung cấp nội dung thay thế cho những người dùng không thể nạp hình ảnh, hoặc những người dùng đã vô hiệu hoá toàn bộ việc hiển thị hình ảnh. Chúng ta hay sử dụng thuộc tính này để làm cho nội dung của chúng ta dễ truy xuất hơn, nhưng bạn đã bao giờ cân nhắc xem nó thật sự trông như thế nào không?

Chúng ta sẽ sử dụng mẫu email mà chúng ta xây dựng trong một bài trước đó như là một ví dụ, nhưng các nguyên tắc cũng áp dụng cho thiết kế dựa trên trình duyệt web.

<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />

Nếu chúng ta mở tập tin trong trình duyệt với việc hiển thị hình ảnh đã bị vô hiệu hoá, thì nó sẽ trông như thế này:

Rõ ràng văn bản ALT không có gì hấp dẫn—đặc biệt là các liên kết. Chúng ta có thể làm một vài điều để làm cho nó trông đẹp hơn.

Đối với tiêu đề chính, chúng ta sẽ làm cho văn bản hơi lớn hơn và thay đổi nó thành màu xanh đậm thay vì màu đen. Chúng ta làm điều này bằng cách thêm phong cách vào phần tử cha (trong trường hợp này là một cell). Các phong cách sau đó sẽ được áp dụng cho các thẻ alt bên trong cell đó.

Đây là cell của chúng ta:

<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;">
 <img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />
</td>

Chúng ta sẽ thêm một chuỗi phong cách vì thế nó trông như thế này:

<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0; color: #153643; font-size: 28px; font-weight: bold; font-family: Arial, sans-serif;">
 <img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />
</td>

Và chúng ta sẽ định phong cách cho các liên kết mạng xã hội của chúng ta, để chúng trở thành màu trắng:

<table border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;">
   <a href="http://www.twitter.com/" style="color: #ffffff;">
    <img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" />
   </a>
  </td>
  <td style="font-size: 0; line-height: 0;" width="20">&nbsp;</td>
  <td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;">
   <a href="http://www.twitter.com/" style="color: #ffffff;">
    <img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" />
   </a>
  </td>
 </tr>
</table>

Thật đơn giản! Bây giờ chúng ta có thể tự tin là email của chúng ta sẽ hiển thị tốt, ngay cả với việc hiển thị hình ảnh đã bị vô hiệu hoá.