Nâng cao trải nghiệm người dùng web cho người khiếm thị

Question

Tôi đang nghe một số recent episode of Hanselminutes nơi Scott Hanselman đang thảo luận về khả năng truy cập trong các ứng dụng web và nó khiến tôi suy nghĩ về khả năng truy cập trong các ứng dụng của riêng tôi.

Tất cả chúng ta đều hiểu tầm quan trọng của đánh dấu ngữ nghĩa trong các ứng dụng web vì nó liên quan đến khả năng truy cập, còn những cải tiến đơn giản khác có thể được thực hiện để cải thiện trải nghiệm người dùng cho người dùng bị vô hiệu hóa?

Trong tập phim, có một số lần tôi tát trán và nói "Tất nhiên! Tại sao tôi không làm vậy?" Đặc biệt, Scott đã nói về một trang web đã đặt một liên kết ẩn ở đầu trang web có nội dung "chuyển đến nội dung chính". Liên kết sẽ chỉ hiển thị với những người sử dụng trình đọc màn hình và nó cho phép trình đọc màn hình của họ chuyển qua các menu trong quá khứ và nội dung phụ khác. Đó là một sự cải thiện rõ ràng nhưng thật dễ dàng để không nghĩ về nó.

Có nhiều khả năng truy cập và trải nghiệm người dùng tổng thể hơn là chỉ tạo XHTML hợp lệ và gọi nó là một ngày.

Một số thủ thuật đơn giản của bạn để cải thiện trải nghiệm người dùng cho người khiếm thị là gì?

Answer 1

Check-out Fangs

Fangs là một công cụ trong trình duyệt cho Firefox mà mô phỏng những gì một trình đọc màn hình “nhìn thấy” khi đến thăm một trang web. Chức năng của nó rất đơn giản: để tạo ra một bản sao của những gì một trình đọc màn hình sẽ đọc cho người dùng khi một trang Web được truy cập. Đây là công cụ hữu ích để phân tích nhanh chóng nếu bạn đã cấu trúc nội dung của mình một cách hiệu quả để những người bị khiếm thị có thể hiểu và sử dụng được mà không buộc bạn phải học cách sử dụng (và mua) ứng dụng trình đọc màn hình như JAWS hoặc Windows Eyes.

Answer 2

Vấn đề lớn nhất với trình đọc màn hình thường là các bảng để định vị mọi thứ trên trang của bạn. Người đọc trên màn hình không thể thực sự xử lý chúng. Đặt công cụ trong div's trong html của bạn và đặt chúng theo thứ tự hợp lý. Sau đó, vị trí của div trên trang của bạn với css. Sử dụng bảng để hiển thị nội dung phải có trong bảng.

Answer 3

"Mất thị lực" bao gồm mù màu. Tôi đã từng làm việc với một người không thể phân biệt màu đỏ với màu xanh lá cây quá tốt, vì vậy bất kỳ ứng dụng nào sử dụng giao diện kiểu ánh sáng giao thông đều rất khó cho anh ta sử dụng. Trong ngành chúng tôi đang làm việc, các cảnh báo trong hàng được mã hóa màu, vì vậy một hình thức hiển thị khác hữu ích cho anh ta, chẳng hạn như cột phụ ở hàng có văn bản loại cảnh báo ("khẩn cấp", "cảnh báo", v.v.).

Answer 4

Mã cho nhiều trang web được cấu trúc như:

1. Tiêu đề
2. Top Navigation
3. Left Navigation
4. Content
5. Footer

Khi cấu trúc theo cách này, thì liên kết ẩn cho "Bỏ qua nội dung chính" là bene ficial. Tuy nhiên, với cách bố trí CSS, bạn có thể sắp xếp lại này nên bạn chỉ còn:

1. Content
2. Tiêu đề
3. Top Navigation
4. Left Navigation
5. Footer

Bạn sau đó sử dụng định vị CSS và nổi để di chuyển các phần tử khác nhau này xung quanh màn hình để làm cho trang trông giống như cách bạn muốn.

Lợi thế chính để cấu trúc trang web theo cách này là nếu trình duyệt không hỗ trợ CSS, thì nội dung đầu tiên trên trang.Ngoài trình đọc màn hình, điều này mang lại lợi ích cho thiết bị di động và trình thu thập dữ liệu của công cụ tìm kiếm.

Answer 5

Đối với một phần được nhìn thấy một phần, chúng tôi cần đảm bảo văn bản không quá nhỏ và tương phản màu nền một cách đáng kể. Chúng tôi cũng phải đảm bảo văn bản có thể thay đổi kích thước bằng cách sử dụng các đơn vị kích thước tương đối như các đơn vị kích thước tương đối như đơn vị em như px (mặc dù, theo ý kiến ​​của tôi, điều này càng trở nên ít hơn. thay đổi kích thước văn bản).

Đối với người dùng trình đọc màn hình, thật hữu ích khi có ý tưởng tốt về cách trình đọc màn hình được sử dụng thực tế. Bài viết sau đây trình bày các hướng dẫn dựa trên quan sát người mù duyệt web bằng trình đọc màn hình; đó là một trong số ít ngày nay, nhưng mang đến cho bạn một cảm giác tốt cho những gì sẽ giúp người dùng trình đọc màn hình, và những gì sẽ không:

http://redish.net/content/papers/interactions.html

Bên cạnh đó, Quỹ Mỹ cho người mù có một section of their website dedicated to advice for web developers on how to cater for vision impaired users.

Ngoài hình ảnh trực quan, chúng tôi cần xem xét những người khuyết tật ngăn họ sử dụng chuột và cả những người bị khuyết tật thần kinh. Nếu bất cứ ai có thể cung cấp tài nguyên đưa ra lời khuyên về cách phục vụ cho những cá nhân đó, điều đó sẽ tuyệt vời. Chỉ

Answer 6

Nó được một lúc kể từ khi tôi đã ở một công việc mà chúng tôi phải tuân theo Mục 508, nhưng đây là những gì tôi nhớ rằng đã không được đề cập đến bởi các áp phích khác ...

1. sử dụng các bảng cho dữ liệu. Không sử dụng các bảng để bố trí nếu bạn có thể tránh được nó.
2. Khi sử dụng bảng cho dữ liệu, tiêu đề cột của bạn nên được lồng trong thẻ TH và bạn nên sử dụng thuộc tính tiêu đề và phạm vi. Thẻ bảng của bạn nên sử dụng thuộc tính tóm tắt.
3. Hình ảnh tất cả phải có giá trị cho thuộc tính alt mô tả những gì đang diễn ra trong hình ảnh và nếu hình ảnh không có mục đích (đó là hình ảnh mỏng hoặc tương tự) thì thuộc tính alt phải được đặt thành chuỗi trống.
4. Thử sử dụng trình đọc văn bản thành giọng nói và/hoặc chỉ điều hướng qua bàn phím và/hoặc tắt bảng định kiểu. Tôi tin rằng bạn cần phải mua JAWS, nhưng tôi chắc chắn có những trình đọc màn hình miễn phí trên mạng. Bạn cần trải nghiệm một trang web thông qua trình đọc màn hình để thực sự hiểu mức độ khó khăn của hầu hết các trang web để điều hướng mà không có các dấu hiệu mà trình đọc màn hình diễn giải.

Answer 7

Tạo trang có thể truy cập là điều khó nghĩ nếu bạn chưa bao giờ thực hiện. Tuy nhiên, một khi bạn tìm hiểu các khái niệm cơ bản, nó rất dễ làm trong 95% các trường hợp. Tôi chủ yếu sẽ được lặp đi lặp lại những gì người khác đã nói, nhưng:

1. Chỉ sử dụng bảng cho dữ liệu bảng
2. Hãy chắc chắn rằng bạn sử dụng các công cụ ngữ nghĩa có sẵn cho bạn thông qua HTML. Điều này có nghĩa là sử dụng TH với thuộc tính scope. Sử dụng <em> thay vì <i> và < mạnh > thay vì <b>. Sử dụng các từ viết tắt và viết tắt. Sử dụng danh sách định nghĩa. Tôi có thể mở rộng trên những điều này nếu có ai muốn.

3. Một trong những điều quan trọng nhất là sử dụng nhãn nhãn trên các trường nhập. Đối với mỗi lĩnh vực đầu vào, nút radio, checkbox và textinput bạn nên có:

   < nhãn cho = "username"> Tên đăng nhập: </label> < đầu vào name = "username" />

4. Thêm một " bỏ qua điều hướng "hoặc" bỏ qua để điều hướng "tùy thuộc vào nơi có khối lượng lớn văn bản. Nếu bạn đang làm việc trên một trang web của chính phủ thì đây là bản chất thứ hai mà mọi thứ bạn đang tạo cho phép bạn bỏ qua thông tin lặp đi lặp lại.

5. Không sử dụng màu để nhấn mạnh.

6. Đảm bảo rằng tất cả văn bản của bạn có thể thay đổi kích thước. Điều này khá nhiều có nghĩa là không sử dụng "px" trong css của bạn.

7. Tôi sẽ nhấn mạnh điều này: tạo các trang ngữ nghĩa. Sử dụng các thẻ H cho tên sách của bạn. Sử dụng ul/li để điều hướng.

8. Sử dụng thuộc tính alt trên tất cả hình ảnh. Nếu bạn có một gif spacer ... tốt .. không. Nếu không, hãy giải thích hình ảnh là gì và ý nghĩa của nó đối với nội dung được liên kết. không sử dụng "biểu đồ" làm thẻ alt của bạn. Sử dụng "Biểu đồ tài chính YTD: $ 5.000 Q1, $ 4,000 Q2, $ 8,000 Q3" hoặc một cái gì đó tương tự.

9. Cung cấp phụ đề hoặc bảng điểm cho tất cả các âm thanh và video thành phần

Mấu chốt ở đây là để cung cấp cho những người có thị giác, thính giác và động cơ khiếm cùng một kinh nghiệm như những người có khả năng vật lý tiêu chuẩn. Nếu bạn không thể tab vào một trường, trình đọc màn hình cũng không thể. Nếu bạn không thể nhấp vào văn bản bên cạnh hộp kiểm để chọn nó, trình đọc màn hình không biết văn bản có liên quan đến hộp kiểm.

Bạn nên thường xuyên xem trang web của mình mà không có bảng định kiểu (ctrl-shift-s nếu bạn có Firefox và Web Developer Toolbar) để xem trang có hợp lý hay không. Nếu nó không có ý nghĩa với bạn như một cá nhân nhìn thấy, nó sẽ không có ý nghĩa với một ai đó bằng cách sử dụng một trình đọc màn hình.