Làm cho trang web của bạn phù hợp với người khuyết tật

Thu hút nhiều người đọc hơn với trang web phù hợp với nhu cầu của mọi người

Bằng cách làm cho trang web của bạn có thể truy cập được đối với người khuyết tật, bạn có thể truy cập vào mọi người. Trong thực tế, làm cho trang web của bạn dễ tiếp cận hơn thậm chí có thể giúp mọi người tìm thấy trang web của bạn trong công cụ tìm kiếm. Tại sao? Bởi vì công cụ tìm kiếm sử dụng một số tín hiệu rất giống với trình đọc màn hình để tìm và hiểu nội dung trang web của bạn.

Nhưng chính xác làm thế nào để bạn thực hiện một trang web có thể truy cập mà không trở thành một chuyên gia mã hóa?

Dưới đây là một số mẹo và thủ thuật mà hầu như bất kỳ ai có kiến thức HTML cơ bản đều có thể sử dụng để cải thiện khả năng truy cập trang web của họ.

Công cụ trợ năng web

W3C có danh sách các công cụ trợ năng web tuyệt vời mà bạn có thể sử dụng làm công cụ kiểm tra để phát hiện các vấn đề tiềm ẩn với trang web của mình. Điều đó nói rằng, tôi vẫn khuyên bạn nên làm một số khám phá với một trình đọc màn hình và trải nghiệm nó cho chính mình.

Công nghệ hỗ trợ là gì và nó hoạt động như thế nào?

Hiểu người đọc màn hình

Một trong những cách quan trọng nhất bạn có thể cải thiện khả năng truy cập trang web của bạn là đảm bảo rằng trình đọc màn hình có thể hiểu được nó. Trình đọc màn hình sử dụng giọng nói tổng hợp để đọc văn bản trên màn hình. Nghe có vẻ khá đơn giản; tuy nhiên, trình đọc màn hình có thể không hiểu trang web của bạn theo cách bạn hiện đã thiết lập.

Điều đầu tiên bạn có thể muốn làm là thử một trình đọc màn hình và xem nó như thế nào. Nếu bạn đang sử dụng máy Mac, hãy thử sử dụng VoiceOver.

  1. Chuyển đến Tùy chọn hệ thống.
  2. Chọn Trợ năng.
  3. Chọn VoiceOver.
  4. Chọn hộp Bật VoiceOver.

Bạn có thể bật và tắt nó bằng lệnh-F5.

Nếu bạn đang dùng máy Windows, bạn có thể tải xuống NVDA. Bạn có thể thiết lập để bật và tắt bằng phím tắt + alt + n.

Cả hai trình đọc màn hình đều hoạt động bằng cách cho phép người dùng điều hướng bằng bàn phím (điều này có nghĩa - nếu bạn không thể nhìn thấy, sử dụng chuột sẽ là một thách thức) và bằng cách tạo vùng lấy nét để điều hướng. Trọng tâm cơ bản là nơi bàn phím được "nhọn", nhưng nó thường được hiển thị như một hộp được đánh dấu xung quanh đối tượng lấy nét thay vì một con trỏ.

Bạn có thể thay đổi cả giọng nói và tốc độ đọc giọng nói nếu cài đặt mặc định gây khó chịu (và sau khoảng năm phút nghe một đoạn đọc chậm tiêu chuẩn, thường là). Người mù thường đọc các trang web với trình đọc màn hình của họ được đặt ở tốc độ cao.

Nó có thể giúp nhắm mắt lại khi bạn làm điều này, nhưng nó cũng có thể giúp giữ cho chúng mở và so sánh. Một số điều bạn có thể nhận thấy ngay khi bạn cố gắng nghe trang web của mình là một số văn bản có thể không hoạt động. Tiêu đề và bảng có thể bị xáo trộn. Hình ảnh có thể bị bỏ qua hoặc có thể nói "hình ảnh" hoặc thứ gì đó không hữu ích như nhau. Các bảng có xu hướng được đọc dưới dạng một loạt các mục không có ngữ cảnh.

Bạn có thể, hy vọng, sửa lỗi này.

Alt-Tags hoặc thuộc tính thay thế

Thuộc tính alt-tag hoặc thay thế (alt) được sử dụng trong HTML để mô tả hình ảnh. Trong HTML, nó trông giống như sau:

Ngay cả khi bạn tạo trang web bằng công cụ trực quan che giấu mã HTML của mình, bạn hầu như luôn có cơ hội nhập mô tả hình ảnh. Bạn không thể nhập gì (alt = "") nhưng thực sự tốt hơn nên cung cấp cho mỗi hình ảnh một mô tả hữu ích. Nếu bạn bị mù, bạn sẽ cần biết gì về hình ảnh? "Người phụ nữ" không giúp được gì nhiều, nhưng có lẽ "Người phụ nữ vẽ biểu đồ lưu lượng thiết kế bao gồm khả năng tiếp cận, khả năng sử dụng, xây dựng thương hiệu và thiết kế".

Tiêu đề văn bản

Trang web không phải lúc nào cũng hiển thị thẻ tiêu đề HTML, nhưng nó rất hữu ích cho người đọc màn hình. Đảm bảo mỗi trang trong trang web của bạn có tiêu đề mô tả (nhưng không quá chi tiết) cho khách truy cập biết trang đó là gì.

Cung cấp cho hệ thống phân cấp thông tin trang web của bạn tốt

Chia nhỏ các đoạn văn bản lớn với các tiêu đề, và nếu có thể, hãy sử dụng các tiêu đề với phân cấp H1, H2, H3 một cách thích hợp. Nó không chỉ làm cho trang web của bạn dễ dàng hơn cho người đọc màn hình, nó làm cho nó dễ dàng hơn cho tất cả mọi người khác. Nó cũng là một tín hiệu tuyệt vời cho Google và các công cụ tìm kiếm khác để giúp họ lập chỉ mục trang web của bạn tốt hơn.

Tương tự, bạn nên đảm bảo rằng trang web của mình theo thứ tự nội dung hợp lý và bạn không có các hộp thông tin không liên quan xuất hiện. Nếu bạn đang sử dụng quảng cáo, hãy xem quảng cáo của bạn không quá xâm nhập và chia nhỏ văn bản trên trang web của bạn quá thường xuyên.

Tạo bảng tốt hơn

Nếu bạn đang sử dụng các bảng HTML, bạn có thể thêm chú thích vào các bảng của bạn bằng cách sử dụng thẻ để làm cho chúng dễ hiểu hơn bởi trình đọc màn hình thay vì chỉ làm tiêu đề của một bảng in đậm văn bản. Bạn cũng có thể thêm phần tử "scope" và gắn nhãn rõ ràng các hàng và cột mới trong bảng của bạn để trình đọc màn hình không chỉ đơn giản là rattle ra khỏi một loạt các ô bảng mà không đưa ra bất kỳ ngữ cảnh nào.

Điều hướng bàn phím

Nói chung, bất cứ điều gì bạn đưa vào trang web của bạn nên là một cái gì đó mà ai đó có thể hình dung làm bằng cách sử dụng một bàn phím chỉ. Điều đó có nghĩa là các nút điều hướng của bạn không phải là các nút thả xuống động nếu bạn không thể sử dụng chúng với trình đọc màn hình (hãy thử và xem bạn có chắc chắn không - một số nút được lập trình để sử dụng bàn phím.)

Phụ đề chi tiết

Nếu bạn thêm video hoặc phần tử âm thanh vào trang web của mình, chúng phải có phụ đề. HTML5 và nhiều dịch vụ phát video (như YouTube) cung cấp hỗ trợ phụ đề. Phụ đề chi tiết không chỉ hữu ích cho khả năng truy cập mà còn cho những người dùng có thể duyệt trang web của bạn ở đâu đó nơi họ không thể phát âm thanh, chẳng hạn như trong văn phòng hoặc ở vị trí ồn ào.

Đối với podcast hoặc các yếu tố âm thanh khác, hãy cân nhắc cung cấp bản ghi văn bản. Nó không chỉ hữu ích cho những người không thể nghe được âm thanh, có văn bản sẽ giúp Google và các công cụ tìm kiếm khác dễ dàng lập chỉ mục nội dung đó và giúp xếp hạng Google của bạn .

ARIA

Nếu bạn muốn chuyển sang cấp độ tiếp cận nâng cao, thông số kỹ thuật HTML5 ARIA hoặc WAI-ARIA nhằm trở thành tiêu chuẩn mới trong tương lai. Tuy nhiên, đây là một hướng dẫn kỹ thuật phức tạp (và đang phát triển), vì vậy những gì bạn có thể làm là sử dụng trình xác nhận ARIA để quét xem trang web của bạn có bất kỳ vấn đề nào bạn có thể giải quyết hay không. Mozilla cũng có một hướng dẫn dễ tiếp cận hơn để bắt đầu với ARIA.