Thiết kế gia tăng khả năng truy cập cho website không hề khó

Truy cập digital liên quan đến thực tiễn trong xây dựng nội dung và ứng dụng digital. Bởi nó có khả năng được sử dụng bởi nhiều người. Bao gồm cả những người bị khiếm khuyết về thị giác, vận động, thính giác, lời nói hoặc nhận thức. Có ý kiến cho rằng tạo ra một trang web dễ dàng truy cập là khó khăn và tốn kém. Nhưng sự thật thì không hề như vậy. Thiết kế một sản phẩm đáp ứng các yêu cầu về khả năng truy cập không bắt buộc phải bổ sung tính năng hay nội dung. Đồng nghĩa với việc không cần thêm nỗ lực và chi phí cho phần này.

Tuy nhiên, chỉnh sửa một trang web đang cần một số nỗ lực cụ thể. Khi tôi từng làm việc tại Carbon Health, chúng tôi đã kiểm tra khả năng truy cập trang web bằng AXE Chrome Extension. Chúng tôi tìm thấy 28 lỗi vi phạm mà chúng tôi cần phải giải quyết chỉ trên riêng trang chủ. Dù nghe qua vấn đề này có vẻ khá phức tạp. Tuy nhiên chúng tôi phát hiện ra những vấn đề này không khó để sửa chữa. Đó chỉ là vấn đề về đầu tư thời gian và nghiên cứu để giải quyết chúng.

Chúng tôi đã thành công với việc giải quyết các lỗi đó chỉ trong vài ngày. Tôi muốn chia sẻ với các bạn những bước đơn giản để cho trang web trở nên dễ truy cập hơn. Những nguyên tắc này tập trung vào khả năng truy cập trên website và mobile. Trước khi bắt đầu, tôi muốn nói về những lí do tại sao nó lại quan trọng

Tại sao website cần phải có tính dễ truy cập?

Là một người thiết kế, chúng ta có khả năng và trách nghiệm  đảm bảm rằng tất cả mọi người có khả năng truy cập vào những gì chúng ta tạo ra bất kể khả năng công nghệ của họ ra sao, bối cảnh hay tình huống của họ như thế nào. Điều tuyệt vời trong công việc của chúng tôi là nó mang lại trải nghiệm tốt hơn cho mọi người. Có hơn 56 triệu người ở Hoa Kỳ và hơn 1 tỷ người trên toàn thế giới bị khuyết tật.

Trong năm 2017, có 814 vụ kiện liên quan đến việc tiếp cận trang web được trình lên Tòa án. Chỉ riêng hai phần dữ liệu này phần nào đã thuyết phục chúng ta về tầm quan trọng trong việc thiết kể khả năng truy cập cho website. Nghiên cứu cho thấy các trang web có khả năng truy cập cao sở hữu kết quả tìm kiếm cao. Họ sở hữu lượng tiếp cận lớn hơn, thân thiện với SEO hơn. Đồng thời có thời gian tải xuống nhanh hơn, và họ luôn có khả năng sử dụng tốt hơn.

Bảy nguyên tắc này tương đối dễ thực hiện, có thể giúp các sản phẩm của bạn tiến gần hơn. Mục đích là để đáp ứng cập độ cao nhất của nguyên tắc truy cập nội dung web (WCAG 2.0). Đồng thời hoạt động trên các công nghệ hỗ trợ được sử dụng phổ biến nhất. Bao gồm trình đọc màn hình, kính lúp màn hình và công cụ nhận dạng giọng nói.

1. Sử dụng độ tương phản màu vừa đủ

Độ tương phản màu sắc là một vấn đề dễ bị bỏ qua khi tiếp cận website, những người có thị lực kém có thể khó đọc văn bản nếu phần màu chữ và màu nền có độ tương phản quá thấp. Tổ chức Y tế Thế giới (WHO) ước tính rằng có khoảng 217 triệu người bị suy giảm thị lực từ trung bình đến nặng. Vì vậy, cần phải xem xét độ tương phản đầy đủ giữa màu văn bản và màu nền. Một số công cụ sẽ giúp bạn kiểm tra điều này một cách nhanh chóng.

Nếu bạn sử dụng máy Mac, tôi khuyên bạn nên tải ứng dụng Contrast, với công cụ này, bạn có thể kiểm tra độ tương phản ngay lập tức bằng cách sử dụng công cụ chọn màu. Nếu bạn muốn có được thông số chi tiết hơn, tôi khuyên bạn nên nhập các giá trị màu của bạn vào trình kiểm tra độ tương phản màu WebAIM. Công cụ này sẽ tính điểm cho cả kích thước văn bản thông thường và lớn hơn ở các mức độ tuân thủ khác nhau (A, AA, AAA.) Bạn có thể thay đổi giá trị màu và xem kết quả trong thời gian thực tế.

Source: WCAG Visual Contrast

2. Không sử dụng những màu đơn lẻ để làm thông tin quan trọng trở nên dễ hiểu hơn

Khi bạn truyền tải một thông tin quan trọng, thể hiện một hành động hoặc nhắc nhở phản hồi, sử dụng màu sắc khác biệt không phải là cách duy nhất để tạo điểm nhấn khác biệt. Những người có thị lực thấp hoặc bị mù màu sẽ rất khó hiểu được nội dung của bạn. Cố gắng sử dụng một chỉ báo khác thay vì màu sắc ví dụ như labels hoặc patterns. Khi hiển thị lỗi trên màn hình, đừng chỉ dựa vào màu sắc của văn bản, bạn có thể thêm biểu tượng hoặc bao gồm tiêu đề vào trong lời nhắn.

Xem xét thêm một dấu hiệu trực quan như trọng lượng phông chữ hoặc gạch chân vào văn bản được liên kết trong một đoạn văn để khiến các liên kết thêm nổi bật. Các yếu tố với thông tin phức tạp như biểu đồ và đồ thị có thể đặc biệt khó đọc khi bạn sử dụng màu sắc để phân biệt dữ liệu. Sử dụng các khía cạnh trực quan khác để truyền đạt thông tin như các shape, labels và kích thước. Một ví dụ điển hình cho hướng dẫn này là chế độ mù màu của Trello, khi được sử dụng, label trở nên dễ truy cập hơn bằng cách thêm texture.

Source: WCAG Visual Contrast Without Color

3. Thiết kế những khoảng tập trung rõ ràng

Bạn có nhận thấy các đường viền màu xanh đôi khi xuất hiện xung quanh các liên kết, đều vào và nút không? Những phác thảo này được gọi chỉ số tập trung. Theo mặc định, các trình duyệt sử dụng lớp giả CSS để hiển thị các phác thảo này trên các phần điện tự khi chúng được chọn. Bạn có thể thấy các chỉ số lấy nét mặc định này không ổn và bị cám dỗ chỉ để ẩn chúng. Tuy nhiên, nếu bạn thoát khỏi được phong cách mặc định này, hãy chắc chắn thay thế nó bằng một phong cách khác.

Các yếu tố cần được tập trung thể hiện là những đường link, widgets, buttons và menu. Họ cần phải có một chỉ báo tập trung làm cho chúng trông khác với các yếu tố xung quanh chúng. Bạn hoàn toàn có thể thiết kế những tiêu điểm tập trung phù hợp với trang web và đồng bộ với thương hiệu của bạn. Thiết lập nên trạng thái có tính nhận diện cao, với độ tương phản tốt, khiến nó nổi bật so với những phần nội dung còn lại

Source: W3C Focus Visible

4. Sử dụng label hoặc form hướng dẫn với fields và inputs

Sử dụng đoạn văn bản để làm label là một trong những sai lầm lớn nhất khi thiết kế form. Chúng ta có thể bị cuốn theo xu hướng này khi bị hạn chế khoảng trống. Hoặc muốn làm cho thiết kế trở nên đơn giản và hiện đại hơn. Đoạn văn bản khi làm label thường có màu xám và độ tương phản thấp nên rất khó để theo dõi. Nếu bạn cũng là một người thường quên đi những gì mình đã viết thì bạn sẽ rất khó để theo dõi đoạn văn bản nói về lĩnh vực gì khi label biến mất. Người sử dụng screen reader thường điều hướng qua form bằng phím Tab để chuyển qua các điều khiển biểu mẫu. Những đoạn văn bản không có label sẽ thường bị người đọc bỏ qua do không thể hiện được điểm nhấn trên website.

Luôn giúp mọi người hiểu những gì họ nên làm và viết dưới dạng form. Bạn phải đảm bảo việc các label không bao giờ biến mất, ngay cả khi điền input. Mọi người không bao giờ nên mất liên kết với những gì họ viết. Khi các nhà thiết kế giấu các mô tả hoặc chỉ dẫn trong các form của họ, họ đã đánh mất khả năng sử dụng theo hướng đơn giản. Cách làm này không có nghĩa là bạn phải làm lộn xộn thiết kế của mình với những thông tin không cần thiết, chỉ cần đảm bảo cung cấp các tín hiệu thiết yếu.

Quá nhiều văn bản hướng dẫn cũng sẽ dẫn đến nhiều vấn đề như việc có quá ít văn bản hướng dẫn vậy. Mục tiêu là để xác nhận rằng cá nhân có đủ thông tin để hoàn thành nhiệm vụ của họ khi không có sự trợ giúp hay không.

Source: WebAIM Creating Accessible Forms

5. Thiết lập những cụm text thay thế cho hình ảnh và những thông tin không có text

Những người có thị lực kém thường tận dụng screen reader để lắng nghe website. Những công cụ này chuyển đổi nội dung thành bài phát biểu để người đọc có thể nghe những nội dung từ website

Có 2 cách để thể hiện văn bản thay thế

+ Trong thuộc tính <alt> của thành phần hình ảnh.

+ Trong bối cảnh hoặc môi trường xung quanh của chính hình ảnh đó

Thay vì chỉ nói những thứ trực quan như “hình ảnh” thì bạn hãy cố gắng miêu tả những gì đang diễn ra trong hình ảnh, và nó có tác động tới câu chuyện như thế nào.

Source: W3C Using Alt Attributes

6. Sử dụng markup cho nội dung của bạn

Heading markup vào nơi nội dung bắt đầu – chúng là các tags được cung cấp cho văn bản để xác định phong cách và mục đích của nó. Các heading cũng thiết lập hệ thống phân cấp của nội dung trang. Các tiêu đề với kích thương phông chữ lớn giúp người đọc hiểu thứ tự của nội dung tốt hơn. Tương tự, người sử dụng screen reader cũng sử dụng thẻ tiêu đề để lọc nội dung. Bằng cách này, những người có thị lực thấp cũng có được cái nhìn tổng quan về website bằng cách đọc từng tiêu đề trong một luồng phân cấp.

Điều quan trọng là sử dụng các yếu tố cấu trúc phù hợp khi bạn phát triển một trang web. Các phần tử HTML là cổng chuyển giao kết nối với trình duyệt. Nhằm tìm hiểu về thông tin và cách truyền tải thông tin đó. Các thành phần và cấu trúc của một trang là những gì tạo thành một cây khả năng truy cập. Cây này là thứ cung cấp năng lượng cho những người khiếm thị sử dụng screen reader. Giúp họ có thể sử dụng tính năng nghe văn bản trên website

Sử dụng sai markup có thể ảnh hướng đến tính truy cập của web. Đừng chỉ sử dụng thẻ HTML cho các kiểu cách hiệu ứng. Screen reader điều hướng các trang web theo cấu trúc tiêu đề theo thứ bậc. Là tiêu đề thực sự chứ không phải là những thông tin với phông chữ lớn và được in đậm. Những người sử dụng trang web của bạn có thể nghe danh sách tất cả các tiêu đề. Chuyển nội dung theo loại tiêu đề hoặc điều hướng trực tiếp đến các tiêu đề cấp cao nhất.

Source: WebAIM Semantic Structure

7. Hỗ trợ điều hướng keyboard

Khả năng truy cập keyboard là một trong những khía cạnh quan trọng nhất. Nhằm mục đích đánh giá khả năng truy cập của website. Nếu bạn giống tôi, bạn sẽ thường sử dụng phím Tab trên bàn phím để điều hướng qua lại. Phụ thuộc vào các yếu tố tương tác trên websit: links, button, hoặc input. Trạng thái tiêu điểm mà chúng ta đã thảo luận trước đó cung cấp một chỉ báo trực quan của thành phần hiện được chọn. Khi bạn điều hướng một trang, thứ tự của các yếu tố tương tác là điều cần thiết.

Với yêu cầu là việc điều hướng phải hợp lý và trực quan. Thứ tự tab phải theo dòng chảy trực quan của trang. Đi từ trái sang phải, từ trên xuống dưới. Tiếp theo là tiêu đề, điều hướng chính, button nội dung, input, và cuối cùng là chân trang.

Bạn có thể kiểm tra website của bạn bằng cách thực hành điều hướng với keyboard. Sử dụng phím Tab để di chuyển qua các liên kết và biểu mẫu. Kiểm tra bằng phím Enter để chọn một phần tử. Xác minh rằng tất cả các thành phần tương tác có thể dự đoán và theo thứ tự. Khi bạn có thể điều hướng qua tất cả các trang của website mà không cần sử dụng chuột. Có nghĩa là trang web của bạn đang đứng ở vị trí rất tốt. Cuối cùng nhưng không kém phần quan trọng.

Hãy cẩn thận với kích thước của yếu tối điều hướng của bạn. Điều này bao gồm số lượng liên kết và độ dài của văn bản. Cung cấp các mốc ARIA hoặc các thành phần cấu trúc HTML5 như <main> hoặc <nav> sẽ giúp việc điều hướng trở nên dễ dàng hơn.

Source: W3C Keyboard

Kết luận

Trên đây là 7 nguyên tắc giúp bạn thiết kế website của mình trở nên gần gũi hơn. Nhằm đạt đến mức độ AA của Web Content Accessibility Guidelines. Thiết kế cho khả năng tiếp cận là điều mà tôi vẫn đang cố gắng cải thiện. Tôi đã từng nghĩ rằng điều này quá khó và không hề quan trọng nhưng thực ra tôi đã lầm. Do đó, tôi mong bạn có thể xem xét các hướng dẫn này. Coi như đây là một phần của quy trình thiết lập website. Qua đó, tiếp tục bàn luận về lý do tại sao khả năng truy cập lại quan trọng đến vậy.

Là nhà thiết kế, trách nhiệm của chúng tôi là đạt đến đỉnh cao trong tính truy cập của website. Cùng với nó, chúng tôi đưa công nghệ  tới cho tất cả mọi người bất kể khả năng, tình hình kinh tế, tuổi tác, giáo dục hoặc vị trí địa lý của họ.

Hãy cùng thiết kế một cách có trách nhiệm. Cảm ơn bạn

Source: Designing for accessibility is not that hard