Trong thời đại số, việc thiết kế hệ thống dễ tiếp cận không chỉ dừng lại ở thẩm mỹ mà còn tác động lớn đến trải nghiệm người dùng, SEO và tỷ lệ chuyển đổi. Khả năng truy cập (accessibility) là yếu tố quan trọng để đảm bảo mọi người, kể cả người khuyết tật, đều có thể tiếp cận và sử dụng sản phẩm một cách dễ dàng. Tuy nhiên, việc xây dựng hệ thống này trong thời gian ngắn luôn là thử thách đối với nhiều doanh nghiệp. Trong bài viết này, MangoAds sẽ chia sẻ cách hoàn thiện hệ thống thiết kế dễ tiếp cận trong 60 ngày, từ việc chọn màu sắc, mã hóa đến áp dụng CSS logic, giúp sản phẩm vừa thẩm mỹ vừa dễ tiếp cận.

1. Giới thiệu về khả năng truy cập trong thiết kế

1.1. Tại sao khả năng truy cập lại quan trọng?

Khả năng truy cập không phải là một khái niệm mới trong thiết kế web, nhưng nó thường bị bỏ qua hoặc không được chú trọng đúng mức. Thực tế, khoảng 15% dân số thế giới, tương đương 1 tỷ người đang gặp khó khăn trong việc tiếp cận các nội dung số do hạn chế về khả năng truy cập của các trang web và ứng dụng. Điều này không chỉ ảnh hưởng trực tiếp đến người dùng mà còn tác động tiêu cực đến doanh thu của doanh nghiệp và hiệu quả của các chiến dịch Marketing.

Hình 1: Khả năng truy cập trong thiết kế (Nguồn: Internet)

Khả năng truy cập đảm bảo rằng tất cả mọi người đều có thể tiếp cận, hiểu và tương tác với sản phẩm một cách dễ dàng. Đối với doanh nghiệp, việc đảm bảo khả năng truy cập trong thiết kế còn giúp cải thiện SEO, mở rộng phạm vi khách hàng và tạo dựng lòng tin với người dùng. Một trang web không thân thiện với người khuyết tật có thể mất đi một phần lớn lượng người dùng tiềm năng, đồng thời giảm hiệu quả tối ưu hóa trên công cụ tìm kiếm như Google, vốn rất coi trọng trải nghiệm người dùng.

1.2 Lợi ích của hệ thống thiết kế dễ tiếp cận

Một hệ thống thiết kế dễ tiếp cận mang lại nhiều lợi ích to lớn, không chỉ về trải nghiệm người dùng mà còn về hiệu quả kinh doanh và nhận diện thương hiệu. Dưới đây là một số lợi ích quan trọng mà hệ thống thiết kế dễ tiếp cận có thể mang lại:

• Mở rộng tệp khách hàng tiềm năng: Bằng cách đảm bảo khả năng truy cập, doanh nghiệp có thể mở rộng phạm vi khách hàng, bao gồm cả những người khuyết tật hoặc những người gặp khó khăn về thị lực, thính giác. Điều này không chỉ giúp tăng lượng người dùng mà còn góp phần xây dựng mối quan hệ lâu dài và bền vững với khách hàng.
• Tối ưu hóa SEO và tăng hạng trên công cụ tìm kiếm: Các công cụ tìm kiếm như Google đánh giá cao những trang web có khả năng truy cập tốt, giúp cải thiện thứ hạng của trang trên kết quả tìm kiếm. Điều này có thể dẫn đến việc tăng lượng truy cập không phải trả phí, từ đó giảm chi phí Marketing và quảng cáo.
• Tăng cường tỷ lệ chuyển đổi: Khi người dùng có trải nghiệm tốt, họ có xu hướng tương tác và thực hiện các hành động mong muốn trên trang web (như mua hàng, điền biểu mẫu...). Một hệ thống thiết kế dễ truy cập sẽ giúp giảm thiểu tỷ lệ thoát trang, tăng thời gian tương tác và từ đó tăng tỷ lệ chuyển đổi.
• Củng cố hình ảnh thương hiệu: Doanh nghiệp cam kết với khả năng truy cập không chỉ tạo ra giá trị xã hội mà còn giúp củng cố hình ảnh uy tín và đáng tin cậy. Khả năng tiếp cận tốt thể hiện sự quan tâm và tôn trọng đối với tất cả các nhóm người dùng, đặc biệt là những người có nhu cầu đặc biệt.

Hình 2: Lợi ích của hệ thống thiết kế dễ tiếp cận (Nguồn: MangoAds)

>>> Xem thêm: 9 tiêu chí thiết kế cần nắm giúp tối ưu hóa website hiệu quả

2. Các bước xây dựng hệ thống thiết kế trong 60 ngày

Xây dựng hệ thống thiết kế dễ tiếp cận trong 60 ngày đòi hỏi sự chuẩn bị kỹ lưỡng và quy trình cụ thể. Bài viết này sẽ chia nhỏ các bước cần thiết để đảm bảo bạn có thể hoàn thành mục tiêu đúng tiến độ.

2.1 Lựa chọn màu sắc và chủ đề dễ tiếp cận

Màu sắc là yếu tố quan trọng trong thiết kế, đặc biệt đối với những hệ thống thiết kế dễ tiếp cận. Để đảm bảo mọi người, kể cả những người bị mù màu hoặc có thị lực yếu, có thể đọc và hiểu nội dung trên trang web, màu sắc cần tuân thủ các tiêu chuẩn về tỷ lệ tương phản. Tiêu chuẩn WCAG 2.1 (Web Content Accessibility Guidelines) yêu cầu tỷ lệ tương phản tối thiểu giữa văn bản và nền là 4.5:1 đối với văn bản thông thường và 3:1 đối với văn bản lớn hơn.

Ngoài tỷ lệ tương phản, việc chọn màu sắc cho các thành phần khác nhau trong hệ thống cũng cần phải nhất quán và dễ nhận biết. Ví dụ, màu sắc của các nút CTA (Call-to-Action) nên nổi bật so với nền để thu hút sự chú ý của người dùng. Trong trường hợp của ETS, màu lục lam được chọn làm màu hành động chính, giúp nhà phát triển dễ dàng nhận diện và sử dụng trong toàn bộ hệ thống.

Hình 3: Lựa chọn màu sắc cho phù hợp (Nguồn: Internet)

Việc phân chia và đặt tên ngữ nghĩa cho các màu sắc không chỉ giúp hệ thống dễ truy cập hơn mà còn giúp nhà phát triển quản lý mã nguồn tốt hơn. Thay vì chỉ sử dụng các màu sắc đơn thuần như "đỏ", "xanh", bạn nên đặt tên theo ngữ nghĩa như "màu chính", "màu nền", "màu cảnh báo" để dễ dàng quản lý và điều chỉnh khi cần.

2.2 Quy ước mã hiệu thiết kế

Design tokens (mã hiệu thiết kế) là các giá trị về màu sắc, khoảng cách, kiểu chữ và các yếu tố thiết kế khác được mã hóa thành dữ liệu để dễ dàng quản lý và sử dụng. Việc thiết lập quy ước mã thông báo thiết kế rõ ràng và nhất quán giúp tăng hiệu quả làm việc, giảm thiểu sai sót trong quá trình phát triển và đảm bảo tính đồng bộ trên toàn hệ thống.

Một quy ước mã thông báo tốt cần tuân thủ các nguyên tắc sau:

• Dễ hiểu và dễ áp dụng: Các mã thông báo cần được đặt tên một cách rõ ràng để các nhà phát triển dễ dàng sử dụng mà không cần phải tham chiếu quá nhiều tài liệu.
• Linh hoạt: Hệ thống mã thông báo cần có khả năng mở rộng và điều chỉnh khi cần. Ví dụ, khi thêm một chủ đề hoặc phiên bản mới cho hệ thống, bạn có thể nhanh chóng thêm hoặc chỉnh sửa các mã thông báo mà không ảnh hưởng đến toàn bộ hệ thống.

Ví dụ về một quy ước mã thông báo trong hệ thống ETS:

• Màu lục lam được mã hóa thành "màu chính" và được sử dụng cho các nút hành động chính.
• Màu nền được mã hóa thành "màu nền", giúp đảm bảo rằng tất cả các thành phần đều tuân theo một tiêu chuẩn màu sắc nhất định và dễ truy cập.

>>> Xem thêm: Bảng màu thiết kế 2024 nâng tầm giao diện người dùng

2.3 Phát triển hệ thống mã hóa với CSS logic

Khi đã có các mã thông báo thiết kế và chủ đề màu sắc, bước tiếp theo là tích hợp chúng vào quá trình phát triển thông qua CSS logic. CSS logic là phương pháp sử dụng các thuộc tính CSS linh hoạt để đảm bảo trang web có thể tự động điều chỉnh hiển thị dựa trên ngôn ngữ và hướng đọc của người dùng.

Ví dụ, thay vì sử dụng các thuộc tính cố định như "căn trái" hoặc "căn phải", CSS logic cho phép bạn sử dụng các thuộc tính như "bắt đầu" hoặc "kết thúc", giúp trang web có thể hiển thị đúng hướng dù người dùng đọc từ trái sang phải (LTR) hoặc từ phải sang trái (RTL). Điều này không chỉ giúp trang web trở nên linh hoạt hơn mà còn cải thiện khả năng truy cập đối với người dùng ở nhiều ngôn ngữ khác nhau.

Một ví dụ cụ thể trong hệ thống của ETS:

Như bạn có thể thấy, không có giá trị cụ thể nào được mã hóa cứng. Mọi thứ đều được xác định bởi mã thông báo thiết kế hoặc các thuộc tính CSS tùy chỉnh, giúp hệ thống dễ dàng mở rộng và điều chỉnh khi cần.

2.4 Tích hợp hệ thống thiết kế với CMS

Khi hệ thống thiết kế đã hoàn chỉnh, bước cuối cùng là tích hợp nó với hệ thống quản lý nội dung (CMS) để đảm bảo rằng các thành phần thiết kế có thể được duy trì và cập nhật dễ dàng trong suốt quá trình quản lý nội dung.

Việc tích hợp với CMS không chỉ giúp các nhà phát triển duy trì tính nhất quán trong thiết kế mà còn giúp biên tập viên nội dung dễ dàng tạo ra các trang web mới mà không làm ảnh hưởng đến khả năng truy cập hoặc tính thẩm mỹ của hệ thống. CMS hiện đại như Adobe Experience Manager cung cấp các công cụ mạnh mẽ để tích hợp hệ thống thiết kế, giúp đảm bảo rằng mọi thành phần đều tuân theo các quy tắc và tiêu chuẩn về khả năng truy cập đã được thiết lập.

Ví dụ, trong hệ thống ETS, mọi thành phần giao diện đều được tích hợp với CMS, cho phép các biên tập viên dễ dàng thêm mới hoặc chỉnh sửa nội dung mà không cần can thiệp vào mã nguồn, từ đó giảm thiểu rủi ro phá vỡ thiết kế hoặc làm giảm khả năng truy cập.

3. Tối ưu hóa khả năng truy cập cho thiết bị di động

Khả năng truy cập không chỉ quan trọng trên các thiết bị máy tính bàn mà còn đặc biệt cần thiết trên thiết bị di động, nơi mà không gian hiển thị bị hạn chế và người dùng thường tương tác theo cách khác. Do đó, việc tối ưu hóa hệ thống thiết kế cho thiết bị di động là bước không thể thiếu trong quá trình xây dựng một hệ thống dễ tiếp cận.

3.1 Điều chỉnh kích thước phông chữ và khoảng cách

Trên thiết bị di động, kích thước màn hình thường nhỏ hơn nhiều so với máy tính, do đó, phông chữ và khoảng cách giữa các thành phần cần được điều chỉnh linh hoạt để đảm bảo người dùng có thể đọc và tương tác một cách dễ dàng. Sử dụng CSS linh hoạt giúp hệ thống tự động điều chỉnh kích thước văn bản và khoảng cách dựa trên kích thước màn hình của thiết bị.

Ví dụ, thay vì sử dụng kích thước phông chữ cố định, bạn có thể sử dụng đơn vị rem hoặc em để điều chỉnh kích thước dựa trên kích thước phông chữ gốc của thiết bị.

3.2 Tối ưu hóa hình ảnh và video

Hình ảnh và video là những thành phần quan trọng trong thiết kế, nhưng nếu không được tối ưu hóa, chúng có thể gây trở ngại cho khả năng truy cập. Trên thiết bị di động, hình ảnh và video cần được tối ưu hóa để giảm thiểu thời gian tải trang và đảm bảo rằng người dùng có thể xem nội dung một cách dễ dàng.

Một số cách tối ưu hóa hình ảnh và video bao gồm:

• Sử dụng định dạng hình ảnh nén như WebP hoặc JPEG để giảm dung lượng mà không làm giảm chất lượng.
• Sử dụng thẻ alt cho hình ảnh để đảm bảo rằng người dùng sử dụng trình đọc màn hình có thể hiểu được nội dung của hình ảnh.
• Sử dụng thuộc tính aria-label cho các nút điều khiển video để người dùng có thể điều khiển phát video mà không gặp khó khăn.

>>> Xem thêm: Top 7 thiết kế thân thiện với thiết bị di động

4. Đảm bảo khả năng truy cập cho các thành phần tương tác

Khả năng truy cập của các thành phần tương tác như nút, biểu mẫu và CTA (Call-to-Action) đóng vai trò quyết định trong việc đảm bảo mọi người có thể dễ dàng sử dụng trang web.

4.1 Đặt tên cho các thành phần tương tác

Khi sử dụng các thành phần tương tác chỉ có biểu tượng hoặc không có văn bản đi kèm, cần đảm bảo rằng chúng có thuộc tính aria-label hoặc aria-hidden để người dùng sử dụng trình đọc màn hình có thể hiểu được chức năng của chúng. Ví dụ, một nút "đóng" chỉ có biểu tượng cần được gắn nhãn để khi người dùng điều hướng qua trình đọc màn hình, họ biết rằng đó là nút đóng hộp thoại.

4.2 Kiểm tra khả năng truy cập của biểu mẫu

Biểu mẫu là một phần quan trọng của nhiều trang web, và để đảm bảo chúng dễ truy cập, cần kiểm tra xem tất cả các trường biểu mẫu đã được gắn nhãn đúng cách và có hướng dẫn rõ ràng hay chưa. Việc không gắn nhãn các trường biểu mẫu có thể khiến người dùng gặp khó khăn trong quá trình điền thông tin, đặc biệt đối với những người sử dụng trình đọc màn hình.

Kết luận

Xây dựng một hệ thống thiết kế dễ tiếp cận là nhiệm vụ không thể thiếu nếu doanh nghiệp muốn đảm bảo rằng sản phẩm của mình có thể phục vụ được mọi đối tượng người dùng, đặc biệt là những người khuyết tật hoặc có nhu cầu đặc biệt. Từ việc lựa chọn màu sắc, thiết lập quy ước mã thông báo đến tối ưu hóa CSS và tích hợp với CMS, tất cả đều cần được cân nhắc kỹ lưỡng để tạo ra một trải nghiệm kỹ thuật số toàn diện. Khả năng truy cập không chỉ giúp tăng cường trải nghiệm người dùng mà còn góp phần cải thiện SEO và tăng tỷ lệ chuyển đổi. Hãy để MangoAds hỗ trợ bạn trong việc phát triển hệ thống thiết kế dễ tiếp cận, nâng cao giá trị thương hiệu và mang lại sự tiện lợi cho mọi khách hàng của bạn.

>>> Xem thêm: 17 kỹ năng UX thiết yếu mà Designer cần có