Nghiên cứu Web Content Accessibility Guidelines (WCAG) 2.2 để đánh giá và áp dụng vào thiết kế cải thiện giao diện website mytv dành cho người dùng cuối

Dé góp phan tạo môi trường dành cho tat cả mọi người, Tô chức World Wide Web Consortium W3C đã có đưa được ra bộ chỉ dẫn về khả năng truy cập nội dung webWeb Content Accessibility Guidel

Trang 1

BO THONG TIN VÀ TRUYEN THONGHỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIÊN THONG

Dé tài:

NGHIÊN CỨU WEB CONTENT ACCESSIBILITY GUIDELINES(WCAG) 2.2 DE ĐÁNH GIÁ VÀ ÁP DỤNG VÀO THIET KE CẢI THIỆN

GIAO DIỆN WEBSITE MYTV DÀNH CHO NGƯỜI DUNG CUOI

Giáo viên hướng dẫn Nguyễn Thị Tuyết MaiSinh viên thực hiện Nguyễn Hồ Tân

Lớp BI9TKDPT3

Mã sinh viên B19DCPT200

Hé dao tao Dai hoc chinh quy

Hà Nội, 2023

Trang 2

Đồ án tốt nghiệp Đại học DE CƯƠNG

HỌC VIỆN CÔNG NGHỆ BƯU CỘNG HOÀ XÃ HỘI CHỦ NGHĨA

CHÍNH VIÊN THÔNG VIỆT NAM

KHOA ĐA PHƯƠNG TIEN Độc lập — Tự do — Hanh phúc

ĐÈ TÀI ĐỎ ÁN TÓT NGHIỆP ĐẠI HỌC

Họ và tên sinh viên: Nguyễn Hồ Tân

Lớp: DI9TKDPT03 Khoá: 2019 - 2023

Ngành đào tạo: Công nghệ đa phương tiện

Hệ đào tạo: Đại học chính quy

1 Tên đồ án/khóa luận tốt nghiệp:

Nghiên cứu Web Content Accessibility Guidelines (WCAG) 2.2 dé đánh giá và ápdụng vào thiết kế cải thiện giao diện website mytv dành cho người dùng cuối

2 Lý do chọn đề tài:

Trong thời kỳ hiện đại, quá trình số hóa đã thay đổi cách chúng ta tương tác với thếgiới, đặc biệt là thông qua sự phát triển của các trang web Tính tiện lợi và trải nghiệmngười dùng trở thành trung tâm của sự phát triển này Điều này đặt ra thách thứckhông nhỏ đối với việc đảm bảo tính tiếp cận và trải nghiệm người dùng đa dạng trên

các trang web, đặc biệt là trong lĩnh vực giải trí trực tuyến.

“4 in 5 disabled people experience accessibility issues with Video on - demand

services ” - Nghiên cứu của Scope's research panel "! làm nổi bật thực trạng day tháchthức của việc cung cấp accessibility cho nhóm người có khuyết tật trên các dịch vụxem phim trực tuyến Điều này đặt ra câu hỏi về tính đa dạng và sự bao gồm của

những nền tảng giải trí trực tuyến trong cộng đồng người sử dụng Giới trẻ ngày nay

tiếp xúc với công nghệ nhiều hơn bat kỳ nhóm đối tượng nào khác

Ở Việt Nam, ngành công nghiệp giải trí xem phim trực tuyến đang trải qua mộtbước tiến mạnh mẽ, đặc biệt là thông qua các dịch vụ như MyTV Tuy nhiên, dé dapứng một cách đầy đủ và đa dạng nhu cầu của cộng đồng người sử dung, việc tích hopkhả năng truy cập trên trang web MyTV trở nên vô cùng quan trọng Trong bối cảnhnày, nghiên cứu về ứng dụng khả năng tiếp cận vào website xem phim MyTV khôngchỉ là một bước tiễn quan trọng từ góc đạo đức mà còn là sự cam kết mạnh mẽ với sự

đa dạng và sự tham gia của mọi người trong thế giới giải trí trực tuyến tại Việt Nam.Đối với MyTV, không chỉ là về việc cung cấp dịch vụ xem phim ma còn là về việc tạo

ra một không gian trực tuyến mở cửa cho tat cả mọi người, không ké về khả năng hoặchạn chế cá nhân

Dé góp phan tạo môi trường dành cho tat cả mọi người, Tô chức World Wide Web

Consortium (W3C) đã có đưa được ra bộ chỉ dẫn về khả năng truy cập nội dung web(Web Content Accessibility Guidelines - WCAG) với mục tiêu cung cấp một tiêu

chuẩn chung duy nhất cho khả năng truy cập nội dung web đáp ứng nhu cầu của các cá

Nguyễn Hỗ Tân - B19DCPT200 i

Trang 3

nhân, tô chức và chính phủ trên toàn thế giới, làm cho nội dung web dễ tiếp cận hơnvới người khuyết tật Theo quy định của pháp luật Việt Nam các website bắt buộc phảidam bảo được WCAG nếu không muốn phải chịu trách nhiệm trước pháp luật PÌ Vìvậy liệu website MyTV có đảm bảo được khả năng tiếp cận dành cho tất cả mọi người

hay không ?

Dé giải quyết van đề trên, em quyết định lựa chọn đề tài “Nghién cứu web contentaccessibility guidelines (WCAG) 2.2 và áp dụng vào thiết kế cải thiện giao diệnwebsite MyTV dành cho người dùng cuối” phục vụ cho việc thực hiện dự án và đồ ántốt nghiệp của mình

3 Nội dung chính của đồ án

CHƯƠNG 1: TONG QUAN VE WEB CONTENT ACCESSIBILITY

GUIDELINES (WCAG) 2.2 TRONG THIET KE GIAO DIEN

WEBSITE

1.1 Tổng quan về website

1.1.1 Cac thuật ngữ va khái niệm liên quan

1.1.2 Đặc điểm khả năng tiếp cận của website

1.2 Tống quan thiết kế giao diện

1.2.1 Khai niệm thiết kế giao diện website1.2.2 Nguyên lý thiết kế giao điện website1.2.3 Quy trình thiết kế giao diện website1.3 Tong quan về web content accessibility guidelines (WCAG)

1.3.1 Giới thiệu về web content accessibility guidelines

1.3.2 Lich sử phat triển qua các phiên ban

1.3.3 Cac tiêu chí của WCAG đánh giá website

1.3.4 Các công cụ đánh giá dựa theo WCAG 2.2

1.4 Vai trò của WCAG trong thiết kế websiteTiểu kết chương 1

CHƯƠNG 2: ỨNG DỤNG WEB CONTENT ACCESSIBILITYGUIDELINES (WCAG) 2.2 VÀO ĐÁNH GIÁ VÀ CẢI THIỆN

GIAO DIỆN WEBSITE MYTV

2.1 Tống quan về website MyTV

2.1.1 Lich sử phát triển MyTV

2.1.2 — Giới thiệu website MyTV

2.2 Kiểm thử website MyTV sử dụng công cụ AIW

2.2.1 _ Các tiêu chí kiểm thử MyTV dựa theo WCAG 2.2

2.2.2 Các bước thực hiện kiểm thử website MyTV bằng công cụ AIW

Trang 4

2.2.3 Kết quả kiểm thử website MyTV bằng công cụ AIW

2.3 Đề xuất cải thiện Website MyTV

2.3.1 Nghiên cứu thị trường 2.3.2 Nghiên cứu người dùng

2.3.3 Xây dựng cấu trúc trang web

Tiểu kết chương 2

CHƯƠNG 3: THIẾT KE GIAO DIEN WEBSITE MYTV

3.1 Thiét kế giao diện trực quan

3.1.1 Dinh hướng phong cách thiết kế

3.1.2 Xây dựng wireframe website MyTV

3.2 Kết quả triển khai

3.2.1 _ Triển khai trên màn hình desktop3.2.2 _ Triển khai trên màn hình Mobile phoneTiểu kết chương 3

4 Cơ sở dữ liệu ban đầu:

Accessibility Evaluation of a Mobile Application Using WCAG 2.0 ( 2018 }?! của

Elin Nilsson : là một trong những tài liệu nghiên cứu va đánh giá ứng dung Credential

dựa trên WCAG 2.0 Kết quả đánh giá cho thấy rằng hiện tại ứng dụng đang đạt mức

AA trong thang đánh gia.

Website accessibility of travel agents: An evaluation using web diagnostic tools

( 2020 )"! của Celeste Eusébio và các đồng nghiệp : là nghiên cứu va đánh giá về

website TA dựa trên lý thuyết WCAG 2.0 và kết quả cho thấy rằng trang web TA chỉ

đang đạt mức A của WCAG.

5 Ngày giao đề tài: / /2023

6 Ngày nộp quyến: /2023

GIANG VIÊN HUONG DAN SINH VIEN THUC HIEN

(Ký, ghi rõ họ tên) (Ký, ghi rõ họ tên)

Nguyễn Hồ Tân

TRƯỞNG KHOA

(Ky, ghi rõ họ tên)

Trang 5

Đồ án tốt nghiệp Đại học LỜI CAM ĐOAN

LỜI CAM ĐOAN

Tác giả xin cam đoan rằng Đồ án tốt nghiệp đại học “Wghiên cứu web confenfaccessibility guidelines (WCAG) 2.2 và áp dụng vào thiết kế cải thiện giao diệnwebsite MyTV dành cho người dùng cuối” là công trình nghiên cứu của bản thânmình Những tài liệu tham khảo đã được đề cập và được liệt kê chỉ tiết trong phần tàiliệu tham khảo, bao gồm các nguồn thông tin đã được sử dụng trong quá trình nghiêncứu đều được đảm bảo tính trung thực, không có sự sao chép hay đạo nhái

Nêu như sai phạm, tac giả xin chịu hoan toàn trách nhiệm và chịu tat cả các kỷ luật của bộ môn cũng như Học viện đê ra.

Nguyễn Hỗ Tân - B19DCPT200 ñ

Trang 6

Đồ án tốt nghiệp Đại học LỜI CẢM ƠN

LỜI CẢM ƠN

Em xin gửi lời cảm ơn chân thành đến cô giáo Nguyễn Thị Tuyết Mai, người đãdành thời gian và công sức dé dạy dỗ em trong lĩnh vực thiết kế UI/UX

Đặc biệt, em muốn bày tỏ lòng biết ơn sâu sắc đến giảng viên bộ môn, vì đã chia sẻ

những kiến thức quý báu và dạy đỗ em trong suốt thời gian học tập vừa qua Nhờ sự

hướng dẫn của giảng viên, em đã được trang bị nhiều kiến thức bổ ích, tinh thần học

tập hiệu quả và nghiêm túc Những kiến thức này sẽ trở thành tài liệu quý giá và sẽ

giúp em đi xa hơn trong tương lai.

Em cảm ơn Học viện Công nghệ Bưu chính Viễn thông vì đã cung cấp môi trường

học tập thuận lợi và tạo điều kiện dé em phát triển khả năng thiết kế UI/UX

Tuy nhiên, em hiểu rang vốn kiến thức còn hạn chế và khả năng tiếp thu thực tếchưa hoàn thiện, do đó bài tiểu luận của em có thé có thiếu sót và sai sót Em mongrằng cô giáo Nguyễn Thị Tuyết Mai có thé xem xét và góp ý dé bài tiểu luận của em

được hoàn thiện hơn.

Trân trọng, em xin chân thành cảm ơn !

Hà Nội, ngày 27 tháng 10 năm 2023

Sinh viên thực hiện

Nguyễn Hồ Tân

Nguyễn Hỗ Tân - B19DCPT200 iii

Trang 7

Đồ án tốt nghiệp Đại học MỤC LỤC

MỤC LỤC

DE TÀI DO ÁN TOT NGHIỆP ĐẠI HỌC i

LOI CAM DOAN ii

LOI CAM ON iii

MUC LUC iv

DANH SACH CAC KY HIEU VA CHU VIET TAT v

DANH MỤC HÌNH ANH viDANH MỤC CÁC BANG viiLOI MO DAU 1

1 Ly do chon dé tai 1

2 Tinh hình nghiên cứu 1

2.1 Trên thế giới 22.2 Ở Việt Nam 2

3 Mục đích và nhiệm vụ nghiên cứu 2

3.1 Mục tiêu đề tài 2

3.2 Nhiệm vụ đề tài 2

4 Đối tượng và phạm vi nghiên cứu 2

4.1 Đối tượng nghiên cứu 2

4.2 Pham vi nghiên cứu 3

5 Phương pháp nghiên cứu 3

6 Ý nghĩa thực tiễn của đề tài 3

7 Cấu trúc đề tài 3

CHƯƠNG 1.TÔNG QUAN VẺ WEB CONTENT ACCESSIBILITY

GUIDELINES (WCAG) 2.2 TRONG THIẾT KÉ GIAO DIỆN WEBSITE 5

1.1 Tổng quan về website 5

1.1.1 Các thuật ngữ và khái niệm liên quan 5

1.1.2 Dac điểm khả năng tiếp cận của website 61.2 Tổng quan thiết kế giao diện 7

Nguyễn Hỗ Tân - B19DCPT200 iv

Trang 8

1.2.1 Khai niệm thiết kế giao diện website 7

1.2.2 Nguyên lý thiết kế giao diện website 71.2.3 Quy trình thiết kế giao diện website 111.3 Tổng quan về web content accessibility guidelines (WCAG) 20

1.3.1 Gidi thiệu về web content accessibility guidelines 20

1.3.2 Lịch sử phat triển qua các phiên bản 21

1.3.3 Cac tiêu chí cua WCAG đánh giá website 22

1.3.4 Cac công cụ đánh giá dựa theo WCAG 2.2 36

1.4 Vai trò của WCAG trong thiết kế website 42

Tiểu kết chương 1 43

CHƯƠNG 2.ỨNG DỤNG WEB CONTENT ACCESSIBILITYGUIDELINES (WCAG) 2.2 VÀO ĐÁNH GIÁ VA CAI THIỆN GIAO DIEN

WEBSITE MYTV 44

2.1 Téng quan vé website MyTV 44

2.1.1 Lịch sử phat triển MyTV 44

2.1.2 Gidi thiệu website MyTV 46

2.2 Kiểm thử website MyTV sử dung công cu AIW 49

2.2.1 Cac tiêu chí kiểm thử MyTV dựa theo WCAG 2.2 50

2.2.2 Cac bước thực hiện kiếm thử website MyTV bằng công cu AIW 5I

2.2.3 Kết quả kiểm thử website MyTV bằng công cụ AIW 552.2.4 Phân tính kết quả kiểm thứ website MyTV 592.3 Dé xuất cải thiện Website MyTV 61

2.3.1 Nghiên cứu thị trường 61

2.3.2 Nghiên cứu người dùng 65

2.3.3 Xây dựng cấu trúc trang web 65

Tiểu kết chương 2 68CHUONG 3.THIẾT KE GIAO DIEN WEBSITE MYTV 693.1 Thiết kế giao diện trực quan 69

3.1.1 Dinh hướng phong cách thiết kế 69

Nguyễn Hỗ Tân - B19DCPT200 iv

Trang 9

3.1.2 Xây dựng wireframe website MyTV 70

3.2 Kết quả triển khai 75

3.2.1 _ Triển khai trên màn hình desktop 753.2.2 _ Triển khai trên man hình Mobile phone 82

Tiểu kết chương 3 83KET LUẬN 84

Trang 10

Đồ án tốt nghiệp Đại học DANH SÁCH KY HIỆU VÀ VIET TAT

DANH SÁCH CÁC KÝ HIỆU VA CHỮ VIET TAT

Ký hiệu

Chữ viết tắt Tiêng Anh

Accessibility Insights for Web

Call to Action

Domain Name System Internet Protocol

Hyper Text Markup Language

Search Engine Optimization

On The Top

Uniform Resource Locator User Experience

User Interface

World Wide Web Consortium

Web Accessibility Evaluation Tools

Nguyễn Hỗ Tân - B19DCPT200 v

Trang 11

Đồ án tốt nghiệp Đại học DANH MỤC HÌNH ẢNH

DANH MỤC HÌNH ẢNH

Hình 1.1 World Wide Web 7

Hình 1.2 Những khuyết tật phổ biến 9Hình 1.3 Định luật Gestalt trong thiết kế 10

Hình 1.4 Dinh rõ dự an 14

Hình 1.5 Giai đoạn xây dựng cấu trúc trang web 17Hình 1.6 Giai đoạn Thiết kế giao diện 18

Hình 1.7 Giai đoạn xây dung và tích hop 20

Hình 1.8 Giai đoạn phát hành trang web 21

Hình 1.9 Giao điện công cu AIW 40

Hình 1.10 Giao điện công cu CCA 40

Hình 1.11 Giao diện Lighthouse khi su dụng DevTool 42

Hình 1.12 Giao diện WAVE 43

Hình 2.1 Logo công ty Truyén hình MyTV 46

Hình 2.2 Giao điện Website 46

Hình 2.3 Giao diện khi xem phim bộ, phim lẻ 49

Hình 2.4 Xem lại chương trình 50

Hinh 2.5 Giao dién thé thao 51

Hinh 2.6 Giao dién mua goi 52

Hinh 2.7 Cong cu Accessibility Insight for Web trén trinh duyét Edge 55 Hình 2.8 Công cu Accessibility Insight for Web trên trình duyệt Google Chrome 55 Hinh 2.9 Giao dién Accessibility Insights for Web trén trinh duyét Edge 56

Hình 2.10 Kiểm thử chỉ tiết bang công cu AIW trên trang web Mytv.com.vn 57

Hình 2.11 Kiểm tra nhanh trang Mua gói của website MyTV 37

Hình 2.12 Tổng số lượt truy cập website và tỷ lệ thoát trang khi lan dau truy cập 64

Hình 2.13 Tỷ lệ người dùng thoát trang sau khi vào một trang và thời gian trung

bình truy cập 65

Hình 2.14 Giao diện website Fptplay.vn 66

Nguyễn Hỗ Tân - B19DCPT200 vi

Trang 12

Hình 2.15 Giao điện website VieON 67

Hình 2.16 Giao điện website TV360 ó8

Hình 2.17 Số liệu về giới tính và độ tuổi sử dụng Website MyTV.com.vn 69Hình 2.18 Sơ đô cau trúc menu trái mới website MyTV 70Hình 2.19 Sơ đô cau trúc toàn bộ trang website MyTV mới 71Hình 2.20 Luong đăng nhập đăng kỷ trên website MyTV 71Hình 2.21 Luong mua gói cước trên website MyTV 72Hình 2.22 Luong xem nội dung trên website MyTV 72Hình 2.23 Luông tìm kiếm nội dung trên website MyTV 72

Hình 3.1 Style Guide thiết kế sản phẩm website MyTV 69

Hình 3.2 Bộ màu bồ xung cho Website MyTV 70

Hình 3.3 Wireframe loading website MyTV 70

Hình 3.4 Wireframe trang chủ website MyTV 71

Hình 3.5 Wireframe nội dung toàn trang chu website MyTV 72 Hình 3.6 Wireframe trang đăng nhập website MyTV 73 Hinh 3.7 Wireframe trang phat noi dung website MyTV 73

Hình 3.8 Wireframe trang phát truyền hình website MyTV 74

Hình 3.9 Wireframe trang mua gói nội dung website MyTV 74 Hình 3.10.Giao điện loading hiện tại 75

Hình 3.11 Giao diện loading mới 75

Hinh 3.12 Giao dién trang chu hién tai 76

Hinh 3.13 Giao dién trang chu moi 76

Hình 3.14 Giao điện chân trang hiện tai 77

Hình 3.15 Giao điện Footer trang website MyTV 77 Hình 3.16 Giao diện đăng nhập hiện tại 78 Hình 3.17 Giao diện đăng nhập mới 78 Hình 3.18 Giao diện phát nội dung hiện tại 79 Hình 3.19 Giao diện phái video mới 79

Trang 13

Hình 3.20 Giao điện truyền hình hiện tại 80

Hình 3.21 Giao diện Truyén hình mới SO

Hình 3.22 Giao diện Mua gói hiện tại ởi Hình 3.23 Giao điện Mua gói hiện tại 81

Hình 3.24 Một số giao diện Mobile web MyTV 82

Trang 14

Đồ án tốt nghiệp Đại học DANH MỤC CÁC BẢNG

DANH MỤC CÁC BANG

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

Bảng 2.1 Tiêu chi kiểm thử website MyTV 50Bảng 2.2 Kết quả kiểm thir AIW cua từng trang website MyTV 55Bang 2.3 Kết quả số lỗi kiểm thử AIW của từng trang website MyTV 37Bảng 2.4 Bảng kết quả đánh giá các thành phần của website MyTV 58

Nguyễn Hỗ Tân - B19DCPT200 vii

Trang 15

Đồ án tốt nghiệp Đại học LỜI MỞ ĐÀU

LỜI MỞ ĐẦU

1 Ly do lựa chọn đề tài

Trong thời kỳ hiện dai, quá trình số hóa đã thay đổi cách chúng ta tương tác với thégiới, đặc biệt là thông qua sự phát triển của các trang web Tính tiện lợi và trải nghiệmngười dùng trở thành trung tâm của sự phát triển này Điều này đặt ra thách thứckhông nhỏ đối với việc đảm bảo tính tiếp cận và trải nghiệm người dùng đa dạng trên

các trang web, đặc biệt là trong lĩnh vực giải trí trực tuyến.

“4 in 5 disabled people experience accessibility issues with Video on - demand

services ” - Nghiên cứu của Scope's research panel "! làm nổi bật thực trang day tháchthức của việc cung cấp accessibility cho nhóm người có khuyết tật trên các dich vu

xem phim trực tuyến Điều này đặt ra câu hỏi về tính đa dạng và sự bao gồm củanhững nền tảng giải trí trực tuyến trong cộng đồng người sử dụng Giới trẻ ngày nay

tiếp xúc với công nghệ nhiều hơn bất kỳ nhóm đối tượng nào khác

Ở Việt Nam, ngành công nghiệp giải trí xem phim trực tuyến đang trải qua mộtbước tiễn mạnh mẽ, đặc biệt là thông qua các dịch vụ như MyTV Tuy nhiên, dé đápứng một cách đầy đủ và đa dạng nhu cầu của cộng đồng người sử dụng, việc tích hợpkhả năng truy cập trên trang web MyTV trở nên vô cùng quan trọng Trong bối cảnhnày, nghiên cứu về ứng dụng khả năng tiếp cận vào website xem phim MyTV khôngchỉ là một bước tiễn quan trọng từ góc đạo đức mà còn là sự cam kết mạnh mẽ với sự

đa dạng và sự tham gia của mọi người trong thế giới giải trí trực tuyến tại Việt Nam.Đối với MyTV, không chỉ là về việc cung cấp dịch vụ xem phim mà còn là về việc tạo

ra một không gian trực tuyến mở cửa cho tat cả mọi người, không ké về khả năng hoặchạn chế cá nhân

Dé góp phan tạo môi trường dành cho tất cả mọi người, Tổ chức World Wide WebConsortium (W3C) đã có đưa được ra bộ chỉ dẫn về khả năng truy cập nội dung web(Web Content Accessibility Guidelines - WCAG) với mục tiêu cung cấp một tiêu

chuẩn chung duy nhất cho khả năng truy cập nội dung web đáp ứng nhu cầu của các cá

nhân, tô chức và chính phủ trên toàn thế giới, làm cho nội dung web dễ tiếp cận hơnvới người khuyết tật Theo quy định của pháp luật Việt Nam các website bắt buộc phảiđảm bảo được WCAG nếu không muốn phải chịu trách nhiệm trước pháp luật PÌ Vìvậy liệu website MyTV có đảm bảo được khả năng tiếp cận dành cho tất cả mọi người

hay không ?

Dé giải quyết van đề trên, em quyết định lựa chọn đề tài “Nghién cứu web content

accessibility guidelines (WCAG) 2.2 va áp dụng vào thiết kế cải thiện giao diện

website MyTV dành cho người dùng cuối” phục vụ cho việc thực hiện dự án va đồ ántốt nghiệp của mình

Nguyễn Hỗ Tân - B19DCPT200 1

Trang 16

2 Tình hình nghiên cứu

2.1 Trên thế giới

- Accessibility Evaluation of a Mobile Application Using WCAG 2.0 ( 2018 )"!

cua Elin Nilsson : là một trong những tai liệu nghiên cứu va đánh giá ứng dụng

Credential dựa trên WCAG 2.0 Kết quả đánh giá cho thấy răng hiện tại ứng

dụng đang đạt mức AA trong thang đánh giá.

- Website accessibility of travel agents: An evaluation using web diagnostic tools

( 2020 )“! của Celeste Eusébio và các đồng nghiệp : là nghiên cứu và đánh giá

về website TA dựa trên lý thuyết WCAG 2.0 và kết quả cho thấy rằng trang

web TA chỉ đang đạt mức A của WCAG.

2.2 Trong nước

Chưa có nhiều nghiên cứu về WCAG tại Việt Nam Nhưng nghiên cứu về

Accessibility thì vẫn có tại Việt Nam.

- — 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 pho biến của việt nam ( 2021 )©! của La Thị ThanhNga Luận văn đã tập trung nghiên cứu các công cụ kiểm thử tự động, sinh các

ca kiểm thử với bộ dữ liệu để sử dụng chúng cho việc kiểm thử, đánh giá được

hiệu quả, mức độ chính xác của các công cụ này một cách rõ ràng hơn Từ đó

sử dụng công cụ có hiệu quả cao dé kiểm thử cho các trang web của Việt Nam

3 Mục tiêu và nhiệm vụ nghiên cứu

3.1 Mục tiêu đề tài :

Nghiên cứu tài liệu quy chuẩn Web Content Accessibility Guideline 2.2 ( WCAG2.2 ) áp dung vào đánh giá website MyTV Từ do đề xuất cải tién giao điện websiteMyTV.

3.2 Nhiệm vu đề tài :

- _ Nghiên cứu và phân tích tài liệu về website và WCAG 2.2 Tổng hợp nội dung

kiến thức

- Ap dụng tài liệu và lý thuyết đã nghiên cứu vào đánh giá website MyTV

- - Thiết kế đề xuất giao diện của Website MyTV trên hai nền tảng máy tinh va

thiết bị đi động

4 Đối tượng và phạm vi nghiên cứu

4.1 Đối tượng nghiên cứu

- _ Lý thuyết cơ bản website và thiết kế giao điện website

- — Tài liệu WCAG 2.2

Trang 17

4.2 Phạm vi nghiên cứu

- _ Về thoi gian : Tài liệu được nghiên cứu, số liệu được thu thập vào năm 2023

- _ Về không gian : Nghiên cứu được thực hiện tại địa bàn thành phố Hà Nội

- — Về nội dung nghiên cứu : Đề tài sẽ nghiên cứu tài liệu WCAG 2.2 và một số

công cụ dé đánh giá website theo tiêu chuẩn Lý thuyết được nghiên cứu sẽ ứng

dụng vào thiết kế cải thiện giao điện MyTV

- _ Về sản phẩm của dé tài : Sản pham cuối cùng sẽ là giao diện thiết kế trực quan

của website MyTV trên 2 nền tảng thiết bi di động và máy tính

5 Phương pháp nghiên cứu

Các phương pháp sử dụng trong bài nghiên cứu:

- Phương pháp nghiên cứu tài liệu: Nghiên cứu các tài liệu có sẵn như các thông

kê, khảo sát tình trạng, sở thích đi du lịch, các ứng dụng du lịch đã có trên thị trường.

- Phuong pháp đánh giá website : dựa trên lý thuyết WCAG 2.2 sử dụng công cụ

đánh giá.

- Phuong pháp diéu tra (phỏng vấn, khảo sát, ): Bằng phiếu hỏi, phỏng van, thu

thập và phân tích các dữ liệu thực tế tìm hiểu các nhu cầu, vấn đề của người

dùng.

- Phuong pháp xử lý thông tin: Áp dung dé xử lý các kết quả thu nhập thông tin

định lượng, định tính Qua đó xây dựng các dẫn chứng, số liệu khái quát hóa để

thấy được các vấn đề chung phục vụ cho nghiên cứu

- Phuong pháp phân tích tổng hợp: Phân tích nhằm phát hiện và khai thác các

khía cạnh khác nhau của thông tin đã thu thập Tổng hợp các thông tin đã cónhằm phát hiện sự sai lệch, sắp xếp và làm tái hiện quy luật, giải thích quy luật

dé đưa ra những phán đoán về ban chất của van đề nghiên cứu

6 Ý nghĩa thực tiễn của đề tài

Đề tài là một trong những nghiên cứu đầu tiên tại việt nam nghiên cứu cụ thể về

WCAG 2.2 tại việt nam Góp phan làm rõ các van đề lý luận và là một ví dụ đầu tiênứng dụng lý thuyết vào áp dụng thực tế Qua đó, áp dụng lý thuyết vào cải thiện giao

diện website MyTV.

Bảng đánh giá website cụ thể có thể được sử dụng làm tài liệu tham khảo trong

các nghiên cứu liên quan.

Sản phẩm đầu ra của đề tài sẽ là một ví dụ để doanh nghiệp áp dụng vào triển

khai trên sản phẩm thực tế

7 Kết cấu đề tài

Trang 18

Đề tài gồm 3 chương theo cấu trúc : Lý thuyết sử dụng - Áp dụng đánh giá - Đềxuất sản phẩm thực tế cụ thé như sau :

Chương 1: Tổng quan về Web Content Accessibility Guidelines 2.2 trongthiét ké giao dién website

Chương 1 sé bat đầu từ những lý thuyết cơ bản nhất về website va những

nguyên lý khi thiết kế giao điện website Quan trọng nhất đó là nội dung của WCAG2.2, những nguyên tắc mà tài liệu yêu cầu dé đánh giá website

Chương 2 : Ứng dụng Web Content Accessibility Guidelines 2.2 vào đánh

giá và đề xuất cải thiện giao diện website MyTV

Chương 2 dựa vào lý thuyết đã có sử dụng công cụ để đánh giá Website dựatheo lý thuyết WCAG 2.2 Từ đó ta sẽ có góc nhìn tổng quan về website và những vẫn

đề Website hiện tại gặp phải Sau đó sẽ là đề xuất dé cải tiến giao diện hiện tại của

Website MyTV.

Chuong 3 : Thiét ké giao dién website MyTV

Chương 3 chỉ tiết ban đề xuất cải thiện website MyTV bao gồm các màn hình ở

cả 2 hai phiên bản thiết bị đi động và máy tính, các component Bản thiết kế sẽ là

khuôn mẫu đề xuất cho doanh nghiệp cải thiện

Trang 19

Đồ án tốt nghiệp Đại học CHƯƠNG 1

CHUONG 1: TONG QUAN VE WEB CONTENT

ACCESSIBILITY GUIDELINES (WCAG) 2.2 TRONG

THIET KE GIAO DIEN WEBSITE

Trong chương 1, tác giả sẽ đề cập tới những kiến thức cơ ban nhất về website, quytrình thiết kế website Đặc biệt chú trọng tới tài liệu WCAG 2.2 đảm bảo người dùng

có thé tiếp cận được website trong các tinh huống bất lợi hoặc bị khuyết tật Từ đó,

hiểu hơn về quy trình phát triển website và tiêu chuẩn bắt buộc của website

1.1 Tổng quan về website

Trong thời đại số ngày nay, công nghệ đang phát triển vượt bậc trong thời gian

ngắn Internet cùng với sự xuất hiện của hàng trăm ngàn trang web, đóng vai trò quan

trọng trong việc thay đổi cách chúng ta sống, làm việc và giao tiếp Những trang web

không chỉ còn là những nơi để cung cấp chia sẻ thông tin mà còn là không gian đa

chiều cho sự tương tác giữa doanh nghiệp và khách hàng

1.1.1 Các thuật ngữ và khái niệm liên quan!“

World Wide Web (WWW)

Theo W3C, WWW (World Wide Web) là mạng lưới nguồn thông tin cho phép takhai thác thông qua một số công cụ, chương trình hoạt động dưới các giao thức mạng

WWW là công cụ, phương tiện hay đúng hơn là một dich vụ của Internet Người ta

thường gọi tắt là web Web cung cấp thông tin rất đa dạng, bao gồm văn bản, hình ảnh,

âm thanh, video, Thông tin được biéu diễn bằng trang Web (Web page)

Trang web (Web page)

Trang 20

Trang web là một văn bản sử dụng trên mạng toàn cầu (World Wide Web) Văn bảnnày được viết bằng cách sử dụng định dạng HTML hay XHTML Các trang web liênkết với nhau băng các siêu liên kết (Hyperlink) Trang web được hiển thị thông qua

một trình duyệt.

Website

Website là một tập hợp các trang web bao gồm hình ảnh, file, âm thanh, thườngchỉ nằm trong một tên miền (domain name) hoặc tên miền phụ (subdomain) Mộtwebsite phải được đặt trên ít nhất một máy chủ

Trình duyệt (Browser)

Trình duyệt web là một phần mềm ứng dụng cho phép người sử dụng xem và tương

tác với các văn bản, hình ảnh, đoạn phim, nhạc, trò chơi và các thông tin khác ở một

trang web của một địa chỉ web trên mạng toàn cầu hoặc mạng nội bộ Văn bản và hìnhảnh trên một trang web có thé chưa siêu liên kết tới các trang web khác của cùng một

địa chỉ web hoặc địa chỉ web khác Trình duyệt web cho phép người sử dụng truy cập

các thông tin trên các trang web một cách nhanh chóng và dễ dàng thông qua các liên

kết đó Trình duyệt web đọc định dạng HTML dé hiển thị, do vậy một trang web cóthé Đồ án tốt nghiệp Đại học hiển thị khác nhau trên các trình duyệt khác nhau Một SỐtrình duyệt web hiện nay cho máy tính cá nhân bao gồm Google Chrome, Microsoft

Edge, Safari, Opera, Avant Browser,

URL (Uniform Resource Locator): Dinh vị tài nguyên thong nhất

URL được sử dung dé tham chiếu tới tài nguyên trên Internet URL mang lại khả

năng siêu liên kết cho các trang web Các tài nguyên khác nhau được tham chiếu tới

các địa chỉ, chính là URL, còn được gọi là địa chỉ web hay liên kết mạng (hay liênkết)

Tên miền (Domain name)

Mục đích chính của tên miền là để cung cấp một hình thức đại diện, hay nói cách

khác, dùng những tên dễ nhận biết, thay thế cho những tài nguyên Internet mà đa số

được đánh địa chỉ bang số Do tính chat chỉ có 1 và 1 duy nhất trên Internet nên không

thé đăng ký được Domain name khi người khác đã là chủ sở hữu Ví dụ: Trang web

phô biến nhất, Google.com có IP là 74.125.128.113

Người dùng không thể nhớ được chuỗi số địa chỉ IP mà họ chỉ nhớ địa chỉ

“soogle.com” Hệ thống phân giải tên miền DNS (Domain Name System) sẽ làm côngviệc “dich” domain name thành IP tương ứng của Google, mang về các dữ liệu cầnthiết và hiện hình trang web tìm kiếm này

Trang 21

1.1.2 Khả năng tiếp cận của website ( Website Accessibility )

Khả năng tiếp cận (Accessibility) chính là những cách thức, giải pháp làm cho mọi

người bat ké là người lành lặn hay khuyết tật đều có thé truy cập được internet cũng

như trang web.!

©6 0O@

Hình 1.2 Những khuyết tật phổ biến ( Nguồn itnavi.com.vn)

Web Accessibility bao gồm tat cả các khuyết tật ảnh hưởng đến quyền truy cập vào

Web, bao gom: thính giác, nhận thức, thần kinh, vật lý, phát biểu, trực quan

Web Accessibility cũng mang lại lợi ích cho những người không bị khuyết tật như:

- _ Những người sử dụng điện thoại di động, đồng hồ thông minh, TV thông minh

và các thiết bị khác có màn hình nhỏ, các chế độ nhập liệu khác nhau, v.v

- _ Người lớn tuéi với khả năng thay đổi do lão hóa

- Những người bị "khuyết tật tạm thời" như gãy tay hoặc mat kính

- Những người có "giới hạn về tình huống" chang hạn như trong ánh nắng chói

chang hoặc trong môi trường mà họ không thể nghe âm thanh

- Những người sử dụng kết nối Internet chậm hoặc những người có băng thông

hạn chế hoặc đắt tiền

Nhà nước Việt Nam cũng đã yêu cầu và quy định dành cho các sản phẩm tư nhân vànhà nước đều phải tuân theo tiêu chuẩn đảm bảo khả năng tiếp cận trên các sản pham

số và website Với những website không đạt được yêu cầu đề ra sẽ phải chịu hình phạt

theo quy định của nhà nước,

1.2 Tổng quan về thiết kế giao diện

1.2.1 Khái niệm thiết kế giao diện

Thiết kế giao điện (UI Design)" là quá trình tạo ra giao điện người dùng (UI - UserInterface) cho một trang web hoặc ứng dụng web Nó bao gồm tất cả những gì xuấthiện trên Website bao gồm hình ảnh, thông tin, clip, các điều hướng người sử dungtrên Website, liên kết trên web

UI và thiết kế tương tác là hai yếu tố quan trọng trong việc tạo ra trải nghiệm người

dùng tốt nhất cho website hoặc ứng dụng UI là cách người dùng giao tiếp với hệ

Trang 22

thống, còn thiết kế tương tác là cách hệ thống giao tiếp với người dùng Một UI tốt sẽgiúp người dùng dễ dàng truy cập và sử dụng các tính năng của hệ thống, trong khimột thiết kế tương tác tốt sẽ giúp hệ thống trả lời một cách chính xác và tự động đếnyêu cầu của người dùng Vì vậy, mỗi quan hệ giữa UI và thiết kế tương tác rất quantrọng trong việc tạo ra một trải nghiệm người dùng tốt nhất

Đề thực hiện tạo ra một UI tốt chúng ta cần nắm được những nguyên lý trong thiết

kế giao diện website

1.2.2 Nguyên lý thiết kế giao diện

Tâm lý hoc Gestalt nói rằng “ Chưng ta không chỉ tập trung vào từng phút trong khi

cố gang hiểu thé giới xung quanh Thiết kế tốt chủ yếu dựa vào việc sử dụng khônggian âm Điêu đâu tiên xuất hiện trong tâm tri khi xem xét thiết kế là việc sử dụngkhông gian màu trắng Một kiểu thiết kế khác tạo ra lợi thế của không gian để gợi ýmột khía cạnh hoàn toàn không ton tai” !81

Trang 23

- _ Nguyên tắc 1 : Tính liên tục

Nguyên tắc thai nghén đầu tiên là Tính liên tục Theo Nguyên tắc liên tục, bất cứ

khi nào mắt chúng ta bắt đầu nhìn theo bất cứ thứ gì, chúng sẽ tiếp tục di chuyên theohướng đó cho đến khi bắt gặp một vật dụng khác Điều này sẽ xảy ra ngay cả khi đốitượng mà họ đang theo dõi thay đổi Bởi vì chúng bị buộc phải đi qua một vật thé vàtiếp tục đến một vật thể khác, mắt tạo ra động lượng khi chúng làm như vậy Hãy xemmột số ví dụ về Tính liên tục,

Ví dụ: Biểu trưng

Khái niệm liên tục của Gestalt có thể được nhìn thấy trong logo của các công ty như

ProQuest, Amazon và Coca-Cola Logo Amazon có một mũi tên bắt đầu bằng chữ A

và kết thúc băng chữ Z Mũi tên này nhằm thé hiện sự thật rang Amazon bán moi thứ

từ A đến Z Tương tự, khi chúng ta nhìn vào logo cho phần mềm nổi tiếng nhãn hiệu

đồ uống Coca Cola, mắt chúng ta đi từ chữ "C" trong chữ Cola đến chữ "C" trong chữCoca, lướt qua các chữ cái L và A trên đường đi Nhiều loại hỗ trợ trực quan này giúpmắt chúng ta dé dàng theo dõi một đối tượng hoặc văn bản đang tiếp cận

- Nguyên tắc 2 : Sự giống nhau

Nguyên tắc cử chỉ thứ hai là sự tương đồng Theo nguyên tắc tương đồng, bộ não

của chúng ta có day dé giải thích bat kỳ hai vật pham nào có hình dạng bên ngoaigiống nhau là thuộc cùng một thực thé Có thé có một kết nối giữa bat kỳ hai trong sốchúng; màu sắc, hình dang, kết cấu hoặc thứ gì khác Hãy xem xét một sỐ ứng dụngtrong thế giới thực của khái niệm tương tự

Vị dụ: Logo

Panda Security Touts, NBC và Sun Microsystems có biểu trưng với các đối tượng

và mẫu có chất lượng hình ảnh tương tự, mặc dù những thứ và mẫu này không có cùng

bảng màu, sơ đồ hình dạng hoặc sơ đồ kích thước Dấu từ và dấu đăng nhập của logo

Panda Security Tout được tích hợp tốt với nhau Tương tự, những chiếc lá tạo nên logoNBC mỗi chiếc có một màu riêng, nhưng chúng đều dễ nhận biết là thuộc cùng mộtnhóm vì chúng có hình ảnh hoặc thiết kế giống nhau

- Nguyên tắc 3 : Sự gần gũi

Nguyên tắc cử chỉ thứ ba là sự gần gũi Theo nguyên tắc gần nhau, khi hai hoặcnhiều yếu tố ở gần nhau, vị trí của các yêu tố này miêu tả mối quan hệ giữa các yếu tốkhác nhau Nó thé hiện một ý nghĩa nhất định đối với nhóm đó Điều nay áp dụng cho

dù các phần tử có gần nhau về mặt vật lý hay không Chúng ta hãy xem xét một số ứngdụng trong thế giới thực của khái niệm tiệm cận

Trang 24

Vi dụ: Logo của IBM

Khi nhìn vào logo IBM, chúng ta thấy ba chữ cái của văn bản được tạo thành từ cácđường ngang ngắn xếp chồng lên nhau Điều này trái ngược với biểu trưng ban đầu,bao gồm tám đường ngang với khoảng cách nhất quán giữa chúng

- Nguyên tắc 4 : Khu vực chung

Nguyên tắc cử chỉ này khá quan trọng Khái niệm về một khu vực chung được kết

nối mật thiết với hình ảnh của sự gần gũi Theo lý thuyết này, bộ não của chúng ta giải

thích sự hiện diện của một số vật phẩm trong cùng một vùng giới hạn như một dau

hiệu cho thấy những vat thé này thuộc về nhau Ngay cả khi các đối tượng gan nhau va

có cùng độ gan, hình dạng, kích thước hoặc mau sắc, việc thêm đường viền hoặc cácđường ranh giới rõ ràng khác là một phương pháp tuyệt vời để tạo ảo giác tách biệt

giữa các nhóm.

- Nguyén tắc 5: Luật đối xứng ( Pragnanz )

Một trong những nguyên tắc cử chỉ là luật Đối xứng ( Pragnanz ) Cụm từ good

figure có thể được dịch từ tiếng Đức bằng cách sử dụng văn bản Pragnanz Ngoài

những văn bản này, quy luật về hình hài và sự đơn giản là những tên thay thế cho Luật

Pragnanz Theo lý thuyết này, mọi người tự nhiên có xu hướng nhìn mọi thứ theo hình

dạng đơn giản nhất của chúng Nguyên tắc cử chỉ này còn được gọi là quy luật Đối xứng Nguyên tắc này, dựa trên sự đối xứng Khi các cá nhân xem các yếu tố trong Tính đối xứng là các yếu tố của một nhóm nhất quán, họ áp dụng khái niệm Gestalt về

Đối xứng Mọi người tạo ra những hình ảnh hoặc thiết kế phức tạp ở dang cơ bản nhất

trong tâm trí của họ.

Chúng tôi yêu thích Tính đối xứng bởi vì nó là một quy chuẩn cơ bản, hài hòa,mang lại cảm giác trật tự và đúng đắn trong mọi thứ Đó rất có thé là lý do tại sao Tínhđối xứng rất phô biến trong các tòa nhà chính phủ trên toàn thế giới Các nghiên cứucũng đã chỉ ra rằng sự đối xứng ảnh hưởng rất nhiều đến tiêu chí của chúng ta về "vẻ

dep" trên khuôn mặt.

Vi dụ: Logo của Olympic

Biểu tượng Olympic bao gồm năm vòng tròn chồng lên nhau Logo này thường được trình bày công khai với chúng tôi Biéu trưng bao gồm năm vòng tròn được sắp

xếp liền nhau với nhau Ít có khả năng biểu trưng bị hiểu là một mớ hỗn độn của các

đường cong, dạng hình học, chuyển màu và văn bản hoặc đường thắng.

- _ Nguyên tắc 6 : Hình xuống đất

Trang 25

Mắt thường của con người có khả năng phân biệt một vật với môi trường xungquanh Khi chúng ta nhìn vào một cảnh, chúng ta thấy một số mục ở tiền cảnh vànhững mục khác ở hậu cảnh; khi tiền cảnh và hậu cảnh tạo ra hai hình ảnh riêng biệthơn là thiết kế phức tạp và hình ảnh phức tạp, mọi thứ trở nên thú vị

- Nguyên tắc 7 : Đóng cửa

Bởi vì bộ não con người ủng hộ toàn bộ hình dạng hoặc hình ảnh, nó có xu hướng

lap đầy khoảng trống giữa các yếu tô dé nhìn thấy toàn bộ hình ảnh, tạo ra một tongthé Với việc đóng cửa, chúng ta có thé truyền tải thông tin một cách trực quan bangcách sử dụng một số yêu tô hạn chế trong khi van cho phép tâm trí lap day bat kỳkhoảng trống nào trong thông tin Bởi vì điều này, chúng tôi có thé đơn giản hóa cácthiết kế và tạo ra chúng thú vi hơn Đó là khái niệm cho rằng bộ não của chúng ta cóthé lap đầy những khoảng trống trong một thiết kế và hình ảnh phức tap để tạo ra nó

một cách hoàn chỉnh.

Nhiều người tin rằng đóng cửa là một trong những nguyên tắc cử chỉ thú vị nhất

Nó cho thấy mình được sử dụng theo nhiều cách sáng tạo khác nhau Sử dụng không

gian tích cực và tiêu cực kết hợp với nhau để tạo ra một tổng thể là yếu tố cần thiết

trong thiết kế và hình ảnh đơn giản hay phức tạp Sẽ có thể tạo ra các hình dạng âmbản hấp dẫn bằng cách loại bỏ các mục từ phía trước hoặc có thể sử dụng không gian

âm trong thiết kế dé thé hiện các hình dang bị che khuất khỏi tầm nhìn

Khi hiển thị một phần hình ảnh hoặc thiết kế mờ dần khỏi màn hình của người dùng

để cho biết rằng có nhiều điều cần được khám phá nếu họ vuốt sang trái hoặc phải, đây

là một ví dụ cơ bản về việc đóng cửa tại nơi làm việc trong thiết kế phức tạp hoặc đơngiản của UX và UI Nếu không có hình ảnh từng phần hoặc thiết kế phức tạp, nếu chỉhiển thị hình ảnh hoặc thiết kế đầy đủ, bộ não không nhanh chóng nhận ra rằng cónhiều thứ dé xem và kết quả là khách hàng ít có khả năng tiếp tục

1.2.3 Quy trình thiết kế cải thiện giao diện người dùng của website

Cuốn sách “Cải thiện website: Quy trình làm việc hiệu quả, tái bản lần thứ hai”

(Web ReDesign 2.0: Workflow that Works, Second Edition) của Kelly Goto và Emily

Cotler đưa ra quy trình cải thiện website gồm 5 giai đoạn được đề cập tới sau đây Quytrình này kế thừa tinh thần của các các phương pháp tiếp cận thiết kế trải nghiệmngười dùng được dé cập ở chương I (lấy người dùng làm trung tâm, quá trình thiết kế

là một vòng lặp bởi các bước nghiên cứu - đưa ra giải pháp - kiểm thử giải pháp đó),tuy vậy có những tinh chỉnh dé phù hợp với sản phẩm số là website và các dự án cải

thiện website.

Trang 26

Hình 1.4 : Dinh rõ dự an

- Giai đoạn 1: Định rõ dự án (Define the Project)

Giai đoạn đầu tiên bao gồm việc thu thập và phân tích thông tin cần thiết, xác định

phạm vi và hướng phát triển của dự án Chúng ta sẽ bắt đầu bằng cách đặt nhiều câu

hỏi và thu thập nhiều nhóm đữ liệu khác nhau để định hình các kỳ vọng của dự án Bất

kế quy mô hoặc phạm vi của dự án có lớn hay nhỏ thì giai đoạn nay là luôn cần thiết,

có thể được coi là giai đoạn quan trọng nhất vì nó sẽ định hình cả dự án về sau Giai

đoạn này bao gồm các bước sau

Bước 1: Kham pha

Hãy dành nhiều thời gian nhất có thé dé thu thập các thông tin liên quan tới dự ánbao gồm thông tin về doanh nghiệp đầu tư, doanh nghiệp phát triển, trang web cần

được cải thiện, các đối thủ cạnh tranh Một số hoạt động chính trong bước nảy có thể

kế đến như sau:

Thu thập thông tin từ phía doanh nghiệp

Trang 27

Khi triển khai một dự án cải thiện website, bước đầu chúng ta cần hiểu về doanhnghiệp đằng sau website đó Chúng ta thu thập các thông tin liên quan tới doanhnghiệp đó thông qua các khảo sát nhanh bằng cách chuẩn bị trước các câu hỏi liênquan hoặc thu thập và tổng hợp thông tin từ các tài liệu mà họ có thể cung cấp như tàiliệu quảng cáo, kinh doanh, các mẫu thử sản phẩm (nếu đó là một doanh nghiệp sảnxuất hay bán hàng hóa) Những dữ liệu này sẽ giúp chúng ta hiểu hơn về nhóm người

dùng website và mục tiêu của họ.

Hiêu về người dùng

Sử dụng những dữ liệu từ việc khảo sát và thu thập thông tin về doanh nghiệp nóitrên dé biết được ai là người dùng cuối của website, tại sao họ truy cập vào web và họlàm những gi ở trên trang web này Từ đó, ta có thé xây dựng được chân dung ngườidùng để phục vụ cho các giai đoạn tiếp sau

Phân tích đối thủ cạnh tranh (nếu có)

Phân tích các đối thủ cạnh tranh bằng cách trực tiếp trải nghiệm những trang web

đó, thực hiện các tác vụ, trao đổi với đội ngũ chăm sóc khách hàng và đánh giá xemđâu là những điểm thành công và gây khó chịu trên những website này Từ đó, ta cóthể nâng cao lợi thế cạnh tranh cho website của mình băng cách làm tốt hơn hoặc làm

khác di.

Xác định mục đích chung của dự án

Đến bước này, khi chúng ta đã có được cái nhìn tổng quan về doanh nghiệp cũng

như người dùng cuối của website, ta sẽ chuyền sang việc xác định các mục đích, mục

tiêu của trang (ví dụ như tăng lưu lượng truy cập - traffic, giảm số lượng cuộc gọi tới

bộ phận chăm sóc khách hàng, tăng doanh thu bán hàng, cải thiện điều hướng hay đạt

được một bộ dạng khác, ) Bước này sẽ giúp ta trả lời được câu hỏi “Tai sao chúng ta

thiết kế lại trang?”

Bước 2: Lên kế hoạch

Tạo kế hoạch cho dự án

Kế hoạch dự án bao gồm ngân sách, lịch trình, tài liệu kỹ thuật và bất kỳ thông tinnào khác giúp thiết lập phạm vi cho dự án Tài liệu này có các trình bày khác nhau phụthuộc vào tính chất của dự án

Lên ngân sách cho dự án

Ngân sách xác định quy mô, ranh giới và tính khả thi của một dự án Ngân sách

thực tế được tính theo giờ Ngân sách mà doanh nghiệp khách hang (client) có và ngânsách cụ thể cho dự án có thể khác nhau Chúng ta cần cân nhắc điều này cũng như

Trang 28

nguồn lực chúng ta có dé xem xét thay đổi phạm vi dự án và chất lượng sản pham ban

giao một cách phù hợp.

Theo dõi thời gian dự án

Hãy tìm một phương pháp đáng tin cậy để theo dõi thời gian làm việc Theo dõi thờigian làm việc thực tế so với thời gian đã dự kiến dé có thé biết khi nào một dự án đang

vượt quá ngân sách.

Tạo lịch biểu

Đầu tiên, chúng ta nên thiết lập lịch biểu tổng quan dé có một cái nhìn bao quát về

dự án và sau đó là một lịch biểu chỉ tiết, theo từng ngày dé biết được những cột mốc

dự án quan trọng như ngày bản giao sản phẩm, đánh giá phê duyệt, Cả hai loại lịchbiểu này đều thể hiện được tính cấp bách và thúc đây đội nhóm làm việc một cách hiệu

quả và đúng thời hạn.

Lên kế hoạch thực hiện kiểm thử người dùng

Ở bước này, hãy quyết định hình thức kiểm thử người dùng mà dự án của bạn sẽ sử

dụng, nếu có Việc kiểm thử khả năng sử dụng sẽ cho ta thay được người dùng thực sự

có thê làm gì chứ không phải những gì họ nghĩ họ có thể làm Nếu chúng ta có dự địnhthực hiện kiểm thử, hãy quyết định phạm vi va đưa nó vao lịch biểu dự án càng sớm

cảng tôt.

Bắt đầu dự án Ở bước này, đội ngũ triển khai dự án sẽ ngồi họp lại với doanh

nghiệp khách hang dé đi qua tat cả các tài liệu từ tai liệu ngân sách dự kiến cho tới lich

biểu thực hiện, đã tạo ở trên, từ đó điều chỉnh các kỳ vọng và thiết lập phạm vi dự

án.

- _ Giai đoạn 2: Xây dựng cấu trúc trang web (Develop Site Structure)

Giai đoạn 2 bắt đầu với các chiến lược về nội dung để xác định cách tổ chức thông

tin sao cho người truy cập trang web có thê tìm thấy thông tin đó một cách nhanh

chóng và dễ dàng nhất

Trang 29

này mà không xác định cái kia Việc phân chia và phân loại các trang phải dựa vào nội

dung và cách chúng ta tổ chức nội dung của một trang sẽ xác định xương sống cho quá

trình cau trúc

Về việc xây dựng cau trúc trang

Nó bao gôm các việc như tạo sơ đô trang web và tô chức đặt tên.

Tạo sơ đồ trang web

Sơ đồ trang web hiển thị các liên kết gợi ý và điều hướng chính Nếu so đồ trang

web thay đổi, sơ đồ đó phải được cập nhật, phê duyệt lại và phân phối lại trên toàn bộ

nền tảng web Đề tạo một sơ đồ mới thì chúng ta cần hiểu rõ sơ đồ hiện tại của trang từ

góc nhìn của người dùng cuối và tự trả lời các câu hỏi như “Làm thế nào dé thay đổi

nó trở nên dé hiểu hơn?”

Trang 30

Tổ chức đặt tên

Không có phương pháp chính xác hay tiêu chuẩn ngành nào đề đặt tên cho các trangweb vì vậy hãy tự thiết lập phương pháp đó với đội nhóm của mình và sử dụng mộtcách nhất quán

- _ Giai đoạn 3: Thiết kế giao diện trực quan (Design Visual Interface)

Ngay cả trước khi người dùng biết liệu trang web có dé sử dụng hay không, họ đãxem nó trông như thế nào Do đó, thiết kế trực quan, “lock and feel” của giao diện webảnh hưởng rất nhiều lên trải nghiệm đầu tiên mà người dùng có với trang web Ở giai

đoạn này, tất cả các yếu tố thiết kế được tạo ra dựa trên kiến trúc thông tin đã được

thiết lập Thiết kế sau đó sẽ được phê duyệt, tỉnh chỉnh và kiêm thử

Giai đoạn này gồm các bước chính đó là Thiết kế, Phê duyệt và Bàn giao

Thiết kế

Nguyễn Hỗ Tân - B19DCPT200 l6

Trang 31

Thiết kế trực quan không chỉ là tạo ra một giao diện đẹp; đó là việc đáp ứng nhu cầucủa khách truy cập trang web bằng các giải pháp ở nhiều cấp độ Ngay cả khi thiết kế

hấp dẫn, nếu nó khó sử dụng, nó sẽ không thành công

Do vậy, trước hết ta cần luôn nhắn sát với mục tiêu của trang dé luôn giữ một địnhhướng đó là thiết kế cho người dùng, chứ không phải thiết kế cho “cai tôi” của ngườithiết kế Sau đó đến bước xây dựng ý tưởng thiết kế Nó sẽ bao gồm việc đưa ra cácgiải pháp trực quan đáp ứng được các mục tiêu của trang web Tới đây, người thiết kế

có thé thử nghiệm với màu sắc và các dang bố cục khác nhau và phác thao Người thiết

kế cũng sẽ làm việc cùng với đội lập trình dé xác định tinh khả thi của giao diện trước

khi trình bày với doanh nghiệp khách hàng.

Đối với các mục dich sản xuất, thiết kế đang diễn ra, việc đưa ra tài liệu định hướngthiết kế (style guide) là cần thiết Tài liệu này liệt kê các tiêu chuẩn đã được thiết lậpcho phông chữ, màu sắc, tiêu đề và nhiều cách xử lý khác dé giúp duy trì tính toàn vencủa thiết kế

Phê duyệt

Sau khi hoàn thiện các bản phác thảo, đại diện nhóm dự án sẽ trình bày cho khách

hàng về ý tưởng và giao diện thiết kế Việc trình bày này sẽ có thể dẫn tới việc phảisửa đổi và tinh chỉnh nhiều lần Nên nhớ, chúng ta hãy đặt kỳ vọng rõ ràng: kiểm soátkhách hàng và tránh “hội chứng điều chỉnh vô tận” Nếu khách hàng kéo theo mộthướng không được nêu ban dau, hãy đề xuất nâng cao ngân sách cần trả với họ Tinhchỉnh thiết kế đã thỏa thuận cho đến khi nó được phê duyệt trên giấy tờ

Bàn giao thiết kế

Sau khi giao diện được tinh chỉnh, phê duyệt va thử nghiệm, giao diện đó cần được

áp dụng trên nhiều trang và sau đó mỗi trang đó phải được chuẩn bị dé tối ưu hóa vàsản xuất HTML

- Giai đoạn 4: Xây dựng và tích hợp (Build and Integrate)

Ở giai đoạn này, đội ngũ lập trình sẽ bắt tay vào việc lập trình HTML cho các giao

diện web đã được thiết kế Đội ngũ lập trình sẽ cần tối ưu kích thước của trang để thời

gian tải được giảm đi nhiều nhất có thể Sau khi đã lập trình xong thì cần thực hiện

kiểm thử để đảm bảo chất lượng trang (quality assurance testing) Đây là quá trình

kiểm tra toàn diện trang web của bạn đề tìm lỗi, những sai số về giao diện được thiết

kế và sau khi được lập trình, đồng thời cũng đánh giá một số yếu tố khác về chất lượng

trang như thời gian đáp ứng, luồng tính năng tương ứng với các thông số đã đặt ra ban

đầu Sau khi kiểm thử, đội ngũ lập trình sẽ đặt ra ưu tiên cho từng lỗi dựa vào mức độ

Trang 32

nghiệm trọng của lỗi đó và tiễn hình sửa Sau khi mọi thứ hoàn thiện, chúng ta có thébước sang giai đoạn mới là ra mắt trang web

Hình 1.7 : Giai đoạn xây dựng và tích hop

- Giai đoạn 5; Phát hành trang web (Launch and Beyond)Giai đoạn này bao gồm các bước lớn đó là Bàn giao, Phát hành và Bảo trì

Trang 33

Ban giao sản phẩm (Delivery)

Ở bước này, tat cả các tài liệu thiết kế và sản xuất có liên quan phải được tô chức vađóng gói dé gửi khách hàng và nhóm bao trì của bên họ Tất cả các tài liệu (bản mềm

và bản cứng) liên quan đến việc thay đổi phạm vi dự án, các vấn đề về ngân sách và sựchấp thuận của khách hàng, các bản sao cứng của hợp đồng ban đầu đều cần được

nhóm dự án lưu trữ lại.

Phát hành (Launch)

Trang web sẽ được quảng bá trên các nền tảng truyền thông nội bộ lẫn bên ngoài

Sau khi phát hành trang, những người đóng vai trò chủ chốt trong dự án sẽ cùng nhau

ngồi và nhìn lại toàn bộ quá trình cải thiện website để đánh giá xem điều gì đã thành

công và điều gì chưa, từ đó đưa ra những kế hoạch hay mục tiêu phát triển trong tương

lai.

Bao tri (Maintenance)

Trang 34

Tới lúc này, trang web đã được phát hành tới công chúng Đây là lúc chúng ta lên

kế hoạch dé theo dõi va đo lường kết qua của trang dé xem trang web mới có thực sựcải thiện các mục tiêu thiết kế lại ban đầu không? Doanh số bán hàng có tăng không?Các cuộc gọi đến dịch vụ khách hàng có giảm không? Có cả phản hồi định tính và

định lượng về việc sử dụng và sự hài lòng của khách hàng sẽ giúp bạn phân tích thành

công của việc cải thiện website Đội ngũ phát triển cũng sẽ dựa vào những thông sốnày dé lên các kế hoạch bảo trì hay thay đổi thiết kế cho phủ hợp

1.3 Tổng quan về Web Content Accessibility Guidelines 2.2

“ The power of the Web is in its universality Access by everyone regardless of

disability is an essential aspect” - Tim Berners-Lee, W3C Director and inventor of the

World Wide Web "° Tam dịch : Sức mạnh của Web nam ở tính phổ quát của nó Khảnăng tiếp cận của mọi người bat kế khuyết tật là một khía cạnh thiết yếu

Theo thông tư 26/2020/TT-BTTTTF! việc áp dụng đối với các cơ quan chính phủ ởnhiều nước là bắt buộc áp dụng phiên bản 2.0, còn với các đối tượng khác là khuyếnnghi Ở Việt Nam, đề xuất vẫn bắt buộc áp dụng phiên bản 1.0 đối với các đối tượng làtrang thông tin điện tử/công thông tin điện tử/công dịch vụ công của các cơ quan nhanước, đơn vị cung cấp dịch vụ công và các cơ quan báo chí có trang thông tin điện tử

1.3.1 Giới thiệu về Web Content Accessibility Guidelines

Nguyên tắc truy cập nội dung web (WCAG) 2.2 bao gồm nhiều đề xuất dé làm

cho nội dung web dễ truy cập hơn Việc tuân thủ các nguyên tắc này sẽ giúp nhiềungười khuyết tật dễ tiếp cận nội dung hơn, bao gồm các điều chỉnh dành cho người mù

và thị lực kém, diéc va suy giảm thính lực, hạn chế vận động, khuyết tật về ngôn ngữ,

nhạy cảm với ánh sáng và sự kết hợp của những điều này, cũng như một số điều chỉnhdành cho người khuyết tật học tập và hạn chế về nhận thức; nhưng sẽ không giải quyết

mọi nhu cầu của người dùng đối với những người khuyết tật này Những nguyên tắc

này đề cập đến khả năng truy cập nội dung web trên máy tính để bàn, máy tính xáchtay, máy tính bảng và thiết bị di động Việc tuân theo những nguyên tắc này cũng sẽthường xuyên làm cho nội dung Web trở nên hữu dụng hơn đối với người dùng nói

chung.

Tiêu chí thành công của WCAG 2.2 được viết dưới dạng tuyên bố có thể kiểm

chứng và không dành riêng cho công nghệ Hướng dẫn về việc đáp ứng các tiêu chí

thành công trong các công nghệ cụ thể cũng như thông tin chung về cách giải thích các

tiêu chí thành công được cung cấp trong các tài liệu riêng biệt

Các tài liệu WCAG giải thích cách làm cho nội dung web dễ tiếp cận hơn với ngườikhuyết tật "Nội dung" web thường dé cập đến thông tin trong một trang web hoặc ứng

dụng web, bao gồm:

Trang 35

- Thong tin tự nhiên như văn bản, hình ảnh và âm thanh

- Mã hoặc đánh dấu xác định cấu trúc, cách trình bày, v.v

WCAG 2.2 có 13 hướng dẫn Các hướng dẫn được tô chức theo 4 nguyên tắc: có

thé nhận thức (Perceivable), có thể hoạt động (Operable), dé hiểu (Understandable) và

mạnh mẽ (Robust).

Đối với mỗi hướng dẫn, có các tiêu chí thành công có thê kiểm tra được Tiêu chíthành công ở ba cấp độ: A, AA và AAA

Các tiêu chí thành công là những gì xác định "sự phù hợp" với WCAG Đó là, để

đáp ứng WCAG, nội dung cần phải đáp ứng các tiêu chí thành công

1.3.2 Lịch sử phát triển qua các phiên bản!?!

Năm 1999 tô chức quốc tế W3C Web Accessibility Initiative (WAI) phát triển các

tiêu chuẩn và tài liệu hỗ trợ để giúp bạn hiểu và triển khai khả năng truy cập chínhthức phát hành Bộ chỉ dẫn về Khả Năng Truy Cập Nội Dung Web (Web ContentAccessibility Guidelines - WCAG) phiên bản đầu tiên

Các tiêu chuẩn Nguyên tắc truy cập nội dung web (WCAG) 6n định và có thé tham

chiếu khi chúng được xuất bản dưới dang tiêu chuẩn web 'Khuyén nghị W3C'

- WCAG 2.0 được xuất bản vào ngày 11 tháng 12 năm 2008

- WCAG 2.1 được xuất bản vào ngày 5 tháng 6 năm 2018 và bản cập nhật được

công bồ vào ngày 21 tháng 9 năm 2023

- WCAG 2.2 được công bồ vào ngày 5 tháng 10 năm 2023

WCAG 2.0, 2.1 và 2.2 được thiết kế dé "tương thích ngược", có nghĩa là nội dung

phù hợp với WCAG 2.2 cũng phù hợp với WCAG 2.1 và WCAG 2.0.

Tất cả các tiêu chí thành công từ 2.0 được bao gồm trong 2.1 và tất cả từ 2.1 đều

nằm trong 2.2 (ngoại trừ 4.1.1)

- WCAG 2.0 có 12 hướng dan.

- WCAG 2.1 bồ sung 1 hướng dẫn và 17 tiêu chí thành công

- WCAG 2.2 bồ sung thêm 9 tiêu chí thành công

Thay đổi chính là trong WCAG 2.2, một tiêu chí thành công (4.1.1 Phân tích cúpháp) đã lỗi thời Ghi chú được thêm vào WCAG 2.1 và WCAG 2.0 errata giải quyết

vấn đề này

WCAG 2.0, WCAG 2.1 và WCAG 2.2 đều là các tiêu chuẩn hiện có WCAG 2.2

không phản đối hoặc thay thế WCAG 2.1 và WCAG 2.1 không phản đối hoặc thay théWCAG 2.0 W3C khuyến khích nên sử dụng phiên bản WCAG mới nhất

Trang 36

Song song với WCAG 2.2, Nhóm Công tác Hướng dẫn Tiếp cận đang phát triểnMột phiên bản chính khác của nguyên tắc trợ năng Kết quả của công việc này đượcmong đợi dé trở thành một sự tái cau trúc đáng kế hon của hướng dẫn truy cập web sovới thực tế cho các bản phát hành chấm của WCAG 2 Công việc tuân theo một nghiêncứu tập trung, lay người dùng làm trung tâm phương pháp thiết kế dé tạo ra kết quảhiệu quả và linh hoạt nhất, bao gồm Vai trò của tác giả nội dung, hỗ trợ tác nhân ngườidùng và hỗ trợ công cụ tác giả Đây là một nỗ lực kéo đài nhiều năm, vì vậy WCAG2.2 là cần thiết như một biện pháp tạm thời dé cung cấp thông tin cập nhật Hướng dẫn

về khả năng truy cập web dé phan ánh các thay đổi trên web ké từ khi xuất ban

WCAG 2.0 Nhóm công tác cũng có thé phát triển các phiên bản tạm thời bổ sung, tiếptục với WCAG 2.2, trên một dòng thời gian ngắn tương tự dé cung cấp hỗ trợ bổ sung

trong khi Phiên bản chính đã hoàn thành.

1.3.3 Các tiêu chí và cấp độ đánh giá của WCAG 2.2!

WCAG 2.2 được cấu trúc xung quanh bốn câu hỏi chính liên quan đến nội dung

web.

1 Có thé nhận biết được không?

2 Có thé hoạt động được không?

3 Có dé hiểu không?

4 Nó có mạnh mẽ (robust) không?

Từ những câu hỏi này đưa ra các nguyên tắc bao quát được thiết lập trong WCAG

2.21! như sau:

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

Theo nguyên tắc Perceivable: Thông tin và các thành phần giao diện phải hiển thịcho người dùng theo cách họ có thé nhận thức được

- _ Cung cấp đoạn văn bản thay thé cho các nội dung không có chữ

- _ Cung cấp tiêu dé và các loại thay thế khác cho nội dung đa phương tiện

- Tao nội dung có thé được thể hiện ở các cách khác nhau, có thé nhận biết được

bởi các công nghệ hỗ trợ mà không làm mắt ý nghĩa

- Giúp người sử dung cảm thấy dé dang hơn dé nhìn và nghe nội dung

Nguyên tắc “Có thé hoạt động được” (Operable)Các thành phần giao diện người dùng và điều hướng phải hoạt động được

- Lam cho tat cả các chức năng đều có thé thực hiện được từ bàn phim

- Cho người sử dụng đủ thời gian dé đọc và sử dụng nội dung

Trang 37

- _ Không sử dụng nội dung có thé gây ra các phản ứng thé chat

- Giúp người sử dụng duyệt và tìm nội dung

- Giúp người sử dụng dé dàng nhập liệu bằng các thiết bị khác ngoài bàn phim

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

Thông tin và hoạt động của giao diện người dùng phải dé hiểu

- Tao nội dung văn bản có thê đọc được và hiêu được

- Làm cho nội dung xuât hiện và hoạt động theo các cách có thê dự đoán.

- _ Giúp người sử dụng tránh và sửa các lỗi.

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

Nội dung phải có tính chặt chẽ để có thể hiểu được một cách đáng tin cậy bởi nhiềunhóm người dùng, bao gồm cả công nghệ hỗ trợ cũng như tối đa sự tương thích với

các công cụ hiện tai và tương lai.

Một khái niệm quan trọng được đưa ra bởi WCAG 2.2 là ba cấp độ của sự phù hợp

được gọi là Cấp A, Cấp AA và Cấp AAA (hoặc đơn A, đôi A, ba A, tương ứng) Đối

với mỗi một cấp độ sẽ có những tiêu chuẩn tương ứng dé có thể đánh giá các trang

web đã được thiết kế, thực hiện đạt mức độ nao Thông thường, một tô chức sẽ cố

găng cho nội dung web của mình đạt được sự tuân thủ với một trong các cấp này

- Cấp độ A là mức tối thiểu, cơ bản nhất Day là cấp độ mà các trang web bắt

buộc phải đảm bảo được Khi nội dung trang web không đáp ứng các tiêu chuẩncủa cấp A thì không thể đáp ứng khả năng truy cập cho một hoặc một số bộ

phận người dùng.

- Cấp độ AA cao hơn, bao gồm tất cả các yêu cầu của cấp độ A va AA Đây là

cấp độ mà các trang web nên đáp ứng được Khi đáp ứng được cấp độ này thìnhững người khuyết tat sẽ dé dàng truy cập, tiếp cận và hiểu được trang web tốthơn Nếu nội dung web đáp ứng Cấp A, nhưng không phải là Cấp AA, thì một

số hoặc tất cả nội dung sẽ khó truy cập cho một 36 người su dung

- Cap độ AAA là cấp độ cao nhất, bao gồm tất cả các yêu cầu cấp độ A, AA va

AAA Đáp ứng tất cả các yêu cầu đối với Cấp AAA có nghĩa là nội dung càng

dễ hiểu, dễ tiếp cận và sử dụng nhất đối với người khuyết tật, cũng như tươngthích được với các công cụ trợ năng một cách tốt nhất

Mỗi tiêu chí thành công được liệt kê theo nguyên tắc được liên kết với một trong ba

cấp độ trợ năng này Có 40 tiêu chuẩn phù hợp dé đánh giá như bảng 1-1, tuy nhiên

chỉ có 20 tiêu chuẩn có thé áp dụng cho việc kiểm thử tự động, bán tự động Vi vậy, đồ

án tập trung vào nghiên cứu và giới thiệu về các tiêu chí này

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

Trang 38

1.2 Truyền thông dựa trên | 1.2.1 - 1.2.3

Có thể nhận biết được | thời gian

e Các tiêu chuan theo nguyên tắc Perceivable

Dé đáp ứng nguyên tac dau tiên này, các tiêu chuân vê đã được đưa ra như sau:

- - Nội dung đồ hoa quan trọng cũng phải được mô tả bằng văn ban dé các hệ

thống văn bản này cung cấp nội dung thay thế này cho những người không thể

xem hình ảnh.

- Nội dung sẽ được tao ra dé nó không bị mất cấu trúc hoặc ý nghĩa cơ bản của

nó khi được hién thị trên các trang web hoặc thiết bị trợ giúp khác nhau, chănghạn như chữ nỗi, phần mềm nhận dạng giọng nói và điện thoại văn bản

- _ Không sử dụng màu sắc, hình dạng, vị trí hoặc âm thanh làm phương pháp duy

nhất cung cấp hướng dẫn cho người dùng Ví dụ: Các chỉ dẫn như sau: “nhấnvào liên kết màu xanh”, “nhấn nút dừng”, “liên kết ở trên cùng bên phải củatrang” hoặc “khi nghe thấy âm báo, chuyền đến trang tiếp theo”

Trang 39

- Lựa chọn màu hoặc hình ảnh cần đủ tốt dé dé dàng phân biệt nền với chữ trong

nội dung.

Nội dung phi văn bản (1.1.1 Non-text Content) - Cấp độ A

Mục đích của tiêu chuẩn này để thông tin được bao hàm bởi nội dung phi văn bản(non-text content) qua việc sử dụng lựa chọn thay thé văn bản (text alternative) Cáclựa chọn thay thế văn bản là một cách chính để cung cấp thông tin bởi vì chúng có thểđược tạo ra bởi mat kỳ giác quan nao (vi dụ: thị giác, thính giác hoặc xúc giác) dé thỏamãn các nhu cầu của người sử dụng Cung cấp các lựa chọn thay thế văn bản cho phép

thông tin được tạo ra một cách đa dạng bởi các trình hỗ trợ người dùng khác nhau Ví

dụ một người không thể nhìn một bức hình có thẻ nghe được đoạn văn bản thay thếthông qua thiết bị hỗ trợ Một người không thê nghe tệp âm thanh (audio file) có thểđọc được lựa chọn thay thế văn bản Trong tương lai, các lựa chọn thay thế văn bản cóthé cho phép thông tin dé dàng chuyển đổi sang ngôn ngữ cử chỉ hoặc một dang đơn

giản hơn của cùng ngôn ngữ.

Chỉ âm thanh và chỉ video (Ghỉ sẵn) (1.2.1 Audio-only and Video-only - Cấp

độ A

Mục đích của Tiêu chí thành công này là làm cho thông tin được truyền tải bằngcách ghi sẵn Nội dung chỉ có âm thanh và chỉ video được ghi sẵn có sẵn cho tất cảngười dùng Thay thế Đối với phương tiện dựa trên thời gian dựa trên văn bản, làmcho thông tin có thé truy nhập được vi văn bản có thé được hiển thị thông qua bat kỳ

phương thức cảm giác nào (ví dụ: thị giác, thính giác hoặc xúc giác) để phù hợp với

nhu cầu của người sử dụng Trong tương lai, văn bản cũng có thé được dịch sang biểu

tượng, ngôn ngữ ký hiệu hoặc các hình thức đơn giản hon của ngôn ngữ (tương lai).

Một ví dụ về video được quay sẵn không có thông tin âm thanh hoặc tương tác

người dùng là một bộ phim câm Mục đích của bảng điểm là cung cấp tương đươngvới những gì được trình bày trực quan Đối với nội dung video được ghi sẵn, tác giả có

tùy chọn cung cấp một bản âm thanh Mục đích của giải pháp thay thế âm thanh làtương đương với Video Điều này giúp người dùng có và không bị suy giảm thị lực cóthé xem xét nội dung đồng thời Cách tiếp cận cũng có thé giúp những người có nhậnthức dé dang hơn, ngôn ngữ và khuyết tật học tập dé hiéu nội dung vì nó sẽ cung cấp

trình bày song song.

Văn bản tương đương không bắt buộc đối với âm thanh được cung cấp tương đươngcho video không có thông tin âm thanh Ví dụ: không bắt buộc phải tạo phụ đề chovideo Mô tả được cung cấp thay thế cho một bộ phim câm

Thông tin và các mối quan hệ (1.3.1 Info and Relationships) - Cấp độ A

Trang 40

Mục đích của Tiêu chí thành công này là để đảm bảo rằng thông tin và các mối

quan hệ được ngụ ý bởi định dạng thị giác hoặc thính giác được giữ nguyên khi trình

bày thay đổi định dạng Ví dụ: định dạng bản trình bày thay đôi khi nội dung được đọc

bang bộ đọc màn hình hoặc khi biểu định kiểu người dùng được thay thế cho biéu định

kiểu được cung cấp của tác giả

Tín hiệu thính giác cũng có thể được sử dụng Ví dụ: chuông có thể chỉ ra sự khởi

đầu của một phần mới; Một sự thay đôi trong cao độ giọng nói hoặc tốc độ nói có thể

được sử dụng dé nhấn mạnh thông tin quan trọng hoặc dé chỉ ra văn bản được trích

dẫn; v.v.

Tiêu chuẩn này đảm bảo rằng thông tin và các mối liên hệ mà được thể hiện dướiđịnh dạng trực quan hoặc nội dung nghe sẽ được bảo tồn khi cấu trúc hiển thị thay đôi(ví dụ khi nội dung được đọc bởi một trình đọc màn hình) - Đánh dấu trang có ý nghĩa(semantic markup) dùng đề thiết kế các đề mục (heading), các vùng (region/landmark),

danh sách (list), đoạn văn bản đặc biệt (ví du <strong>, <code>, <abbr>,

<blockquote>) Các thẻ cần được bồ trí một cách hợp lý - Bảng (table) được sử dungcho đữ liệu kiểu bảng và các ô dữ liệu cần có mối liên hệ với tiêu đề cột Tiêu đề bảngnếu có cần gắn với nội dung của bảng đữ liệu - Nhãn (text label) được gắn với các

thành phần nhập liệu (form input elements) Các thành phần liên quan đến nhau cần

được nhóm vào thành fieldset/legend ARIA label có thé được sử dụng khi HTML tiêu

chuẩn không đủ thể hiện thông tin

Điều chỉnh nội dung tiếng (1.4.2 Audio Control) - Cấp độ A

Những người sử dụng trình đọc màn hình sẽ thay khó dé nghe thông tin qua tiếng

nói nếu có âm thanh khác đang được bật trong cùng khoảng thời gian Việc này còn

khó hơn khi tiếng nói và âm thanh được điều chỉnh âm lượng một cách đồng bộ Vì

vậy việc người sử dụng có thê tắt được âm thanh nền là rất quan trọng

Chú ý: Việc có thé điều khiển âm lượng có nghĩa là có thể điều chỉnh nó về mức 0.Các âm thanh được tự động bật trên trang web nên được tự động tắt sau 3 giây

Độ tương phan (Toi thiểu) (1.4.3 Contrast (Minimum)) - Cấp độ AA

Mục đích của Tiêu chí thành công này là cung cấp đủ độ tương phản giữa văn bản

và nền tảng của nó, dé nó có thé được đọc bởi những người có thị lực thấp vừa phải

hoặc suy giảm nhận thức tương phản, không sử dụng công nghệ hỗ trợ tăng cường độ

tương phản.

Đôi với tât cả người tiêu dùng nội dung trực quan, cân có độ tương phản sáng-tôi

đây đủ giữa độ chói tương đôi của văn bản và nên của nó cho khả năng đọc tôt Nhiêu

Định dạng
Số trang	103
Dung lượng	26,02 MB

Tiêu đề	Nghiên cứu Web Content Accessibility Guidelines (WCAG) 2.2 để đánh giá và áp dụng vào thiết kế cải thiện giao diện website MyTV dành cho người dùng cuối
Tác giả	Nguyễn Hồ Tõn
Người hướng dẫn	Nguyễn Thị Tuyết Mai
Trường học	Học viện Công nghệ Bưu chính Viễn thông
Chuyên ngành	Công nghệ đa phương tiện
Thể loại	Đồ án tốt nghiệp
Năm xuất bản	2023
Thành phố	Hà Nội