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
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.
English Course Challenge in 2 weeks - Day 7: Fine-tuning ChatGPT là gì?
Bài viết chia sẻ tiến trình ngày thứ 7 trong thử thách tạo khóa học tiếng Anh trong 2 tuần. Tác giả giới thiệu về Fine-tuning ChatGPT, một tính năng cho phép tạo phiên bản ChatGPT tùy chỉnh dựa trên dữ liệu cung cấp, đặc biệt hữu ích cho chatbot hỗ trợ khách hàng. Bài viết cũng thảo luận về việc điều chỉnh hướng phát triển ứng dụng demo và khóa học, cùng với những khó khăn khi sử dụng API của OpenAI tại Việt Nam.
English Course Challenge in 2 weeks - Day 2: Tiềm năng của Prompt Engineering
Bài viết chia sẻ về việc phát triển ứng dụng SaaS AI demo cho khóa học Bubble, tập trung vào Prompt Engineering - kỹ thuật viết prompt hiệu quả cho AI. Tác giả giới thiệu cấu trúc prompt chuẩn gồm 6 phần: Persona, Context, Task, Format, Examplar và Tone, đồng thời trình bày ý tưởng và mockup cho ứng dụng hỗ trợ người dùng viết prompt tốt hơn, giải quyết vấn đề nhiều người gặp phải khi sử dụng AI.
Đối thoại với AI: Generative AI (AI tạo sinh) và những điều cần biết
Bài viết dạng hỏi đáp toàn diện về AI tạo sinh, bao gồm kỹ thuật viết prompt hiệu quả, cách kiếm tiền từ AI, các nền tảng thay thế Claude AI, chi phí huấn luyện mô hình lớn, và các khái niệm quan trọng như BERT, mô hình tiền huấn luyện cùng những vấn đề đạo đức liên quan.
English Course Challenge in 2 weeks - Day 0: Cách dùng Info Product để marketing SaaS
Bài viết giới thiệu thử thách tạo khóa học tiếng Anh trong 2 tuần để marketing cho SaaS app Bubble Component Collection. Tác giả chia sẻ về chiến lược sử dụng Info Product (sách điện tử, khóa học, template) để quảng bá phần mềm, những điểm khác biệt giữa info product với blogging thông thường, và kế hoạch tạo khóa học dưới 3 giờ hướng dẫn sử dụng Chrome extension để xây dựng frontend cho ứng dụng.
Tổ chức ý tưởng viết blog với Workflowy
Hướng dẫn cách sử dụng Workflowy để ghi lại và tổ chức ý tưởng viết blog, giúp người viết không bị quên ý tưởng và luôn có chủ đề để viết.