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

BO THONG TIN VÀ TRUYEN THONG HỌ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 Mai Sinh 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 Đồ á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à á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 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ệm ngườ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ức khô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ách thứ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ột bướ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 hop khả năng truy cập trên trang web MyTV trở nên vô cùng quan trọng Trong bối cảnh này, nghiên cứu về ứng dụng khả năng tiếp cận vào website xem phim MyTV không chỉ 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ặc hạ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 Đồ án tốt nghiệp Đại học DE CƯƠNG 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ơn vớ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 dam 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 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” phục vụ cho việc thực hiện dự án và đồ án tố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 website 1.2.2 Nguyên lý thiết kế giao điện website 1.2.3 Quy trình thiết kế giao diện website 1.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ế website Tiểu kết chương 1 CHƯƠNG 2: ỨNG DỤNG WEB CONTENT ACCESSIBILITY GUIDELINES (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 Nguyễn Hỗ Tân - B19DCPT200 i Đồ án tốt nghiệp Đại học DE CƯƠNG 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 desktop 3.2.2 _ Triển khai trên màn hình Mobile phone Tiể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) Nguyễn Hỗ Tân - B19DCPT200 i Đồ á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 confenf accessibility guidelines (WCAG) 2.2 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” là công trình nghiên cứu của bản thân mì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ài liệu tham khảo, bao gồm các nguồn thông tin đã được sử dụng trong quá trình nghiên cứ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 ñ Đồ á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 mong rằ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 Đồ á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 vi DANH MỤC CÁC BANG vii LOI 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 2 2.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 6 1.2 Tổng quan thiết kế giao diện 7 Nguyễn Hỗ Tân - B19DCPT200 iv Đồ án tốt nghiệp Đại học MỤC LỤC 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 7 1.2.3 Quy trình thiết kế giao diện website 11 1.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 ACCESSIBILITY GUIDELINES (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 55 2.2.4 Phân tính kết quả kiểm thứ website MyTV 59 2.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 68 CHUONG 3.THIẾT KE GIAO DIEN WEBSITE MYTV 69 3.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 Đồ án tốt nghiệp Đại học MỤC LỤC 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 75 3.2.2 _ Triển khai trên man hình Mobile phone 82 Tiểu kết chương 3 83 84 KET LUẬN 84 1 Kết quả đạt được 84 2 Hạn chế gặp phải 85 3 Dinh hướng tiếp theo 86 DANH MỤC TÀI LIỆU THAM KHẢO Nguyễn Hỗ Tân - B19DCPT200 iv Đồ á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 Tiêng Anh Chữ viết tắt 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 — Web Content Accessibility Guidelines ¬G World Wide Web Nguyễn Hỗ Tân - B19DCPT200 v