Lộ trình Kỹ sư QA (Tester) – Công cụ Kiểm thử Trợ năng: Axe, Wave, Lighthouse

Chào mừng bạn quay trở lại với series “Lộ trình Kỹ sư QA (Tester)”. Nếu bạn đã đi cùng chúng tôi qua các bài viết về Đảm bảo Chất lượng là gì, phát triển tư duy kiểm thử, hay các mô hình phát triển phần mềm và kỹ thuật kiểm thử thủ công, thì hôm nay chúng ta sẽ chạm đến một khía cạnh cực kỳ quan trọng của chất lượng phần mềm: Trợ năng (Accessibility).

Kiểm thử trợ năng không chỉ là tuân thủ quy định; đó là việc đảm bảo rằng mọi người, bất kể khả năng hay hoàn cảnh nào (như người khiếm thị, người dùng bàn phím, người có khó khăn về nhận thức…), đều có thể truy cập và sử dụng sản phẩm phần mềm của bạn một cách dễ dàng và hiệu quả. Với tư cách là một QA, đảm bảo tính trợ năng là trách nhiệm cốt lõa, góp phần tạo nên những sản phẩm toàn diện và nhân văn hơn.

Trong bài viết này, chúng ta sẽ tìm hiểu về ba công cụ phổ biến và mạnh mẽ giúp bạn bắt đầu hành trình kiểm thử trợ năng tự động: Axe, Wave và Lighthouse. Chúng là những trợ thủ đắc lực, nhưng hãy nhớ rằng chúng chỉ là *công cụ*. Sự hiểu biết về nguyên tắc trợ năng (như WCAG) và kiểm thử thủ công vẫn là không thể thiếu, như chúng ta đã đề cập sơ qua trong bài viết về Kiểm thử Trợ năng cho các Ứng dụng Toàn diện.

Tại sao Kiểm thử Trợ năng Quan trọng Đối với QA?

Kiểm thử trợ năng vượt xa việc chỉ tìm lỗi hiển thị hay lỗi chức năng thông thường. Nó liên quan đến trải nghiệm của một nhóm người dùng có thể bị bỏ quên nếu không được chú trọng. Đối với một Kỹ sư QA, hiểu và thực hiện kiểm thử trợ năng mang lại nhiều lợi ích:

• Mở rộng phạm vi người dùng: Đảm bảo sản phẩm có thể tiếp cận bởi người khuyết tật, người già, hoặc những người trong tình huống tạm thời bị hạn chế (ví dụ: tay bị thương, sử dụng thiết bị cũ). Điều này mở rộng đáng kể thị trường tiềm năng.
• Tuân thủ pháp lý và tiêu chuẩn: Nhiều quốc gia và ngành công nghiệp có quy định pháp luật yêu cầu các sản phẩm kỹ thuật số phải tuân thủ các tiêu chuẩn trợ năng nhất định (ví dụ: Mục 508 ở Mỹ, WCAG toàn cầu). Vi phạm có thể dẫn đến kiện tụng và phạt nặng.
• Cải thiện SEO và hiệu suất: Nhiều thực hành tốt về trợ năng (như cấu trúc ngữ nghĩa HTML, văn bản thay thế cho hình ảnh, cấu trúc tiêu đề hợp lý) cũng góp phần cải thiện tối ưu hóa công cụ tìm kiếm (SEO) và hiệu suất tải trang.
• Nâng cao trải nghiệm người dùng tổng thể: Các cải tiến về trợ năng thường mang lại lợi ích cho tất cả người dùng, không chỉ người khuyết tật. Ví dụ: phụ đề video hữu ích cho người xem trong môi trường ồn ào, điều hướng bằng bàn phím hiệu quả hơn cho người dùng thành thạo.
• Giảm chi phí sửa lỗi về sau: Phát hiện và sửa các vấn đề trợ năng sớm trong vòng đời phát triển phần mềm (SDLC) sẽ ít tốn kém hơn nhiều so với việc sửa chúng sau khi sản phẩm đã ra mắt. Điều này phù hợp với triết lý Đảm bảo Chất lượng – tập trung vào phòng ngừa.

Như bạn thấy, kiểm thử trợ năng không phải là “việc thêm” mà là một phần không thể thiếu của kiểm thử phi chức năng, góp phần vào chất lượng tổng thể của sản phẩm.

Axe: Trọng tâm Tự động hóa Đáng tin cậy

Axe (phát âm là “ax”) là một công cụ kiểm thử trợ năng tự động được phát triển bởi Deque Systems. Điểm mạnh lớn nhất của Axe là bộ quy tắc kiểm tra đáng tin cậy, tập trung vào việc tìm ra các vấn đề trợ năng có thể được phát hiện một cách chắc chắn bởi máy móc. Điều này giúp giảm thiểu báo cáo sai (false positives).

Axe Hoạt động như thế nào?

Axe phân tích mã nguồn (HTML, CSS, JavaScript) và cây trợ năng (accessibility tree) của trang web để tìm các vi phạm các tiêu chuẩn trợ năng đã biết (chủ yếu là WCAG). Nó có thể phát hiện các vấn đề như:

• Thiếu văn bản thay thế (alt text) cho hình ảnh.
• Màu sắc có độ tương phản thấp.
• Các phần tử form không có nhãn (label).
• Các lỗi cấu trúc ngữ nghĩa cơ bản của HTML.
• Thiếu thuộc tính WAI-ARIA hoặc sử dụng sai.

Các hình thức sử dụng Axe phổ biến:

1. Axe DevTools Browser Extension: Đây là cách dễ nhất để bắt đầu. Bạn có thể cài đặt extension này cho Chrome, Firefox, Edge. Sau khi cài đặt, mở Developer Tools của trình duyệt (thường bằng F12), bạn sẽ thấy một tab “Axe DevTools”. Chỉ cần nhấp vào đó và chạy phân tích trên trang hiện tại.
2. Axe-core library: Đây là lõi của Axe, có thể nhúng vào các framework kiểm thử tự động như Selenium, Cypress, Playwright, Jest… Điều này cho phép bạn tích hợp kiểm thử trợ năng vào quy trình Tích hợp Liên tục (CI) và chạy các bài kiểm thử tự động trên nhiều trang hoặc các kịch bản người dùng phức tạp.
3. Axe-cli: Công cụ dòng lệnh để chạy kiểm thử Axe trên các URL hoặc các tệp cục bộ.

Ví dụ sử dụng Axe DevTools Extension:

Giả sử bạn đang kiểm thử một trang web. Bạn mở DevTools (F12), chọn tab Axe DevTools. Giao diện sẽ hiển thị nút để chạy phân tích.

// Các bước cơ bản khi dùng Axe DevTools Extension:
1. Mở trang web cần kiểm thử trong trình duyệt (Chrome/Firefox/Edge).
2. Mở Công cụ dành cho nhà phát triển (Developer Tools) - thường nhấn F12.
3. Chọn tab "Axe DevTools".
4. Nhấp vào nút "Analyze" hoặc "Scan ALL of my page".
5. Xem kết quả báo cáo các lỗi và cảnh báo.

Kết quả sẽ hiển thị danh sách các vấn đề được tìm thấy, phân loại theo mức độ nghiêm trọng (Critical, Serious, Moderate, Minor) và cung cấp thông tin chi tiết về lỗi, phần tử bị ảnh hưởng, và gợi ý cách sửa lỗi (thường kèm theo link đến tài liệu giải thích).

// Ví dụ về cấu trúc báo cáo lỗi từ Axe (phiên bản đơn giản):
Issues found: 5

Critical:
  1. All page content must be contained by landmarks or other content or structural groupings.
     - Element: <body>
     - How to fix: Ensure that all of the content on the page is contained within a <main> or <article> element, or other landmark or structural grouping.

Serious:
  1. Images must have alternate text.
     - Element: <img src="logo.png">
     - How to fix: Provide alternative text for the image.

Ưu điểm của Axe:

• Độ chính xác cao: Ít báo cáo sai, giúp bạn tin tưởng vào kết quả.
• Tích hợp tốt với tự động hóa: Thư viện axe-core là tiêu chuẩn vàng cho kiểm thử trợ năng tự động trong CI/CD.
• Tài liệu chi tiết: Cung cấp thông tin đầy đủ về lỗi và cách khắc phục.
• Hỗ trợ cộng đồng mạnh mẽ: Là công cụ được sử dụng rộng rãi.

Nhược điểm của Axe:

• Chỉ phát hiện các lỗi tự động: Không thể kiểm tra tất cả các tiêu chí WCAG. Ví dụ: nó không thể kiểm tra xem văn bản thay thế có *phù hợp* hay không, hoặc thứ tự điều hướng bằng bàn phím có *logic* hay không.
• Giao diện extension hơi kỹ thuật: Có thể hơi khó hiểu với người mới bắt đầu hoàn toàn nếu không quen với DevTools.

Axe là công cụ “phải có” trong bộ công cụ của QA hiện đại, đặc biệt khi bạn bắt đầu với kiểm thử tự động hoặc muốn tích hợp kiểm thử trợ năng vào quy trình DevOps.

Wave: Trợ thủ Đắc lực cho Kiểm thử Trợ năng Thủ công

Wave (Web Accessibility Evaluation Tool) là một công cụ miễn phí được cung cấp bởi WebAIM (Web Accessibility in Mind). Không giống như Axe thiên về báo cáo kỹ thuật, Wave excels ở khả năng hiển thị trực quan các vấn đề trợ năng ngay trên trang web.

Wave Hoạt động như thế nào?

Wave phân tích trang web và sau đó chèn các biểu tượng, chỉ báo trực quan trực tiếp lên bản render của trang. Các biểu tượng này chỉ ra các lỗi (Errors), cảnh báo (Alerts), các tính năng trợ năng (Features), các yếu tố cấu trúc (Structural Elements), và các vùng ARIA (ARIA regions).

Các hình thức sử dụng Wave phổ biến:

1. Wave Web Tool: Truy cập trang web webaim.org/analyzer/. Nhập URL của trang bạn muốn kiểm tra và nhấn Enter. Kết quả sẽ được hiển thị ngay trên trang đó.
2. Wave Browser Extension: Cài đặt extension cho Chrome, Firefox, Edge. Sau khi cài đặt, chỉ cần nhấp vào biểu tượng Wave trên thanh công cụ trình duyệt khi đang ở trang web muốn kiểm tra. Giao diện Wave sẽ phủ lên trang đó.

Ví dụ sử dụng Wave Browser Extension:

Khi bạn kích hoạt Wave extension trên một trang, trang đó sẽ được phủ lên bởi rất nhiều biểu tượng và đường viền màu sắc.

// Các bước cơ bản khi dùng Wave Browser Extension:
1. Mở trang web cần kiểm thử.
2. Nhấp vào biểu tượng Wave trên thanh công cụ trình duyệt.
3. Xem các biểu tượng và chỉ báo trực quan xuất hiện trên trang.
4. Sử dụng các tab ở bảng điều khiển bên trái (Details, Documentation, Structure, v.v.) để xem thông tin chi tiết.

Các biểu tượng Wave giúp bạn nhanh chóng nhận diện các vấn đề như:

• Hình ảnh thiếu alt text (biểu tượng hình ảnh với dấu chấm than đỏ).
• Độ tương phản thấp (biểu tượng hình tròn nửa đen nửa trắng với dấu chấm than).
• Thiếu nhãn form (biểu tượng form với dấu chấm than).
• Các vùng tiêu đề (heading structure – được đánh dấu bằng H1, H2,…).
• Cấu trúc danh sách (list structure).
• Các vùng quan trọng của trang (landmarks).

Bảng điều khiển bên trái cung cấp danh sách tổng hợp các lỗi, cảnh báo, và các mục khác. Bạn có thể nhấp vào từng mục trong danh sách để xem nó được đánh dấu ở đâu trên trang.

// Ví dụ các loại chỉ báo trong Wave:
<img src="icon_error.gif" alt="Error"> Lỗi (Ví dụ: thiếu alt text, link rỗng)
<img src="icon_alert.gif" alt="Alert"> Cảnh báo (Ví dụ: alt text dài, link đáng ngờ)
<img src="icon_feature.gif" alt="Feature"> Tính năng (Ví dụ: alt text, label form)
<img src="icon_structure.gif" alt="Structure"> Cấu trúc (Ví dụ: heading, list, landmark)

Ưu điểm của Wave:

• Trực quan cao: Dễ dàng thấy vấn đề nằm ở đâu trên layout trang. Rất hữu ích cho kiểm thử thủ công và khám phá.
• Phân loại rõ ràng: Phân biệt giữa lỗi (cần sửa) và cảnh báo (cần xem xét).
• Hiển thị cấu trúc trang: Giúp hiểu được cấu trúc tiêu đề, danh sách, và landmark – các yếu tố quan trọng cho người dùng công nghệ hỗ trợ.
• Miễn phí và dễ sử dụng.

Nhược điểm của Wave:

• Ít phù hợp với tự động hóa: Wave được thiết kế chủ yếu cho kiểm thử thủ công trên trình duyệt.
• Có thể gây “choáng ngợp” với nhiều biểu tượng: Trên các trang phức tạp, màn hình có thể bị phủ đầy biểu tượng.
• Như Axe, không thể phát hiện mọi vấn đề: Vẫn cần kiểm thử thủ công và hiểu biết về WCAG.

Wave là một công cụ tuyệt vời cho QA khi thực hiện kiểm thử trợ năng thủ công, giúp nhanh chóng xác định các vấn đề hiển thị và cấu trúc.

Lighthouse: Báo cáo Toàn diện trong Chrome DevTools

Lighthouse là một công cụ mã nguồn mở, tự động được phát triển bởi Google. Nó không chỉ kiểm thử trợ năng mà còn đánh giá hiệu suất, SEO, các ứng dụng web lũy tiến (PWA) và các thực hành tốt nhất (best practices). Lighthouse được tích hợp sẵn trong Chrome DevTools, giúp nó dễ dàng truy cập cho bất kỳ ai sử dụng Chrome.

Lighthouse Hoạt động như thế nào?

Khi bạn chạy Lighthouse trên một trang, nó thực hiện một loạt các kiểm tra (audits) trên trang đó trong môi trường mô phỏng (thường là thiết bị di động với mạng chậm). Sau khi chạy các kiểm tra, nó tạo ra một báo cáo chi tiết với điểm số cho từng danh mục (Performance, Accessibility, Best Practices, SEO, PWA) và danh sách các kiểm tra đã vượt qua hoặc thất bại.

Cách sử dụng Lighthouse:

1. Trong Chrome DevTools: Mở trang web trong Chrome, mở Developer Tools (F12), chọn tab “Lighthouse”. Chọn các danh mục muốn kiểm tra (đảm bảo chọn “Accessibility”), loại thiết bị (Mobile/Desktop) và mô phỏng mạng nếu cần. Nhấp “Analyze page load”.
2. Lighthouse CLI: Công cụ dòng lệnh cho phép chạy Lighthouse từ terminal và tích hợp vào quy trình CI/CD.

Ví dụ sử dụng Lighthouse trong Chrome DevTools:

Sau khi chạy phân tích, Lighthouse sẽ trình bày một báo cáo với các điểm số và danh sách chi tiết các mục kiểm tra.

// Các bước cơ bản khi dùng Lighthouse trong Chrome DevTools:
1. Mở trang web trong Chrome.
2. Mở Công cụ dành cho nhà phát triển (Developer Tools) - F12.
3. Chọn tab "Lighthouse".
4. Trong phần "Categories", chọn ít nhất "Accessibility". Bạn có thể chọn thêm các mục khác.
5. Chọn "Device" (Mobile hoặc Desktop).
6. Nhấp vào nút "Analyze page load".
7. Đợi vài giây để Lighthouse chạy các kiểm tra và tạo báo cáo.

Trong báo cáo Lighthouse, bạn sẽ thấy một điểm số (trên 100) cho Trợ năng, cùng với danh sách các kiểm tra đã được thực hiện:

• Passed audits: Các mục đã vượt qua.
• Failed audits: Các mục cần được sửa chữa. Lighthouse hiển thị chi tiết lỗi, phần tử bị ảnh hưởng và link “Learn more” giải thích vấn đề và cách khắc phục.
• Audits to manually check: Đây là danh sách các kiểm tra mà Lighthouse không thể tự động xác định được và đề xuất bạn kiểm tra thủ công (ví dụ: thứ tự các phần tử theo DOM có logic không, nội dung link có mô tả không).

// Ví dụ về một phần báo cáo Accessibility trong Lighthouse:
Accessibility: 85/100

<span style="color: green;">&#x2713; Passed audits (40)</span>
  [List of checks passed, e.g., has a <title>, has a viewport meta tag...]

<span style="color: red;">&#x2717; Failed audits (5)</span>
  [List of checks failed, e.g., Buttons do not have an accessible name]
    - Element: <button> <img src="search.png"> </button>
    - Learn more: https://web.dev/button-name

Manual checks to consider (8)
  [List of items to check manually, e.g., The page contains content that is larger than the viewport]
    - Learn more: https://web.dev/manual-a11y

Ưu điểm của Lighthouse:

• Công cụ đa năng: Cung cấp cái nhìn tổng quan về nhiều khía cạnh quan trọng của trang web, không chỉ trợ năng.
• Tích hợp sẵn trong Chrome: Dễ dàng truy cập mà không cần cài đặt thêm.
• Báo cáo chi tiết và có cấu trúc: Điểm số rõ ràng và danh sách các mục cần chú ý, kèm theo tài liệu hướng dẫn.
• Có thể chạy từ CLI: Phù hợp cho tự động hóa và giám sát định kỳ.

Nhược điểm của Lighthouse:

• Chỉ là ảnh chụp nhanh (snapshot): Báo cáo dựa trên trạng thái ban đầu của trang khi tải. Không kiểm tra được các vấn đề trợ năng xuất hiện sau các tương tác phức tạp của người dùng (ví dụ: mở modal, thông báo lỗi dynamic).
• Bộ kiểm tra trợ năng ít toàn diện hơn Axe: Mặc dù tốt, nhưng bộ quy tắc tự động của Lighthouse có thể không bao quát bằng Axe.
• Mô phỏng môi trường có thể không chính xác 100% với người dùng thực.

Lighthouse là một công cụ khởi đầu tuyệt vời để có cái nhìn tổng quan về hiệu suất và trợ năng của trang, đặc biệt hữu ích cho việc kiểm tra định kỳ hoặc khi bạn mới bắt đầu đánh giá một trang web.

So sánh và Kết hợp Axe, Wave, Lighthouse

Mỗi công cụ này có những điểm mạnh và điểm yếu riêng. Quan trọng là hiểu khi nào nên sử dụng công cụ nào hoặc làm thế nào để kết hợp chúng.

Dưới đây là bảng so sánh nhanh:

Sử dụng kết hợp: Cách tốt nhất là sử dụng cả ba công cụ này như các lớp kiểm tra khác nhau:

1. Sử dụng Lighthouse để có cái nhìn tổng quan ban đầu về trạng thái trợ năng cùng với hiệu suất và các chỉ số khác.
2. Sử dụng Axe DevTools Extension khi kiểm thử thủ công để chạy các kiểm tra tự động đáng tin cậy trên các trang hoặc các trạng thái cụ thể của ứng dụng.
3. Sử dụng Wave Extension để trực quan hóa các vấn đề ngay trên giao diện, giúp bạn dễ dàng xác định vị trí và hiểu cấu trúc của trang.
4. Tích hợp Axe-core vào các bài kiểm thử tự động (ví dụ: Cypress, Playwright) để đảm bảo các vấn đề trợ năng cơ bản được phát hiện ngay trong quá trình phát triển và trong pipeline CI/CD.

Hãy nhớ rằng, các công cụ tự động chỉ có thể phát hiện khoảng 30-50% các vấn đề trợ năng theo WCAG. Phần còn lại đòi hỏi kiểm thử thủ công, bao gồm:

• Kiểm thử chỉ bằng bàn phím.
• Kiểm thử với trình đọc màn hình (screen reader) như NVDA, JAWS, VoiceOver.
• Kiểm thử với tính năng phóng to màn hình.
• Kiểm thử với người dùng thực tế.

Các công cụ Axe, Wave, Lighthouse là điểm khởi đầu tuyệt vời và là công cụ hiệu quả để bắt các lỗi phổ biến một cách nhanh chóng, giải phóng thời gian của bạn để tập trung vào các khía cạnh kiểm thử trợ năng thủ công phức tạp hơn.

Tích hợp Kiểm thử Trợ năng vào Lộ trình QA của Bạn

Việc học và áp dụng kiểm thử trợ năng là một bước tiến quan trọng trong sự nghiệp của một Kỹ sư QA. Đừng coi nó như một nhiệm vụ phụ, mà hãy coi nó là một phần không thể thiếu trong quy trình làm việc của bạn.

• Trong lập kế hoạch kiểm thử: Đưa các mục kiểm thử trợ năng vào ngay từ đầu.
• Trong quá trình thực hiện kiểm thử thủ công: Sử dụng Axe và Wave để kiểm tra nhanh các trang.
• Khi thực hiện kiểm thử tự động: Tích hợp Axe-core vào bộ test tự động của bạn.
• Khi báo cáo lỗi: Cung cấp thông tin chi tiết về lỗi trợ năng, mức độ ảnh hưởng, và link đến tài liệu giải thích (các công cụ thường cung cấp sẵn).

Việc nắm vững các công cụ và nguyên tắc kiểm thử trợ năng không chỉ giúp bạn tìm được nhiều lỗi quan trọng hơn mà còn biến bạn thành một người ủng hộ mạnh mẽ cho người dùng trong đội ngũ phát triển. Điều này nâng cao giá trị của bạn với tư cách là một QA chuyên nghiệp.

Kết luận

Trên lộ trình trở thành Kỹ sư QA (Tester) giỏi, việc hiểu và thực hành kiểm thử trợ năng là điều không thể thiếu. Axe, Wave, và Lighthouse là ba công cụ mạnh mẽ và dễ tiếp cận giúp bạn bắt đầu hành trình này. Chúng cung cấp khả năng kiểm tra tự động hiệu quả và hỗ trợ trực quan tuyệt vời.

Hãy bắt đầu bằng cách cài đặt các extension và thử nghiệm trên các trang web khác nhau, bao gồm cả sản phẩm bạn đang làm việc. Dần dần, tìm hiểu sâu hơn về các nguyên tắc WCAG và cách kiểm thử thủ công với công nghệ hỗ trợ.

Kiểm thử trợ năng không chỉ là về việc tuân thủ các quy tắc; đó là về việc tạo ra những sản phẩm kỹ thuật số có thể phục vụ *tất cả* mọi người. Với các công cụ phù hợp và tư duy đúng đắn, bạn, với vai trò là một Kỹ sư QA, đóng vai trò quan trọng trong việc xây dựng một thế giới kỹ thuật số hòa nhập hơn.

Hẹn gặp lại bạn trong các bài viết tiếp theo của series Lộ trình Kỹ sư QA!