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

Hướng dẫn cho người mới bắt đầu về trợ năng email (Checklist + Nguồn tài nguyên)

by
Difficulty:BeginnerLength:LongLanguages:

Vietnamese (Tiếng Việt) translation by Thai An (you can also view the original English article)

Hướng dẫn này sẽ hướng dẫn bạn qua danh sách kiểm tra gồm hơn 30 cải tiến mà bạn có thể thực hiện đối với email của mình để đảm bảo chúng có thể truy cập nhất có thể. Nó cũng được đóng gói với các liên kết và hướng dẫn hữu ích, vì vậy hãy đánh dấu trang này và biến nó thành tài nguyên truy cập của bạn để truy cập email.

feature image from Wax Seal Logo Mockup on Envato Market
Tính năng hình ảnh từ WaxSeal Logo Mockup trên Envato Market

Lưu ý: hướng dẫn này là một phần của nội dung email trong cả tuần trên Tuts + Thiết kế web — hãy xem hướng dẫn tìm hiểu về HTML Mastering để biết thêm thông tin!

Gửi email cho chuyên gia: Đã đến lúc ưu tiên khả năng truy cập

Chúng tôi đặt rất nhiều nỗ lực vào các bản tin, chiến dịch tiếp thị và các email khác mà chúng tôi gửi. Chúng tôi cẩn thận soạn thảo đúng thông điệp. Chúng tôi siêng năng thiết kế hình ảnh. Chúng tôi triumphantly thử nghiệm trong Outlook.

Và nó trả hết. Email vẫn là cách hầu hết mọi người thích nghe từ các công ty, và như một kênh tiếp thị, nó có lợi tức đầu tư trung bình từ 32 đến 1.

Nhưng vẫn còn, hầu hết chúng ta có thể làm tốt hơn nữa. Email HTML không được thiết kế theo kiểu truyền thống và được mã hóa với khả năng truy cập. Kết quả là, nhiều người nhận của chúng tôi đang cố gắng tham gia và chúng tôi đang từ chối một phần khán giả của mình.

Đôi khi cải tiến là hiển nhiên. Nếu toàn bộ email của bạn bao gồm in đẹp, hầu hết chúng ta trên 25 tuổi sẽ có một thời gian khó đọc nó. Nhưng thường xuyên hơn, các rào cản chúng tôi đặt giữa thông điệp của chúng tôi và người nhận của chúng tôi là tinh tế hơn. Tôi sẽ thừa nhận rằng tôi mất một chút thời gian để nhận thấy sự cố trong ảnh sau:

Khi chúng tôi biết được những vấn đề này, chúng thường dễ dàng sửa chữa. Bằng cách đọc này, bạn đã thực hiện một bước quan trọng đầu tiên hướng tới việc email của bạn có thể truy cập được với nhiều người hơn.

Nếu bạn mới sử dụng email mã hóa, tôi khuyên bạn nên đọc hướng dẫn của Nicole Merlin trước tiên. Những điều này sẽ dạy cho bạn các nguyên tắc cơ bản về email HTML và cách chúng khác với các trang web.

Chúng tôi sẽ xây dựng dựa trên các kỹ năng đó khi chúng tôi tìm hiểu cách áp dụng các cân nhắc trợ năng cho email của mình.

Chúng tôi có ý nghĩa gì bởi "Khả năng truy cập"?

Tại cốt lõi của nó, khả năng truy cập email là về việc làm cho email của bạn có sẵn cho càng nhiều người nhận càng tốt, bất kể hoàn cảnh của họ là gì. Chúng tôi thường nghĩ về khả năng tiếp cận như kế toán cho các khuyết tật khác nhau, và điều đó đúng, nhưng nó thực sự là một định nghĩa rộng hơn so với điều đó, như được vạch ra bởi Sami Keijonen:

“Tất cả chúng ta đều khác nhau và nhu cầu của chúng ta có thể thay đổi theo thời gian.” - Sami Keijonen

Khuyết tật có nhiều hình thức và mức độ nghiêm trọng. Báo cáo Thế giới của WHO về tình trạng khuyết tật ước tính rằng 15% dân số thế giới đang sống chung với tình trạng khuyết tật. Tùy thuộc vào tình hình của họ, những cá nhân này có thể có quyền truy cập vào công nghệ hỗ trợ giúp công việc hàng ngày dễ dàng hơn. Để làm cho email của chúng tôi dễ truy cập hơn, chúng tôi cần tránh đặt rào cản trước mặt mọi người cũng như các công cụ mà họ dựa vào.

Bắt đầu với trải nghiệm cơ bản

Chọn email bạn đã gửi gần đây. Mở nó trên màn hình của bạn, hoặc in nó ra để bạn có thể ghi chú vào nó.

Mục tiêu của email là gì? Người nhận nên thực hiện hành động gì sau khi đọc hoặc họ đã học được thông tin nào?

Email bao gồm những yếu tố nào? Mỗi người đóng góp vào mục tiêu như thế nào? Email sẽ vẫn hợp lý nếu một trong các đoạn văn, liên kết hoặc hình ảnh bị xóa?

Việc hỏi những loại câu hỏi này sẽ giúp bạn xác định trải nghiệm ban đầu - mức tối thiểu cần thiết để truyền đạt thành công cho người nhận. Điều này có thể đơn giản như một liên kết và nhãn của nó, hoặc có thể có nhiều thứ bạn cần phải vượt qua.

Trên tất cả, trải nghiệm cơ bản cần phải có sẵn cho tất cả người nhận truy cập và hiểu. Và mọi thứ khác nên được thiết kế để không cản đường. Bây giờ cho các chi tiết cụ thể ...

1. Làm cho văn bản có thể đọc được

Tránh các bức tường văn bản

Đoạn văn càng dài thì càng khó đọc hơn. Điều này áp dụng cho tất cả mọi người, nhưng đặc biệt là những người bị chứng khó đọc hoặc khuyết tật học tập khác.

Dưới đây là một số mẹo để làm cho văn bản của bạn dễ đọc hơn:

  • Chia đoạn dài thành đoạn ngắn hơn. Mỗi đoạn phải có một tiêu điểm duy nhất. Đọc từng câu và xem câu đó có tập trung vào cùng một câu như câu cuối cùng hay không. Nếu không, hãy bắt đầu một đoạn mới.
  • Các đoạn liên quan đến nhóm theo các tiêu đề mô tả. Nếu bạn sử dụng nhiều hơn một mức tiêu đề, hãy đảm bảo hệ thống phân cấp có ý nghĩa; thông thường bạn sẽ sử dụng cho tiêu đề chính, s cho mỗi phần, s cho các phần phụ, v.v. Sử dụng các phần tử tiêu đề ngữ nghĩa cũng làm cho email của bạn dễ điều hướng hơn bằng cách sử dụng trình đọc màn hình.
  • Sử dụng nghiêng hoặc đậm để nhấn mạnh, nhưng sử dụng chúng một cách tiết kiệm. Nếu bạn nhấn mạnh mọi thứ, không có gì nổi bật.
  • Các nhóm điểm hiện tại như các danh sách có dấu đầu dòng () hoặc được đánh số () để làm cho chúng dễ tiêu hóa.
  • Bao gồm đồ họa để trực quan hóa và hỗ trợ nội dung văn bản.

Sử dụng các từ đơn giản

Nếu bạn là nhà thiết kế hoặc nhà phát triển, việc viết có thể không phải là một phần công việc của bạn. Trong trường hợp đó, hãy cân nhắc chia sẻ hướng dẫn này với đồng nghiệp hoặc khách hàng của bạn. Khi làm việc để làm cho các email của chúng tôi có thể truy cập được, ngôn ngữ chúng tôi sử dụng ít nhất cũng quan trọng như các khía cạnh kỹ thuật hoặc trực quan hơn.

Hãy nhớ rằng mọi người đọc ở các cấp độ đọc khác nhau, vì nhiều lý do. Bạn có thể có người bị chứng khó đọc. Bạn có thể viết bằng ngôn ngữ thứ hai của họ. Hoặc có thể họ không quen thuộc với biệt ngữ của chủ đề.

Nếu bạn đang viết cho một nhóm người về một chủ đề, bạn thường sẽ thông thạo hơn về vấn đề này hơn là họ. Chúng ta càng biết nhiều về điều gì đó, chúng ta càng quên những gì nó không biết. Hiện tượng này được gọi là "lời nguyền của tri thức".

Nếu bạn không chắc liệu mọi người ít quen thuộc với chủ đề này có thể hiểu được bài viết của bạn hay không, hãy tìm một người nào đó để yêu cầu phản hồi. Đồng nghiệp của bạn cũng có thể bị nguyền rủa kiến ​​thức. Có thể bạn có thể nhận được sự giúp đỡ từ một người bạn, một thành viên trong gia đình hoặc một trong những người đăng ký của bạn?

Khi tôi đăng nhập để viết cho Tuts +, họ đã gửi cho tôi hướng dẫn về phong cách của họ, trong đó có một số ví dụ về lựa chọn từ tiếng Anh đơn giản:

Sử dụng "mua", không phải "mua". Sử dụng "trợ giúp", không phải "hỗ trợ". Sử dụng “about” chứ không phải “approx”.

Bạn có thể thay thế bất kỳ từ nào trong email của mình bằng những từ đơn giản hơn không? Làm cách nào để giữ danh sách các cụm từ khó hiểu mà bạn thường sử dụng và các từ để sử dụng thay thế?

Ngoài ra còn có một số công thức để đo lường cách đọc văn bản của bạn.

Nếu bạn sao chép và dán nội dung của mình vào Word hoặc Outlook, bạn có thể đánh giá khả năng đọc của mình bằng cách sử dụng hai bài kiểm tra: Bài kiểm tra Khả năng đọc dễ dàng của Flesch, điểm số dễ đọc từ 0 đến 100 và bài kiểm tra cấp Flesch-Kincaid. những gì mà một người ở cấp lớp ở Hoa Kỳ thường hiểu văn bản.

Các xét nghiệm này xem xét số từ trung bình trên mỗi câu và số âm tiết trung bình trên mỗi từ, như chỉ báo về cách đọc văn bản dễ dàng.

Để kiểm tra toàn diện hơn, hãy thử readable.io. Công cụ trực tuyến này cho phép bạn chạy nội dung của mình thông qua nhiều bài kiểm tra khả năng đọc. Kế hoạch trả tiền của họ thậm chí cung cấp một công cụ đặc biệt cho email: chuyển tiếp email đến một địa chỉ email cụ thể và họ trả lời bằng báo cáo có thể đọc tự động.

Sử dụng kích thước phông chữ 14px hoặc lớn hơn

Tăng kích thước phông chữ không chỉ là một mẹo ngớ ngẩn để làm cho bài luận của bạn có vẻ dài hơn.

Đó cũng là một cách đơn giản để giúp email của bạn dễ đọc hơn. 14px là mức tối thiểu tuyệt đối cho bản sao cơ thể. Văn bản ở đây trên Tuts + có kích thước phông chữ là 18px và không cảm thấy quá lớn.

Tiêu đề phải đủ lớn để dễ dàng nổi bật so với bản sao nội dung. Loại Quy mô là một công cụ tiện dụng để tính toán và xem trước kích thước phông chữ phù hợp. Tìm hiểu thêm về quy mô và phân cấp từ các hướng dẫn này:

Đảm bảo bạn sử dụng màu sắc tương phản

Theo nguyên tắc chung, văn bản màu tối trên màu nền sáng dễ đọc nhất đối với hầu hết mọi người.

Nếu bạn sử dụng kết hợp màu với độ tương phản thấp, chẳng hạn như văn bản màu xám nhạt trên nền trắng, có thể khó đọc đối với những người có thị lực kém hoặc mù màu. Độ tương phản thấp cũng làm cho văn bản khó đọc hơn trong điều kiện ánh sáng yếu như ánh sáng mặt trời trực tiếp.

Văn bản sáng trên nền tối cũng có thể hoạt động tốt, đặc biệt đối với những người có độ nhạy sáng hoặc khi sử dụng màn hình sáng trong môi trường tối. Nhưng đối với những người bị lão thị (nhìn mờ), văn bản sáng trên nền tối tạo ra một loại hào quang hoặc hiệu ứng ánh sáng. Tất cả mọi người cuối cùng kinh nghiệm lão thị ở một mức độ nào đó. Khả năng tập trung của mắt của chúng tôi giảm theo độ tuổi, thường bắt đầu đôi khi sau 40.

Có rất nhiều công cụ để kiểm tra xem độ tương phản màu của bạn có đủ cao không:

  • contrast-ratio.com là một công cụ hữu ích với một tên miền đáng nhớ. Khi bạn nhập kết hợp màu, nó sẽ xem trước độ tương phản và thay đổi thanh địa chỉ thành liên kết trực tiếp để bạn có thể chia sẻ kết hợp màu.
  • Tôi cũng thực sự thích công cụ tìm tương phản tanaguru, cho thấy các tùy chọn màu khác nếu độ tương phản của bạn quá thấp.


color contrast tool
Đúng vậy, PapayaWhip và DarkSlateGrey, xinh đẹp

Tránh trọng lượng phông chữ mỏng

Phông chữ siêu nhẹ đã trở nên phổ biến với các nhà thiết kế trong vài năm nay, nhưng chúng ít phổ biến hơn với những người có thị lực kém.

Contrast good font weight bad
Độ tương phản tốt, trọng lượng phông chữ kém

Khi kết hợp với độ tương phản màu thấp và màn hình cũ hơn, trọng lượng phông chữ này đặc biệt khó đọc. Để có trải nghiệm đọc tốt hơn, hãy sử dụng trọng số từ 500 (bình thường) trở lên.

Căn chỉnh bản sao nội dung của bạn, không biện minh hoặc căn giữa

Các ngôn ngữ được đọc từ trái sang phải, như tiếng Anh, dễ đọc nhất khi căn trái. Đối với các tập lệnh từ phải sang trái như các tập lệnh được sử dụng bằng tiếng Ả Rập, tiếng Ba Tư và tiếng Do Thái, hãy căn chỉnh văn bản ở bên phải.

Ngay cả khi bạn thích giao diện của văn bản trung tâm, bạn nên tránh nó nếu bạn có thể. Văn bản dễ đọc hơn cho mọi người khi mỗi dòng bắt đầu ngay bên dưới dòng trước. Điều này đúng ngay cả đối với các tiêu đề nhưng đặc biệt quan trọng đối với bản sao cơ thể.

Cuối cùng, bạn không bao giờ nên sử dụng căn chỉnh hợp lý, nơi văn bản được sắp xếp sao cho nó có cả cạnh trên cả hai mặt. Văn bản được biện minh khó đọc hơn nói chung và đặc biệt là trong các trình duyệt web và ứng dụng email, không xử lý tốt biện minh.

Sử dụng chiều cao dòng đủ lớn

Từ ngữ cần chỗ để thở.

Nếu các dòng văn bản quá gần nhau, chúng có thể khó phân biệt mắt. Nó trở nên quá dễ dàng để vô tình nhảy vào dòng sai. Nếu chúng quá xa nhau, chúng bắt đầu trông giống như những đoạn riêng biệt.

Chiều cao dòng tốt nhất để sử dụng tùy thuộc vào kích thước phông chữ và chiều dài dòng. Nhưng nếu bạn muốn quy tắc nhanh chóng, chung chung, bạn không thể quá sai với chiều cao dòng gấp 1,5 lần kích thước phông chữ. Ví dụ: kích thước phông chữ 16px sẽ thoải mái khi đọc với chiều cao dòng là 24px.

Hỗ trợ khách hàng email cho thuộc tính chiều cao dòng là chủ yếu là rắn, ngoại trừ một số hành vi kỳ lạ trong Outlook. Sử dụng giá trị px thay cho giá trị em, tỷ lệ phần trăm hoặc "đơn vị" để có kết quả nhất quán hơn.

Làm cho độ dài dòng ("Đo lường") có thể đọc được

Bạn càng đi dọc theo một dòng văn bản thì càng khó tìm đường trở về nơi bạn bắt đầu.

Nếu văn bản của bạn quá rộng, mắt phải di chuyển rất nhiều và rất khó để tiếp tục đọc từ dòng này sang dòng khác.

Để có thể đọc tối ưu, hãy nhắm tới độ dài dòng khoảng 45-75 ký tự.

Kích thước phông chữ, chiều cao dòng và độ dài dòng đều ảnh hưởng lẫn nhau. Có nhiều cách tiếp cận để quyết định tỷ lệ. Một số người thích sử dụng tỷ lệ vàng (ngay cả khi các thuộc tính huyền diệu của nó không nhất thiết là một công thức đảm bảo để thành công). Sử dụng máy tính Tỷ lệ vàng Typography, bạn có thể nhanh chóng nhận được đề xuất chiều cao dòng và tính toán độ dài dòng gần đúng (CPL hoặc ký tự trên mỗi dòng) dựa trên kích thước phông chữ và chiều rộng cột của bạn.

Sử dụng đánh dấu ngữ nghĩa

Theo truyền thống, các nhà phát triển email đã mã hóa mọi phần email của họ dưới dạng đánh dấu bảng, bao gồm các hàng bảng riêng biệt cho từng tiêu đề và đoạn. Điều này một phần là do một số ứng dụng email được sử dụng để thay đổi kiểu của các phần tử ngữ nghĩa, nhưng cũng bởi vì mọi người sẽ quen thuộc với cách các bảng HTML hoạt động như thế nào khi chúng kết thúc bằng cách sử dụng chúng theo mặc định.

Khi nói đi: nếu tất cả những gì bạn có là một cái búa, mọi thứ trông giống như một cái đinh.

Nhưng khi các ứng dụng email đã cải thiện khả năng hiển thị của chúng và chúng tôi là nhà phát triển email đã cải thiện chung các phương pháp mã hóa của mình, nhiều người đã thấy rằng có nhiều nhược điểm hơn so với lợi thế của kiểu mã dựa trên bảng.

Thay vào đó, nếu bạn viết các đoạn, danh sách và tiêu đề của mình, như , , , , , v.v. thì những người sử dụng trình đọc màn hình và các công nghệ trợ giúp khác sẽ dễ dàng điều hướng và hiểu rõ nội dung của bạn.

Bạn vẫn sẽ có cùng một mức độ kiểm soát đối với nội dung của bạn trông như thế nào bằng cách tạo kiểu cho nó bằng CSS và nó sẽ dễ truy cập hơn, với ít mã hơn. Bạn sẽ muốn áp dụng các lề bạn muốn cho mỗi phần tử, trong khi các kiểu như kích cỡ phông chữ và màu sắc của cơ thể có thể được đặt trên một phần tử cha và được thừa kế bởi tất cả các đoạn văn.

Dưới đây là một ví dụ cơ bản:

Sử dụng thuộc tính lang

Hầu hết các máy tính và điện thoại thông minh đều có phần mềm đọc màn hình đọc văn bản dưới dạng lời nói. Để phát âm các từ chính xác và không giống như một diễn viên đóng thế người Ý, trình đọc màn hình cần phải biết ngôn ngữ của bạn được viết bằng ngôn ngữ nào.

Để chỉ định ngôn ngữ nội dung, chúng tôi sử dụng thuộc tính lang. Dưới đây là ví dụ nhanh về cách câu tiếng Pháp có âm và không có ngôn ngữ được chỉ định (video từ Léonie Watson):

Thuộc tính lang làm việc với bất kỳ phần tử HTML nào. Nếu bạn sử dụng các phần tử khác nhau trong cùng một email, hãy chỉ định ngôn ngữ chính xác cho từng phần.

Ngôn ngữ chính nên được đặt cho phần tử . Nhưng vì một số ứng dụng email sẽ xóa phần tử này khi hiển thị email, nên cũng an toàn nhất để lặp lại thuộc tính trên phần tử trình bao bên trong , chẳng hạn như xung quanh toàn bộ nội dung của email.

Để tìm giá trị phù hợp để sử dụng cho ngôn ngữ của bạn, bạn có thể tham khảo Sổ đăng ký Subtag Language IANA, là một tệp văn bản dài của các ngôn ngữ và các giá trị phụ tương ứng của chúng. Hoặc sử dụng tra cứu thẻ ngôn ngữ thân thiện hơn cho phép bạn tìm kiếm cùng một thông tin.

Đây là câu tiếng Pháp từ trước, với ngôn ngữ được đặt chính xác:

2. sử dụng màu sắc một cách chu đáo

Không giao tiếp với màu sắc

Việc sử dụng màu sắc chu đáo có thể giúp hỗ trợ tin nhắn của bạn hoặc truyền đạt tâm trạng. Nhưng nếu bạn dựa vào màu sắc một mình để giao tiếp thông tin nhất định, nó có thể bị bỏ qua bởi những người nhận mù, mù màu, hoặc từ một nền văn hóa nơi những màu sắc mang ý nghĩa khác nhau.

Ví dụ: thay vì sử dụng dấu chấm màu đỏ hoặc màu xanh lục để cho biết sản phẩm có trong kho hay không, hãy sử dụng văn bản như “trong kho” và “đã bán hết” và chỉ sử dụng màu để hỗ trợ.

Mất màu mù vào tài khoản

Có nhiều loại mù màu khác nhau khiến mọi người khó phân biệt màu sắc. Loại phổ biến nhất là mù màu đỏ-xanh, làm cho khó phân biệt màu đỏ và xanh lục. Tổng số mù màu, làm cho mọi thứ trông đen trắng, rất hiếm.

Khi chọn màu cho văn bản, đồ họa và các yếu tố bố cục, hãy chú ý đến sự kết hợp các màu trong dải màu đỏ-cam-vàng-xanh lục, được đặt gần nhau. Đặc biệt nếu màu sắc tương tự như độ sáng và độ bão hòa.

Ngoài ra còn có các kết hợp màu khác có thể khó xử cho những người có các loại mù màu khác nhau để phân biệt. Bạn có thể sử dụng trình mô phỏng mù màu để nắm bắt bất kỳ sự cố nào trong email của bạn. Có rất nhiều lựa chọn.

  • Với Bộ lọc trang web Colorblind của Toptal, bạn có thể nhập URL vào phiên bản web của email của bạn.
  • Litmus có một bộ lọc mù màu được tích hợp vào các bài kiểm tra email của nó.
  • Màu Oracle (Mac, Windows và Linux) và Sim Daltonism (Mac và iOS) là các công cụ mô phỏng mã nguồn mở.

Không lạm dụng màu sắc sáng, bão hòa

Đối với những người bị nhạy cảm với ánh sáng và đau nửa đầu, nhìn chằm chằm vào màn hình chiếu hậu có thể gây mỏi mắt và hoạt động như một cơn đau nửa đầu. Điều này có thể được thực hiện tồi tệ hơn bởi màu sắc tươi sáng, đặc biệt là màu xanh và đỏ.

Đối với các khu vực rộng lớn như màu nền, sử dụng nhiều màu bị tắt tiếng hơn khi có thể.

Tránh văn bản được gạch dưới hoặc màu không liên kết (đặc biệt là màu xanh lam)

Không phải tất cả các liên kết đều có màu xanh lam và gạch chân, nhưng tất cả văn bản được gạch dưới và màu xanh lam đều được liên kết. Ít nhất đó là những gì độc giả mong đợi.

Để tránh nhầm lẫn và thất vọng, không sử dụng gạch chân và màu sắc để nhấn mạnh.

3. Kiểm tra xem hình ảnh của bạn có thể truy cập được không

Tránh văn bản trong hình ảnh

Nhiều người gửi vẫn thiết kế email có văn bản trong hình ảnh thay vì văn bản HTML trực tiếp. Nếu chủ lao động hoặc khách hàng của bạn yêu cầu hiển thị hình ảnh hoàn hảo, bạn có thể dễ dàng thấy cách này có vẻ như là một giải pháp tốt. Nhưng những nhược điểm để bẫy các văn bản trong các tập tin hình ảnh lớn hơn những lợi thế.

  • Trình đọc màn hình không thể đọc văn bản trong hình ảnh.
  • Nếu tính năng chặn hình ảnh được bật trong ứng dụng email hoặc nếu email được đọc ngoại tuyến thì hình ảnh sẽ bị ngắt.
  • Bạn không thể chọn, sao chép và dán văn bản.
  • Phần mềm dịch không thể diễn giải nội dung.
  • Văn bản không thể được thu nhỏ hoặc chỉnh lại đúng cách để vừa với kích thước màn hình hoặc mức thu phóng khác nhau.

Một số vấn đề này có thể được giải quyết một phần bằng cách đặt nội dung làm văn bản thay thế của hình ảnh và tạo kiểu cho nó bằng CSS. Nhưng không may, các ứng dụng email không chia sẻ cách nhất quán để xử lý việc chặn hình ảnh và văn bản thay thế. Và bất kỳ phân cấp nào, chẳng hạn như tiêu đề, sẽ bị mất trong phiên bản văn bản thay thế của nội dung.

Nếu thiết kế của bạn gọi cho văn bản được đặt trên hình ảnh, backgrounds.cm sẽ giúp bạn mã hóa điều này theo cách hoạt động trên hầu hết các ứng dụng email chính.

Cuối cùng, trong trường hợp bạn không thể tránh sử dụng hình ảnh cho văn bản, hãy thêm vai trò = "văn bản" vào hình ảnh để người đọc trên màn hình sẽ xem giá trị văn bản thay thế của nó dưới dạng văn bản thông thường.

Sử dụng văn bản thay thế hữu ích

Chúng tôi sử dụng hình ảnh cho nhiều mục đích khác nhau. Một số có chứa thông tin quan trọng, một số khác là minh họa hoặc một phần của bố cục.

Tất cả hình ảnh phải có thuộc tính alt, nhưng thuộc tính không phải lúc nào cũng có giá trị. Trong trường hợp không cần văn bản thay thế, hãy sử dụng thuộc tính alt trống để ngăn trình đọc màn hình đánh vần tên tệp hình ảnh hoặc URL liên kết. Xem ví dụ này từ Rémi Parmentier:


Nếu hình ảnh có nội dung có giá trị, hãy mô tả nó trong văn bản thay thế. Hoặc nếu hình ảnh là một liên kết, hãy thêm văn bản thay thế để mô tả nơi liên kết trỏ đến.

W3C có cây quyết định tiện dụng cho văn bản thay thế. Nó bao gồm hầu hết các cách sử dụng phổ biến cho hình ảnh và cách sử dụng thuộc tính alt trong mỗi trường hợp.

Sử dụng GIF có trách nhiệm

Tùy chọn chính của chúng tôi để bao gồm hoạt ảnh trong email của chúng tôi sẽ hoạt động trong hầu hết các ứng dụng email là sử dụng GIF. Chúng tôi đã thấy nhiều ví dụ tuyệt vời về GIF trong email. Chúng có thể tuyệt vời để giải thích ý tưởng hiệu quả hơn bạn có thể với hình ảnh tĩnh hoặc để thêm sở thích trực quan. Đồng hồ đếm ngược và xem trước video là các ứng dụng phổ biến khác.

Rất tiếc, GIF có thể gây ra sự cố cho một số người nhận.

Trong các ví dụ cực đoan, hoạt ảnh mạnh mẽ có thể gây ra cơn động kinh cho những người bị chứng động kinh quang. Nếu bạn có GIF có tính năng nhấp nháy hoặc nhấp nháy màu sắc hoặc các mẫu in đậm có độ tương phản cao, bạn nên thử nghiệm chúng bằng Công cụ phân tích động kinh quang học miễn phí của Trace Center (chỉ dành cho Windows). Công cụ này chụp hoạt ảnh từ màn hình của bạn và xác định các rủi ro co giật tiềm ẩn.

Mặc dù ít kịch tính hơn, hoạt ảnh tinh tế cũng có thể gây ra sự cố. GIF có vòng lặp mãi mãi có thể làm sao lãng các nội dung khác của bạn, đặc biệt là đối với những người bị rối loạn tăng động thiếu chú ý (ADHD) hoặc chứng tự kỷ. Email trên Acid cung cấp một số phương pháp hay nhất về hoạt ảnh cho người đăng ký có ADHD.

4. Chú ý đến bố trí và bảng

Tránh các bảng không cần thiết

Mặc dù các bảng HTML là cần thiết để có được bố trí nhất định để hiển thị chính xác trong các ứng dụng email, đặc biệt là trong Outlook, các nhà phát triển email có xu hướng lạm dụng chúng.

Tôi khuyên bạn nên tìm kiếm thông qua mã mẫu của bạn cho mọi trường hợp của có thể dễ dàng được thay thế bằng một có thể truy cập và nhẹ hơn, hoặc thậm chí bị xóa hoàn toàn, mà không ảnh hưởng đến cách email hiển thị.

Sử dụng vai trò = "bản trình bày" trên Bảng bố cục

Trên các bảng còn lại, thêm thuộc tính role = "presentation". Trình đọc màn hình thường thông báo mọi ô trong bảng mà họ gặp phải, điều này có thể làm cho các email rất buồn tẻ khi đọc.

Bằng cách thêm role = "presentation", bạn đang yêu cầu trình đọc màn hình coi bảng là phần tử văn bản thông thường và không điều hướng nó dưới dạng bảng dữ liệu. Xem các ví dụ về Trợ năng trong email: Phần II của Mark Robbins.

Nếu email của bạn có các bảng chứa dữ liệu bảng thực tế, không sử dụng thuộc tính vai trò trên các dữ liệu đó.

Sử dụng aria-hidden = "true" trên Spacer Elements

Vì lề và đệm có phần hỗ trợ không nhất quán giữa các ứng dụng email, việc sử dụng các phần tử riêng biệt như s hoặc thậm chí là hình ảnh spacer cũ để thêm khoảng cách vào thiết kế email sẽ không phổ biến.

Các yếu tố như vậy không thêm bất kỳ giá trị nào cho những người đọc email của bạn bằng trình đọc màn hình. Để làm cho trình đọc màn hình bỏ qua một dấu đệm, thêm thuộc tính aria-hidden = "true" vào phần tử.

5. Thiết kế liên kết rõ ràng và nhấp vào mục tiêu

Tạo liên kết rõ ràng, ngoài màu

Liên kết thường là phần quan trọng nhất của email, vì đó là cách người nhận thực hiện bước tiếp theo. Cung cấp cho họ một màu sắc khác so với phần còn lại của nội dung sẽ làm cho họ dễ dàng hơn để tìm thấy. Văn bản màu xanh có cơ hội được công nhận là liên kết tốt nhất, nhưng bạn có thể sử dụng các màu khác miễn là chúng nổi bật, thậm chí là để tô màu cho người dùng khiếm thị.

Tránh sử dụng màu liên kết của bạn cho văn bản không nhấp được, để tránh nhầm lẫn.

Gạch chân văn bản cũng giúp đề xuất văn bản có thể nhấp. Một số thích in đậm các liên kết của họ thay vì, vì lý do thẩm mỹ, nhưng nó có thể là giá trị đặt văn bản đậm để nhấn mạnh.

Nói chung tốt nhất là tránh "nút Ghost", một kiểu nút thông dụng có màu viền nhưng nền trong suốt. Đây có thể là khó khăn cho người nhận để nhận ra là có thể nhấp, đặc biệt là khi được đặt trên đầu trang của hình nền. Các kiểu nút có màu nền tương phản dễ khám phá hơn.

Sử dụng văn bản liên kết hữu ích

Mọi người đọc email của bạn bằng trình đọc màn hình có thể bị bỏ qua liên kết đến liên kết mà không đọc nội dung giữa họ. Và người nhận thị lực kém có thể đọc email của bạn đã phóng to, thiếu ngữ cảnh xung quanh các liên kết của bạn. Đối với các liên kết có thể truy cập được với chúng, văn bản liên kết sẽ có thể đứng một mình và vẫn có ý nghĩa.

Văn bản liên kết ngắn và mô tả giúp mọi người điều hướng hiệu quả.

Các liên kết trỏ đến các địa điểm khác nhau sẽ không có cùng văn bản liên kết. Làm cho mỗi người trong số họ trở thành duy nhất — không có liên kết “Đọc thêm”!

Tránh hiển thị URL trang web dài dưới dạng văn bản liên kết vì chúng thường ít hữu ích hơn dưới dạng văn bản liên kết cho tất cả người nhận.

Làm cho nút lớn và hoàn toàn có thể nhấp

Đối với các liên kết quan trọng nhất trong email của bạn, nút gọi hành động tuyệt vời có thể giúp bạn tăng số lần nhấp qua các liên kết văn bản.

Có một khu vực đủ lớn để nhấp vào làm cho nút dễ dàng hơn cho mọi người nhấn, đặc biệt là nhiều người dùng bị khuyết tật về thể chất.

Litmus có một cái nhìn tổng quan về cách mã hóa các nút email. Để tránh những khó khăn và thất vọng, hãy chọn một nơi mà toàn bộ bề mặt nút có thể nhấp được.

Litmus button

Nói rằng, tôi có một sở thích cá nhân cho các button.cm.

Đừng liên kết mọi thứ

Để tăng số nhấp chuột, có thể dễ dàng chuyển mọi tiêu đề, hình ảnh và thậm chí cả đoạn văn thành liên kết đến trang đích của bạn. Điều này cũng có nghĩa là mọi người có thể nhấp vào liên kết một cách dễ dàng mà không phải quá chính xác. Tuy nhiên, có một số nhược điểm để làm cho mọi thứ trở thành một liên kết.

Đối với những người đọc email của bạn bằng trình đọc màn hình, mỗi liên kết sẽ được đọc, vì vậy việc lặp lại cùng một liên kết cho mỗi phần tử sẽ làm cho email của bạn tẻ nhạt để điều hướng.

Nếu bạn có các phần tử gần nhau nên liên kết đến cùng một địa điểm, ví dụ, một biểu tượng có nhãn văn bản, giải pháp tốt thường là quấn chúng vào cùng một liên kết, tạo một vùng có thể nhấp.

Nếu hầu hết email của bạn chứa các liên kết, điều này cũng có thể làm cho email của bạn khó di chuyển trên điện thoại di động và các màn hình cảm ứng khác. Đặc biệt là đối với những người bị chấn động hoặc các vấn đề kiểm soát cơ bắp khác, làm cho nó thông qua một email mà không vô tình nhấp vào liên kết bất ngờ có thể là một thách thức.

Xem xét: di chuột và: Kiểu tiêu điểm

Việc đưa ra các liên kết một phong cách tinh tế: di chuột là một cách đơn giản để xác nhận với mọi người rằng những gì họ sắp nhấn vào thực tế là một liên kết.

Khi điều hướng qua các liên kết trong email bằng bàn phím, các kiểu tiêu điểm giúp người đọc theo dõi liên kết của họ. Hầu hết các trình khách và trình duyệt email đều thêm đường viền làm mặc định: kiểu tiêu điểm cho liên kết. Nói chung tốt nhất là không loại bỏ phác thảo này, nhưng nếu bạn làm như vậy, bạn nên đảm bảo bạn thay thế nó bằng một phong cách lấy nét rõ ràng như nhau:

Bất cứ khi nào bạn thêm kiểu di chuột: thì thường áp dụng cùng một kiểu để: tập trung để mọi người sẽ có trải nghiệm tương tự dù điều hướng bằng chuột hoặc bàn phím của họ.

Liên kết đến nội dung có thể truy cập

Mặc dù đó không phải là điều bạn luôn có thể kiểm soát, khi liên kết tới các trang web, việc bạn có thể truy cập nội dung cũng có thể truy cập được.

Nếu bạn có sự lựa chọn giữa liên kết đến hai bài viết tương tự nhau, trong đó dễ đọc và màu kia có độ tương phản màu kém hoặc kích thước phông chữ nhỏ - tất cả đều khác nhau, hãy chuyển sang bài viết dễ tiếp cận hơn nếu bạn có thể.

6. Đừng quên về Plain-Text

Bao gồm phiên bản thuần văn bản

Do các vấn đề về khả năng truy cập mà họ có thể gặp phải với nhiều email HTML, một số người nhận chọn sử dụng phiên bản thuần văn bản của email thay thế.

Vì bạn không thể sử dụng hình ảnh, kích thước phông chữ, màu sắc, v.v., các tùy chọn bố cục của bạn bị giới hạn. Khi soạn thảo phiên bản thuần văn bản, hãy nghĩ về cách tốt nhất để trình bày thông điệp cốt lõi của bạn chỉ bằng văn bản và ít lo lắng về việc làm cho nó phù hợp với phiên bản HTML.

Chú ý hơn đến cách bạn định dạng liên kết, vì chỉ URL liên kết mới có thể nhấp được. Một mẫu tốt là viết một nhãn liên kết mô tả theo sau là dấu hai chấm trên một dòng, và sau đó là URL liên kết trên dòng tiếp theo.

Nhiều ESP (Nhà cung cấp dịch vụ email) sẽ tự động tạo ra một phiên bản thuần văn bản cho bạn, nhưng nếu bạn đọc nó, bạn thường sẽ tìm thấy những cách nhỏ để làm cho nó dễ đọc hơn.

7. Làm quen với thử nghiệm và công cụ

Sử dụng những công cụ cụ thể Email

Có nhiều cách để kiểm tra email của bạn, cả hai đều giúp tìm kiếm các vấn đề về khả năng truy cập và để kiểm tra xem các bản sửa lỗi của bạn có hoạt động như mong đợi hay không.

Một nơi tốt để bắt đầu là accessible-email.org, cung cấp cho bạn báo cáo trợ năng về email của bạn. Điều này kiểm tra rằng tất cả các hình ảnh đều có thuộc tính alt, các cấp tiêu đề đó tuân theo một hệ thống phân cấp chính xác và nhiều điểm khác mà chúng tôi đã đề cập ở đây.

thorough report from httpwwwaccessible-emailorg
Báo cáo kỹ lưỡng thông thường từ accessible-email.org

Nếu đây là lần đầu tiên bạn đánh giá khả năng truy cập email của mình, rất có thể bạn sẽ nhận được danh sách kiểm tra gọn gàng về các cải tiến mà bạn có thể thực hiện. Khi bạn quay trở lại để kiểm tra lại mã email đã cập nhật của mình, bạn có thể mong đợi sự hài lòng của các chữ thập đỏ biến thành các dấu kiểm màu xanh lục.

Với bộ công cụ kiểm tra email phổ biến, Litmus cho phép bạn kiểm tra nhiều khía cạnh về khả năng truy cập email của mình, chẳng hạn như phiên bản thuần văn bản, chế độ xem hình ảnh và các mô phỏng mù màu khác nhau trong thiết kế email của bạn.

Thử nghiệm với trình đọc màn hình

Một cách hay để trải nghiệm email của bạn giống như một số người nhận của bạn là cố đọc nó bằng các công nghệ hỗ trợ như trình đọc màn hình. Hầu hết các hệ điều hành đều có trình đọc màn hình tích hợp sẵn mà bạn có thể kiểm tra bằng:

  • VoiceOver trong macOS và iOS.
  • TalkBack trong Android.
  • Người kể chuyện trong Windows.

Bạn cũng có thể xem xét thử nghiệm với trình đọc màn hình của bên thứ ba. Các trình đọc màn hình thường được sử dụng nhất là JAWS (thương mại) và NVDA (mã nguồn mở), cả hai đều chạy trên Windows. Đối với JAWS, giấy phép 90 ngày có sẵn, giúp giảm chi phí kiểm tra.

Cài đặt Công cụ và plugin của Trình duyệt Ưa thích của bạn

Tất cả các trình duyệt web chính hiện nay đều có các công cụ dành cho nhà phát triển được tích hợp sẵn để thử nghiệm khả năng truy cập. Mặc dù những điều này không dành riêng cho email nhưng hầu hết các mối quan tâm đều áp dụng giống nhau.

Tôi thường sử dụng tab Kiểm tra trong các công cụ dành cho nhà phát triển của Chrome, công cụ này sẽ đánh giá trang và cung cấp tổng quan hữu ích về các vấn đề cần khắc phục.

Ngoài ra, có một số plugin của bên thứ ba có thể giúp bạn có được góc nhìn hơi khác về hầu hết các điểm giống nhau. Dưới đây là một vài điều tôi khuyên bạn nên:

  • tota11y xuất hiện dưới dạng bookmarklet và tiện ích mở rộng của Chrome mà bạn có thể sử dụng trong trình duyệt để kiểm tra email của mình. Kiểm tra của nó bao gồm độ tương phản màu văn bản và các mốc ARIA. Nó cũng cho bạn thấy cách trình đọc màn hình xem các phần tử khác nhau trong email của bạn.
  • Nhà phát triển web là một tiện ích mở rộng của trình duyệt cho Chrome, Firefox và Opera, giúp dễ dàng kiểm tra việc tắt hình ảnh và CSS được nhúng, trong số những thứ khác.
  • Tiện ích mở rộng Funkify Chrome bao gồm một bộ “trình mô phỏng khuyết tật”. Mỗi chế độ làm thay đổi trang theo những cách đại diện cho những thách thức khác nhau, chẳng hạn như chứng khó đọc và bàn tay run rẩy, để giúp bạn đánh giá mức độ thiết kế của bạn. Funkify cũng đi kèm với tota11y được bao gồm như một trong các chế độ của nó.

Hiểu tầm quan trọng của kiểm tra người dùng

Không có công cụ hoặc trình mô phỏng nào có thể thay thế hoàn toàn việc nói chuyện với những người khuyết tật và tìm hiểu cách họ tương tác với email của bạn. InVision có một bài viết hữu ích về việc bắt đầu với thử nghiệm khả năng truy cập của người dùng.

Phần kết luận

Sau khi đọc bài viết này, điều tốt nhất để làm tiếp theo là tìm một cải tiến nhanh chóng mà bạn có thể thực hiện cho một trong các email của mình và thực hiện.

Bất kỳ bước nào bạn thực hiện để tạo email có thể truy cập dễ dàng hơn sẽ giúp bao gồm nhiều người hơn, điều này làm tăng lượng khán giả của bạn. Và khi bạn khắc phục các vấn đề khiến email của bạn khó đọc đối với người khuyết tật, cơ hội là bạn cũng sẽ làm mọi thứ tốt hơn cho mọi người.

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.