Cách thiết kế website cho người khuyết tật - Phần 1
Khám phá cách thiết kế website thân thiện với người khuyết tật trong phần đầu tiên của series về web accessibility. Bài viết giới thiệu chi tiết về WCAG (Web Content Accessibility Guidelines), các nguyên tắc thiết kế tiếp cận, và tầm quan trọng của việc đảm bảo nội dung web có thể tiếp cận được với mọi đối tượng người dùng.

Giới thiệu
Lúc trước khi mình đi thi Mobile Hackathon, có 1 nhóm đoạt giải nhất là làm về app đọc tin tức cho người mù, mình đã định về nghiên cứu thêm về lĩnh vực này nhưng quên béng đi mất.
Cũng trùng hợp, gần đây, bạn mình - Hoàng Phan có làm dự án của cty cũng tìm hiểu về cách thiết kế website/ứng dụng cho người khuyết tật. Hy vọng series của Hoàng sẽ giúp ích cho những bạn đang tìm hiểu về chủ đề này nhé.
Cách người khuyết tật tiếp cận với webiste của bạn – Phần 1
Thời gian vừa rồi mình có tìm hiểu cách để nội dung của một trang web có thể tiếp cận với các đối tượng người dùng khuyết tật như bị khiếm thị, khiếm thính, suy giảm vận động…
Và series này mình sẽ chia sẻ những kiến thức mình đã tìm hiểu được, làm sao người khuyết tật tiếp cận được với sản phẩm của bạn, cách bạn đưa trang web tiếp cận với các đối tượng khuyết tật.
Accessibility – Chôm từ google image
TỔNG CHUNG CHUYÊN MỤC NÀY MÌNH SẼ CÓ 3 PHẦN
-
Phần 1: Hiểu về WCAG
-
Phần 2: Cách người khuyết tật tiếp cận với website của bạn
-
Phần 3: Lộ trình đưa website đến với người khuyết tật
PHẦN 1: HIỂU VỀ WCAG
Để tìm hiểu về cách người khuyết tật tiếp cận với website, thì ta hãy tìm hiểu về bộ tiêu chuẩn WCAG để biết nó giúp gì cho việc tiếp cận nhé.
WCAG là gì?
WCAG là một bộ tiêu chuẩn trong xây dựng website, được tổ chức W3C đưa ra nhằm xác định cách làm cho nội dung Web dễ tiếp cận hơn với người khuyết tật.
Tài liệu chính gốc của WCAG tại đây nha: https://www.w3.org/TR/WCAG21/
4 nguyên tắc
Nó có 4 nguyên tắc chính đó là: perceivable, operable, understandable, và robust.
1. Perceivable
Các thành phần thông tin và User Interface phải được trình bày sao cho người dùng không chỉ là đọc mà có thể thông qua các thiết bị khác, người khuyết tật có thể cảm nhận được nội dung của thông tin.
Khi một hình ảnh bị thiếu Alt text, thì các thiết bị/app reader screen không thể đọc được nội dung của hình ảnh. Người dùng (mù/khiếm thị) sẽ không biết hình ảnh này diễn tả về điều gì cả.
2. Operable
Các thành phần về giao diện và navigation có thể hoạt động tốt. Web của bạn phải làm sao đó để thông qua các thiết bị như keyboard, nút ấn, … mà vẫn điều khiển được web của bạn 1 cách dễ dàng. Như cách thay đổi focus, cấu trúc của page, thời gian đọc và sử dụng nội dung, di chuyển từ module này sang module khác trên cùng 1 page mà người dùng có thể cảm nhận rằng họ đang ở vị trí đó của trang web của bạn.
Các trang tự động redirect, thì nên có thời gian đủ để những người khuyết tật như mù lòa, thị lực kém, hạn chế về nhận thức có thể cần nhiều thời gian hơn để đọc nội dung. Do đó cần thiết kế lượng thời gian cho phù hợp.
3. Understandable
Các thông tin và operation của UI phải dễ hiểu, thiên về nội dung của trang web phải dễ đọc, dễ hiểu, điều hướng nhất quán, dễ đoán được hướng của điều hướng, giúp tránh lỗi hoặc có lỗi với các thông báo lỗi rõ ràng, …
tabindex cần đặt sao cho phù hợp, nhất quán, dễ đoán để người dùng dễ điều hướng khi sử dụng các thiệt bị như Single-switch access device, bàn phím
4. Robust
Các nội dung cung cấp phải đủ mạnh để diễn tả từng thành phần một cách đầy tin cậy đến với user agents và các công nghệ hỗ trợ. Thông qua parsing, cách đặt name, role, và value cho các thẻ html, cách truyền tải status message
Với 1 popup (div), để đóng popup này thì thông qua element “X”. aria-lable=”Close” được sử dụng để cung cấp một name cho các công nghệ hỗ trợ có thể truy cập vào nút “X”.
Đánh giá qua 3 cấp độ
Và WCAG nó đánh giá các tiêu chuẩn (gọi là tiêu chí thành công) dựa vào 3 cấp độ (A-AA-AAA). Vì các tiêu chí thành công được tổ chức dựa trên tác động của chúng đối với thiết kế, cấp độ càng cao, thiết kế càng trở nên gò bó.
-
Cấp độ A – một số tác động đến thiết kế.
-
Cấp độ AA – tác động trung bình đến thiết kế
-
Cấp độ AAA – tác động cao đến thiết kế
Với 3 mức độ này, thì có thể cùng 1 thể loại tiêu chí, nhưng nó có 3 mức. Khi bạn vượt qua được cấp độ AA, nghĩa là cấp độ A của tiêu chí đã được đáp ứng. Và theo những tài liệu mình tìm hiểu được, thì khuyến nghị nên đạt đến level AA.
Để rõ hơn, thì xem thử ví dụ này nhé, trong Guideline 1.4 Distinguishable.
+ Tiêu chí thành công 1.4.1 – Use of Color – level A. Mục đích của Tiêu chí Thành công này là đảm bảo rằng tất cả người dùng có thể truy cập thông tin được truyền tải bởi sự khác biệt về màu sắc, nghĩa là bằng cách sử dụng màu sắc trong đó mỗi màu có một ý nghĩa được gán cho nó.
+ Tiêu chí thành công 1.4.3 – Contrast (Minimum) – level AA. Trình bày trực quan của văn bản và hình ảnh của văn bản có tỉ lệ tương phản ít nhất 4,5: 1
+ Tiêu chí thành công 1.4.6 – Contrast (Enhanced) – level AAA.
Trình bày trực quan văn bản và hình ảnh của văn bản có tỷ lệ tương phản ít nhất là 7: 1
Hiện text #FFFFFF trên nền xanh #65A5BF chỉ đáp ứng là sự khác biệt về màu sắc, ratio =2,73 < 4.5. Do đó chỉ đáp ứng được tiêu chí thành công A (1.4.1)
Để đạt được tiêu chí AA thì phải thay đổi nền xanh thành #00819F để đạt ratio 4.53 khi đó nó sẽ đáp ứng luôn cả tiêu chí thành công A (1.4.1)
Hoặc để đạt luôn tiêu chí AAA thì sẽ phải thay đổi nền xanh thành #006179 để ratio = 7.03
Như ví dụ trên ta thấy chỉ đạt được level A, thì khi xem trang web này trên 1 device ở 1 môi trường quá sáng, thì có thể sẽ không đọc được chữ do tỉ lệ contrast quá thấp, hoặc những người bị khiếm thị hoặc thiên về bị bệnh về màu cũng khó mà đọc được những text #FFFFFF trên nền #65A6BF trong môi trường bình thường. Còn khi thay đổi đến level AAA sẽ ít còn bị các vấn đề về contrast, nhưng có thể thay đổi nguyên bộ thiết kế, cũng như bộ màu trên trang web.
Từ đó ta có thể thấy là level càng cao thì càng khó đáp ứng, và sẽ vượt qua được level cao hơn, thì level thấp sẽ được đáp ứng.
Vì sao áp dụng WCAG lại quan trọng?
-
Người khuyết tật dễ dàng sử dụng. Biết đâu bạn có thể khởi nghiệp với một ứng dụng cho người tật đấy!
-
Bình đẳng không gian mạng cho tất cả mọi người
-
Tạo ra sự khác biệt lớn cho người dùng của bạn và có thể giúp ngăn chặn các vấn đề hoàn toàn có thể tránh được.
-
Thu hút một lượng người đọc/tham gia khá lớn.
-
Giúp đáp ứng các nhu cầu và đảm bảo khách truy cập trang web có trải nghiệm tốt nhất có thể khi truy cập.
-
Ngoài ra còn tránh bị kiện nữa, đọc thử bài viết: Các trang web không thể truy cập có thể bị kiện ở Mỹ
Thông tin thêm
Khảo sát về người khuyết tật Canada báo cáo rằng hơn 80% người khuyết tật sử dụng ít nhất một thiết bị hỗ trợ. Do đó để các thiết bị hỗ trợ đọc được nội dung website của bạn, thì nên đảm bảo được các tiêu chí thành công của WCAG.
_ Cảm ơn bạn đã đọc hết phần này của mình, cùng đón xem 2 phần tiếp theo nhé._
Related Posts
Discover more content you might enjoy

Vibe Coding - Code lại blog từ đầu và rebrand thành khoa.blog
Chia sẻ chi tiết quá trình build lại blog từ đầu với vibe coding, từ việc chuyển đổi dữ liệu đến việc triển khai các tính năng mới, giúp người đọc hiểu rõ hơn về quá trình phát triển blog cá nhân.

Dự đoán về Vibe Coding: Cách AI sẽ biến đổi việc tạo ra phần mềm
Phân tích chi tiết cách 'vibe coding' - phương pháp lập trình dựa trên mô tả ý định thay vì viết code trực tiếp - sẽ dân chủ hóa việc phát triển phần mềm, giúp người đọc hiểu rõ hơn về xu hướng công nghệ và tác động của nó đến ngành công nghệ thông tin.

The MVP #1: Làm một trang dạy học trực tuyến cần gì?
Bài viết phân tích những nhược điểm của Udemy và các yêu cầu cần thiết để xây dựng một nền tảng học trực tuyến độc lập.

English Course Challenge in 2 weeks - Day 12: Kinh nghiệm quay khoá học
Bài viết chia sẻ kinh nghiệm quay khóa học tiếng Anh về Bubble.io, bao gồm việc lựa chọn phần mềm Screen.Studio để quay màn hình và tự động tạo phụ đề, những bài học từ việc đặt mục tiêu và xác định đối tượng học viên trước khi chọn nội dung, cũng như lợi ích của việc thử thách bản thân để vượt qua nỗi sợ và hoàn thành dự định. Tác giả cũng giới thiệu khóa học 'Build your first web app in Bubble for beginners' dành cho người mới bắt đầu.

Day 5 - Profitable MVP in 30 Days - Ý tưởng này đã có người làm rồi
Ngày thứ năm của thử thách Profitable MVP in 30 Days, đối mặt với việc phát hiện ý tưởng đã có người thực hiện và cách biến điều này thành lợi thế để cải thiện sản phẩm của mình.

Day 4 - Profitable MVP in 30 Days - Có nên làm trái luật?
Ngày thứ tư của thử thách Profitable MVP in 30 Days, đối mặt với vấn đề vi phạm chính sách của YouTube và tìm ra giải pháp thay thế bằng SoundCloud để phát triển ứng dụng nghe nhạc hợp pháp.