Mẹo, thủ thuật và tài nguyên trợ năng cho Web Devs

May 09 2022
Khả năng truy cập cho người dùng web bị khuyết tật là điều quan trọng đối với tất cả các nhà phát triển để đưa vào công việc của họ. Đó là nguyên lý phát triển web hướng dẫn của W3C và các cuộc đấu tố tại tòa án đang diễn ra để xem các trang web không thể truy cập được có được coi là một hình thức phân biệt đối xử với người dùng khuyết tật hay không.

Khả năng truy cập cho người dùng web bị khuyết tật là điều quan trọng đối với tất cả các nhà phát triển để đưa vào công việc của họ. Đó là nguyên lý phát triển web hướng dẫn của W3C và các cuộc đấu tố tại tòa án đang diễn ra để xem các trang web không thể truy cập được có được coi là một hình thức phân biệt đối xử với người dùng khuyết tật hay không . Tất cả những điều này để nói rằng, chắc chắn có một trường hợp đặt khả năng tiếp cận lên hàng đầu trong bất kỳ thiết kế nào.

Khả năng tiếp cận có thể có vẻ phức tạp hoặc quá tải, đặc biệt đối với các nhà phát triển có kinh nghiệm hạn chế với người dùng web bị khuyết tật và nhu cầu của họ. Tuy nhiên, việc tạo nội dung web có thể truy cập thường đơn giản hơn bạn nghĩ, miễn là bạn có các công cụ, quan điểm và hướng dẫn phù hợp theo ý mình.

Bài viết này sẽ cung cấp một cái nhìn tổng quan rất ngắn gọn về sự hiểu biết chung về khả năng truy cập trong thiết kế web. Tôi cũng đưa ra một số ví dụ và cân nhắc sắc thái hơn cho một số chủ đề chính trong phát triển có thể truy cập. Tôi cũng sẽ cung cấp các liên kết và tài nguyên đã giúp tôi phát triển quan điểm định hướng khả năng tiếp cận - Tôi chắc chắn rằng bạn cũng sẽ thấy chúng hữu ích!

Thiết kế web có thể truy cập là gì?

Theo W3C :

Khả năng truy cập web có nghĩa là các trang web, công cụ và công nghệ được thiết kế và phát triển để người khuyết tật có thể sử dụng chúng.

Điều này không chỉ bao gồm việc có các nguyên tắc trợ năng hướng dẫn bạn viết mã mà còn đảm bảo hỗ trợ trình đọc màn hình, API, tiện ích mở rộng trình duyệt và các công cụ khác cho phép người khuyết tật sử dụng Internet mà không bị cản trở.

Một trong những tổ chức hướng dẫn chính về khả năng tiếp cận là Đạo luật Người khuyết tật Hoa Kỳ (ADA) , được thông qua vào năm 1990 để đảm bảo chỗ ở cho người khuyết tật trong các không gian công cộng và do liên bang tài trợ ở Hoa Kỳ. Trong những năm gần đây, những không gian này đã bao gồm không gian kỹ thuật số, vì nhiều tổ chức tiến hành kinh doanh chủ yếu thông qua internet.

Do đó, phát triển web phải luôn cho phép người khuyết tật nhận thức, hiểu, điều hướng hoặc tương tác với web. Mặc dù các loại khuyết tật khác nhau tùy thuộc vào người bạn yêu cầu, W3C - công ty hàng đầu về thiết kế web có trách nhiệm - chỉ định các khuyết tật sau là mối quan tâm chính của các nhà phát triển web:

  • Khuyết tật thính giác
  • Khuyết tật nhận thức
  • Khuyết tật thần kinh
  • Khuyết tật thể chất (đôi khi được gọi là khuyết tật vận động)
  • Khuyết tật nói
  • Khuyết tật thị giác
Rào cản về khả năng tiếp cận là rất nhiều, nhưng không phải là không thể dự đoán. Nguồn: https://bestwebsiteaccessibility.com/guides/web-accessibility-barriers-and-how-to-overcome-them/

Tại sao có thể tiếp cận?

Không chỉ là điều đúng đắn cần làm, việc có nội dung web có thể truy cập cung cấp nhiều lợi ích cho cả người dùng và nhà thiết kế:

1. Thiết kế dễ tiếp cận giúp ích cho tất cả mọi người. Ví dụ, một trong những nguyên tắc thiết kế để điều chỉnh khuyết tật thị giác là có độ tương phản cao giữa các yếu tố tiền cảnh và hậu cảnh. Điều này không chỉ giúp ích cho người khiếm thị, mà độ tương phản cao hơn giúp chống lại ánh sáng mặt trời chói trên màn hình bóng, có nghĩa là bất kỳ ai bên ngoài sử dụng điện thoại của họ đều sẽ được hưởng lợi.

2. Thiết kế có thể truy cập là rất tốt cho các doanh nghiệp và tổ chức. Có vẻ như vẫn còn hoài nghi, việc có một trang web có thể truy cập nhất thiết sẽ chuyển thành lượng người xem trang web lớn hơn. Điều này tất nhiên sẽ bao gồm nhiều doanh số hơn, nhiều người dùng đăng ký hơn, v.v.

3. Thiết kế có thể sử dụng được để chứng minh công việc của bạn trong tương lai. Khi nhiều tổ chức tự trang bị cho mình khả năng tiếp cận, tư duy ưu tiên chỗ ở và chỗ ở sẽ giảm tần suất bạn cần phải xem lại công việc của mình trong tương lai.

4. Thiết kế có thể tiếp cận cải thiện việc tuân thủ ADA. Mặc dù tính hợp pháp của việc thực thi chỗ ở trên web là một chút âm u, lập luận đã được đưa ra và bảo vệ thành công tất nhiên rằng một trang web không thể truy cập được có thể bị coi là phân biệt đối xử. Điều này là do các trang web hoặc biểu mẫu trực tuyến cần thiết cho sự tương tác giữa người dùng và tổ chức về mặt chức năng ngăn một lớp được bảo vệ có thể tham gia vào không gian công cộng. Đây là một cân nhắc rất lớn đối với các tổ chức nhận được tài trợ của liên bang, vì tuân thủ ADA là bắt buộc.

Tất nhiên, có nhiều lợi ích hơn, nhưng tôi cảm thấy những điều này phải đủ nổi bật để thu hút sự chú ý của bất kỳ ai. Hãy chuyển sang một số mẹo và thủ thuật cụ thể mà bạn có thể áp dụng trong thiết kế của mình.

Khả năng tiếp cận trong thiết kế của bạn

Thay vì viết mã hoặc triết lý giả tạo ở đây, tôi muốn sử dụng không gian này để cung cấp một số mẹo và cân nhắc cụ thể hoặc sắc thái hơn cho các nhà phát triển web đang tìm kiếm trò chơi trợ năng của họ. Bên cạnh đó, tôi mong bạn xem các tài nguyên này để biết các ví dụ về triết lý và thiết kế trợ năng cụ thể:

  • Để tìm hiểu thêm về mục đích của phát triển web có thể truy cập, vui lòng đọc Sáng kiến ​​hỗ trợ truy cập web của W3 .
  • Để xem các ví dụ về khả năng truy cập trong mã mà bạn có thể áp dụng ngay lập tức, hãy đọc bài viết Khả năng tiếp cận tuyệt vời trong Phát triển web của Inica Blessy S.
  • Để có danh sách các thành phần giao diện người dùng có thể truy cập, Smashing Magazines đã viết bài viết này .
  • Nếu bạn đang tìm kiếm một câu cửa miệng linh hoạt để giúp bạn kết hợp khả năng tiếp cận vào quy trình thiết kế của mình, hãy xem xét đọc bài viết này về POUR (Có thể hiểu, Có thể hoạt động, Có thể hiểu và Mạnh mẽ) từ Đại học Pittsburgh .

Văn bản mô tả

Một trong những nguyên lý cơ bản của phát triển web có thể truy cập là phải có văn bản mô tả tương đương cho tất cả nội dung không phải văn bản. Điều này bao gồm văn bản thay thế cho hình ảnh, nhưng nó cũng bao gồm các liên kết mô tả, hướng dẫn điều hướng cho các sự kiện nhiều trang hoặc nhiều bước và chú thích cho video, v.v.

Về cơ bản, đối với tất cả nội dung không phải văn bản mà bạn đưa vào, hãy chuẩn bị một nội dung thay thế bằng văn bản mô tả . Đây là một phần lớn khả năng tiếp cận, và như vậy đây sẽ là phần dài nhất của bài viết này.

Ví dụ: hãy nghĩ về một liên kết mà người dùng sẽ nhấp vào để truy cập trang Liên hệ với chúng tôi. Các cân nhắc về khả năng tiếp cận bao gồm những điều sau:

  1. URL liên kết phải mang tính mô tả .
  2. URL không thể truy cập : www.website.com/ contact. Nó không mô tả rõ ràng nội dung hoặc mục đích của trang đích.
  3. URL có thể truy cập : website.com/ contact-us. Nó nêu rõ mục đích của trang đích và những gì bạn sẽ tìm thấy ở đó.
    • Liên kết không thể truy cập : LIÊN HỆ VỚI CHÚNG TÔI . Điều này thường tạo ra các vấn đề trong đó trình đọc màn hình sẽ đọc từng chữ cái riêng lẻ. Tức là, người đọc sẽ thông báo “C”, sau đó là “O”, và sau đó là “N”, et al.
    • Liên kết có thể truy cập : Liên hệ với chúng tôi hoặc liên hệ với chúng tôi . Trình đọc màn hình sẽ đọc những điều này là “Liên hệ với chúng tôi”, như dự định của nhà phát triển.
    • Hãy tưởng tượng nếu ai đó đọc to từng chữ cái, thay vì toàn bộ từ, cho bạn nghe. Nguồn: https://www.flickr.com/photos/daniel_gies/5392604084/
    • Văn bản thay thế không thể truy cập : “Nút màu đỏ”. Văn bản thay thế này không mô tả chức năng của nút cũng như nơi đưa người dùng đến.
    • Văn bản thay thế có thể truy cập: “Nút này đưa bạn đến trang Liên hệ với chúng tôi . ”Nó mô tả mục đích của nút và đích của liên kết.
    • Lưu ý về văn bản thay thế cho hình ảnh - Nếu nút hoặc hình ảnh là trang trí, hãy sử dụng <… alt = ““> thay vì xóa hoàn toàn thành phần. Nó tốt hơn cho trình đọc màn hình.
    • Ví dụ : “Liên kết này sẽ đưa bạn đến trang mà bạn có thể liên hệ với chúng tôi.”
    • Ví dụ : “Để liên hệ với chúng tôi, hãy truy cập trang Liên hệ với chúng tôi.”

    Bài viết của UsableNet về các liên kết có thể truy cập cung cấp các ví dụ đặc biệt về cách cải thiện tên liên kết của bạn.

    Tương phản

    Theo tôi, có sự tương phản cao giữa các mục tiền cảnh và hậu cảnh là một trong những khía cạnh dễ dàng nhất của thiết kế dễ tiếp cận. Dù sao nó cũng nên được cân nhắc trong thiết kế trang của bạn - độ tương phản giữa nền tối và văn bản sáng càng lớn thì khả năng đọc càng cao.

    Tất nhiên, khả năng đọc tốt nhất đến từ nền trắng với văn bản đen, nhưng bạn cũng có thể có nền xanh lam với văn bản màu vàng nếu muốn, miễn là độ tương phản đủ cao để đảm bảo rằng ngữ cảnh trang của bạn tách biệt rõ ràng với nền .

    Đây là một ví dụ về độ tương phản xấu. Lưu ý rằng nó khó đọc như thế nào. Nguồn:

    Điều quan trọng cần lưu ý là với điều này, tôi không chỉ đề cập đến nền trang và nội dung mà bạn đưa vào. Độ tương phản cao cũng phải là yếu tố chính của phụ đề video. Có phụ đề chính xác là điều tuyệt vời (và được sử dụng quá mức), nhưng bạn cũng cần đảm bảo rằng chúng có thể được đọc dễ dàng.

    Có nhiều công cụ bạn có thể sử dụng để đảm bảo rằng cách tiếp cận thiết kế của bạn không tạo ra rào cản về khả năng tiếp cận. Một ví dụ là Trình kiểm tra độ tương phản của WebAIM.

    Các hình thức

    Thiết kế biểu mẫu có thể truy cập thường được coi là đương nhiên.

    Biểu mẫu có thể tạo ra một rào cản khả năng truy cập lớn vì cả việc tạo và điền chúng thường được coi là điều hiển nhiên. Tuy nhiên, hãy xem xét những điều sau: Nếu một biểu mẫu yêu cầu bạn cung cấp “Tên”, bạn có trả lời bằng tên, họ của mình hay cả hai không? Bạn có nên bao gồm tên đệm của bạn? Điều gì sẽ xảy ra nếu trường đầu vào không hỗ trợ toàn bộ độ dài câu trả lời của bạn? Quan trọng hơn, trình đọc màn hình hoặc thiết bị hỗ trợ tiếp cận sẽ giao tiếp bất kỳ thông tin nào trong số này cho người dùng như thế nào?

    Dưới đây là một tập hợp các mẹo tổng hợp có thể giúp bạn tạo các biểu mẫu web dễ tiếp cận hơn. Bài viết của Deque về cách tạo biểu mẫu có thể truy cập vô cùng hữu ích và bao gồm các ví dụ mã hóa mà bạn có thể sử dụng. Bài viết này có nhiều thông tin hơn tôi sẽ cung cấp ở đây.

    • Tránh văn bản giữ chỗ màu xám. Mặc dù nó có thể đẹp hơn về mặt thẩm mỹ đối với một số người, nhưng độ tương phản thấp của văn bản màu xám trên nền trắng khiến người dùng bị khiếm thị khó nhìn thấy văn bản mẫu.
    • Đánh dấu rõ ràng tất cả các yếu tố hình thức. Cho dù điều này có vẻ vụn vặt đến mức nào, ai đó cần biết nơi đặt họ của họ và nơi đặt họ của họ.
    • Tránh các sự kiện hẹn giờ nếu có thể. Điều này có thể bao gồm đăng xuất tự động, gửi biểu mẫu hoặc các hành động khác trong đó người dùng trực tiếp lấy đi quyền đại diện hoàn chỉnh. Chắc chắn điều này là không thể tránh khỏi trong một số trường hợp liên quan đến thông tin nhạy cảm. Tuy nhiên, các sự kiện theo thời gian có thể gây căng thẳng và gián đoạn cho người dùng có trình đọc màn hình hoặc người dùng bị khuyết tật về nhận thức hoặc vận động / thể chất. Nếu có thể, hãy bao gồm bộ hẹn giờ, bộ kiểm tra hoạt động hoặc các cách khác để cho người dùng biết rằng đầu vào của họ là cần thiết hoặc được giám sát.
    • Bao gồm các yếu tố điều hướng nếu bạn có một biểu mẫu nhiều trang . Ví dụ: có một dòng cho biết “Trang 1/5” có thể cực kỳ hữu ích để cho người dùng biết họ đã đi được bao xa trong một quá trình. Điều này cho phép người dùng giải lao cần thiết và sẽ rất hữu ích cho một số ứng dụng và công nghệ nếu họ phải mở biểu mẫu đầy đủ cho người dùng.
    • Bao gồm các liên kết bỏ qua đến nội dung chính của trang. Bạn thấy điều này rất nhiều trong các blog về ẩm thực, nơi bạn có thể bỏ qua phần mô tả của tác giả về trận bóng đá của con trai họ và đi thẳng vào công thức. Điều này rất quan trọng để người dùng không bị kiệt sức hoặc thất vọng khi chờ đợi nội dung không liên quan đến họ kết thúc. Nó cũng hỗ trợ cấu trúc trang, tạo điều kiện thuận lợi cho việc sử dụng trình đọc màn hình.

    Đây là một số mẹo mà tôi cảm thấy rất hay để chia sẻ, nhưng tôi không thể sắp xếp chúng thành bất kỳ danh mục nào ở trên.

    • Yêu cầu một người khuyết tật dùng thử trang web của bạn và suy nghĩ của họ về cách bạn có thể cải thiện nó. Không gì có thể giúp bạn nhiều hơn là có được cái nhìn sâu sắc của chính những người dùng khuyết tật.
    • Phần lớn công việc trợ năng sẽ được thực hiện với HTML, vì vậy hãy có chiến lược và cân nhắc với mã của bạn. Ví dụ: chỉ sử dụng <h1> cho tiêu đề trang chính và sử dụng thẻ tiêu đề theo cách hoàn toàn xuống cấp (<h1>, sau đó là <h2> và sau đó là <h3>, v.v.) để người dùng biết rằng họ không bỏ lỡ bất cứ điều gì. Các điểm đánh dấu ARIA cho HTML của bạn cũng có thể hữu ích:https://www.w3.org/TR/html-aria/
    • Hãy thử sử dụng trình đọc màn hình, tiện ích mở rộng của trình duyệt, API hoặc hỗ trợ trợ năng khác trong quá trình thiết kế và thử nghiệm của bạn. Điều này sẽ cung cấp cho bạn ý tưởng tốt hơn về cách các thiết bị này hoạt động, cũng như cách thiết kế của bạn hoạt động với chúng.
    • Ngoài ra còn có một số công cụ được thiết kế để cung cấp cho các nhà phát triển web cái nhìn sâu sắc về khả năng tiếp cận công việc của họ. Ví dụ: Tiện ích mở rộng trình duyệt WAVE tạo báo cáo khả năng truy cập trang web khi bạn sử dụng trang web. Nó hiện hoạt động trên Chrome, Firefox và Microsoft Edge.
    • Nếu bạn không có thời gian hoặc nguồn lực để làm cho mọi trang có thể truy cập ngay lập tức, hãy ưu tiên các trang có nhiều lưu lượng truy cập nhất và các trang sẽ phù hợp nhất với người dùng.
    • Nếu bạn cần nói chuyện trực tiếp với người dùng của mình, hãy tránh sử dụng ngôn ngữ đầu tiên như “người khuyết tật”. Vâng, tôi biết trích dẫn W3C mà tôi đã cung cấp trước đó làm được điều đó, nhưng đó là lý do tại sao tôi muốn chỉ ra điều đó. Hầu hết những người khuyết tật (bao gồm cả tôi) đều thấy thuật ngữ này phức tạp một cách không cần thiết và trong một số trường hợp, nó là sự hạ mình. “Người khuyết tật” là thông tin giống như “người khuyết tật”, nhưng theo cách ít từ ngữ hơn và trực tiếp hơn. Dưới đây là một ví dụ rõ ràng về ghi chú này: Trong một cuộc trò chuyện thông thường, bạn có nhiều khả năng tự giới thiệu mình với tư cách là nhà phát triển web hay là người phát triển web?

    Khi tôi làm việc trong lĩnh vực giáo dục đại học, tôi tình cờ nghe một đồng nghiệp phàn nàn về “công việc làm thêm” đi vào khả năng tiếp cận, nói rằng nó đi quá xa đối với rất ít người. Tôi không đồng ý — Tôi chỉ không nghĩ rằng bạn có thể đi quá xa để cải thiện cuộc sống của người khác. Mọi người đều xứng đáng được truy cập internet một cách bình đẳng, bao gồm cả công việc của bạn. Bạn đã nỗ lực rất nhiều vào nó, không phải mọi người đều có cơ hội xem và sử dụng nó nếu họ muốn?

    Đọc thêm:

    • Hướng dẫn hỗ trợ tiếp cận nội dung web của W3C
    • Lưu trữ Mạng có thể sử dụng
    • MDN: Khả năng truy cập web
    • Texas A&M: Phát triển trang web với khả năng truy cập trong tâm trí

© Copyright 2021 - 2022 | vngogo.com | All Rights Reserved