Thiết Kế Website Dễ Tiếp Cận Cho Mọi Đối Tượng Người Dùng
Thiết kế website dễ tiếp cận theo tiêu chuẩn WCAG 2.2, giúp mọi đối tượng đọc hiểu, thao tác thuận tiện và tăng cơ hội chuyển đổi khách hàng
Thiết Kế Website Dễ Tiếp Cận Cho Mọi Đối Tượng Người Dùng
Hình dung một buổi tối, bố của một chủ cửa hàng, 64 tuổi, mở website của con để xem báo giá. Chữ xám nhạt cỡ nhỏ buộc ông đưa điện thoại sát mắt, nút “Gửi yêu cầu” nằm sát hai nút khác nên ông bấm nhầm hai lần, rồi ông thoát ra. Đó là một lượt khách mà website không hề nhìn thấy, và cũng là lý do khả năng tiếp cận website cần được xem là một phần của thiết kế website, không phải món bổ sung sau cùng.
Bài này chứng minh rằng một website chỉ thật sự làm việc khi người lớn tuổi, người khiếm thị, người thao tác khó khăn và người dùng thiết bị hỗ trợ đều đọc, hiểu và hoàn tất được việc họ cần, và chủ website có thể tự kiểm tra điều đó. Anh chị sẽ nhận được bốn cửa vào của khả năng tiếp cận, bốn phép thử mười phút, checklist 15 tiêu chí và lịch việc cho tuần đầu tiên. “Cho mọi đối tượng” là hướng đi, không phải lời cam kết: không website nào dùng được hoàn hảo với tất cả mọi người. Bài viết do đội ngũ MIMA biên soạn, dựa trên tiêu chuẩn WCAG 2.2 của W3C và khảo sát WebAIM năm 2026.
Khả Năng Tiếp Cận Website Là Gì?
Khả năng tiếp cận website là mức độ mà người lớn tuổi, người khiếm thị, người gặp khó khăn khi thao tác và người dùng thiết bị hỗ trợ vẫn đọc, hiểu và hoàn tất được việc họ cần trên trang. Đây không phải tính năng cộng thêm: nó nằm trong màu sắc, cỡ chữ, cấu trúc trang và cách viết nội dung, tức những quyết định được đưa ra ngay lúc lên ý tưởng giao diện. Vì vậy khi làm việc với một công ty thiết kế website, anh chị nên đưa yêu cầu tiếp cận vào bản yêu cầu ngay từ đầu.
Bốn Nguyên Tắc WCAG Giúp Website Dễ Tiếp Cận
Tiêu chuẩn WCAG do W3C xây dựng chia khả năng tiếp cận thành bốn nguyên tắc: nhìn thấy được, thao tác được, hiểu được và tương thích. Chúng tôi gọi gọn là bốn cửa vào của một cửa hàng online: thiếu một cửa thì vẫn có khách bước vào, nhưng một nhóm người sẽ phải đứng ngoài. Anh chị có thể dùng bốn cửa này như bộ lọc khi nhìn lại website của mình.
Cửa Nhìn Thấy Nội Dung Rõ Ràng
Cửa này kiểm tra người dùng có nhìn hoặc nghe được nội dung hay không: chữ đủ tương phản, ảnh có mô tả bằng chữ, video có phụ đề. Với người lớn tuổi, đó là chữ đủ lớn và đủ đậm; với người khiếm thị, đó là mọi thông tin trong ảnh đều có phiên bản bằng văn bản. Lỗi hay gặp là chỉ kiểm tra website trên màn hình lớn, trong phòng đủ sáng.
Cửa Thao Tác Bằng Nhiều Cách
Cửa thao tác hỏi người dùng có hoàn tất được việc cần làm mà không phụ thuộc vào chuột hay cú chạm chính xác hay không. Người run tay, người chỉ dùng bàn phím hoặc người đang bế con một tay đều cần nút đủ lớn và menu mở được bằng phím Tab. WCAG 2.2 bổ sung thêm tiêu chí cho đúng nhóm này.
Cửa Hiểu Nội Dung Và Biểu Mẫu
Cửa thứ ba nói về việc người dùng có hiểu mình đang ở đâu và cần làm gì tiếp theo. Câu chữ đơn giản, nhãn ô nhập liệu rõ ràng và thông báo lỗi chỉ đúng ô cần sửa quyết định người dùng hoàn tất form báo giá hay bỏ dở. Với người lớn tuổi hoặc người đọc chậm, chi tiết này còn quan trọng hơn giao diện đẹp. Việc viết nội dung đơn giản, rõ ràng thuộc nhóm công việc content website chứ không chỉ của lập trình viên.
Cửa Tương Thích Với Thiết Bị Hỗ Trợ
Cửa cuối cùng kiểm tra website có chạy tốt với trình đọc màn hình, công cụ phóng to, bàn phím rời hoặc điều khiển bằng giọng nói hay không. Điều này phụ thuộc vào cách viết mã nguồn: nút phải là nút thật, tiêu đề phải là tiêu đề thật, không phải một dòng chữ được tô to cho giống. Người xem không thấy phần cấu trúc này, nhưng thiết bị hỗ trợ và công cụ tìm kiếm đều đọc nó. Đây cũng là chỗ khác biệt giữa thiết kế website bản quyền, nơi mã nguồn được viết riêng cho doanh nghiệp, và các mẫu dựng sẵn.
Khách Tìm Trên Google Thường Có Nhu Cầu Cao
Theo quan sát của chúng tôi, với dịch vụ và sản phẩm giá trị cao, khách thường tự gõ từ khóa lên Google để tìm hiểu và so sánh trước khi liên hệ, nên nhu cầu của họ cao hơn người chỉ lướt thấy quảng cáo trên mạng xã hội. Vì vậy mỗi lượt khách rời website do chữ khó đọc hay form khó điền là một cơ hội có giá trị bị bỏ lỡ.
MIMA mô tả một website tốt có thể xuất hiện đồng thời ở Google AI Overview, Google Ads, Google Shopping, tìm kiếm tự nhiên, Google Hình ảnh và Google Maps. Theo mô tả của chúng tôi, khi các vị trí này cùng thuộc về một website cho một từ khóa, website có thể chiếm khoảng 70% diện tích hiển thị. Để làm được điều đó cần SEO tổng thể, quảng cáo Google và hồ sơ Google Maps cùng dẫn khách về một website mà ai bước vào cũng dùng được.
Những Rào Cản Phổ Biến Khi Truy Cập Website
Rào cản thường không nằm ở lỗi lớn mà ở các chi tiết quen thuộc: chữ xám nhạt, ảnh không có mô tả, menu chỉ mở khi rê chuột. Ba tình huống dưới đây ứng với ba nhóm người dùng mà chủ website hay hỏi, kèm cách nhận ra và cách sửa. Với thiết kế website thân thiện người dùng, đây là danh sách lỗi nên học trước.
Người Lớn Tuổi Gặp Khó Với Chữ Nhỏ Và Nút Bé
Thị lực giảm, ngón tay kém linh hoạt và thói quen ít dùng ứng dụng khiến người lớn tuổi nhạy cảm hơn với thiết kế chật chội. Hai lỗi thường gặp là chữ quá nhỏ hoặc quá nhạt và các nút đặt sát nhau. Cả hai sửa được ngay từ bảng màu, cỡ chữ và khoảng cách giữa các phần tử.
Chữ Xám Nhạt Trên Nền Trắng Khó Đọc
Chữ xám nhạt trông thanh lịch trong bản thiết kế nhưng khó đọc trên điện thoại ngoài trời. WCAG yêu cầu tỷ lệ tương phản tối thiểu 4,5:1 cho chữ thường và 3:1 cho chữ lớn, tức từ 18 point trở lên hoặc 14 point in đậm. Anh chị có thể đo bằng bộ chọn màu trong Chrome DevTools thay vì đoán bằng mắt.
Nút Bấm Sát Nhau Dễ Chạm Nhầm
WCAG 2.2 đặt vùng bấm tối thiểu 24×24 điểm ảnh CSS, trừ một số ngoại lệ như nút nằm trong dòng chữ hoặc có đủ khoảng cách với nút bên cạnh. Với người run tay hay đang di chuyển, nút lớn và có khoảng đệm giúp giảm bấm nhầm. Nguyên tắc này cũng đáng đưa vào yêu cầu khi làm thiết kế app di động.
Người Khiếm Thị Cần Hình Ảnh Có Mô Tả
Người khiếm thị thường dùng trình đọc màn hình, tức phần mềm đọc thành tiếng nội dung trên trang. Phần mềm chỉ đọc được những gì ở dạng văn bản, nên ảnh không có mô tả hoặc nút không có tên sẽ trở thành khoảng trống. Đây cũng là nhóm lỗi xuất hiện nhiều trong khảo sát WebAIM Million năm 2026.
Ảnh Thiếu Alt Khiến Nội Dung Bị Mất
Alt là đoạn văn bản mô tả đi kèm ảnh. Banner khuyến mãi ghi số điện thoại ngay trong ảnh mà không có alt sẽ khiến người dùng trình đọc màn hình không biết số đó, còn tên tệp như IMG_2231.jpg chẳng nói được gì. Hãy mô tả đúng điều có trong ảnh, ngắn gọn, không nhồi từ khóa; ảnh trang trí thì để alt rỗng.
Google cũng dùng alt cùng nội dung trang để hiểu ảnh, nhưng mục đích đầu tiên vẫn là người dùng. Tệp PDF thiết kế hồ sơ năng lực chỉ gồm ảnh quét tạo ra đúng khoảng trống ấy, và vì nhân sự đăng bài hay quên alt nên cần rà soát qua chăm sóc website định kỳ.
Nút Và Liên Kết Không Tên Làm Người Dùng Lạc
Một nút chỉ có biểu tượng kính lúp hay giỏ hàng mà thiếu tên bằng chữ sẽ được đọc là “nút” và không nói thêm gì. Liên kết “xem thêm” lặp lại mười lần cũng khiến người nghe không biết mỗi liên kết dẫn đến đâu. WebAIM ghi nhận liên kết rỗng xuất hiện trên khoảng 46% trang chủ trong khảo sát năm 2026.
Người Thao Tác Khó Khăn Cần Menu Dùng Bàn Phím
Không phải ai cũng dùng được chuột: người bị liệt nhẹ, run tay, đau khớp hoặc dùng thiết bị chuyển đổi chỉ thao tác bằng phím. Với họ, một website tốt là website đi hết trang được chỉ bằng phím Tab, Enter và phím mũi tên. Hai chỗ thường làm họ kẹt là menu rê chuột và biểu mẫu thiếu nhãn.
Menu Chỉ Mở Khi Rê Chuột Là Điểm Nghẽn
Menu xổ xuống chỉ phản ứng khi rê chuột khiến người dùng bàn phím và màn hình cảm ứng không mở được mục con. Cách sửa là cho phép mở bằng phím Enter hoặc Space, đóng bằng phím Esc và để vòng focus, tức khung viền quanh mục đang chọn, luôn nhìn thấy. Anh chị thử ngay: đặt chuột sang một bên và bấm Tab từ đầu trang.
Biểu Mẫu Thiếu Nhãn Làm Người Dùng Bỏ Dở
Form báo giá chỉ có chữ mờ ghi sẵn trong ô sẽ khiến người dùng quên ô đó hỏi gì ngay khi bắt đầu gõ. Mỗi ô nhập liệu cần một nhãn luôn hiển thị và gắn đúng với ô; khi có lỗi, thông báo phải nêu rõ ô nào sai và cách sửa. Khảo sát WebAIM năm 2026 ghi nhận ô nhập thiếu nhãn trên khoảng 51% trang chủ.
WCAG 2.2 Đánh Giá Khả Năng Tiếp Cận Website
WCAG (Web Content Accessibility Guidelines) là bộ hướng dẫn về khả năng tiếp cận nội dung web do W3C công bố. Phiên bản 2.2 trở thành khuyến nghị chính thức của W3C ngày 5/10/2023 và bổ sung 9 tiêu chí so với 2.1. Chúng tôi dùng WCAG làm thước đo tham khảo; yêu cầu pháp lý với từng doanh nghiệp là việc cần hỏi chuyên gia pháp lý. Anh chị có thể xem cách chúng tôi làm việc ở trang dịch vụ thiết kế website trước khi đưa các tiêu chí này vào yêu cầu của mình.
Ba Mức A, AA, AAA Cho Biết Độ Đạt Chuẩn
Mỗi tiêu chí trong WCAG thuộc một trong ba mức: A là mức cơ bản nhất, AA là mức nhiều tổ chức chọn làm mục tiêu theo thông lệ, AAA là mức cao nhất và không phải website nào cũng đạt trọn vẹn. Khi nghe ai đó nói “đạt chuẩn WCAG”, anh chị nên hỏi tiếp: phiên bản nào, mức nào, áp dụng cho những trang nào.
Đạt chuẩn cũng không đồng nghĩa mọi người dùng đều thấy thoải mái, và không đơn vị nào nên cam kết điều đó. Chuẩn là sàn tối thiểu, còn trải nghiệm thật cần được kiểm tra với người dùng thật.
Chín Tiêu Chí Mới Trong WCAG 2.2
Chín tiêu chí mới tập trung vào người có thị lực yếu, khó khăn về nhận thức và hạn chế vận động. Sáu trong số đó thuộc mức A và AA, tức nhóm mà phần lớn website nên quan tâm trước. Ba nhóm đáng chú ý nhất khi thiết kế website là vòng focus, vùng bấm và đăng nhập.
Vòng Focus Không Được Che Khuất
Focus là khung viền cho biết phần tử nào đang được chọn khi người dùng bấm Tab. Tiêu chí 2.4.11 mức AA yêu cầu phần tử đang focus không bị nội dung do tác giả trang tạo ra che khuất hoàn toàn, chẳng hạn thanh menu dính đầu trang hoặc chatbox AI gắn ở góc màn hình. Khi kiểm tra, hãy bấm Tab đi hết trang và quan sát có mục nào biến mất sau thanh dính.
Vùng Bấm Tối Thiểu 24 Pixel CSS
Tiêu chí 2.5.8 đặt kích thước tối thiểu 24×24 điểm ảnh CSS cho mục tiêu thao tác bằng con trỏ, kèm vài ngoại lệ như nút nằm trong dòng chữ, điều khiển mặc định của trình duyệt hoặc nút có đủ khoảng cách với nút bên cạnh. Tiêu chí 2.5.7 còn yêu cầu mọi thao tác kéo thả phải có cách thay thế bằng một cú bấm. Nhờ vậy người run tay không bị buộc kéo thật chính xác.
Đăng Nhập Không Bắt Người Dùng Ghi Nhớ
Tiêu chí 3.3.8 yêu cầu bước xác thực không buộc người dùng làm một bài kiểm tra nhận thức, như ghi nhớ mật khẩu hay giải câu đố, trừ khi có cách thay thế. Cho phép trình quản lý mật khẩu điền sẵn hoặc cho phép dán mật khẩu là cách làm đơn giản. Tiêu chí 3.3.7 cũng yêu cầu không bắt nhập lại thông tin mà người dùng đã cung cấp trong cùng một quy trình.
Sáu Lỗi Phổ Biến Nhất Thường Dễ Sửa Nhất
Khảo sát WebAIM Million năm 2026, phân tích một triệu trang chủ, ghi nhận 95,9% trang có lỗi WCAG 2 mà công cụ tự động phát hiện được, trung bình hơn 56 lỗi mỗi trang. Sáu nhóm lỗi chiếm khoảng 96% tổng số lỗi và danh sách này gần như không đổi suốt nhiều năm.
Đứng đầu là chữ thiếu tương phản trên 83,9% trang chủ, tiếp theo là ảnh thiếu alt (53,1%), ô nhập thiếu nhãn (51%) và liên kết rỗng (46,3%); hai nhóm còn lại là nút rỗng và trang thiếu khai báo ngôn ngữ.
Điểm đáng chú ý với chủ website là những lỗi này nằm ở bảng màu, cách nhập nội dung và cấu hình giao diện, nên sửa chúng thường nhẹ việc hơn nhiều so với làm lại website. Chúng cũng thuộc phần Technical SEO, nhóm công việc kỹ thuật giúp Google thu thập và hiểu trang, nên thường được xử lý cùng dich vu seo tong the. Theo kinh nghiệm của chúng tôi, lỗi hay quay lại mỗi khi đăng bài hoặc thay banner, vì vậy cần một danh sách rà soát trước mỗi lần đăng hoặc chăm sóc website định kỳ.
Thiết Kế Website Theo Yêu Cầu Dễ Tiếp Cận Từ Đầu
Khả năng tiếp cận thường tiết kiệm nhất khi nằm trong bản yêu cầu ngay từ đầu, thay vì sửa lại sau khi website đã xong. Với thiết kế website theo yêu cầu, bảng màu, cỡ chữ, menu và biểu mẫu được quyết định cho từng trang, nên đây là lúc dễ đưa các tiêu chí vào nhất. Bốn nội dung dưới đây trả lời câu hỏi cần yêu cầu gì ở đơn vị thiết kế.
Giao Diện Thiết Kế Riêng Dễ Chỉnh Màu Và Cỡ Chữ
Giao diện thiết kế riêng cho phép chỉnh màu, cỡ chữ và bố cục theo nhóm khách của từng ngành, thay vì chấp nhận mặc định của một mẫu có sẵn. Theo mô tả của MIMA, chúng tôi thiết kế riêng giao diện cho trang chủ, giới thiệu, sản phẩm, dịch vụ, dự án, tuyển dụng và các trang chi tiết, không chỉ riêng trang chủ.
Nền tảng PARO đi theo hướng này, với giao diện thiết kế riêng theo ngành, bản máy tính, bản di động và quản trị bằng ba thao tác thêm, sửa, xóa. Nhờ đó tương phản và cỡ chữ có thể được kiểm tra ngay trên bản thiết kế, trước khi viết mã. Với website đã có sẵn, hướng chuyển đổi nền tảng CERA giữ nguyên giao diện, nên các tiêu chí tiếp cận cần được rà lại riêng sau khi chuyển đổi.
Nên chọn cặp màu chữ và nền, đo tỷ lệ tương phản trước khi giao cho lập trình viên thay vì đo sau khi website xong. Màu thương hiệu sáng như vàng hay cam thường chỉ nên làm điểm nhấn, còn chữ nội dung dùng màu đậm hơn. Các cặp màu đạt chuẩn nên được ghi lại thành bộ màu chung để mọi trang sau này dùng theo.
WCAG không quy định cỡ chữ tối thiểu, nhưng thông lệ thiết kế thường chọn chữ nội dung khoảng 16 pixel trở lên với dòng đủ thoáng. Quan trọng hơn là dùng đơn vị tương đối để chữ tăng theo khi người dùng phóng to, vì WCAG yêu cầu chữ phóng được đến 200% mà không mất nội dung hay chức năng.
Quy Trình Nghiệm Thu Là Lúc Kiểm Tra Chéo
Quy trình công khai của MIMA đi qua các bước lên ý tưởng thiết kế, lập trình, tester, nhập dữ liệu, Content SEO, nghiệm thu, chuyển giao công nghệ và đào tạo khách hàng quản trị website. Trong chuỗi đó, nghiệm thu là điểm cuối cùng để đối chiếu website với checklist; chúng tôi khuyên chủ website ghi các tiêu chí ở cuối bài vào bước này.
Bước đào tạo quản trị có ý nghĩa riêng với khả năng tiếp cận, vì người đăng bài hằng ngày là người quyết định ảnh có alt hay không. Khi so sánh các công ty thiết kế website, anh chị cũng nên hỏi rõ về thiết kế website bản quyền, tức phạm vi sử dụng giao diện, mã nguồn, phông chữ và hình ảnh, vì quyền chỉnh sửa về sau phụ thuộc vào điều khoản này.
Anh chị có thể xem giao diện đã triển khai ở mục dự án trên mima để hình dung mức độ chi tiết của từng trang trước khi đưa ra yêu cầu.
Cấu Trúc Heading Và Menu Hỗ Trợ Điều Hướng
Một website dễ tiếp cận có cấu trúc giống biển chỉ dẫn trong cửa hàng: tiêu đề cho biết khu vực, menu dẫn đường, lối tắt đến quầy chính. Cùng cấu trúc đó giúp trình đọc màn hình điều hướng nhanh và giúp công cụ tìm kiếm hiểu trang nói về điều gì. Bài viết này dùng chính nguyên tắc ấy: một H1, các heading nối tiếp và đoạn trả lời ngắn ngay bên dưới. Đây cũng là nền của SEO tổng thể heading rõ giúp Google cắt đúng đoạn trả lời khi hiển thị kết quả.
Một H1 Và Thứ Bậc Heading Không Nhảy Cấp
Mỗi trang nên có một H1 nêu chủ đề chính, sau đó là H2, H3 theo thứ tự, không nhảy từ H2 sang H4 và không dùng thẻ heading chỉ để làm chữ to. Người dùng trình đọc màn hình thường nghe danh sách heading để nhảy đến phần mình cần, nên heading rối sẽ làm họ lạc.
Google cho biết các tính năng AI như AI Overviews dựa trên cùng hệ thống chỉ mục của Search: trang cần được lập chỉ mục và đủ điều kiện hiển thị đoạn trích, không cần dữ liệu có cấu trúc riêng, và nội dung quan trọng nên ở dạng văn bản. Văn bản thật, heading rõ và alt đầy đủ vì vậy phục vụ cả người dùng lẫn công cụ tìm kiếm. Khi nhiều người cùng đăng bài, việc viết bài chuẩn SEO theo một khuôn heading thống nhất giúp thứ bậc này không bị phá sau mỗi lần cập nhật.
Menu Điều Hướng Được Bằng Bàn Phím
Menu cần đi được bằng phím Tab, mở bằng Enter hoặc Space và đóng bằng Esc, để người không dùng chuột vẫn đến được mọi trang. Điều này phụ thuộc cả vào thứ tự phần tử trong mã nguồn lẫn kiểu dáng hiển thị. Hai điểm kỹ thuật dưới đây là chỗ lỗi hay gặp. Vì vậy khi đặt yêu cầu thiet ke website theo yeu cau, anh chị nên ghi rõ phần điều hướng bằng bàn phím vào bản mô tả.
Thứ Tự Tab Đi Theo Thứ Tự Đọc
Thứ tự phím Tab nhảy qua các phần tử nên khớp với thứ tự đọc trên màn hình, thường từ trên xuống dưới, từ trái sang phải. Khi giao diện dùng CSS để đổi vị trí hiển thị mà không đổi thứ tự trong mã nguồn, focus có thể nhảy lung tung và khiến người dùng bàn phím mất phương hướng. Cách tự kiểm tra là bấm Tab và quan sát khung focus di chuyển có hợp lý không.
Vòng Focus Luôn Nhìn Thấy Rõ
Khung viền focus là dấu hiệu duy nhất cho người dùng bàn phím biết mình đang ở đâu trên trang. Một số giao diện tắt viền này vì thấy xấu mắt, khiến người dùng bàn phím gần như đi trong bóng tối. Hãy giữ viền focus và chọn màu tương phản với nền thay vì xóa nó khỏi thiết kế.
Liên Kết Nhảy Nhanh Đến Nội Dung Chính
Liên kết nhảy nhanh là liên kết ẩn ở đầu trang, hiện ra khi bấm Tab, cho phép bỏ qua menu để đến thẳng nội dung chính. Nếu thiếu nó, người dùng bàn phím phải bấm Tab qua toàn bộ menu ở mỗi trang. WCAG xếp việc này vào tiêu chí cho phép bỏ qua các khối lặp lại (2.4.1, mức A).
Hosting Mạnh Giúp Trang Mở Nhanh Trên Máy Cũ
Tốc độ cũng là một phần của khả năng tiếp cận, vì người dùng điện thoại cũ hoặc mạng yếu là nhóm chịu thiệt đầu tiên khi trang nặng. Nếu website là cửa hàng thì hosting là mặt bằng: mặt bằng chật và xa đường lớn thì khách khó vào dù biển hiệu đẹp. Theo kinh nghiệm của MIMA, một bài chuẩn SEO thường cần 5 đến 20 hình ảnh nên cần dung lượng và tốc độ tương xứng. Theo kinh nghiệm của MIMA, một bài chuẩn SEO thường cần 5 đến 20 hình ảnh nên cần dung lượng và tốc độ tương xứng.
Hosting SEO của MIMA dùng LiteSpeed Cache và SSD NVMe Enterprise, có sao lưu tự động, bảo mật nhiều lớp và kỹ thuật trực 24/7; theo mô tả của chúng tôi, tốc độ truy xuất nhanh gấp 10 lần. Khi giá hosting thấp bất thường, anh chị nên hỏi rõ phần nào đã bị cắt: cấu hình, băng thông hay hỗ trợ kỹ thuật.
Core Web Vitals của Google đo trải nghiệm bằng ba chỉ số: LCP cho biết nội dung chính hiện nhanh hay chậm, INP cho biết bấm vào có phản hồi liền không, CLS cho biết bố cục có nhảy khi đang đọc không. Người run tay hay thao tác chậm rất dễ bấm nhầm khi nút bỗng nhảy vị trí. Anh chị đo thử miễn phí bằng PageSpeed Insights và xem ngưỡng cụ thể trong tài liệu Google tại thời điểm kiểm tra.
Ảnh nặng là nguyên nhân chậm hay gặp, vì ảnh chụp trực tiếp từ máy có thể nặng nhiều megabyte. Cách xử lý quen thuộc là nén ảnh, đổi sang định dạng gọn như WebP và chỉ tải ảnh khi người dùng cuộn tới.
Cách Kiểm Tra Khả Năng Tiếp Cận Website
Anh chị có thể kiểm tra khả năng tiếp cận theo ba lớp: công cụ tự động để bắt lỗi cơ bản, bốn phép thử thủ công mất khoảng mười phút, và trình đọc màn hình để nghe website như người khiếm thị. Không lớp nào đủ một mình, nhưng cả ba cùng nhau cho bức tranh khá đầy đủ, ngay cả khi anh chị chưa làm việc với đơn vị thiết kế website nào.
Công Cụ Tự Động Phát Hiện Lỗi Cơ Bản
Lighthouse là công cụ miễn phí tích hợp sẵn trong Chrome, dùng bộ máy axe-core để kiểm tra các lỗi như thiếu alt, thiếu nhãn biểu mẫu hay tương phản thấp. Kết quả là điểm từ 0 đến 100 kèm danh sách lỗi cần sửa. Đây là điểm xuất phát hợp lý, miễn là anh chị hiểu giới hạn của nó.
Lighthouse Trong Chrome Chạy Được Ngay
Mở trang cần kiểm tra trong Chrome, bấm F12, chọn thẻ Lighthouse, đánh dấu mục Accessibility rồi tạo báo cáo. Báo cáo liệt kê từng lỗi kèm phần tử liên quan để lập trình viên tìm và sửa. Nên chạy cho nhiều loại trang như trang chủ, trang dịch vụ, bài viết và trang có biểu mẫu, vì mỗi loại có thể lỗi khác nhau.
Lighthouse còn có nhóm kiểm tra SEO cơ bản, nên muốn đi sâu thêm anh chị có thể tham khảo dịch vụ SEO tổng thể.
Điểm Số Cao Chưa Phải Bằng Chứng Đạt Chuẩn
Tài liệu của Chrome nêu rõ công cụ tự động chỉ phát hiện được một phần vấn đề, nên điểm 100 chỉ có nghĩa các kiểm tra tự động trong lần chạy đó đều qua. Chẳng hạn, công cụ khó nhận ra một menu chỉ mở khi rê chuột hoặc một ô không focus được bằng bàn phím. Vì vậy cần thêm các phép thử thủ công dưới đây.
Bốn Phép Thử Thủ Công Làm Được Trong Mười Phút
Chúng tôi gom các cách kiểm tra thủ công thành bốn phép thử mười phút: bàn phím, phóng to, nheo mắt và một tay. Mỗi phép thử không cần phần mềm đặc biệt, chỉ cần máy tính hoặc điện thoại đang dùng hằng ngày. Anh chị chạy lần lượt trên trang chủ và trang có form liên hệ, rồi ghi lại chỗ bị kẹt để đưa vào checklist.
Phép Thử Bàn Phím Chỉ Cần Phím Tab
Đặt chuột sang một bên, bấm Tab từ đầu trang rồi thử mở menu, điền form và đóng cửa sổ bật lên chỉ bằng phím. Nếu bị kẹt ở đâu đó mà không thoát ra được, đó là lỗi cần sửa. Phép thử này gồm hai điểm cần quan sát.
Tab Đi Hết Trang Mà Không Bị Kẹt
Mỗi lần bấm Tab, focus nên chuyển sang phần tử tương tác kế tiếp, và bấm Shift cùng Tab thì quay lại phần tử trước. Các cửa sổ bật lên như form nhận tin thường là nơi focus bị kẹt hoặc trôi ra phía sau cửa sổ. Nếu phải cầm chuột mới đóng được, người dùng bàn phím đang bị khóa ngoài.
Mọi Chức Năng Đều Dùng Được Bằng Phím
Thanh trượt ảnh, thẻ chuyển nội dung, lịch chọn ngày hay ô tìm kiếm cũng cần hoạt động bằng bàn phím. Với chức năng dựng bằng thư viện bên thứ ba, nên thử trước khi nghiệm thu vì thư viện không mặc định đã đạt. Ghi lại từng chức năng bị kẹt để đưa vào checklist cuối bài.
Phép Thử Phóng To 200% Và 400%
Bấm Ctrl cùng dấu cộng để phóng trang lên 200% rồi 400%, và xem nội dung còn đọc, còn bấm được hay không. WCAG yêu cầu chữ phóng được tới 200% mà không mất nội dung hay chức năng, và nội dung phải sắp xếp lại vừa chiều rộng tương đương 320 điểm ảnh CSS mà không phải cuộn ngang hai chiều. Hai điều này có tên là Resize Text và Reflow.
Chữ Phóng 200% Không Bị Cắt Hay Chồng
Khi chữ lớn lên, các khung có chiều cao cố định thường cắt mất dòng cuối hoặc đè lên khối bên cạnh. Nút có chữ cũng dễ bị cắt khi phóng. Đây là lỗi hay gặp ở giao diện dùng kích thước cố định thay vì đơn vị tương đối, như đã nói ở phần cỡ chữ.
Màn Hình 320 Pixel Không Cuộn Ngang
Mức phóng 400% trên cửa sổ rộng 1280 pixel tương đương chiều rộng 320 pixel của điện thoại nhỏ. Nếu phải kéo ngang để đọc từng dòng, người có thị lực yếu sẽ rất mệt. Thiết kế responsive làm đúng cách thường xử lý được điểm này.
Phép Thử Nheo Mắt Và Màn Hình Xám
Nheo mắt nhìn trang để xem chữ nào vẫn đọc được khi hình ảnh mờ đi, rồi bật chế độ thang xám của điện thoại để xem thông tin có mất đi khi không còn màu hay không. Nếu ô báo lỗi chỉ phân biệt bằng viền đỏ, người mù màu có thể không nhận ra. Màu nên đi kèm biểu tượng hoặc chữ giải thích.
Phép Thử Một Tay Trên Điện Thoại
Cầm điện thoại bằng một tay và thử gọi hotline, mở menu, điền form liên hệ chỉ bằng ngón cái. Nút quan trọng nên nằm trong vùng ngón cái với tới, đủ lớn và cách nhau đủ xa. Landing page của chiến dịch quảng cáo Facebook thường được mở trên điện thoại, nên phép thử này cần chạy cho đúng trang đích.
Trình Đọc Màn Hình Cho Thấy Website Qua Tai
Trình đọc màn hình biến nội dung trang thành giọng nói, và là cách trực tiếp nhất để hiểu người khiếm thị trải nghiệm website ra sao. NVDA miễn phí trên Windows, VoiceOver có sẵn trên máy Mac và iPhone, TalkBack có sẵn trên Android. Chỉ cần mười phút làm quen là anh chị đã nghe được những lỗi mà mắt thường không thấy.
Một bài thử cơ bản: bật trình đọc, tắt màn hình hoặc nhắm mắt, nghe danh sách heading, nghe cách đọc từng ảnh và từng nút, rồi thử điền form liên hệ. Nếu anh chị không hiểu trang nói gì khi chỉ nghe, người dùng thật cũng sẽ vậy. Vì mỗi trình đọc xử lý hơi khác nhau, website quan trọng nên được kiểm tra lại cùng chuyên gia. Nếu doanh nghiệp chưa có nhân sự phụ trách, dịch vụ chăm sóc website có thể chạy lại các phép thử này theo chu kỳ, áp dụng cho website do MIMA thiết kế vì MIMA chỉ nhận chăm sóc website do chính mình xây dựng.
Checklist 15 Tiêu Chí Và Kế Hoạch Cải Thiện
Checklist dưới đây gom mười lăm tiêu chí thành ba nhóm để anh chị tự chấm Đạt hoặc Chưa đạt cho từng trang quan trọng. Chúng tôi dựa trên các tiêu chí WCAG 2.x đã nêu ở trên, kèm mã tiêu chí để tra cứu. Sau khi chấm, hãy ưu tiên sửa nhóm lỗi phổ biến nhất trước: tương phản, alt và nhãn biểu mẫu.
Mười Lăm Tiêu Chí Chia Thành Ba Nhóm
Mỗi nhóm gồm năm tiêu chí, kèm cách tự kiểm tra ngắn gọn. Số trong ngoặc là mã tiêu chí WCAG để anh chị hoặc đơn vị thiết kế tra cứu thêm khi cần. Mục nào không có mã là khuyến nghị thực hành, không phải yêu cầu của WCAG.
Nhóm Màu Sắc Và Chữ Viết Gồm Năm Tiêu Chí
Nhóm này giúp người có thị lực yếu, người lớn tuổi và người dùng ngoài trời đọc được nội dung. Chỉ cần bộ chọn màu trong trình duyệt và thao tác phóng trang là kiểm tra được phần lớn. Anh chị chấm từng mục cho các trang quan trọng nhất.
- Chữ thường có tương phản tối thiểu 4,5:1 với nền, chữ lớn tối thiểu 3:1; đo bằng bộ chọn màu trong DevTools (1.4.3).
- Thông tin không chỉ dựa vào màu, ví dụ ô lỗi có cả biểu tượng và dòng chữ; kiểm tra bằng chế độ thang xám (1.4.1).
- Chữ phóng tới 200% không bị cắt hay chồng lên nhau (1.4.4).
- Nội dung vừa chiều rộng tương đương 320 điểm ảnh CSS mà không phải cuộn ngang hai chiều (1.4.10).
- Chữ nội dung đủ lớn, dòng đủ thoáng, không đặt chữ nhỏ đè lên ảnh nền (khuyến nghị thực hành).
Nhóm Hình Ảnh Và Nội Dung Gồm Năm Tiêu Chí
Nhóm này giúp trình đọc màn hình và công cụ tìm kiếm hiểu đúng nội dung từng trang. Việc kiểm tra chủ yếu là xem lại mã nguồn trang hoặc nghe bằng trình đọc màn hình. Nhóm này cũng gần với công việc viết bài chuẩn SEO.
- Ảnh mang thông tin có alt mô tả đúng nội dung; ảnh trang trí để alt rỗng (1.1.1).
- Chữ quan trọng như số điện thoại, giá hay điều kiện khuyến mãi không chỉ nằm trong ảnh (1.4.5).
- Mỗi trang có một H1 và heading đi theo thứ bậc; nghe danh sách heading bằng trình đọc màn hình để kiểm tra (1.3.1).
- Liên kết có tên rõ nghĩa, tránh lặp “xem thêm”, “tại đây” nhiều lần (2.4.4).
- Trang khai báo đúng ngôn ngữ tiếng Việt trong mã nguồn (3.1.1).
Nhóm Điều Hướng Và Biểu Mẫu Gồm Năm Tiêu Chí
Nhóm này giúp người dùng bàn phím, người run tay và người đọc chậm hoàn tất việc họ cần, như gọi điện, gửi form hay xem báo giá. Đây cũng là nhóm ảnh hưởng trực tiếp đến số yêu cầu liên hệ mà website nhận được. Nên chấm mục 14 cho form báo giá trước.
- Dùng bàn phím đi hết trang, mở và đóng được menu và cửa sổ bật lên, không bị kẹt (2.1.1, 2.1.2).
- Vòng focus nhìn rõ và không bị thanh dính hay chatbox che mất (2.4.7, 2.4.11).
- Nút và liên kết có vùng bấm tối thiểu 24×24 điểm ảnh CSS hoặc đủ khoảng cách với phần tử bên cạnh (2.5.8).
- Ô nhập có nhãn luôn hiển thị, lỗi nêu rõ ô nào sai và cách sửa, không bắt nhập lại thông tin đã cung cấp (3.3.2, 3.3.1, 3.3.7).
- Cách liên hệ hỗ trợ như hotline, chat hay form nằm cùng vị trí trên mọi trang (3.2.6).
Năm Sai Lầm Thường Gặp Khi Sửa Khả Năng Tiếp Cận
Phần lớn thất bại không đến từ thiếu thiện chí mà từ cách làm: sửa một lần rồi quên, hoặc tin công cụ làm thay. Dưới đây là năm sai lầm theo quan sát của chúng tôi, chia thành sai lầm về công cụ và sai lầm về phạm vi.
Thứ nhất, chỉ chạy công cụ tự động rồi dừng, trong khi công cụ chỉ bắt được một phần lỗi. Thứ hai, kỳ vọng một plugin hay đoạn mã cài một lần sẽ tự sửa mọi thứ, trong khi nhiều lỗi nằm ở bảng màu, bố cục và cách viết nội dung. Thứ ba, nhồi từ khóa vào alt để làm SEO, khiến trình đọc màn hình đọc một chuỗi vô nghĩa.
Thứ tư, chỉ sửa trang chủ trong khi trang dịch vụ, bài viết và form mới là nơi khách ra quyết định. Thứ năm, sửa xong không ai theo dõi, nên bài đăng mới lại phát sinh lỗi cũ.
Kế Hoạch Cải Thiện Khả Năng Tiếp Cận Trong 5 Ngày
Một tuần là đủ để chạy vòng kiểm tra đầu tiên và sửa những lỗi nhẹ việc nhất. Anh chị không cần làm lại website, chỉ cần thứ tự ưu tiên rõ ràng và một người chịu trách nhiệm theo dõi. Lịch năm việc dưới đây xếp từ dễ đến khó.
- Ngày 1: chạy Lighthouse cho năm trang quan trọng nhất và lưu lại kết quả.
- Ngày 2: làm bốn phép thử mười phút và ghi chỗ bị kẹt vào checklist 15 tiêu chí.
- Ngày 3: sửa lỗi tương phản, bổ sung alt cho ảnh ở các trang chủ lực và rà từng banner có chữ nằm trong ảnh.
- Ngày 4: kiểm tra form liên hệ về nhãn, thông báo lỗi và thao tác một tay; nếu doanh nghiệp có điểm bán, rà lại thông tin hiển thị trên hồ sơ Google Maps như giờ mở cửa, số điện thoại và các thuộc tính về lối vào nếu hồ sơ cho phép.
- Ngày 5: giao một người phụ trách, đưa checklist vào quy trình đăng bài và cham soc website hằng tháng, rồi hẹn kiểm tra lại sau một tháng.
Cần nhớ giới hạn: checklist và các phép thử này giúp phát hiện phần lớn lỗi phổ biến, nhưng không thay thế đánh giá chuyên sâu hay kiểm tra với người dùng thật, nhất là với website bán hàng hoặc có nhiều chức năng.
Khả Năng Tiếp Cận Giúp Website Phục Vụ Nhiều Khách Hơn
Trong khung tài sản số mà chúng tôi dùng, SEO, nội dung và Google Maps tích lũy theo thời gian, còn quảng cáo trả phí là chi phí không tích lũy. Một website mà người lớn tuổi, người dùng thiết bị hỗ trợ và người thao tác khó khăn đều dùng được có nhiều cơ hội giữ lại khách hơn từ cùng một lượng truy cập, nên mọi khoản đầu tư vào traffic ở phía trước đều có nền chắc hơn.
Anh chị cũng không cần làm lại toàn bộ thiết kế website: nhiều lỗi phổ biến thường xử lý được ngay trên giao diện hiện tại, và việc nào cần thiết kế lại sẽ được nói rõ từ đầu.
Với hơn 13 năm kinh nghiệm thực chiến của CEO Nguyễn Văn Đồng trong thiết kế web và giải cứu website, chúng tôi nhận buổi trao đổi 15 phút để đối chiếu website của anh chị với checklist 15 tiêu chí. Anh chị chỉ cần mang tên miền website, hai đến ba trang quan trọng nhất và vài cụm từ khách hay gõ trên Google; chúng tôi sẽ chỉ ra đúng phần đang thiếu, không chào bán thứ anh chị chưa cần. Liên hệ Phòng Kinh Doanh 0902 968 736, hotline 0909 035 333 hoặc qua trang liên hệ.
Nếu muốn đọc tiếp, chúng tôi gợi ý ba chủ đề liên quan: Technical SEO cho người mới, vì nhiều lỗi tiếp cận trùng với lỗi kỹ thuật SEO; cách kiểm tra website đã được Google lập chỉ mục bằng site: và Search Console, vì trang chưa được lập chỉ mục thì không có lượt truy cập nào để bảo vệ; và cách viết alt cùng tên tệp ảnh chuẩn SEO, vì đây là lỗi nhẹ việc nhất trong checklist. [CẦN BỔ SUNG: URL ba bài này khi khu kiến thức được xuất bản]. Thông tin về dịch vụ và dự án của MIMA có tại trang chủ MIMA.
CÔNG TY TNHH THƯƠNG MẠI DỊCH VỤ MIMA
- MST/GPDKKD: 0318672839
- Địa chỉ: 31/3b Ấp 10, Xã Đông Thạnh, TP Hồ Chí Minh, Việt Nam
- Hotline: 0909 035 333
- Email: info@mimadigi.com
- Website: https://mimadigi.com
