M

MLOG

Tiếng Việt

Tìm hiểu cách làm cho trang web của bạn có thể truy cập được cho mọi người bằng cách triển khai các nguyên tắc WCAG trong CSS của bạn. Tạo ra các thiết kế hòa nhập cho khán giả toàn cầu.

Khả năng truy cập trong CSS: Hướng dẫn thực hành tuân thủ WCAG

Trong thế giới ngày càng số hóa hiện nay, việc đảm bảo khả năng truy cập web không chỉ là một phương pháp hay nhất mà còn là một mệnh lệnh đạo đức. Các trang web có thể truy cập cung cấp quyền truy cập và cơ hội bình đẳng cho tất cả người dùng, bất kể khả năng của họ. Hướng dẫn này tập trung vào cách tận dụng CSS để tạo ra các trải nghiệm web có thể truy cập và hòa nhập, tuân thủ các Nguyên tắc Truy cập Nội dung Web (WCAG).

WCAG là gì và Tại sao nó lại quan trọng?

Nguyên tắc Truy cập Nội dung Web (WCAG) là một bộ khuyến nghị được quốc tế công nhận để làm cho nội dung web dễ tiếp cận hơn đối với người khuyết tật. Được phát triển bởi Hiệp hội World Wide Web (W3C), WCAG cung cấp một tiêu chuẩn chung về khả năng truy cập web đáp ứng nhu cầu của các cá nhân, tổ chức và chính phủ trên toàn thế giới. WCAG quan trọng vì:

Các nguyên tắc của WCAG: POUR

WCAG dựa trên bốn nguyên tắc cốt lõi, thường được nhớ bằng từ viết tắt POUR:

Các kỹ thuật CSS cho khả năng truy cập

CSS đóng một vai trò quan trọng trong việc đạt được sự tuân thủ WCAG. Dưới đây là một số kỹ thuật CSS chính cần xem xét:

1. HTML và CSS ngữ nghĩa

Sử dụng đúng các phần tử HTML ngữ nghĩa cung cấp ý nghĩa và cấu trúc cho nội dung của bạn, giúp trình đọc màn hình và các công nghệ hỗ trợ khác dễ tiếp cận hơn. CSS sau đó sẽ cải thiện phần trình bày của các phần tử ngữ nghĩa này.

Ví dụ:

Thay vì sử dụng các phần tử <div> chung cho mọi thứ, hãy sử dụng các phần tử ngữ nghĩa như <article>, <nav>, <aside>, <header>, <footer>, <main>, <section>, và các thẻ tiêu đề (<h1> đến <h6>).

HTML:

<article> <h2>Tiêu đề bài viết</h2> <p>Nội dung bài viết ở đây.</p> </article>

CSS:

article { margin-bottom: 20px; } h2 { font-size: 1.5em; font-weight: bold; margin-bottom: 10px; }

Bằng cách sử dụng <article> và <h2>, bạn đang cung cấp ý nghĩa ngữ nghĩa cho nội dung, giúp các công nghệ hỗ trợ hiểu được cấu trúc và ngữ cảnh.

2. Màu sắc và Độ tương phản

Đảm bảo độ tương phản màu đủ giữa văn bản và màu nền để nội dung có thể đọc được đối với người dùng thị lực kém hoặc mù màu. WCAG 2.1 Cấp độ AA yêu cầu tỷ lệ tương phản ít nhất là 4.5:1 cho văn bản thông thường và 3:1 cho văn bản lớn (18pt hoặc 14pt chữ đậm).

Các công cụ kiểm tra độ tương phản màu:

Ví dụ:

/* Độ tương phản tốt */ body { background-color: #000000; /* Đen */ color: #FFFFFF; /* Trắng */ } /* Độ tương phản kém */ body { background-color: #FFFFFF; /* Trắng */ color: #F0F0F0; /* Xám nhạt */ }

Ví dụ đầu tiên cung cấp độ tương phản tốt, trong khi ví dụ thứ hai có độ tương phản kém và sẽ khó đọc đối với nhiều người dùng.

Ngoài màu sắc: Đừng chỉ dựa vào màu sắc để truyền tải thông tin. Sử dụng nhãn văn bản, biểu tượng hoặc các tín hiệu trực quan khác ngoài màu sắc để đảm bảo thông tin có thể truy cập được cho mọi người. Ví dụ, thay vì tô đỏ các trường biểu mẫu bắt buộc, hãy sử dụng kết hợp viền đỏ và nhãn văn bản như "(bắt buộc)".

3. Chỉ báo tiêu điểm (Focus Indicators)

Khi người dùng điều hướng trang web của bạn bằng bàn phím (ví dụ: sử dụng phím Tab), điều quan trọng là phải cung cấp các chỉ báo tiêu điểm trực quan rõ ràng để họ biết phần tử nào hiện đang được chọn. Chỉ báo tiêu điểm mặc định của trình duyệt có thể không đủ hoặc thậm chí vô hình trong một số trường hợp. Sử dụng CSS để tùy chỉnh chỉ báo tiêu điểm để làm cho nó nổi bật hơn.

Ví dụ:a:focus, button:focus, input:focus, textarea:focus, select:focus { outline: 2px solid #007bff; /* Viền màu xanh dương */ outline-offset: 2px; /* Tạo khoảng cách giữa phần tử và viền */ }

Đoạn mã CSS này thêm một đường viền màu xanh dương vào các phần tử khi chúng nhận được tiêu điểm. Thuộc tính outline-offset thêm một khoảng trống nhỏ giữa phần tử và đường viền, cải thiện khả năng hiển thị. Tránh loại bỏ hoàn toàn chỉ báo tiêu điểm mà không cung cấp một sự thay thế phù hợp, vì điều này có thể làm cho trang web của bạn không thể sử dụng được đối với người dùng bàn phím.

4. Điều hướng bằng bàn phím

Đảm bảo tất cả các yếu tố tương tác (liên kết, nút, trường biểu mẫu, v.v.) đều có thể điều hướng được bằng bàn phím. Điều này rất cần thiết cho những người dùng không thể sử dụng chuột. Thứ tự của các phần tử trong mã nguồn HTML phải khớp với thứ tự trực quan trên trang để đảm bảo luồng điều hướng hợp lý. Sử dụng CSS để sắp xếp lại các phần tử một cách trực quan trong khi vẫn duy trì thứ tự điều hướng bàn phím hợp lý.

Ví dụ:

Hãy xem xét một kịch bản mà bạn muốn hiển thị menu điều hướng ở phía bên phải của màn hình bằng CSS. Tuy nhiên, vì lý do khả năng truy cập, bạn muốn menu điều hướng xuất hiện đầu tiên trong mã nguồn HTML để người dùng trình đọc màn hình gặp nó trước nội dung chính.

HTML:

<nav> <ul> <li><a href="#">Trang chủ</a></li> <li><a href="#">Giới thiệu</a></li> <li><a href="#">Dịch vụ</a></li> <li><a href="#">Liên hệ</a></li> </ul> </nav> <main> <h1>Nội dung chính</h1> <p>Đây là nội dung chính của trang.</p> </main>

CSS:

body { display: flex; } nav { order: 1; /* Di chuyển thanh điều hướng sang phải */ width: 200px; padding: 20px; } main { order: 0; /* Giữ nội dung chính ở bên trái */ flex: 1; padding: 20px; }

Bằng cách sử dụng thuộc tính order trong CSS, bạn có thể sắp xếp lại menu điều hướng một cách trực quan sang phía bên phải của màn hình trong khi vẫn duy trì vị trí ban đầu của nó trong mã nguồn HTML. Điều này đảm bảo rằng người dùng bàn phím sẽ gặp menu điều hướng trước, cải thiện khả năng truy cập.

5. Ẩn nội dung một cách có trách nhiệm

Đôi khi bạn cần ẩn nội dung khỏi hiển thị trực quan nhưng vẫn giữ cho nó có thể truy cập được đối với trình đọc màn hình. Ví dụ, bạn có thể muốn cung cấp thêm ngữ cảnh cho một liên kết hoặc nút chỉ được biểu thị trực quan bằng một biểu tượng. Tránh sử dụng display: none hoặc visibility: hidden, vì các thuộc tính này sẽ ẩn nội dung khỏi cả người dùng trực quan và trình đọc màn hình. Thay vào đó, hãy sử dụng một kỹ thuật ẩn nội dung một cách trực quan trong khi vẫn giữ cho nó có thể truy cập được đối với các công nghệ hỗ trợ.

Ví dụ:

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

Lớp CSS này ẩn phần tử một cách trực quan trong khi vẫn giữ cho nó có thể truy cập được đối với trình đọc màn hình. Áp dụng lớp này cho văn bản mà bạn muốn được đọc bởi trình đọc màn hình nhưng không hiển thị trực quan.

Ví dụ HTML:

<a href="#">Chỉnh sửa <span class="sr-only">mục</span></a>

Trong ví dụ này, văn bản "mục" được ẩn trực quan nhưng sẽ được đọc bởi trình đọc màn hình, cung cấp ngữ cảnh cho liên kết "Chỉnh sửa".

Thuộc tính ARIA (Accessible Rich Internet Applications): Sử dụng các thuộc tính ARIA một cách thận trọng để nâng cao khả năng truy cập của nội dung động và các thành phần giao diện người dùng phức tạp. Các thuộc tính ARIA cung cấp thêm thông tin ngữ nghĩa cho các công nghệ hỗ trợ. Tuy nhiên, tránh sử dụng các thuộc tính ARIA để khắc phục các vấn đề về khả năng truy cập có thể giải quyết được bằng HTML ngữ nghĩa. Ví dụ, sử dụng các vai trò và thuộc tính ARIA để xác định các widget tùy chỉnh và cung cấp các cập nhật trạng thái cho trình đọc màn hình khi nội dung thay đổi động.

6. Thiết kế đáp ứng và Khả năng truy cập

Đảm bảo trang web của bạn có tính đáp ứng và thích ứng với các kích thước màn hình và thiết bị khác nhau. Điều này rất quan trọng đối với những người dùng khuyết tật có thể đang sử dụng các công nghệ hỗ trợ trên thiết bị di động hoặc máy tính bảng. Sử dụng các truy vấn phương tiện CSS (media queries) để điều chỉnh bố cục và cách trình bày nội dung của bạn dựa trên kích thước và hướng của màn hình.

Ví dụ:

@media (max-width: 768px) { nav ul { flex-direction: column; /* Xếp chồng các mục điều hướng theo chiều dọc trên màn hình nhỏ hơn */ } }

Đoạn mã CSS này sử dụng một truy vấn phương tiện để thay đổi hướng của các mục điều hướng thành dọc trên màn hình nhỏ hơn, giúp việc điều hướng trên thiết bị di động dễ dàng hơn.

7. Hoạt ảnh và Chuyển động

Các hoạt ảnh quá mức hoặc được triển khai kém có thể gây co giật hoặc say tàu xe cho một số người dùng. Sử dụng CSS để giảm hoặc vô hiệu hóa hoạt ảnh cho những người dùng thích chuyển động giảm. Truy vấn phương tiện prefers-reduced-motion cho phép bạn phát hiện xem người dùng đã yêu cầu hệ thống giảm thiểu lượng hoạt ảnh hoặc chuyển động mà nó sử dụng hay chưa.

Ví dụ:

@media (prefers-reduced-motion: reduce) { .animated-element { animation: none !important; transition: none !important; } }

Đoạn mã CSS này vô hiệu hóa hoạt ảnh và chuyển tiếp cho những người dùng đã bật cài đặt "chuyển động giảm" trong hệ điều hành của họ. Hãy cân nhắc cung cấp một điều khiển cho phép người dùng tự tắt hoạt ảnh trên trang web của bạn.

8. Kiểm thử với Công nghệ hỗ trợ

Cách hiệu quả nhất để đảm bảo trang web của bạn có thể truy cập được là kiểm thử nó với các công nghệ hỗ trợ, chẳng hạn như trình đọc màn hình, kính lúp màn hình và phần mềm nhận dạng giọng nói. Sử dụng nhiều loại công nghệ hỗ trợ để có được sự hiểu biết toàn diện về khả năng truy cập của trang web của bạn.

Các trình đọc màn hình phổ biến:

Mẹo kiểm thử bổ sung:

Các kỹ thuật CSS nâng cao cho khả năng truy cập

1. Thuộc tính tùy chỉnh (Biến CSS) để tạo chủ đề

Sử dụng các thuộc tính tùy chỉnh của CSS (biến) để tạo các chủ đề có thể truy cập với các tùy chọn độ tương phản cao. Điều này cho phép người dùng tùy chỉnh giao diện trang web của bạn để đáp ứng nhu cầu cá nhân của họ.

Ví dụ:

:root { --text-color: #333; --background-color: #fff; --link-color: #007bff; } body { color: var(--text-color); background-color: var(--background-color); } a { color: var(--link-color); } /* Chủ đề tương phản cao */ .high-contrast { --text-color: #fff; --background-color: #000; --link-color: #ff0; }

Ví dụ này định nghĩa các thuộc tính tùy chỉnh CSS cho màu văn bản, màu nền và màu liên kết. Lớp .high-contrast ghi đè các biến này để tạo ra một chủ đề tương phản cao. Sau đó, bạn có thể sử dụng JavaScript để bật/tắt lớp .high-contrast trên phần tử <body> để chuyển đổi giữa các chủ đề.

2. CSS Grid và Flexbox cho bố cục có thể truy cập

CSS Grid và Flexbox là những công cụ bố cục mạnh mẽ có thể được sử dụng để tạo ra các bố cục có thể truy cập và đáp ứng. Tuy nhiên, điều quan trọng là phải sử dụng chúng cẩn thận để đảm bảo rằng thứ tự trực quan của các phần tử khớp với thứ tự DOM.

Ví dụ:

Khi sử dụng Flexbox hoặc Grid, hãy đảm bảo thứ tự tab vẫn hợp lý. Thuộc tính order có thể làm gián đoạn thứ tự tab nếu không được sử dụng cẩn thận.

3. `clip-path` và Khả năng truy cập

Thuộc tính `clip-path` có thể được sử dụng để tạo ra các hình dạng và hiệu ứng trực quan thú vị. Tuy nhiên, hãy thận trọng khi sử dụng `clip-path` vì nó đôi khi có thể che khuất nội dung hoặc làm cho nó khó tương tác. Đảm bảo rằng nội dung bị cắt vẫn có thể truy cập được và việc cắt không cản trở việc điều hướng bằng bàn phím hoặc truy cập của trình đọc màn hình.

4. Thuộc tính `content` và Khả năng truy cập

Thuộc tính `content` trong CSS có thể được sử dụng để chèn nội dung được tạo ra trước hoặc sau một phần tử. Tuy nhiên, nội dung được tạo ra không phải lúc nào cũng có thể truy cập được đối với trình đọc màn hình. Sử dụng thuộc tính `content` một cách thận trọng và cân nhắc sử dụng các thuộc tính ARIA để cung cấp thêm thông tin ngữ nghĩa cho các công nghệ hỗ trợ.

Ví dụ thực tế và Nghiên cứu tình huống

Hãy xem xét một số ví dụ thực tế để minh họa cách các nguyên tắc này được áp dụng trên các khu vực và bối cảnh khác nhau.

Những lỗi phổ biến về khả năng truy cập cần tránh

Kết luận: Nắm bắt khả năng truy cập vì một trang web tốt hơn

Khả năng truy cập không chỉ là một yêu cầu kỹ thuật; đó là một khía cạnh cơ bản của việc tạo ra một trang web hòa nhập và có thể truy cập cho mọi người. Bằng cách triển khai các kỹ thuật CSS này và tuân thủ các nguyên tắc WCAG, bạn có thể tạo ra các trang web không chỉ hấp dẫn về mặt hình ảnh mà còn có thể sử dụng và thú vị cho tất cả người dùng, bất kể khả năng của họ. Hãy coi khả năng truy cập là một phần không thể thiếu trong quy trình phát triển web của bạn, và bạn sẽ góp phần vào một thế giới kỹ thuật số hòa nhập và công bằng hơn.

Tài nguyên và Đọc thêm