Thiết kế ứng dụng web dễ tiếp cận là thành phần chính để cung cấp trải nghiệm người dùng tích cực và sự hài lòng tổng thể của người dùng ứng dụng. Ứng dụng web có thể truy cập đảm bảo quyền tiếp cận bình đẳng cho những người có khả năng đa dạng và cho những người ở nhiều vị trí địa lý. Những người có hạn chế liên quan đến khả năng thính giác, nhận thức, lời nói hoặc thị giác và những giới hạn tạm thời liên quan đến tình trạng khuyết tật ngắn hạn, kết nối Internet chậm hoặc thậm chí là ánh sáng chói chang đều có thể truy cập vào ứng dụng web của bạn. Khi xây dựng giao diện người dùng của ứng dụng web, hãy sử dụng các giải pháp hỗ trợ tiếp cận ngay từ đầu để ngăn các vấn đề về hỗ trợ tiếp cận và không cần phải làm lại bất kỳ thao tác nào sau này trong quy trình xây dựng. Bạn cần đảm bảo trình thu thập dữ liệu web và trình đọc màn hình có thể truyền nội dung ứng dụng của mình, đồng thời vẫn mang lại trải nghiệm tích cực cho người dùng.
Hỗ trợ tiếp cận là một nghĩa vụ pháp lý ở nhiều quốc gia và ngành. Ở nhiều quốc gia và ngành, bạn phải hiểu rõ những nguyên tắc này và tích hợp các giải pháp hỗ trợ tiếp cận vào thiết kế giao diện người dùng. Nhiều trường hợp kinh doanh cũng nhấn mạnh tầm quan trọng của khả năng hỗ trợ tiếp cận đối với nội dung trên web.
Các tài nguyên như MDN và WCAG cung cấp các nguyên tắc và đề xuất thiết yếu để tăng khả năng hỗ trợ tiếp cận của ứng dụng web. Bạn cũng có thể tham gia khoá học Tìm hiểu về hỗ trợ tiếp cận trên web.dev.
Sự phụ thuộc lẫn nhau giữa các thành phần là một khía cạnh thiết yếu để làm cho một ứng dụng web có thể tiếp cận được với nhiều người dùng đa dạng.
Màu sắc và độ tương phản
Việc sử dụng màu sắc là một yếu tố chính để đánh giá khả năng hỗ trợ tiếp cận của ứng dụng web. Người dùng giao diện người dùng phải thấy được nội dung trên trang, đồng thời màu sắc và độ tương phản có tác động đáng kể đến nhận thức của người dùng về nội dung. Các điều kiện xem và khuyết tật liên quan đến thị giác có thể là tạm thời, tình huống hoặc vĩnh viễn, nhưng bạn phải xem xét khi xây dựng giao diện người dùng của ứng dụng web. Việc tạo độ tương phản hoặc chênh lệch chính xác về độ sáng giữa các màu được sử dụng trên giao diện mà người dùng nhìn thấy có thể giúp ứng dụng web của bạn dễ tiếp cận hơn đối với nhiều người dùng. Tỷ lệ tương phản đem lại sự khác biệt về độ sáng giữa nền và văn bản.
Để đo độ tương phản, bạn có thể sử dụng công thức tỷ lệ tương phản để đảm bảo có độ tương phản tối thiểu cho văn bản hoặc biểu tượng trên nền. Có nhiều dạng khuyết tật nhận biết màu sắc cần xem xét, nhưng các mô hình màu mới có thể đảm bảo nội dung được nhận biết chính xác ngay cả khi xem trong thang màu xám.
Thường thì bạn nên sử dụng giao diện tối để hỗ trợ màu sắc và độ tương phản nhằm hỗ trợ tiếp cận. Giao diện tối thường được ưu tiên dùng để nhập hình ảnh do ánh sáng trắng và tình trạng khó đọc. Vì các ứng dụng dựa trên nội dung bao gồm một lượng lớn văn bản và hình ảnh, nên bạn cần phải sử dụng màu sắc và tỷ lệ tương phản một cách khôn ngoan để đáp ứng nhu cầu đa dạng của người dùng.
Tìm hiểu thêm về màu sắc và độ tương phản trên web.dev.
Kiểu chữ
Kiểu chữ đề cập đến việc lựa chọn và sắp xếp văn bản sao cho người dùng đa dạng có thể đọc được và đọc được văn bản đó. Một trong những chế độ cài đặt hỗ trợ tiếp cận bị thay đổi nhiều nhất là cỡ chữ mặc định trên các thiết bị. Một số người dùng có thể muốn vừa với nhiều văn bản hơn trên màn hình với cỡ chữ nhỏ hơn hoặc làm cho văn bản càng lớn càng tốt. Do đó, việc làm cho kích thước kiểu chữ linh hoạt và dễ đọc là rất quan trọng. Người đọc cũng phải dễ dàng phân biệt được từng ký tự văn bản và toàn bộ văn bản phải dễ đọc. Trong quá trình thiết kế giao diện người dùng của ứng dụng, hãy chọn kiểu chữ bao gồm cả mức độ dễ đọc và dễ đọc.
Phông chữ
Kiểu chữ hoặc bộ phông chữ bạn chọn cho ứng dụng web phải dễ đọc đối với nhiều độc giả. Kiểu chữ là thiết kế trực quan của các chữ cái được sử dụng trong văn bản ứng dụng. Nhiều nghiên cứu mô tả tầm quan trọng của kiểu chữ khi đánh giá khả năng hỗ trợ tiếp cận của nội dung trên web. Việc tìm được điểm cân bằng giữa thương hiệu, mục tiêu thiết kế giao diện người dùng và khả năng đọc dễ đọc giúp ứng dụng của bạn thú vị hơn cho nhiều người dùng hơn. Khi xây dựng giao diện người dùng, hãy cân nhắc xem các tuỳ chọn kiểu chữ cũng như các tuỳ chọn phông chữ trong đó đóng góp vào khả năng hỗ trợ tiếp cận và thiết kế tổng thể của ứng dụng.
Cỡ chữ
Hãy cân nhắc việc cho phép tính năng thu phóng của trình duyệt để giúp người dùng có thị lực kém hoặc khuyết tật nhận thức màu sắc. Phông chữ của văn bản trên ứng dụng web của bạn phải hiển thị cho nhiều độc giả. Bạn có thể đạt được các biến thể kích thước phông chữ bằng cách chuyển từ px sang rem. Đơn vị Rem cho phép cỡ chữ tương ứng với thành phần gốc của ứng dụng. Đây là một tuỳ chọn linh hoạt giúp tăng khả năng hỗ trợ tiếp cận tổng thể của ứng dụng web.
Cấu trúc và bố cục
Các thuộc tính cấu trúc và bố cục ảnh hưởng đến khả năng tiếp cận của giao diện. Các tính năng về bố cục cần xem xét bao gồm giãn cách và căn chỉnh khối văn bản, cũng như khoảng cách giữa các dòng văn bản và thậm chí cả các chữ cái riêng lẻ. Hãy sử dụng lưới và trực quan hoá các thành phần bạn muốn đưa vào thiết kế của mình. Bố cục và cấu trúc của nội dung phải hấp dẫn và thú vị để người dùng thưởng thức. Bố cục phức tạp hoặc nền rối mắt với nhiều khối văn bản có thể gây khó khăn cho một số người dùng, chẳng hạn như những người có ADHD. Hãy nhớ ưu tiên sự hoà nhập trong quá trình thiết kế giao diện người dùng.
ARIA và HTML
Ứng dụng Internet đa dạng thức có thể truy cập (ARIA) bao gồm một bộ nguyên tắc và thuộc tính giúp người dùng dễ tiếp cận các ứng dụng web hơn. ARIA bổ sung HTML và cho phép các tiện ích JavaScript truy cập được, bản cập nhật nội dung trực tiếp, thông báo lỗi và nhiều tính năng khác. Việc sử dụng đúng ARIA là điều cần thiết để thực sự giúp ứng dụng web của bạn dễ tiếp cận hơn. Việc sử dụng ARIA không chính xác có thể gây ra lỗi và thực sự khiến người dùng khó tiếp cận ứng dụng của bạn hơn.
Sử dụng nhãn ARIA khi có thể để giới thiệu các định dạng thay thế tương thích với chữ nổi và tính năng chuyển văn bản sang lời nói (TTS). Các vai trò và nhãn của ARIA cho phép bạn thay đổi cây hỗ trợ tiếp cận khi cây đó khác với cây dom. Các nhãn này cũng rất quan trọng khi sử dụng các thẻ không chuẩn, chẳng hạn như div được dùng làm nút có thể nhấp. Cần có ARIA khi phần tử HTML không hỗ trợ khả năng hỗ trợ tiếp cận. Khi thiết kế ứng dụng dựa trên nội dung, hãy đảm bảo rằng trình đọc màn hình và các thiết bị hỗ trợ khác được hỗ trợ tốt để giúp ứng dụng tiếp cận nhiều người dùng nhất có thể.
Tìm hiểu thêm về ARIA và HTML trên web.dev.
Quốc tế hoá
Quốc tế hoá là việc thiết kế một ứng dụng web sao cho người dùng có thể truy cập được từ nhiều nền tảng ngôn ngữ và văn hoá. Ứng dụng web của bạn phải thích ứng với nhiều ngôn ngữ, khu vực địa lý và tuỳ chọn văn hoá mà không cần thay đổi đáng kể mã. Các thành phần chính của quá trình quốc tế hoá bao gồm hỗ trợ đa ngôn ngữ, bản địa hoá, phân tách nội dung, định dạng ngày và giờ, hướng văn bản và thương lượng ngôn ngữ, cùng nhiều yếu tố khác.
Bằng cách quốc tế hoá ứng dụng web, bạn có thể tạo ra một trải nghiệm hoà nhập và thân thiện với người dùng cho đối tượng người dùng trên toàn cầu. Quốc tế hoá là điều cần thiết đối với mọi ứng dụng web có cơ sở người dùng đa dạng hoặc mục tiêu mở rộng ra quốc tế.
Tính chất logic
Khi xây dựng kiểu trong CSS, hãy nhớ sử dụng start / end thay vì các thuộc tính như top / down/ left/ right. Điều này đảm bảo rằng các trình đơn và bố cục trang web sẽ thay đổi theo các ngôn ngữ RTL.
Nội dung thay thế
Đưa thuộc tính lang vào thẻ HTML kèm theo đường liên kết đến các tài liệu thay thế trong tiêu đề để cung cấp mã đánh dấu tuỳ chỉnh cho nội dung của bạn. Điều này cho phép trình duyệt chọn đúng trang nếu ngôn ngữ xác định khác với ngôn ngữ mặc định của trình duyệt. Phương pháp này có thể giúp trình duyệt web và công cụ tìm kiếm hiểu ngôn ngữ của trang. Điều này rất quan trọng để hiển thị nội dung chính xác và hoạt động SEO hiệu quả.
Quốc tế
Đối tượng Intl trong JavaScript là một công cụ quan trọng để tạo các ứng dụng web đa ngôn ngữ và nhận biết văn hoá. Cấu trúc này mang đến khả năng quốc tế hoá và bản địa hoá trong các ứng dụng web, đồng thời đảm bảo rằng giao diện và nội dung của bạn dễ hiểu và phù hợp với văn hoá của người dùng trên toàn cầu. Các tính năng do đối tượng Intl cung cấp bao gồm định dạng ngày và giờ, định dạng số và đối chiếu chuỗi.
Tìm hiểu thêm về quá trình quốc tế hoá trên web.dev.
Biểu mẫu
Biểu mẫu HTML là một phần quan trọng của các ứng dụng web dựa trên nội dung. Chúng cho phép người dùng tương tác và cung cấp một phương thức có cấu trúc để thu thập thông tin người dùng. Nếu nhiều đối tượng không truy cập được vào các biểu mẫu HTML, thì chúng có thể khiến người dùng thất vọng và không hài lòng.
Để làm cho biểu mẫu HTML có thể truy cập được, hãy sử dụng phần tử HTML ngữ nghĩa cho tất cả các trường biểu mẫu. Điều này giúp các công nghệ hỗ trợ hiểu mục đích của từng trường và giúp người dùng hoàn thành các trường đó dễ dàng hơn. Ngoài ra, hãy nhớ gắn nhãn rõ ràng cho tất cả các trường trong biểu mẫu. Điều này giúp người dùng cung cấp thông tin chính xác và hữu ích. Bạn cũng cần kiểm thử khả năng hỗ trợ tiếp cận của các biểu mẫu HTML; bạn có thể thực hiện việc này bằng cách sử dụng các công nghệ hỗ trợ để mô phỏng trải nghiệm của người dùng đòi hỏi những công nghệ đó để sử dụng nội dung của ứng dụng.