Nghiên Cứu Công Cụ Kiểm Thử Khả Năng Truy Cập Nội Dung Web Và Áp Dụng Để Đánh Giá Một Số Trang Web Phổ Biến Của Việt Nam

ĐẠI HỌC QUỐC GIA HÀ NỘI

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ

LÃ THỊ THANH NGA

NGHIÊN CỨU CÔNG CỤ KIỂM THỬ

KHẢ NĂNG TRUY CẬP NỘI DUNG WEB VÀ ÁP DỤNG ĐỂ ĐÁNH GIÁ

MỘT SỐ TRANG WEB PHỔ BIẾN CỦA VIỆT NAM

LUẬN VĂN THẠC SĨ CÔNG NGHỆ THÔNG TIN

NGƯỜI HƯỚNG DẪN KHOA HỌC: PGS.TS TRƯƠNG ANH HOÀNG

Hà Nội 2021

ĐẠI HỌC QUỐC GIA HÀ NỘI

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ

LÃ THỊ THANH NGA

NGHIÊN CỨU CÔNG CỤ KIỂM THỬ

KHẢ NĂNG TRUY CẬP NỘI DUNG WEB VÀ ÁP DỤNG ĐỂ ĐÁNH GIÁ

MỘT SỐ TRANG WEB PHỔ BIẾN CỦA VIỆT NAM

NGÀNH: HỆ THỐNG THÔNG TIN

CHUYÊN NGÀNH: HỆ THỐNG THÔNG TIN

MÃ SỐ: 8480104.1

LUẬN VĂN THẠC SĨ CÔNG NGHỆ THÔNG TIN

NGƯỜI HƯỚNG DẪN KHOA HỌC: PGS.TS. TRƯƠNG ANH HOÀNG

Hà Nội 2021

i

LỜI CẢM ƠN

Trước tiên tôi xin gửi lời cảm ơn chân thành và sâu sắc đến thầy giáo PGS.TS

Trương Anh Hoàng - người đã trực tiếp hướng dẫn, khuyến khích, chỉ bảo và đóng

góp những ý kiến quý báu trong suốt quá trình tôi học tập, nghiên cứu cũng như từ khi

tôi bắt đầu nghiên cứu đề tài đến khi hoàn thành luận văn này.

Tôi xin chân thành cảm ơn các thầy cô giáo khoa Công nghệ thông tin, trường

Đại Học Công Nghệ - Đại Học Quốc Gia Hà Nội đã tận tình đào tạo, cung cấp cho tôi

những kiến thức vô cùng quý giá, đã tạo điều kiện tốt nhất cho tôi trong suốt quá trình

học tập, nghiên cứu tại trường.

Cuối cùng, tôi xin chân thành cảm ơn những người thân trong gia đình cùng

toàn thể bạn bè, đồng nghiệp đã luôn giúp đỡ, động viên tôi trong những lúc gặp phải

khó khăn trong việc học tập và nghiên cứu.

Hà Nội, Ngày tháng năm 2021

Học viên

Lã Thị Thanh Nga

ii

LỜI CAM ĐOAN

Em xin cam đoan nội dung trình bày trong luận văn này là do em tự nghiên

cứu tìm hiểu dưới sự hướng dẫn của thầy giáo PGS.TS Trương Anh Hoàng. Mọi

tham khảo các tài liệu, công trình nghiên cứu của một số tác giả, em đã ghi rõ tên tài

liệu, nguồn gốc tài liệu, tên tác giả trong “DANH MỤC TÀI LIỆU THAM KHẢO” ở

cuối luận văn. Mọi sao chép không hợp lệ hay gian lận em xin hoàn toàn chịu trách

nhiệm.

Hà Nội, Ngày tháng năm 2021

Người cam đoan

Lã Thị Thanh Nga

iii

MỤC LỤC

LỜI CẢM ƠN ................................................................................................................................i

LỜI CAM ĐOAN.........................................................................................................................ii

DANH MỤC THUẬT NGỮ VIẾT TẮT ..................................................................................v

DANH MỤC BẢNG................................................................................................................... vi

DANH MỤC HÌNH VẼ, ĐỒ THỊ.............................................................................................vii

MỞ ĐẦU .......................................................................................................................................1

Chương 1: Một số kiến thức nền tảng .........................................................................................3

1.1 Khả năng truy cập web (Web Accessibility)............................................................3

1.2 Các dạng khuyết tật ảnh hưởng đến Web Accessibility ...........................................3

1.3 Tầm quan trọng của Web Accessibility....................................................................4

1.4 Kiểm thử khả năng truy cập web (Web Accessibility Testing)................................5

1.5 Bộ chỉ dẫn về khả năng truy cập nội dung web (WCAG)........................................6

1.6 Các nguyên tắc của WCAG 2.1................................................................................6

1.6.1 Nguyên tắc “Có thể nhận biết được” (Perceivable)...............................................6

1.6.2 Nguyên tắc “Có thể hoạt động được” (Operable)..................................................7

1.6.3 Nguyên tắc “Có thể hiểu được” (Understandable)................................................7

1.6.4 Nguyên tắc “Mạnh mẽ” (Robust) ..........................................................................7

1.7 Các cấp độ.................................................................................................................7

1.8 Các tiêu chuẩn theo cấp độ A của từng nguyên tắc..................................................8

1.8.1 Các tiêu chuẩn theo nguyên tắc Perceivable .........................................................8

1.8.2 Các tiêu chuẩn theo nguyên tắc Operable ............................................................10

1.8.3 Các tiêu chuẩn theo nguyên tắc Understandable ..................................................13

1.8.4 Các tiêu chuẩn theo nguyên tắc Robust................................................................14

Chương 2: Nghiên cứu các công cụ đánh giá khả năng truy cập web ....................................16

2.1 Khảo sát sơ bộ các công cụ......................................................................................16

2.2 Giới thiệu về các công cụ ........................................................................................21

2.2.1 Accessibility Insights for Web..............................................................................21

2.2.2 Lighthouse ............................................................................................................22

2.2.3WAVE Web Accessibility Evaluation Tool..........................................................24

2.2.4 TAW .....................................................................................................................26

2.2.5AChecker...............................................................................................................27

2.3 Kiểm tra tính hiệu quả của các công cụ...................................................................29

2.3.1 Kiểm tra một trang web tự xây dựng với các ca kiểm thử đề xuất.......................29

2.3.2 Kiểm thử một trang web đạt chuẩn WCAG 2.1 mức độ A ..................................64

2.3.3 Tổng hợp, đánh giá ...............................................................................................70

Chương 3: Kiểm thử khả năng truy cập nội dung web cho một số trang web của

Việt Nam................................................................ Error! Bookmark not defined.

iv

3.1 Các website tin tức...................................................................................................76

3.2 Các website giáo dục, y tế .......................................................................................78

3.3 Các website thương mại điện tử ..............................................................................80

3.4 Đánh giá chung về kết quả kiểm thử .......................................................................82

KẾT LUẬN ..................................................................................................................................83

Tài liệu tham khảo........................................................................................................................85

v

DANH MỤC THUẬT NGỮ VIẾT TẮT

STT Từ viết tắt Tiếng Anh Tiếng Việt

1 W3C World Wide Web Consortium

2 WCAG

Web Content Accessibility

Guidelines

3 WAI Web Accessibility Initiative Sáng kiến hỗ trợ truy cập web

4 ARIA

Accessible Rich Internet

Applications

5 HTML Hyper Text Markup Language

Ngôn ngữ đánh dấu siêu văn

bản

6 F Fail Thất Bại

7 P Pass Thành Công

8 Y Yes Có

9 N No Không

vi

DANH MỤC BẢNG

Bảng 1-1 Các tiêu chuẩn cấp độ A theo các nguyên tắc, chỉ dẫn 8

Bảng 2-1 Khảo sát sơ bộ các công cụ đánh giá khả năng truy cập web 17

Bảng 2-2 Ưu / nhược điểm của các công cụ 28

Bảng 3-1 Các ca kiểm thử thuộc tiêu chuẩn 1.1.1 31

Bảng 3-2 Các ca kiểm thử thuộc tiêu chuẩn 1.2.2 36

Bảng 3-3 Các ca kiểm thử thuộc tiêu chuẩn 1.3.1 38

Bảng 3-4 Các ca kiểm thử thuộc tiêu chuẩn 1.4.2 39

Bảng 3-5 Các ca kiểm thử thuộc tiêu chuẩn 2.1.1 43

Bảng 3-6 Các ca kiểm thử thuộc tiêu chuẩn 2.2.1 43

Bảng 3-7 Các ca kiểm thử thuộc tiêu chuẩn 2.2.2 44

Bảng 3-8 Các ca kiểm thử thuộc tiêu chuẩn 2.4.1 46

Bảng 3-9 Các ca kiểm thử thuộc tiêu chuẩn 2.4.2 46

Bảng 3-10 Các ca kiểm thử thuộc tiêu chuẩn 2.4.4 47

Bảng 3-11 Các ca kiểm thử thuộc tiêu chuẩn 3.1.1 51

Bảng 3-12 Các ca kiểm thử thuộc tiêu chuẩn 3.2.2 52

Bảng 3-13 Các ca kiểm thử thuộc tiêu chuẩn 3.3.2 54

Bảng 3-14 Các ca kiểm thử thuộc tiêu chuẩn 4.1.1 57

Bảng 3-15 Các ca kiểm thử thuộc tiêu chuẩn 4.1.2 58

Bảng 3-16 Kết quả kiểm thử của các công cụ với các ca kiểm thử đề xuất 62

Bảng 3-17 Các lỗi TAW phát hiện với trang web đạt chuẩn 66

Bảng 3-18 Các lỗi AChecker phát hiện với trang web đạt chuẩn 69

Bảng 3-19 Tỉ lệ phát hiện đúng/sai của các công cụ 70

Bảng 3-20 Danh sách các trang web được đánh giá 75

Bảng 3-21 Số lỗi phân bố theo tiêu chuẩn của các trang báo điện tử 77

Bảng 3-22 Số lỗi phân bố theo tiêu chuẩn của các trang giáo dục, y tế 79

Bảng 3-23 Số lỗi phân bố theo tiêu chuẩn của các trang thương mại điện tử 81

vii

DANH MỤC HÌNH VẼ, ĐỒ THỊ

Hình 1-1 Các dạng khuyết tật...............................................................................3

Hình 2-1 Accessibility Insights for Web............................................................22

Hình 2-2 Lighthouse...........................................................................................23

Hình 2-3 WAVE Evaluation Tool......................................................................25

Hình 2-4 TAW....................................................................................................26

Hình 2-5 AChecker.............................................................................................27

Hình 3-1 Thiết lập trang web với các ca kiểm thử.............................................30

Hình 3-2 Kết quả kiểm thử của Accessibility Insights for Web ........................64

Hình 3-3 Kết quả kiểm thử của Lighthouse .......................................................65

Hình 3-4 Kết quả kiểm thử của WAVE .............................................................65

Hình 3-5 Kết quả kiểm thử của TAW ................................................................66

Hình 3-6 Lỗi “Non-text Content” của TAW không hợp lệ................................67

Hình 3-7 Lỗi Info and Relationships không hợp lệ............................................67

Hình 3-8 Lỗi “On Input” của TAW không hợp lệ .............................................67

Hình 3-9 Lỗi “Labels or Instructions” của TAW không hợp lệ.........................67

Hình 3-10 Lỗi Attribute của TAW không hợp lệ...............................................68

Hình 3-11 Lỗi “Stray end tag head” không hợp lệ.............................................68

Hình 3-12 Lỗi thiếu nhãn của TAW nhưng iframe có thuộc tính ẩn .................68

Hình 3-13 Lỗi thiếu nhãn của TAW nhưng iframe nằm trong form ẩn .............68

Hình 3-14 Kết quả kiểm thử của AChecker.......................................................69

Hình 3-15 Lỗi “Non-text Content” của AChecker không hợp lệ - 1 .................70

Hình 3-16 Lỗi “Non-text Content” của AChecker không hợp lệ - 2 .................70

Hình 3-17 Lỗi “Info and Relationships” của AChecker không hợp lệ ..............70

Hình 3-18 Lỗi “Labels and Instructions” của AChecker không hợp lệ .............70

Hình 3-19 Quy trình kiểm thử cho một website.................................................74

Hình 3-20 Thống kê số lỗi của các website về tin tức .......................................76

Hình 3-21 Thống kê số lỗi của các website về giáo dục, y tế ............................78

Hình 3-22 Thống kê số lỗi của các website thương mại điện tử........................80