Hỗ trợ tiếp cận

Cho phép các trang của bạn phản hồi với nhiều kích thước màn hình là một trong những cách để đảm bảo trang web của bạn có thể tiếp cận được nhiều người nhất có thể. Hãy cân nhắc một số yếu tố khác mà bạn nên lưu ý.

Hội chứng mù màu

Mỗi người cảm nhận màu sắc theo cách riêng. Người bị mù màu đỏ không cảm nhận được màu đỏ là một màu riêng biệt. Người bị mù màu xanh lục sẽ không nhìn thấy màu xanh lục. Đối với người bị mù màu xanh dương, màu này là màu xanh dương.

Một số công cụ có thể giúp bạn hình dung được bảng phối màu của mình sẽ trông như thế nào đối với những người có các loại thị lực màu khác nhau.

Thẻ Hỗ trợ tiếp cận của Firefox có một trình đơn thả xuống có nhãn Mô phỏng với một danh sách các lựa chọn.

Trong Chrome DevTools, thẻ kết xuất cho phép bạn mô phỏng khiếm khuyết thị giác.

Đó là những công cụ dành riêng cho trình duyệt. Bạn cũng có thể mô phỏng các loại thị lực khác nhau ở cấp hệ điều hành.

Trên máy Mac, hãy chuyển đến:

1. Lựa chọn ưu tiên về hệ thống
2. Hỗ trợ tiếp cận
3. Màn hình
4. Bộ lọc màu
5. Bật bộ lọc màu

Chọn một trong các lựa chọn.

Nói chung, bạn không nên chỉ dựa vào màu sắc để phân biệt giữa các phần tử. Ví dụ: bạn có thể (và nên) đặt màu khác cho đường liên kết so với văn bản xung quanh. Tuy nhiên, bạn cũng nên áp dụng một số chỉ báo về kiểu dáng khác, chẳng hạn như gạch chân hoặc in đậm các đường liên kết.

a {
  color: red;
}

a {
  color: red;
  font-weight: bold;
}

Độ tương phản màu

Một số tổ hợp màu có thể gây ra vấn đề. Nếu không có đủ độ tương phản giữa màu nền trước và màu nền sau, văn bản sẽ khó đọc. Độ tương phản màu kém là một trong những vấn đề thường gặp nhất về khả năng hỗ trợ tiếp cận trên web. Tuy nhiên, may mắn là bạn có thể phát hiện vấn đề này ngay từ đầu trong quá trình thiết kế.

Sau đây là một số công cụ bạn có thể dùng để kiểm tra tỷ lệ tương phản của văn bản và màu nền:

• VisBug là một tiện ích trình duyệt có trên tất cả các trình duyệt máy tính phổ biến.
• Accessibility Inspector của Firefox có thể kiểm tra các vấn đề về độ tương phản hình ảnh.
• Bạn cũng có thể khám phá và khắc phục văn bản có độ tương phản thấp bằng Chrome DevTools.
• Trong trình duyệt Edge của Microsoft, bạn có thể kiểm tra độ tương phản giữa màu văn bản bằng công cụ chọn màu.

Bạn nên luôn khai báo color và background-color cùng nhau trong CSS. Đừng cho rằng màu nền sẽ là màu mặc định của trình duyệt. Mọi người có thể và thường thay đổi màu sắc mà trình duyệt của họ sử dụng.

body {
  color: black;
}

body {
  color: black;
  background-color: white;
}

Độ tương phản cao

Một số người đặt hệ điều hành của họ ở chế độ tương phản cao. Bạn có thể thử cách này trên hệ điều hành của mình.

Trên máy Mac, hãy chuyển đến:

1. Lựa chọn ưu tiên về hệ thống
2. Hỗ trợ tiếp cận
3. Màn hình

Chọn chế độ tăng độ tương phản.

Có một tính năng đa phương tiện để phát hiện xem người dùng có bật chế độ tương phản cao hay không. Bạn có thể truy vấn tính năng đa phương tiện prefers-contrast cho 3 giá trị: no-preference, less và more. Bạn có thể sử dụng thông tin này để điều chỉnh bảng màu của trang web.

Mọi người cũng có thể đặt lựa chọn ưu tiên trong hệ điều hành để sử dụng màu đảo ngược.

Trên máy Mac, hãy chuyển đến:

1. Lựa chọn ưu tiên về hệ thống
2. Hỗ trợ tiếp cận
3. Màn hình

Chọn chế độ đảo ngược màu.

Đảm bảo rằng trang web của bạn vẫn có ý nghĩa đối với người duyệt web bằng màu sắc đảo ngược. Chú ý đến bóng đổ của hộp – bạn có thể cần điều chỉnh những bóng đổ này khi đảo ngược màu.

Cỡ chữ

Màu sắc không phải là thứ duy nhất mà mọi người có thể điều chỉnh trong trình duyệt của họ, họ cũng có thể điều chỉnh kích thước phông chữ mặc định. Khi thị lực suy giảm, họ có thể điều chỉnh cỡ chữ mặc định trong trình duyệt hoặc hệ điều hành, tăng cỡ chữ theo thời gian.

Bạn có thể phản hồi các chế độ cài đặt này bằng cách sử dụng cỡ chữ tương đối. Tránh sử dụng các đơn vị như px. Thay vào đó, hãy sử dụng các đơn vị tương đối như rem hoặc ch.

Hãy thử thay đổi chế độ cài đặt cỡ chữ mặc định trong trình duyệt. Bạn có thể làm việc đó trong phần lựa chọn ưu tiên của trình duyệt. Hoặc bạn có thể thực hiện việc này trong khi truy cập vào một trang web bằng cách phóng to. Trang web của bạn có hoạt động bình thường nếu cỡ chữ mặc định tăng thêm 200% không? Còn 400% thì sao?

Người truy cập vào trang web của bạn trên máy tính có kích thước phông chữ tăng lên 400% sẽ thấy bố cục giống như người truy cập vào trang web của bạn trên một thiết bị có màn hình nhỏ.

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

Không phải ai cũng dùng chuột hoặc bàn di chuột để di chuyển trên các trang web. Bàn phím là một cách khác để di chuyển trên trang, trong đó phím tab đặc biệt hữu ích. Người dùng có thể nhanh chóng di chuyển từ một đường liên kết hoặc trường biểu mẫu sang đường liên kết hoặc trường biểu mẫu tiếp theo.

Các đường liên kết được tạo kiểu bằng :hover và :focus giả lớp sẽ hiển thị những kiểu đó bất kể người dùng đang sử dụng chuột, bàn di chuột hay bàn phím. Sử dụng lớp giả :focus-visible để tạo kiểu cho các đường liên kết chỉ dành cho thao tác điều hướng bằng bàn phím. Bạn có thể làm cho những kiểu này nổi bật hơn.

a:focus,
a:hover {
  outline: 1px dotted;
}
a:focus-visible {
  outline: 3px solid;
}

Khi người dùng nhấn phím Tab để chuyển từ đường liên kết này sang đường liên kết khác hoặc từ trường biểu mẫu này sang trường biểu mẫu khác, những phần tử đó sẽ được lấy tiêu điểm theo thứ tự xuất hiện trong cấu trúc tài liệu. Thứ tự này cũng phải khớp với thứ tự trực quan.

Hãy cẩn thận với thuộc tính order của CSS. Bạn có thể kết hợp thuộc tính này với flexbox và lưới để đặt các phần tử theo thứ tự trực quan khác với thứ tự của chúng trong HTML. Đây là một tính năng mạnh mẽ nhưng có thể gây nhầm lẫn cho những người thao tác bằng bàn phím.

Kiểm thử các trang trên trang web bằng cách sử dụng phím tab trên bàn phím để đảm bảo thứ tự nhấn phím Tab hợp lý.

Trong bảng điều khiển Hỗ trợ tiếp cận của công cụ cho nhà phát triển của trình duyệt Firefox, có một lựa chọn là Hiện thứ tự nhấn phím Tab. Khi bật chế độ này, các con số sẽ xuất hiện trên mỗi phần tử có thể lấy tiêu điểm.

Giảm chuyển động

Ảnh động và chuyển động là những cách tuyệt vời để thổi hồn vào thiết kế web. Nhưng đối với một số người, những chuyển động này có thể gây mất phương hướng và thậm chí gây buồn nôn.

Có một truy vấn về tính năng cho biết liệu người dùng có muốn giảm chuyển động hay không. Tên của nó là prefers-reduced-motion. Hãy thêm thuộc tính này ở bất cứ nơi nào bạn đang sử dụng hiệu ứng chuyển đổi hoặc ảnh động CSS.

a:hover {
  transform: scale(150%);
}
@media (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
}

Truy vấn nội dung nghe nhìn prefers-reduced-motion dành riêng cho chuyển động trên màn hình. Nếu bạn đang sử dụng hiệu ứng chuyển đổi cho màu của một phần tử không bị ảnh hưởng bởi prefers-reduced-motion. Bạn cũng có thể chuyển đổi độ mờ và làm mờ dần. Tính năng giảm chuyển động không có nghĩa là không có ảnh động.

Voice

Mỗi người có một cách trải nghiệm web khác nhau. Không phải ai cũng xem trang web của bạn trên màn hình. Các công nghệ hỗ trợ như trình đọc màn hình sẽ chuyển đổi thông tin đầu ra thành lời nói trên màn hình.

Trình đọc màn hình hoạt động với mọi loại ứng dụng, kể cả trình duyệt web. Để trình duyệt web giao tiếp hiệu quả với trình đọc màn hình, cần có thông tin ngữ nghĩa hữu ích trong trang web đang được truy cập.

Trước đây, bạn đã tìm hiểu cách nút chỉ có biểu tượng cần có một thuộc tính để chỉ định mục đích của nút cho người dùng khiếm thị. Đây chỉ là một ví dụ về tầm quan trọng của HTML cơ bản vững chắc.

Tiêu đề

Sử dụng các tiêu đề như <h1>, <h2>, <h3>, v.v. một cách hợp lý. Trình đọc màn hình sử dụng các tiêu đề này để tạo dàn ý cho tài liệu của bạn. Bạn có thể điều hướng dàn ý bằng phím tắt.

<div class="heading-main">Welcome to my page</div>

<div class="heading-secondary">About me</div>

<div class="heading-tertiary">My childhood</div>

<div class="heading-secondary">About this website</div>

<div class="heading-tertiary">How this site was built</div>

<h1>Welcome to my page</h1>
  <h2>About me</h2>
    <h3>My childhood</h3>
  <h2>About this website</h2>
    <h3>How this site was built</h3>

Cấu trúc

Sử dụng các phần tử điểm mốc như <main>, <nav>, <aside>, <header> và <footer> để cấu trúc nội dung trên trang của bạn. Sau đó, người dùng trình đọc màn hình có thể chuyển thẳng đến các điểm đánh dấu này.

<div class="header">...</div>

<div class="navigation">...</div>

<div class="maincontent">...</div>

<div class="sidebar">...</div>

<div class="footer">...</div>

<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

Biểu mẫu

Đảm bảo rằng mọi trường biểu mẫu đều có một phần tử <label> được liên kết. Bạn có thể liên kết nhãn với một trường biểu mẫu bằng cách sử dụng thuộc tính for trên phần tử <label> và thuộc tính id tương ứng trên trường biểu mẫu.

<span class="formlabel">Your name</span>
<input type="text">

<label for="name">Your name</label>
<input id="name" type="text">

Hình ảnh

Luôn cung cấp nội dung mô tả bằng văn bản cho hình ảnh bằng thuộc tính alt.

<img src="dog.jpg">

<img src="dog.jpg" alt="A golden retriever sitting on the grass looking happy.">

Nếu hình ảnh chỉ mang tính chất trình bày, bạn vẫn nên thêm thuộc tính alt nhưng có thể đặt giá trị trống cho thuộc tính này.

<img src="texture.png">

<img src="texture.png" alt="">

Jake Archibald đã xuất bản một bài viết về cách viết alt văn bản hay.

Liên kết

Hãy cố gắng cung cấp văn bản mô tả trong các đường liên kết. Tránh sử dụng các cụm từ như "nhấp vào đây" hoặc "xem thêm".

<p>To find out more about our latest offers, <a href="/offers.html">click here</a>.</p>

<p>Find out more about <a href="/offers.html"> our latest offers</a>.</p>

ARIA

Việc sử dụng HTML ngữ nghĩa hợp lý sẽ giúp các trang web của bạn dễ tiếp cận hơn đối với các công nghệ hỗ trợ như trình đọc màn hình và cả các đầu ra âm thanh khác như trợ lý giọng nói.

Một số tiện ích giao diện không có phần tử HTML tương ứng, bao gồm cả băng chuyền, thẻ và bảng xếp lớp. Bạn cần tạo những thành phần đó từ đầu bằng cách kết hợp HTML, CSS, JavaScript và ARIA.

ARIA là viết tắt của Accessible Rich Internet Applications (Ứng dụng Internet đa dạng có thể truy cập). Từ vựng của nó cho phép bạn cung cấp thông tin ngữ nghĩa khi không có phần tử HTML phù hợp.

Nếu cần tạo các phần tử giao diện chưa có dưới dạng phần tử HTML, hãy làm quen với ARIA.

Bạn càng thêm nhiều chức năng tuỳ chỉnh bằng JavaScript, bạn càng cần hiểu rõ về ARIA. Nếu chỉ dùng các phần tử HTML tiêu chuẩn, bạn có thể không cần dùng ARIA.

Nếu có thể, hãy kiểm thử với người dùng trình đọc màn hình thực tế. Việc này không chỉ giúp bạn hiểu rõ hơn về cách họ truy cập web mà còn giúp bạn không phải đoán mò khi thiết kế với mục tiêu hỗ trợ tiếp cận.

Thử nghiệm với người dùng thực tế là một cách tuyệt vời để phát hiện mọi giả định mà bạn có thể đang đưa ra. Trong mô-đun tiếp theo, bạn sẽ tìm hiểu về những cách mà mọi người tương tác với trang web của bạn – một lĩnh vực khác mà bạn rất dễ đưa ra giả định.

Kiểm tra kiến thức của bạn

Kiểm tra kiến thức của bạn về khả năng hỗ trợ tiếp cận