Việc cho phép các trang của bạn tương thích với các kích thước màn hình khác nhau chỉ là một cách để đảm bảo nhiều người có thể truy cập vào trang web của bạn. Hãy xem xét một số yếu tố khác mà bạn nên lưu ý.
Khiếm thị màu
Mỗi người sẽ cảm nhận màu sắc theo cách khác nhau. Những người bị mù màu đỏ không phải là một màu riêng biệt. Mù màu xanh lục bị thiếu. Đối với những người bị mù màu xanh dương, màu này có màu xanh dương.
Một số công cụ có thể giúp bạn nắm được thông tin chung về cách bảng phối màu xuất hiện trước những người có thị lực màu khác nhau.
Thẻ Hỗ trợ tiếp cận của Firefox bao gồm một trình đơn thả xuống có nhãn Simulate (Mô phỏng) với danh sách các tuỳ chọn.
Trong Công cụ của Chrome cho nhà phát triển, thẻ hiển thị cho phép bạn mô phỏng khiếm khuyết về thị lự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 nhiều loại thị giác ở cấp hệ điều hành.
Trên máy Mac, hãy chuyển đến:
- Lựa chọn ưu tiên về hệ thống
- Hỗ trợ tiếp cận
- Mạng Hiển thị
- Bộ lọc màu
- Bật Bộ lọc màu
Chọn một trong các lựa chọn.
Nhìn chung, bạn không nên chỉ dựa vào màu sắc để phân biệt các thành phần khác nhau. Ví dụ: bạn có thể và nên làm cho các đường liên kết có màu khác 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 định kiểu khác như gạch dưới hoặc làm đậ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 sự cố. Nếu màu nền trước và màu nền không đủ tương phản, văn bản sẽ trở nên khó đọc. Độ tương phản màu kém là một trong những vấn đề về hỗ trợ tiếp cận thường gặp nhất trên web, nhưng may mắn thay, đó là vấn đề bạn có thể phát hiện sớm trong quá trình thiết kế.
Dưới đây là một số công cụ mà bạn có thể sử dụng để kiểm tra tỷ lệ tương phản của văn bản và màu nền:
- tota11y là một bookmarklet mà bạn có thể thêm vào thanh công cụ của trình duyệt.
- VisBug là một tiện ích của trình duyệt dùng được cho tất cả các trình duyệt chính trên máy tính.
- Trình kiểm tra hỗ trợ tiếp cận 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 Công cụ của Chrome cho nhà phát triển.
- Trong trình duyệt Edge của Microsoft, bạn có thể kiểm tra độ tương phản màu văn bản bằng cách sử dụ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 giả định 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ể thay đổi màu sắc mà trình duyệt 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ọ để sử dụng chế độ tương phản cao. Bạn có thể dùng thử phiên bản này trên hệ điều hành của mình.
Trên máy Mac, hãy chuyển đến:
- Lựa chọn ưu tiên về hệ thống
- Hỗ trợ tiếp cận
- Mạng Hiển thị
Chọn tuỳ chọn tăng độ tương phản.
Có một tính năng đa phương tiện giúp phát hiện xem có ai đó đã bật chế độ tương phản cao hay chưa. Bạn có thể truy vấn tính năng đa phương tiện prefers-contrast theo ba 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 tuỳ chọn sử dụng màu đảo ngược trong hệ điều hành.
Trên máy Mac, hãy chuyển đến:
- Lựa chọn ưu tiên về hệ thống
- Hỗ trợ tiếp cận
- Mạng Hiển thị
Chọn tuỳ chọn đảo ngược màu.
Đảm bảo trang web của bạn vẫn phù hợp với những người đang duyệt xem bằng màu sắc đảo ngược. Chú ý bóng đổ – có thể cần phải điều chỉnh bóng này khi màu đảo ngược.
Cỡ chữ
Màu sắc không phải là thứ duy nhất mà người dùng có thể điều chỉnh trong trình duyệt, họ còn có thể điều chỉnh cỡ chữ mặc định. Khi thị lực giảm đi, họ có thể điều chỉnh cỡ chữ mặc định trong trình duyệt hoặc hệ điều hành, làm tăng số lượng theo thời gian.
Bạn có thể đáp ứng 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 kích thước văn bản mặc định trong trình duyệt của bạn. 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ể phóng to để thực hiện việc này khi đang truy cập vào một trang web. Trang web của bạn có còn hoạt động không nếu kích thước phông chữ mặc định tăng 200%? Còn 400% thì sao?
Một người truy cập vào trang web của bạn trên máy tính để bàn với kích thước phông chữ tăng lên 400% sẽ thấy bố cục giống như khi họ truy cập vào trang web của bạn trên một thiết bị màn hình nhỏ.
Điều hướng bằng bàn phím
Không phải ai cũng sử 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 chuyển từ một trường của đường liên kết hoặc biểu mẫu sang trường tiếp theo.
Các đường liên kết được tạo kiểu bằng các lớp giả lập :hover và :focus sẽ hiển thị các 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ỉ cho mục đích điều hướng bằng bàn phím. Bạn có thể làm cho những kiểu đó trở nên dễ nhận thấy hơn.
a:focus,
a:hover {
outline: 1px dotted;
}
a:focus-visible {
outline: 3px solid;
}
Khi thẻ của người dùng từ đường liên kết tới trường liên kết hoặc trường biểu mẫu đến trường biểu mẫu, các phần tử đó sẽ được đặt tiêu điểm theo thứ tự xuất hiện trong cấu trúc tài liệu. Màu này cũng phải khớp với thứ tự hình ảnh.
Hãy cẩn thận với thuộc tính order của CSS. Bạn có thể sử dụng kết hợp tính năng này với flexbox và lưới để sắp xếp các phần tử theo thứ tự trực quan khác với thứ tự của chúng trong HTML. Đó là một tính năng mạnh mẽ nhưng có thể khiến mọi người nhầm lẫn khi thao tác bằng bàn phím.
Kiểm tra trang web của bạn bằng cách sử dụng phím tab trên bàn phím để đảm bảo thứ tự thẻ là hợp lý.
Trong bảng Accessibility (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 tuỳ chọn Show Tabbing Order (Hiển thị thứ tự thẻ). Việc bật tuỳ chọn này sẽ phủ các số trên từng phần tử có thể làm tâm điểm.
Giảm chuyển động
Hoạt ảnh và chuyển động là những cách tuyệt vời để hiện thực hoá các thiết kế web. Tuy nhiên, đối với một số người, những cử động này có thể rất mất phương hướng và thậm chí gây buồn nôn.
Có một truy vấn tính năng cho biết người dùng có muốn chuyển động ít hơn hay không. Đó là prefers-reduced-motion. Đưa tệp này vào bất cứ nơi nào bạn 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 đa phương tiệ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 thành phần không chịu ảnh hưởng của prefers-reduced-motion. Bạn cũng có thể chuyển đổi độ mờ và độ mờ chéo. Chuyển động giảm không có nghĩa là không có ảnh động.
Giọng nói
Mọi người trải nghiệm web theo cách khác nhau. Không phải ai cũng nhìn thấy 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 đến màn hình thành lời nói.
Trình đọc màn hình hoạt động với tất cả các loại ứng dụng, bao gồm cả trình duyệt web. Để trình duyệt web giao tiếp hữu ích với trình đọc màn hình, cần có thông tin ngữ nghĩa hữu ích trong trang web hiện đang được truy cập.
Trước đây, bạn đã tìm hiểu cách các 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 không có thị lực. Đây chỉ là một ví dụ về tầm quan trọng của HTML cơ bản mạnh mẽ.
Tiêu đề
Hãy sử dụng các tiêu đề như <h1>, <h2>, <h3>, v.v. một cách phù hợp. Trình đọc màn hình sử dụng các tiêu đề này để tạo đề cương cho tài liệu và di chuyển trong tài liệu 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ử mốc như <main>, <nav>, <aside>, <header> và <footer> để tạo cấu trúc cho nội dung trên trang. Sau đó, người dùng trình đọc màn hình có thể chuyển thẳng đến các mốc 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
Hãy đảm bảo mỗi trường trên biểu mẫu đều có một phần tử <label> liên kết. Bạn có thể liên kết một nhãn với một trường của biểu mẫu bằ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ả dạng văn bản của 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 trình bày, bạn vẫn nên thêm thuộc tính alt nhưng có thể cung cấp 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 tuyệt vời.
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 dùng các cụm từ như "nhấp vào đây" hoặc "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 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 cũng như các đầu ra âm thanh khác như trợ lý thoại.
Một số tiện ích giao diện không có phần tử HTML tương ứng: băng chuyền, thẻ, đàn phong cầm, v.v. Quảng cáo cần được xây dựng 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 APIs (Ứng dụng Internet đa dạng thức có thể truy cập). Từ vựng của trang web cho phép bạn cung cấp thông tin ngữ nghĩa khi không có sẵn phần tử HTML phù hợp.
Nếu bạn 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 dành riêng cho JavaScript, thì bạn càng cần hiểu rõ về ARIA. Nếu chỉ sử dụng các phần tử HTML gốc, thì bạn có thể không cần ARIA nào.
Nếu có thể, hãy kiểm tra với người dùng trình đọc màn hình thực. Tính năng này không chỉ giúp bạn hiểu rõ hơn về cách họ điều hướng web, mà còn giúp bạn không phải phỏng đoán khi thiết kế có lưu ý đến khả năng hỗ trợ tiếp cận.
Thử nghiệm với người thực là một cách hay để cho thấy 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ề các cách khác nhau 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à việc đưa ra các giả định là quá dễ dàng.
Kiểm tra mức độ hiểu biết 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
Với CSS, nhà phát triển có thể ghi đè lựa chọn ưu tiên của người dùng như kích thước phông chữ trong trường hợp xấu nhất?
body { font-size: 12px; } là đủ.Để tránh ghi đè lựa chọn ưu tiên của người dùng về kích thước phông chữ, hãy sử dụng?
px.rem.Mọi người trên thế giới đều sử dụng chuột.
Một hình ảnh có thuộc tính alt trống có chức năng gì?