# Tạo Trang Web Dễ Tiếp Cận ![Tất cả về khả năng tiếp cận](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.vi.png) > Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey title Your Accessibility Learning Adventure section Foundation Understanding Users: 5: You Testing Tools: 4: You POUR Principles: 5: You section Build Skills Semantic HTML: 4: You Visual Design: 5: You ARIA Techniques: 4: You section Master Practice Keyboard Navigation: 5: You Form Accessibility: 4: You Real-world Testing: 5: You ``` ## Câu hỏi trước bài giảng [Câu hỏi trước bài giảng](https://ff-quizzes.netlify.app/web/) > Sức mạnh của Web nằm ở tính phổ quát của nó. Việc mọi người đều có thể truy cập, bất kể khuyết tật, là một khía cạnh thiết yếu. > > \- Sir Timothy Berners-Lee, Giám đốc W3C và người phát minh ra World Wide Web Đây là điều có thể khiến bạn ngạc nhiên: khi bạn xây dựng các trang web dễ tiếp cận, bạn không chỉ giúp đỡ những người khuyết tật—mà thực sự bạn đang làm cho web trở nên tốt hơn cho tất cả mọi người! Bạn có bao giờ để ý những đoạn đường dốc ở góc phố không? Ban đầu chúng được thiết kế cho xe lăn, nhưng giờ đây chúng giúp người đi xe đẩy, nhân viên giao hàng với xe đẩy, du khách với hành lý kéo, và cả người đi xe đạp nữa. Đó chính là cách thiết kế web dễ tiếp cận hoạt động—những giải pháp giúp một nhóm thường sẽ mang lại lợi ích cho tất cả mọi người. Thật tuyệt phải không? Trong bài học này, chúng ta sẽ khám phá cách tạo ra các trang web thực sự hoạt động cho tất cả mọi người, bất kể họ duyệt web như thế nào. Bạn sẽ tìm hiểu các kỹ thuật thực tế đã được tích hợp trong các tiêu chuẩn web, thực hành với các công cụ kiểm tra, và thấy cách khả năng tiếp cận làm cho các trang web của bạn dễ sử dụng hơn cho tất cả người dùng. Kết thúc bài học này, bạn sẽ tự tin để biến khả năng tiếp cận thành một phần tự nhiên trong quy trình phát triển của mình. Sẵn sàng khám phá cách những lựa chọn thiết kế chu đáo có thể mở rộng web cho hàng tỷ người dùng? Hãy bắt đầu nào! ```mermaid mindmap root((Web Accessibility)) Users Screen readers Keyboard navigation Voice control Magnification Technologies HTML semantics ARIA attributes CSS focus indicators Keyboard events Benefits Wider audience Better SEO Legal compliance Universal design Testing Automated tools Manual testing User feedback Real assistive tech ``` > Bạn có thể học bài này trên [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)! ## Hiểu về Công nghệ Hỗ trợ Trước khi chúng ta bắt đầu viết mã, hãy dành một chút thời gian để hiểu cách những người có khả năng khác nhau thực sự trải nghiệm web. Đây không chỉ là lý thuyết—hiểu các mô hình điều hướng thực tế này sẽ giúp bạn trở thành một nhà phát triển tốt hơn nhiều! Công nghệ hỗ trợ là những công cụ tuyệt vời giúp người khuyết tật tương tác với các trang web theo những cách có thể khiến bạn ngạc nhiên. Một khi bạn hiểu cách các công nghệ này hoạt động, việc tạo ra trải nghiệm web dễ tiếp cận sẽ trở nên trực quan hơn nhiều. Nó giống như học cách nhìn mã của bạn qua con mắt của người khác. ### Trình đọc màn hình [Trình đọc màn hình](https://en.wikipedia.org/wiki/Screen_reader) là những công nghệ khá tinh vi chuyển đổi văn bản kỹ thuật số thành âm thanh hoặc đầu ra chữ nổi. Mặc dù chúng chủ yếu được sử dụng bởi những người khiếm thị, nhưng chúng cũng rất hữu ích cho người dùng có các khuyết tật học tập như chứng khó đọc. Tôi thích nghĩ về trình đọc màn hình như một người kể chuyện thông minh đang đọc sách cho bạn. Nó đọc nội dung thành tiếng theo thứ tự logic, thông báo các yếu tố tương tác như "nút" hoặc "liên kết," và cung cấp các phím tắt để di chuyển quanh trang. Nhưng đây là điều—trình đọc màn hình chỉ có thể hoạt động tốt nếu chúng ta xây dựng các trang web với cấu trúc đúng và nội dung có ý nghĩa. Đó là nơi bạn, với tư cách là nhà phát triển, đóng vai trò quan trọng! **Các trình đọc màn hình phổ biến trên các nền tảng:** - **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (miễn phí và phổ biến nhất), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (tích hợp sẵn) - **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (tích hợp sẵn và rất mạnh mẽ) - **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (tích hợp sẵn) - **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (miễn phí và mã nguồn mở) **Cách trình đọc màn hình điều hướng nội dung web:** Trình đọc màn hình cung cấp nhiều phương pháp điều hướng giúp việc duyệt web hiệu quả hơn cho người dùng có kinh nghiệm: - **Đọc tuần tự**: Đọc nội dung từ trên xuống dưới, giống như đọc một cuốn sách - **Điều hướng theo điểm mốc**: Nhảy giữa các phần của trang (đầu trang, điều hướng, chính, chân trang) - **Điều hướng theo tiêu đề**: Nhảy giữa các tiêu đề để hiểu cấu trúc trang - **Danh sách liên kết**: Tạo danh sách tất cả các liên kết để truy cập nhanh - **Điều khiển biểu mẫu**: Điều hướng trực tiếp giữa các trường nhập liệu và nút > 💡 **Điều này khiến tôi rất ngạc nhiên**: 68% người dùng trình đọc màn hình chủ yếu điều hướng bằng tiêu đề ([Khảo sát WebAIM](https://webaim.org/projects/screenreadersurvey9/#finding)). Điều này có nghĩa là cấu trúc tiêu đề của bạn giống như một bản đồ cho người dùng—khi bạn làm đúng, bạn thực sự đang giúp mọi người tìm đường quanh nội dung của bạn nhanh hơn! ### Xây dựng quy trình kiểm tra của bạn Đây là tin tốt—kiểm tra khả năng tiếp cận hiệu quả không cần phải quá phức tạp! Bạn sẽ muốn kết hợp các công cụ tự động (chúng rất tuyệt vời trong việc phát hiện các vấn đề rõ ràng) với một số kiểm tra thực tế. Đây là cách tiếp cận có hệ thống mà tôi thấy bắt được nhiều vấn đề nhất mà không tốn quá nhiều thời gian: **Quy trình kiểm tra thủ công cơ bản:** ```mermaid flowchart TD A[🚀 Start Testing] --> B{⌨️ Keyboard Navigation} B --> C[Tab through all interactive elements] C --> D{🎧 Screen Reader Testing} D --> E[Test with NVDA/VoiceOver] E --> F{🔍 Zoom Testing} F --> G[Zoom to 200% and test functionality] G --> H{🎨 Color/Contrast Check} H --> I[Verify all text meets contrast ratios] I --> J{👁️ Focus Management} J --> K[Ensure focus indicators are visible] K --> L[✅ Testing Complete] style A fill:#e3f2fd style L fill:#e8f5e8 style B fill:#fff3e0 style D fill:#f3e5f5 style F fill:#e0f2f1 style H fill:#fce4ec style J fill:#e8eaf6 ``` **Danh sách kiểm tra từng bước:** 1. **Điều hướng bằng bàn phím**: Chỉ sử dụng Tab, Shift+Tab, Enter, Space, và các phím mũi tên 2. **Kiểm tra trình đọc màn hình**: Bật NVDA, VoiceOver, hoặc Narrator và điều hướng với mắt nhắm 3. **Kiểm tra phóng to**: Kiểm tra ở mức phóng to 200% và 400% 4. **Xác minh độ tương phản màu sắc**: Kiểm tra tất cả văn bản và các thành phần giao diện người dùng 5. **Kiểm tra chỉ báo tiêu điểm**: Đảm bảo tất cả các yếu tố tương tác có trạng thái tiêu điểm rõ ràng ✅ **Bắt đầu với Lighthouse**: Mở DevTools của trình duyệt, chạy kiểm tra khả năng tiếp cận bằng Lighthouse, sau đó sử dụng kết quả để tập trung vào các khu vực kiểm tra thủ công. ### Công cụ phóng to và phóng đại Bạn biết cách bạn đôi khi phóng to trên điện thoại khi văn bản quá nhỏ, hoặc nheo mắt nhìn màn hình laptop dưới ánh sáng mặt trời? Nhiều người dùng dựa vào các công cụ phóng đại để làm cho nội dung dễ đọc mỗi ngày. Điều này bao gồm những người có thị lực kém, người lớn tuổi, và bất kỳ ai từng cố đọc một trang web ngoài trời. Công nghệ phóng to hiện đại đã phát triển vượt xa việc chỉ làm mọi thứ lớn hơn. Hiểu cách các công cụ này hoạt động sẽ giúp bạn tạo ra các thiết kế đáp ứng vẫn giữ được chức năng và hấp dẫn ở bất kỳ mức độ phóng đại nào. **Khả năng phóng to của trình duyệt hiện đại:** - **Phóng to trang**: Phóng to tất cả nội dung theo tỷ lệ (văn bản, hình ảnh, bố cục) - đây là phương pháp ưu tiên - **Phóng to chỉ văn bản**: Tăng kích thước phông chữ trong khi giữ nguyên bố cục ban đầu - **Phóng to bằng cách chụm tay**: Hỗ trợ cử chỉ trên thiết bị di động để phóng đại tạm thời - **Hỗ trợ trình duyệt**: Tất cả các trình duyệt hiện đại hỗ trợ phóng to lên đến 500% mà không làm hỏng chức năng **Phần mềm phóng đại chuyên dụng:** - **Windows**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (tích hợp sẵn), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) - **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (tích hợp sẵn với các tính năng nâng cao) > ⚠️ **Cân nhắc thiết kế**: WCAG yêu cầu nội dung vẫn phải hoạt động khi được phóng to đến 200%. Ở mức này, cuộn ngang nên được giảm thiểu, và tất cả các yếu tố tương tác vẫn phải dễ tiếp cận. ✅ **Kiểm tra thiết kế đáp ứng của bạn**: Phóng to trình duyệt của bạn lên 200% và 400%. Bố cục của bạn có thích ứng một cách mượt mà không? Bạn có thể truy cập tất cả các chức năng mà không cần cuộn quá nhiều không? ## Công cụ Kiểm Tra Khả Năng Tiếp Cận Hiện Đại Bây giờ bạn đã hiểu cách mọi người điều hướng web với công nghệ hỗ trợ, hãy khám phá các công cụ giúp bạn xây dựng và kiểm tra các trang web dễ tiếp cận. Hãy nghĩ như thế này: các công cụ tự động rất tốt trong việc phát hiện các vấn đề rõ ràng (như thiếu văn bản thay thế), trong khi kiểm tra thực tế giúp bạn đảm bảo trang web của mình dễ sử dụng trong thế giới thực. Kết hợp cả hai, bạn sẽ tự tin rằng các trang web của mình hoạt động cho tất cả mọi người. ### Kiểm tra độ tương phản màu sắc Đây là tin tốt: độ tương phản màu sắc là một trong những vấn đề khả năng tiếp cận phổ biến nhất, nhưng cũng là một trong những vấn đề dễ khắc phục nhất. Độ tương phản tốt mang lại lợi ích cho tất cả mọi người—từ người dùng có thị lực kém đến những người cố đọc điện thoại của họ trên bãi biển. **Yêu cầu độ tương phản của WCAG:** | Loại văn bản | WCAG AA (Tối thiểu) | WCAG AAA (Nâng cao) | |--------------|---------------------|---------------------| | **Văn bản thường** (dưới 18pt) | Tỷ lệ tương phản 4.5:1 | Tỷ lệ tương phản 7:1 | | **Văn bản lớn** (18pt+ hoặc 14pt+ đậm) | Tỷ lệ tương phản 3:1 | Tỷ lệ tương phản 4.5:1 | | **Thành phần giao diện người dùng** (nút, viền biểu mẫu) | Tỷ lệ tương phản 3:1 | Tỷ lệ tương phản 3:1 | **Công cụ kiểm tra cần thiết:** - [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - Ứng dụng máy tính với công cụ chọn màu - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - Công cụ trực tuyến với phản hồi tức thì - [Stark](https://www.getstark.co/) - Plugin công cụ thiết kế cho Figma, Sketch, Adobe XD - [Accessible Colors](https://accessible-colors.com/) - Tìm bảng màu dễ tiếp cận ✅ **Xây dựng bảng màu tốt hơn**: Bắt đầu với màu thương hiệu của bạn và sử dụng các công cụ kiểm tra độ tương phản để tạo các biến thể dễ tiếp cận. Ghi lại chúng như các token màu dễ tiếp cận trong hệ thống thiết kế của bạn. ### Kiểm tra khả năng tiếp cận toàn diện Kiểm tra khả năng tiếp cận hiệu quả nhất là kết hợp nhiều phương pháp. Không có công cụ nào bắt được tất cả mọi thứ, vì vậy xây dựng một quy trình kiểm tra với các phương pháp khác nhau đảm bảo độ phủ toàn diện. **Kiểm tra dựa trên trình duyệt (tích hợp trong DevTools):** - **Chrome/Edge**: Kiểm tra khả năng tiếp cận bằng Lighthouse + bảng Accessibility - **Firefox**: Accessibility Inspector với chế độ xem cây chi tiết - **Safari**: Tab Audit trong Web Inspector với mô phỏng VoiceOver **Tiện ích mở rộng kiểm tra chuyên nghiệp:** - [axe DevTools](https://www.deque.com/axe/devtools/) - Công cụ kiểm tra tự động tiêu chuẩn ngành - [WAVE](https://wave.webaim.org/extension/) - Phản hồi trực quan với đánh dấu lỗi - [Accessibility Insights](https://accessibilityinsights.io/) - Bộ công cụ kiểm tra toàn diện của Microsoft **Tích hợp dòng lệnh và CI/CD:** - [axe-core](https://github.com/dequelabs/axe-core) - Thư viện JavaScript để kiểm tra tự động - [Pa11y](https://pa11y.org/) - Công cụ kiểm tra khả năng tiếp cận dòng lệnh - [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - Chấm điểm khả năng tiếp cận tự động > 🎯 **Mục tiêu kiểm tra**: Nhắm đến điểm số khả năng tiếp cận Lighthouse từ 95+ làm cơ sở. Hãy nhớ rằng, các công cụ tự động chỉ bắt được khoảng 30-40% vấn đề về khả năng tiếp cận—kiểm tra thủ công vẫn rất cần thiết! ### 🧠 **Kiểm tra kỹ năng: Sẵn sàng tìm vấn đề?** **Hãy xem bạn cảm thấy thế nào về việc kiểm tra khả năng tiếp cận:** - Phương pháp kiểm tra nào hiện tại có vẻ dễ tiếp cận nhất với bạn? - Bạn có thể tưởng tượng việc sử dụng điều hướng chỉ bằng bàn phím trong một ngày không? - Một rào cản về khả năng tiếp cận mà bạn từng gặp phải trên mạng là gì? ```mermaid pie title "Accessibility Issues Caught by Different Methods" "Automated Tools" : 35 "Manual Testing" : 40 "User Feedback" : 25 ``` > **Tăng cường sự tự tin**: Các chuyên gia kiểm tra khả năng tiếp cận sử dụng chính xác sự kết hợp các phương pháp này. Bạn đang học các thực hành tiêu chuẩn ngành! ## Xây dựng Khả Năng Tiếp Cận Từ Đầu Chìa khóa để thành công trong việc tạo ra khả năng tiếp cận là xây dựng nó vào nền tảng ngay từ ngày đầu tiên. Tôi biết rất dễ bị cám dỗ nghĩ rằng "Tôi sẽ thêm khả năng tiếp cận sau," nhưng điều đó giống như cố gắng thêm một đoạn đường dốc vào một ngôi nhà sau khi nó đã được xây dựng. Có thể? Có. Dễ dàng? Không thực sự. Hãy nghĩ về khả năng tiếp cận như việc lập kế hoạch cho một ngôi nhà—sẽ dễ dàng hơn nhiều để bao gồm khả năng tiếp cận xe lăn trong kế hoạch kiến trúc ban đầu của bạn hơn là sửa đổi mọi thứ sau này. ### Nguyên tắc POUR: Nền tảng khả năng tiếp cận của bạn Các Nguyên tắc Hướng dẫn Nội dung Web (WCAG) được xây dựng xung quanh bốn nguyên tắc cơ bản tạo thành POUR. Đừng lo—đây không phải là những khái niệm học thuật khô khan! Chúng thực sự là các hướng dẫn thực tế để tạo nội dung hoạt động cho tất cả mọi người. Một khi bạn hiểu nguyên tắc POUR, việc đưa ra các quyết định về khả năng tiếp cận sẽ trở nên trực quan hơn nhiều. Nó giống như có một danh sách kiểm tra tinh thần hướng dẫn các lựa chọn thiết kế của bạn. Hãy cùng phân tích: ```mermaid flowchart LR A[🔍 PERCEIVABLE
Can users sense it?] --> B[🎮 OPERABLE
Can users use it?] B --> C[📖 UNDERSTANDABLE
Can users get it?] C --> D[💪 ROBUST
Does it work everywhere?] A1[Alt text
Captions
Contrast] --> A B1[Keyboard access
No seizures
Time limits] --> B C1[Clear language
Predictable
Error help] --> C D1[Valid code
Compatible
Future-proof] --> D style A fill:#e1f5fe style B fill:#e8f5e8 style C fill:#fff3e0 style D fill:#f3e5f5 ``` **🔍 Có thể nhận thức được**: Thông tin phải được trình bày theo cách người dùng có thể nhận thức thông qua các giác quan của họ - Cung cấp các thay thế văn bản cho nội dung không phải văn bản (hình ảnh, video, âm thanh) - Đảm bảo độ tương phản màu sắc đủ cho tất cả văn bản và các thành phần giao diện người dùng - Cung cấp phụ đề và bản ghi cho nội dung đa phương tiện - Thiết kế nội dung vẫn hoạt động khi được phóng to lên đến 200% - Sử dụng nhiều đặc điểm cảm giác (không chỉ màu sắc) để truyền tải thông tin **🎮 Có thể vận hành**: Tất cả các thành phần giao diện phải có thể vận hành thông qua các phương pháp nhập liệu có sẵn - Làm cho tất cả chức năng có thể truy cập thông qua điều hướng bằng bàn phím - Cung cấp cho người dùng đủ thời gian để đọc và tương tác với nội dung - Tránh nội dung gây co giật hoặc rối loạn tiền đình - Giúp người dùng điều hướng hiệu quả với cấu trúc rõ ràng và các điểm mốc - Đảm bảo các yếu tố tương tác có kích thước mục tiêu đủ lớn (tối thiểu 44px) **📖 Có thể hiểu được**: Thông tin và hoạt động giao diện phải rõ ràng và dễ hiểu - Sử dụng ngôn ngữ rõ ràng, đơn giản phù hợp với đối tượng của bạn - Đảm bảo nội dung xuất hiện và hoạt động theo cách có thể dự đoán và nhất quán - Cung cấp hướng dẫn rõ ràng và thông báo lỗi cho đầu vào của người dùng - Giúp người dùng hiểu và sửa lỗi trong biểu mẫu - Tổ chức nội dung với thứ tự đọc logic và hệ thống phân cấp thông tin **💪 Mạnh mẽ - **Kiểm tra trên các trình duyệt, thiết bị và công cụ hỗ trợ khác nhau** - **Cấu trúc nội dung sao cho nó hoạt động tốt ngay cả khi các tính năng nâng cao không được hỗ trợ** ### 🎯 **Kiểm tra nguyên tắc POUR: Làm cho nó hiệu quả** **Suy ngẫm nhanh về nền tảng:** - Bạn có thể nghĩ đến một tính năng trang web nào vi phạm từng nguyên tắc POUR không? - Nguyên tắc nào cảm thấy tự nhiên nhất đối với bạn với tư cách là một nhà phát triển? - Những nguyên tắc này có thể cải thiện thiết kế cho mọi người, không chỉ người dùng khuyết tật, như thế nào? ```mermaid quadrantChart title POUR Principles Impact Matrix x-axis Low Effort --> High Effort y-axis Low Impact --> High Impact quadrant-1 Quick Wins quadrant-2 Major Projects quadrant-3 Consider Later quadrant-4 Strategic Focus Alt Text: [0.2, 0.9] Color Contrast: [0.3, 0.8] Semantic HTML: [0.4, 0.9] Keyboard Nav: [0.6, 0.8] ARIA Complex: [0.8, 0.7] Screen Reader Testing: [0.7, 0.6] ``` > **Nhớ rằng**: Bắt đầu với những cải tiến có tác động cao nhưng ít tốn công sức. HTML ngữ nghĩa và văn bản thay thế (alt text) mang lại lợi ích lớn nhất về khả năng truy cập với ít nỗ lực nhất! ## Tạo thiết kế hình ảnh dễ tiếp cận Thiết kế hình ảnh tốt và khả năng truy cập luôn song hành. Khi bạn thiết kế với khả năng truy cập trong tâm trí, bạn thường phát hiện ra rằng những hạn chế này dẫn đến các giải pháp sạch sẽ, thanh lịch hơn, mang lại lợi ích cho tất cả người dùng. Hãy cùng khám phá cách tạo ra các thiết kế hấp dẫn về mặt hình ảnh mà vẫn phù hợp với mọi người, bất kể khả năng thị giác của họ hay điều kiện mà họ đang xem nội dung của bạn. ### Chiến lược màu sắc và khả năng truy cập hình ảnh Màu sắc rất mạnh mẽ trong việc truyền đạt thông tin, nhưng nó không bao giờ nên là cách duy nhất để bạn truyền tải thông tin quan trọng. Thiết kế vượt ra ngoài màu sắc tạo ra trải nghiệm mạnh mẽ hơn, bao gồm hơn và hoạt động trong nhiều tình huống hơn. **Thiết kế cho sự khác biệt về thị giác màu sắc:** Khoảng 8% nam giới và 0,5% phụ nữ có một dạng khác biệt về thị giác màu sắc (thường được gọi là "mù màu"). Các loại phổ biến nhất là: - **Deuteranopia**: Khó phân biệt màu đỏ và xanh lá cây - **Protanopia**: Màu đỏ xuất hiện mờ hơn - **Tritanopia**: Khó phân biệt màu xanh dương và vàng (hiếm gặp) **Chiến lược màu sắc bao gồm:** ```css /* ❌ Bad: Using only color to indicate status */ .error { color: red; } .success { color: green; } /* ✅ Good: Color plus icons and context */ .error { color: #d32f2f; border-left: 4px solid #d32f2f; } .error::before { content: "⚠️"; margin-right: 8px; } .success { color: #2e7d32; border-left: 4px solid #2e7d32; } .success::before { content: "✅"; margin-right: 8px; } ``` **Vượt qua yêu cầu cơ bản về độ tương phản:** - Kiểm tra lựa chọn màu sắc của bạn với các trình mô phỏng mù màu - Sử dụng mẫu, kết cấu hoặc hình dạng cùng với mã hóa màu sắc - Đảm bảo trạng thái tương tác vẫn có thể phân biệt được mà không cần màu sắc - Xem xét cách thiết kế của bạn trông trong chế độ độ tương phản cao ✅ **Kiểm tra khả năng truy cập màu sắc của bạn**: Sử dụng các công cụ như [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) để xem trang web của bạn xuất hiện như thế nào đối với người dùng có các loại thị giác màu sắc khác nhau. ### Chỉ báo tiêu điểm và thiết kế tương tác Chỉ báo tiêu điểm là tương đương kỹ thuật số của con trỏ—chúng hiển thị cho người dùng bàn phím vị trí của họ trên trang. Chỉ báo tiêu điểm được thiết kế tốt nâng cao trải nghiệm cho mọi người bằng cách làm cho các tương tác trở nên rõ ràng và dễ dự đoán. **Thực hành tốt nhất cho chỉ báo tiêu điểm hiện đại:** ```css /* Enhanced focus styles that work across browsers */ button:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25); } /* Remove focus outline for mouse users, preserve for keyboard users */ button:focus:not(:focus-visible) { outline: none; } /* Focus-within for complex components */ .card:focus-within { box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.5); border-color: #4A90A4; } /* Ensure focus indicators meet contrast requirements */ .custom-focus:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 6px #000000; } ``` **Yêu cầu đối với chỉ báo tiêu điểm:** - **Hiển thị rõ ràng**: Phải có tỷ lệ tương phản ít nhất 3:1 với các yếu tố xung quanh - **Độ rộng**: Độ dày tối thiểu 2px xung quanh toàn bộ yếu tố - **Duy trì**: Nên hiển thị rõ ràng cho đến khi tiêu điểm chuyển sang nơi khác - **Phân biệt**: Phải khác biệt rõ ràng với các trạng thái UI khác > 💡 **Mẹo thiết kế**: Chỉ báo tiêu điểm tuyệt vời thường sử dụng sự kết hợp giữa đường viền, bóng hộp và thay đổi màu sắc để đảm bảo hiển thị trên các nền và ngữ cảnh khác nhau. ✅ **Kiểm tra chỉ báo tiêu điểm**: Nhấn Tab qua trang web của bạn và ghi chú lại các yếu tố có chỉ báo tiêu điểm rõ ràng. Có yếu tố nào khó nhìn thấy hoặc hoàn toàn thiếu không? ### HTML ngữ nghĩa: Nền tảng của khả năng truy cập HTML ngữ nghĩa giống như cung cấp cho các công nghệ hỗ trợ một hệ thống GPS cho trang web của bạn. Khi bạn sử dụng đúng các yếu tố HTML cho mục đích của chúng, bạn đang cung cấp cho trình đọc màn hình, bàn phím và các công cụ khác một bản đồ chi tiết để giúp người dùng điều hướng hiệu quả. Đây là một phép so sánh thực sự khiến tôi hiểu rõ: HTML ngữ nghĩa là sự khác biệt giữa một thư viện được tổ chức tốt với các danh mục rõ ràng và biển báo hữu ích so với một nhà kho nơi sách bị rải rác ngẫu nhiên. Cả hai nơi đều có cùng sách, nhưng bạn muốn tìm kiếm thứ gì đó ở đâu? Chính xác! ```mermaid flowchart TD A[🏠 HTML Document] --> B[📰 header] A --> C[🧭 nav] A --> D[📄 main] A --> E[📋 footer] B --> B1[h1: Site Name
Logo & branding] C --> C1[ul: Navigation
Primary links] D --> D1[article: Content
section: Subsections] D --> D2[aside: Sidebar
Related content] E --> E1[nav: Footer links
Copyright info] D1 --> D1a[h1: Page title
h2: Major sections
h3: Subsections] style A fill:#e3f2fd style B fill:#e8f5e8 style C fill:#fff3e0 style D fill:#f3e5f5 style E fill:#e0f2f1 ``` **Các khối xây dựng cấu trúc trang dễ truy cập:** ```html

Your Site Name

Article Title

Published on

First Section

Content that relates to this section...

Second Section

More related content...

``` **Tại sao HTML ngữ nghĩa biến đổi khả năng truy cập:** | Yếu tố ngữ nghĩa | Mục đích | Lợi ích cho trình đọc màn hình | |------------------|---------|----------------------| | `
` | Tiêu đề trang hoặc phần | "Banner landmark" - điều hướng nhanh đến đầu trang | | `