Thực tế là có hàng tá những khá đơn giản mà bạn có thể làm để trang web của bạn dễ tiếp cận hơn. Và điều đó không chỉ làm cho trang web của bạn được dễ dàng tiếp cận hay cải thiện trải nghiệm người dùng với tất cả mọi người trong đó có cả những người khuyết tật.

Nhưng trước tiên, hãy rõ ràng về các điều khoản của chúng tôi:

Khả năng tiếp cận (accessibility) là gì?

Đây là định nghĩa của chuyên gia trợ năng Jennison Asuncion về khả năng tiếp cận:

Khả năng tiếp cận đề cập đến việc thiết kế và phát triển giao diện người dùng mà mọi người, kể cả người khuyết tật, có thể sử dụng và tương tác một cách độc lập.

Lưu ý rằng căng thẳng ở đây không đặc biệt rơi vào "người khuyết tật", nhưng tất cả mọi người. Điều đó làm cho khả năng tiếp cận trở thành mối quan tâm tự nhiên đối với tất cả chúng ta tham gia vào thiết kế trải nghiệm người dùng, bất kể ngành học nào.

Bây giờ, đến các mẹo!

1. Sử dụng tên nút và liên kết độc đáo, có ý nghĩa

Tôi không thể nói với bạn nhiều lần rằng tôi đã có một mô hình hoặc mẫu thử nghiệm lọt vào hộp thư đến của tôi (hoặc Slack) với 16 liên kết “tìm hiểu thêm”, “đọc bài này” hoặc “xem thêm” nằm rải rác trên đó.

Tại sao? Bởi vì nó kinh khủng cho người dùng trình đọc màn hình, thường cho phép mọi người bỏ qua từ liên kết này đến liên kết khác trên một trang, bỏ qua nội dung ở giữa. Đó là một chế độ điều hướng hiệu quả cao giúp người dùng trình đọc màn hình nhanh chóng đến nơi họ muốn.

Nhưng bạn nghĩ người dùng khiếm thị hoặc thị lực kém dễ dàng tìm ra liên kết nào trong số những liên kết “tìm hiểu thêm” đó dẫn đến “nhiều hơn” mà họ muốn tìm hiểu?

Và nó thực sự không khác nhau đối với người dùng có thị lực. Hãy nghĩ về tất cả những lần bạn đã kích hoạt một trang web mà biết chính xác những gì bạn đang tìm kiếm, nhưng không chắc chắn sẽ tìm thấy nó ở đâu. Bạn có đọc hết nội dung không? Hay bạn chỉ đơn giản là săn tìm liên kết phù hợp?

Trước tiên, bạn có thể quét qua các tiêu đề và tiêu đề phụ - xét cho cùng, chúng đậm và bắt mắt - nhưng bạn vẫn phải sống với tải trọng nhận thức của việc kết nối các tiêu đề đó với các liên kết bên dưới. Nhưng các liên kết cũng có xu hướng khá lớn về mặt hình ảnh, vì vậy sẽ không dễ dàng hơn nếu mọi liên kết đều cho bạn biết chính xác nó sẽ đưa bạn đến đâu không có yêu cầu tôi đọc tất cả các bản sao khác?

Viết các liên kết có thể truy cập và sao chép nút

Nên làm

• Nhúng các liên kết bằng ngôn ngữ cụ thể, rõ ràng giúp mọi người biết Ở đâu liên kết sẽ đưa họ và tại sao họ có thể muốn đến đó
• Cho biết liệu một liên kết có mở ra phương tiện băng thông cao như PDF hoặc video hay không trong văn bản được liên kết

Đừng làm

• Sử dụng liên kết chung chung hoặc văn bản nút như “tìm hiểu thêm”, “đọc phần này” hoặc “xem thêm”
• Nhúng các liên kết bằng các thuật ngữ chung chung hơn như “cái này”, “trang này” hoặc “tại đây”
• Liên kết đến các URL "trần trụi" (tức là, www.thewebahead.net) trừ khi có ngữ cảnh làm rõ tại sao liên kết đó ở đó

2. Thêm thẻ alt rõ ràng, hữu ích vào hình ảnh

Thẻ Alt cũng đóng một vai trò quan trọng đối với người dùng trình đọc màn hình trên web. Nếu không có những bit sao chép vô hình này, có nghĩa là Không đời nào để người dùng khiếm thị và thị lực kém hiểu được nội dung của hình ảnh, trực quan hóa dữ liệu và đồ họa thông tin. Với thẻ alt, chúng tôi có thể đảm bảo rằng không ai phải bỏ lỡ thông tin được truyền tải trong biểu đồ hình tròn, ảnh chính và đồ họa thông tin của chúng tôi.

Quay trở lại những ngày tồi tệ trước đây của sự điên rồ của SEO mũ đen, thẻ alt đã bị lạm dụng chỉ như một phương pháp khác để nhồi nhét từ khóa vào một trang. Cái mà kinh khủng cho người dùng trình đọc màn hình. Chỉ cần tưởng tượng đọc qua một bài báo trên blog và nghe:

“Bố cục CSS cho phép chúng tôi bảng CSS HTML bảng bố cục dựa trên bảng bảng đánh dấu mã thiết kế web nổi khối nội tuyến khối nội tuyến W3C web consortium…”

Tất cả đều nằm trong âm báo kỳ lạ của trình đọc màn hình.

Do sự lạm dụng đó, các công cụ tìm kiếm nhanh chóng chuyển sang trừng phạt những “kẻ nhồi nhét từ khóa” như vậy, giải phóng thẻ alt để làm những gì chúng luôn có ý định làm: cung cấp thông tin hữu ích.

Cũng như với các liên kết, chìa khóa ở đây là làm cho các thẻ alt của bạn rõ ràng, mang tính mô tả và phát ra âm thanh tự nhiên.

Với nhiều bức ảnh, đây là một vấn đề đơn giản để mô tả ngắn gọn nội dung của bức ảnh: “Cận cảnh quả việt quất”.

Nếu hình ảnh của bạn chứa văn bản - và nghiêm túc, đừng làm vậy - hãy bao gồm nguyên văn văn bản trong thẻ alt.

Nếu hình ảnh của bạn chứa dữ liệu hữu ích, chẳng hạn như biểu đồ thanh minh họa các kiểu sử dụng thiết bị di động, hãy đảm bảo thẻ alt chứa cùng dữ liệu: “95% người dùng điện thoại thông minh xem cùng một trang web trên nhiều thiết bị”.

Và tôi không thể bỏ qua cơ hội này để tìm hiểu sơ lược về đồ họa thông tin: những hình ảnh khổng lồ đầy bản sao này là kinh khủng về khả năng tiếp cận, chưa kể đến SEO.

Làm cho nội dung đồ họa có thể truy cập được

Nên làm

1. Viết thẻ alt hình ảnh mô tả ngắn gọn nội dung của hình ảnh
2. Sử dụng các từ khóa / cụm từ khóa có liên quan đến nội dung của bạn, nhưng chỉ có nếu chúng thực sự hữu ích trong việc mô tả hình ảnh và bám vào một từ khóa / cụm từ
3. Bao gồm thông tin chi tiết chính về bất kỳ hình ảnh hóa dữ liệu nào (chẳng hạn như biểu đồ thanh, biểu đồ hình tròn, v.v.)
4. Xây dựng đồ họa thông tin bằng văn bản HTML thực hoặc văn bản thay thế dựa trên văn bản (tức là một bài đăng dạng dài giải thích dữ liệu)

Không nên làm

Advertisement

1. Từ khóa-nhồi các thẻ alt của bạn
2. Xuất bản đồ họa thông tin mà không có văn bản thay thế

3. Viết thông báo lỗi rõ ràng và có thể hành động

Có rất nhiều điều cần lưu ý khi bạn đang xây dựng các biểu mẫu có thể truy cập. Nhưng một yếu tố quan trọng đối với bất kỳ nhà chiến lược nội dung nào — và người dùng của bạn — là thông báo lỗi.

Như lưu ý, thông báo lỗi:

Nên mô tả rõ ràng các lỗi hiện có và tối ưu, bao gồm các dấu hiệu hoặc hướng dẫn để giải quyết chúng. Ví dụ: 'Số khóa học không được định dạng chính xác' không hữu ích bằng "Số khóa học phải là một số có 3 chữ số".

Khi viết thông báo lỗi, đừng chỉ mô tả vấn đề mà hãy tập trung vào cách khắc phục. Trong hầu hết các trường hợp, bạn thậm chí không cần phải xác nhận rằng đã xảy ra lỗi: chỉ cần tập trung vào sửa chữa và thực hiện nó một cách rõ ràng và ngắn gọn.

Tất cả người dùng của bạn, có tầm nhìn và nếu không, sẽ đánh giá cao hướng dẫn rõ ràng về những việc cần làm tiếp theo.

Viết thông báo lỗi có thể truy cập

Nên làm

1. Cho biết rằng đã có sự cố (rõ ràng hoặc rõ ràng, mặc dù ngầm hiểu là thường hiệu quả hơn — xem bên dưới để biết thêm về điều đó)
2. Giải thích cách khắc phục

Không nên làm

1. Thông báo rằng đã xảy ra lỗi mà không giải thích cách sửa lỗi
2. Đề cập đến một mục nhập là “hợp lệ” hoặc “không hợp lệ” - điều này có vẻ hoàn toàn chấp nhận được trong phần tóm tắt, vì bạn chỉ đơn giản nói rằng một mục nhập không phù hợp với các yêu cầu bạn đã xác định cho một trường. Nhưng cụ thể, bạn đang gọi tên hoặc giới tính của ai đó không hợp lệ. Và đó chỉ là ... tốt, tôi có phải giải thích?

Rõ ràng với thông báo lỗi ngầm (Implicit vs explicit error messaging)

Như tôi đã đề cập ở trên, tất cả các thông báo lỗi phải thực hiện hai điều:

1. Tuyên bố rằng đã xảy ra lỗi
2. Giải thích cách khắc phục

Nhưng bạn có thể dễ dàng đạt được cả hai mục tiêu trong một tin nhắn bằng cách ngụ ý rằng có một lỗi. Ví dụ: chúng tôi có thể nêu một thông báo lỗi theo những cách sau:

1. Rõ ràng, không có định hướng: Định dạng số khóa học không chính xác.
2. Rõ ràng, có hướng: Định dạng số khóa học không chính xác. Vui lòng nhập một số có 3 chữ số.
3. Ngầm hiểu: Vui lòng nhập số khóa học gồm 3 chữ số.

Tùy chọn 1 nêu rõ rằng có lỗi, nhưng không nói rõ cách khắc phục. Tùy chọn 2 cũng rõ ràng, nhưng thêm một cách để khắc phục sự cố, vì vậy đó là một cải tiến. Tốt nhất là 3, ngụ ý rằng đã có vấn đề bằng cách giải thích cách khắc phục nó.

4. Viết các tiêu đề rõ ràng, mang tính mô tả

Cũng giống như trình đọc màn hình cho phép mọi người bỏ qua từ liên kết này đến liên kết khác, họ cũng có thể bỏ qua giữa các tiêu đề, bỏ qua bản sao giữa các tiêu đề.

Bây giờ, hãy tưởng tượng trải nghiệm đó với phần lớn các trang web ngoài kia. Bạn có nghĩ rằng bạn có thể suy luận rõ ràng chủ đề của mọi phần của một trang web nhất định không không có tham chiếu đến bản sao nội dung hoặc các liên kết?

Cá nhân tôi, câu trả lời của tôi là "đôi khi?" Để chạy nhanh qua trang Square ở trên:

• “Bắt đầu bán hàng ngay hôm nay” - siêu rõ ràng. Tôi hiểu rằng đây là nơi tôi sẽ bắt đầu nếu tôi muốn.
• “Bắt đầu, chạy và phát triển cùng Square” - rõ ràng là… ish. Làm rõ đối tượng - doanh nghiệp của bạn - sẽ giúp ích rất nhiều ở đây. Nếu không có ngữ cảnh, không rõ bạn đang bắt đầu, đang chạy hay phát triển gì.
• “Chấp nhận mọi cách mà khách hàng của bạn muốn thanh toán” - Rõ ràng… ít nhất là cho đến khi tôi đến chỗ “Đứng”. Cái quái gì vậy?

Viết các tiêu đề và tiêu đề phụ rõ ràng hơn

Như một bài tập, tôi khuyên bạn nên tắt tất cả các lớp sao chép không phải dòng tiêu đề của bạn (nếu bạn đang sử dụng ứng dụng dành cho máy tính để bàn như Sketch hoặc Photoshop) hoặc chuyển nhanh thẻ

sang màu nền trang của bạn (nếu bạn đang sử dụng Webflow).

Bây giờ, hãy đọc qua tất cả các thẻ H của bạn, tự hỏi bản thân: liệu tôi có đủ rõ ràng chỉ với dòng tiêu đề này không?

Nếu câu trả lời của bạn là không, có thể đã đến lúc viết lại.

Đôi khi, bạn phải nắm lấy chiều dài

Lưu ý rằng hướng đến sự rõ ràng trong tiêu đề thường có nghĩa là sử dụng nhiều từ hơn. Tôi nhận ra rằng điều đó có thể phản tác dụng của bạn trong việc tạo ra các trang web "sạch", nhưng bạn nên tự hỏi bản thân mình:

Điều quan trọng hơn là trang web này trông sạch sẽ hay nó cung cấp cho mọi người tất cả thông tin họ cần?

5. Tối ưu hóa nội dung biểu mẫu của bạn

Hình thức có thể không sexy, nhưng chúng Chúng tôi trọng tâm của thiết kế sản phẩm và nội dung phù hợp có thể làm cho chúng dễ sử dụng hơn - và dễ tiếp cận hơn - cho tất cả mọi người. Dưới đây là một số cách để làm điều đó:

Nên làm

• Cho biết trường nào là không bắt buộc trong nhãn biểu mẫu (vì vậy trình đọc màn hình sẽ truyền thông tin đó trong dòng). Tôi biết chúng ta quen với việc đánh dấu hơn cần thiết nhưng bạn thực sự chỉ nên sử dụng các trường bắt buộc, vì vậy thường sẽ có ít trường tùy chọn hơn để đánh dấu và do đó ít lộn xộn hơn.
• Tạo bản sao nút cụ thể cho hành động đã thực hiện (không sử dụng “gửi” - trừ khi đó thực sự là những gì một người đang làm, điều này thường xảy ra với các tạp chí và blog văn học có đóng góp từ bên ngoài).
• Hiển thị nội dung hữu ích cơ bản. Ví dụ: nếu mật khẩu phải dài 9 ký tự, hãy sử dụng một ký tự viết hoa và một ký tự đặc biệt, hãy nói với mọi người điều đó! Và đừng ẩn nó trong một chú giải công cụ.
• Nhóm thông tin liên quan. Bạn đã thấy các tiêu chuẩn: email và mật khẩu, địa chỉ thực, thông tin thẻ tín dụng, v.v. Nếu tất cả kết hợp lại với nhau để tạo thành một khái niệm lớn hơn, hãy nhóm nó lại.

Không nên làm

• Sử dụng nhãn trong trường / nhãn giữ chỗ, trừ khi chúng chuyển thành nhãn liên tục khi nhấp chuột (thay vì biến mất), một kỹ thuật phổ biến trên các trang web của Google.

Một trang web dễ tiếp cận hơn là một trang web tốt hơn cho tất cả mọi người

Làm cho trang web của bạn dễ tiếp cận hơn với người khuyết tật có một lợi ích bên ngoài: Nó thực sự có thể cải thiện của mọi người trải nghiệm trang web của bạn.

Rốt cuộc, trình đọc màn hình bỏ qua từ tiêu đề đến tiêu đề hoặc liên kết đến liên kết, hoạt động giống như tất cả chúng ta làm trên web: không sử dụng tất cả mọi thứ, nhưng quét để tìm thông tin cụ thể chúng tôi nhu cầu.