# 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) ## 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 sáng tạo 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 ra 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 người 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 sẵn 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 chưa? Hãy bắt đầu nào! > Bạn có thể tham gia bài học 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 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ẫu đ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ị, 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 phần 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 điều quan trọng là—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 vai trò nhà phát triển, xuất hiện! **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**: Chuyển 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 đồ chỉ đường 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 trong việc phát hiện các vấn đề rõ ràng) với một số kiểm tra thủ công. Đâ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ần thiết:** ```mermaid graph 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] ``` **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 phần 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 có 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 phần 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ông giúp bạn đảm bảo trang web của mình dễ sử dụng trong thực tế. Kết hợp cả hai sẽ giúp bạn tự tin rằng các trang web của bạn 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 UI** (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 những màu này 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 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 đề khả năng tiếp cận—kiểm tra thủ công vẫn rất cần thiết! ## Xây Dựng Khả Năng Tiếp Cận Từ Đầu Chìa khóa để thành công trong khả năng tiếp cận là xây dựng nó vào nền tảng ngay từ đầu. Tôi biết rất dễ nghĩ "Tôi sẽ thêm khả năng tiếp cận sau," nhưng đó 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à—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 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 Hướng dẫn Nội dung Web Dễ Tiếp Cận (WCAG) được xây dựng xung quanh bốn nguyên tắc cơ bản được viết tắt là 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à những 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: **🔍 Có thể cảm nhận được**: Thông tin phải được trình bày theo cách người dùng có thể cảm nhận qua các giác quan sẵn có - 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 sẵn có - Làm cho tất cả các chức năng có thể truy cập qua điều hướng bằng bàn phím - Cung cấp đủ thời gian để người dùng đọ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 phần 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à cách vận hành 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ẽ**: Nội dung phải hoạt động đáng tin cậy trên các công nghệ và thiết bị hỗ trợ khác nhau - Sử dụng HTML hợp lệ, có tính ngữ nghĩa làm nền tảng của bạn - Đảm bảo tương thích với các công nghệ hỗ trợ hiện tại và tương lai - Tuân theo các tiêu chuẩn web và thực hành tốt nhất về đánh dấu - 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 để nó suy giảm một cách duyên dáng khi các tính năng nâng cao không được hỗ trợ ## 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 tiếp cận luôn song hành. Khi bạn thiết kế với khả năng tiếp cận trong tâm trí, bạn thường phát hiện ra rằng Màu sắc là một công cụ mạnh mẽ để giao tiếp, nhưng không bao giờ nên là cách duy nhất để 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, toàn diện hơn và phù hợp với 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% nữ giới 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 giữa màu đỏ và màu xanh lá cây - **Protanopia**: Màu đỏ trông mờ hơn - **Tritanopia**: Khó phân biệt giữa màu xanh dương và màu vàng (hiếm gặp) **Chiến lược màu sắc toàn diện:** ```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 hoa văn, 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 hiển thị trong chế độ độ tương phản cao ✅ **Kiểm tra khả năng tiếp cận 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 hiển thị 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ỏ chuột—chúng cho người dùng bàn phím biết họ đang ở đâu 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:** - **Khả năng hiển thị**: 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 vẫn hiển thị 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 khả năng 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**: Sử dụng phím Tab để di chuyển 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 tiếp cận 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 các yếu tố HTML đúng mục đích của chúng, bạn đang cung cấp cho các 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 mà tôi thấy rất hợp lý: HTML ngữ nghĩa giống như 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 chỉ dẫn hữu ích so với một nhà kho nơi sách bị vứt lung tung. Cả hai nơi đều có cùng số sách, nhưng bạn sẽ muốn tìm kiếm ở nơi nào hơn? Chính xác! **Các khối xây dựng cấu trúc trang tiếp cận:** ```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 cải thiện khả năng tiếp cận:** | 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 | | `