Các phần của html là gì?

Các phần tử phân đoạn trong HTML5 là



2,


3,


4 và


5.


6 cũng là một phần tử phân đoạn vì tất cả nội dung bên trong nó là một phần của phần tài liệu mặc định

Show

Dưới đây là giải thích ngắn gọn về từng thành phần phân chia và cách chúng được sử dụng

  • 
    
    
    2 – Tương đương với
    
    
    
    8. Điều hướng trang web chính luôn xuất hiện thường xuyên trên trang web. Ví dụ bao gồm điều hướng chính, điều hướng phụ và điều hướng trong trang
  • 
    
    
    3 – Tương đương với
    0. Nội dung chỉ liên quan trực tiếp (hoặc không liên quan) đến nội dung chính. Hãy nghĩ về một cái gì đó như thanh bên với thông tin bổ sung, ghi chú trong bài viết hoặc vùng chứa bên ngoài cho danh sách các bài viết liên quan ở cuối bài đăng trên blog
  • 
    
    
    4 – Tương đương với
    2. Nội dung khép kín ở chỗ nó tự nó có ý nghĩa khi được đưa ra khỏi ngữ cảnh. Điều đó có thể có nghĩa là một tiện ích, một bài đăng trên blog hoặc thậm chí là một nhận xét trong một bài đăng trên blog
  • 
    
    
    5 – Tương đương với
    4. Nội dung cần thêm ngữ cảnh từ thành phần phân đoạn gốc để có ý nghĩa. Đây là một phần tử phân đoạn chung được sử dụng bất cứ khi nào việc sử dụng các phần tử ngữ nghĩa khác không hợp lý

👋 Chúng tôi đã lưu ý trong các nhận xét (và trên Twitter) rằng một số kỹ thuật được sử dụng trong bài viết này dẫn đến trải nghiệm người dùng kém cho người dùng trình đọc màn hình. Chúng tôi sẽ cập nhật để đảm bảo bài viết phản ánh thông tin tốt nhất có thể. Hiện tại, vui lòng xem Bút ký của Adrian Roselli bên dưới để biết cách tiếp cận phù hợp hơn để phân chia bố cục ví dụ. Cảm ơn vì đã trở thành một cộng đồng tuyệt vời, nơi tất cả chúng ta có thể học hỏi và cùng nhau phát triển

Dự phòng nhúng CodePen

nội dung

Đây là một bài viết rất dài mà tôi nghi ngờ rằng bạn sẽ muốn quay lại và tham khảo nhiều lần. Để làm cho điều đó dễ dàng hơn, đây là danh sách tất cả các tiêu đề bài viết

Mục lục

  1. Khi nào thì sử dụng
    
    
    
    2
    1. Một
      
      
      
      2 là không cần thiết xung quanh một hình thức tìm kiếm
    2. Không sử dụng từ “nav” hoặc “navigation” trong nhãn
    3. Câu hỏi để tự hỏi mình
    4. Một
      
      
      
      2 không nhất thiết phải là một danh sách các liên kết
  2. Tránh lồng một
    
    
    
    3 bên trong một
    
    
    
    3
  3. Bài báo giống như “Chặn”;
    1. Phần bình luận
  4. Đừng đổi
    
    
    
    80 lấy
    
    
    
    5
  5. Đầu trang và chân trang
    1. Điều gì xảy ra bên trong tiêu đề?
    2. Điều gì xảy ra bên trong footer?
  6. Phần tử cắt và thuật toán phác thảo tài liệu
    1. Không có trình duyệt nào hỗ trợ thuật toán phác thảo tài liệu
  7. phân chia nội dung
  8. Phần tử
    
    
    
    82
  9. Bạn cần dán nhãn các phần của mình. Đây là ba phương pháp
    1. Phương pháp 1. Thêm một thuộc tính nhãn aria
    2. Phương pháp 2. Thêm phần tử
      
      
      
      83 vào nó
    3. Phương pháp 3. Sử dụng thuộc tính
      
      
      
      84
  10. Chỉ sử dụng một phương pháp tại một thời điểm
  11. Thêm nhãn phần vào bố cục ví dụ của chúng tôi
  12. Đặt Tiêu đề 1 làm tiêu đề đầu tiên
  13. Mối quan tâm với thông số thuật toán phác thảo đơn giản hóa
  14. Sử dụng aria trên các yếu tố phân chia bố cục ví dụ
    1. Sử dụng
      
      
      
      85
    2. Sử dụng
      
      
      
      84
    3. Kết quả của việc sử dụng aria
  15. Điều gì xảy ra khi bạn cần
    
    
    
    87?
  16. Trang web của bạn có cấu trúc tốt không?
  17. Tải xuống và sử dụng trình đọc màn hình

Khi nào thì sử dụng 2

Phần tử



2 chỉ cần được sử dụng một lần cho mỗi khối điều hướng. Điều hướng phụ đã được chứa bên trong phần tử


2 không cần phải được bao bọc trong phần tử


2 thứ hai



0

Phần tử



2 chỉ dành cho các khối điều hướng chính. "Major" là một thuật ngữ rất chủ quan mặc dù. html5doctor. com có ​​một lời giải thích khá hay về thời điểm thích hợp và không thích hợp để sử dụng


2, hãy nhớ rằng những điều sau đây là ý kiến ​​chứ không phải phán quyết chính thức của W3C

Cụm từ khóa là điều hướng 'chính'. Chúng tôi có thể tranh luận cả ngày về định nghĩa của 'chính', nhưng với tôi nó có nghĩa là

  • Định hương đâu tiên
  • Tìm trang
  • Điều hướng phụ (được cho là)
  • Điều hướng trong trang (ví dụ trong một bài viết dài)

Mặc dù không có đúng hay sai ở đây, nhưng một cuộc thăm dò rơm kết hợp với cách giải thích của riêng tôi cho tôi biết rằng những điều sau đây không nên được đặt trong



2

  • điều khiển phân trang
  • Liên kết xã hội (mặc dù có thể có những trường hợp ngoại lệ khi liên kết xã hội là điều hướng chính, chẳng hạn như trong các trang web như Giới thiệu về tôi hoặc Hương vị)
  • Thẻ trên một bài đăng trên blog
  • Danh mục trên một bài đăng trên blog
  • điều hướng cấp ba
  • chân béo

— html5doctor. com (gạch ngang của tôi)

Breadcrumbs là một phần nội dung khác nên được bao bọc trong phần tử



2 như được minh chứng bằng ví dụ HTML breadcrumb W3C này

Một


2 là không cần thiết xung quanh một hình thức tìm kiếm

Tôi không đồng ý với ý kiến ​​của Tiến sĩ HTML5 rằng biểu mẫu tìm kiếm trang web nên được bao bọc trong phần tử



2 (do đó tôi đã gạch bỏ nó).


2 được dự định bao quanh các liên kết điều hướng, không phải là một biểu mẫu. Tìm kiếm trang web thực sự có vai trò đặc biệt của riêng nó xác định nó là một mốc tìm kiếm. Nếu bạn thêm


89 vào phần tử tìm kiếm


90, nó sẽ được thông báo cho người dùng trình đọc màn hình dưới dạng mốc tìm kiếm. Người dùng trình đọc màn hình cũng có thể điều hướng đến nó khi điều hướng qua các mốc. Nếu có nhiều biểu mẫu tìm kiếm trên trang, chúng phải được phân biệt bằng cách sử dụng


85 hoặc


84 (chi tiết thêm về các thuộc tính này sau). Tuy nhiên, đừng bao gồm từ “tìm kiếm” trong nhãn aria - điều đó giống như nói “hình ảnh của” trong văn bản thay thế hình ảnh; . Thay vào đó, hãy tập trung vào nội dung mà biểu mẫu tìm kiếm đang tìm kiếm. Vì vậy, đối với tìm kiếm trang web toàn cầu, cung cấp cho nó


93 sẽ phù hợp



3

Biểu mẫu



89 sẽ không xuất hiện trong đề cương tài liệu nhưng tôi nghĩ điều này không sao vì các biểu mẫu tìm kiếm thường nhỏ và khép kín. Nó vẫn nhận được phần lớn lợi ích mà bạn nhận được từ việc sử dụng các yếu tố phân chia. Việc thêm phần tử phân đoạn vào danh sách kết hợp sẽ tấn công người dùng trình đọc màn hình bằng các thông báo cho họ biết rằng đó là biểu mẫu tìm kiếm (một cho phần tử phân vùng, một cho vai trò tìm kiếm và một cho nhãn đầu vào tìm kiếm)

Không sử dụng từ “nav” hoặc “navigation” trong nhãn

Giống như với



89, việc thêm "navigation" vào nhãn của phần tử


2 chỉ khiến trình đọc màn hình nói "navigation" hai lần



7

Câu hỏi để tự hỏi mình

Bài viết tương tự về HTML5 Doctor đó liệt kê hai câu hỏi mà bạn có thể tự hỏi mình để giúp bạn tìm ra liệu có nên bọc một thứ gì đó trong một



2 hay không

  • Một yếu tố phân chia khác cũng sẽ thích hợp?
  • Bạn có thêm một liên kết đến nó trong khối "bỏ qua" để truy cập không?

Trong những trường hợp điều hướng quá nhỏ để biện minh cho việc sử dụng phần tử



2, thì rất có thể bạn nên sử dụng phần tử thay thế là


5

Một


2 không nhất thiết phải là một danh sách các liên kết

Trường hợp sử dụng phổ biến nhất cho một



2 là bọc nó quanh một danh sách các liên kết nhưng nó không nhất thiết phải là một danh sách các liên kết. Nếu điều hướng của bạn hoạt động theo cách khác, bạn vẫn có thể sử dụng phần tử


2



Tương tự như vậy, bạn có thể có các bit nhỏ như văn bản giới thiệu trong phần tử



2 miễn là trọng tâm chính của nội dung là trên các liên kết điều hướng. Nội dung giới thiệu được đặt tốt nhất bên trong một


75 trong phần tử


2. Tôi sẽ đi sâu hơn về đầu trang và chân trang sau

________số 8

Tránh lồng một 3 bên trong một 3

Theo cách tương tự mà



2 thực sự không bao giờ được lồng vào bên trong một phần tử


2 khác, các phần tử


3 cũng có xu hướng không được lồng vào nhau.


3 được sử dụng để thể hiện nội dung có liên quan trực tiếp với nội dung xung quanh nó. Điều đó có nghĩa là đặt một bên trong một bên về cơ bản là thông báo một tiếp tuyến từ một thứ gì đó mà bản thân nó là một tiếp tuyến từ nội dung chính



8

Nếu bạn có một thanh bên có nhiều phần, không lồng các phần tử



3 vào bên trong các phần tử


3 như trong ví dụ trên. Thay vào đó, hãy tạo thanh bên thành một


3 và sau đó sử dụng


5 (hoặc một phần tử phân vùng thích hợp khác) để tạo các phần khác nhau



8

Bài báo giống như “Chặn”;



5 và


4 rất dễ nhầm lẫn với nhau. Nếu bạn đã quen thuộc với cú pháp “Block Element Modifier” (BEM), thì một cách dễ dàng để nghĩ ra sự khác biệt giữa hai cú pháp là


4 hơi giống với “B” (hoặc “Block”) trong BEM. Đó là một vùng chứa lưu trữ nội dung độc lập vẫn có ý nghĩa khi được đặt trong một ngữ cảnh khác. Các tweet riêng lẻ trên Twitter và từng mục danh sách trên trang kết quả tìm kiếm sẽ được coi là yếu tố


4

Các phần của html là gì?



5 giống như chữ “E” (hoặc “Phần tử”) trong BEM. Đó là một phần phụ yêu cầu ngữ cảnh từ phần tử phần chính của nó để có ý nghĩa.


5 là một phần tử phân vùng tổng hợp chung mà bạn sử dụng khi việc sử dụng các phần tử phân vùng khác là không hợp lý. Vì vậy, nếu nghi ngờ, hãy đi với


5

Lưu ý rằng nếu thứ gì đó được tạo kiểu là “Khối” trong BEM, điều đó không tự động có nghĩa đó là phần tử



4. Điều tương tự cũng xảy ra với các phần tử BEM “Elements” và


5. Yếu tố của một cái gì đó nên dựa trên ý nghĩa của nội dung, không phải nội dung trông như thế nào

Phần bình luận

Một điều có thể làm mọi người ngạc nhiên là các nhận xét cá nhân trên một bài đăng trên blog cũng được coi là các bài báo, mặc dù chúng là phản hồi cho bài đăng trên blog chính. Mặc dù vậy, phần tử



4 bao quanh bài đăng trên blog chính cũng nên bao quanh phần nhận xét. Điều này thể hiện rằng các bình luận đi cùng với bài viết chính



9
Các phần của html là gì?

Không hoán đổi div cho một phần

Chỉ vì bây giờ chúng ta có các phần tử phân vùng ưa thích này, điều đó không có nghĩa là phần tử cũ kỹ



80 đã mất hết tính hữu dụng của nó.


80 không có ý nghĩa ngữ nghĩa, vì vậy nó khá hữu ích bất cứ khi nào chúng ta thay đổi HTML hoàn toàn vì mục đích tạo kiểu

Giả sử rằng chúng ta có một bài đăng blog chứa bên trong một phần tử



4 mà chúng ta cần bọc trong một thứ gì đó vì mục đích tạo kiểu



7

Tiếp cận yếu tố



5 trong trường hợp này không phải là điều nên làm

8

Mặc dù về mặt kỹ thuật,



5 là một yếu tố chung, nhưng


80 là lựa chọn phù hợp hơn nhiều trong trường hợp này. Hộp chứa gói mới này không có nghĩa là có bất kỳ ý nghĩa ngữ nghĩa nào đằng sau nó và đó chính xác là thứ mà


80 được thiết kế để sử dụng cho



30

Một cách khác để ghi nhớ điều này. nếu bạn không thể nghĩ ra một tiêu đề có ý nghĩa để áp dụng cho một



5, thì nó có lẽ không nên là một


5

Đầu trang và chân trang

Mặc dù chúng không nhất thiết phải như vậy, nhưng các thành phần phân đoạn có thể chứa một



75 và một


317 với tiêu đề ở đầu phần và chân trang ở dưới cùng

Các phần tử phân đoạn có thể được lồng vào nhau bao nhiêu lần tùy theo nội dung

Đầu trang và chân trang trong phần tử phân đoạn cũng có thể chứa các phần tử phân vùng

Một hạn chế lớn xung quanh việc lồng các phần tử phân đoạn là đầu trang và chân trang không thể được lồng vào bên trong các đầu trang và chân trang khác

Đầu trang và chân trang lồng vào nhau không được phép

Điều gì xảy ra bên trong tiêu đề?

Tiêu đề được sử dụng cho nội dung giới thiệu. Những thứ phù hợp để đưa vào các yếu tố



75 bao gồm (nhưng không giới hạn ở)

  • Phần tử tiêu đề (
    
    
    
    319–
    
    
    
    320)
  • Một đoạn giới thiệu hoặc tuyên bố
  • Ảnh hồ sơ
  • một biểu tượng
  • Một hình thức tìm kiếm
  • Định hương đâu tiên
  • Tên tác giả
  • Ngày đăng/cập nhật
  • Metadata
  • Liên kết truyền thông xã hội

Điều gì xảy ra bên trong footer?

Các phần tử chân trang chủ yếu chứa những thứ như dữ liệu meta và nội dung hỗ trợ nhỏ. Những thứ phù hợp để đưa vào các yếu tố của



317 bao gồm (nhưng không giới hạn ở)

  • Thông tin bản quyền
  • pháp lý
  • chú thích
  • Điều hướng trang web có mức độ ưu tiên thấp
  • Tên tác giả
  • Ngày đăng/cập nhật
  • Metadata
  • Liên kết truyền thông xã hội

Bạn sẽ nhận thấy rằng có một số giao thoa giữa đầu trang và chân trang về mặt nội dung phù hợp với cả hai. Điều này chủ yếu là do nội dung loại meta phù hợp tốt với một trong hai yếu tố. Nó chủ yếu liên quan đến thiết kế mà bạn đang cố gắng đạt được. Các phần tử



75 có xu hướng biểu thị rằng nội dung bên trong chúng có tầm quan trọng lớn hơn nội dung bên trong phần tử


317 mặc dù

Phần tử cắt và thuật toán phác thảo tài liệu

Một điều quan trọng cần biết về các phần tử phân chia này là tất cả chúng đều phải có phần tử



83 bên trong chúng (hoặc được gắn nhãn theo một số cách khác, nhưng sẽ nói thêm về điều đó sau). Điều này chủ yếu là vì lợi ích của một thứ gọi là thuật toán phác thảo tài liệu. Đây là một thuật toán sử dụng các yếu tố phân đoạn để giúp xác định tiêu đề (


83) nên ở cấp độ nào mà không cần phải dựa hoàn toàn vào con số mà nhà phát triển đã cung cấp. Vì vậy, bạn đã bao giờ tự hỏi liệu có ổn không khi có nhiều hơn một


319 trên một trang?

_______431____432

Còn rất nhiều điều để tìm hiểu về thuật toán phác thảo tài liệu. Tôi sẽ dừng lại ở đây bởi vì…

Không có trình duyệt nào hỗ trợ thuật toán phác thảo tài liệu

Không có một trình duyệt nào hỗ trợ phương pháp tạo cấu trúc tiêu đề này. Đây là một sự xấu hổ. Việc xây dựng các trang web có thể truy cập sẽ dễ dàng hơn nhiều nếu chúng ta không phải lo lắng quá nhiều về việc sử dụng cấp tiêu đề chính xác mọi lúc

Theo như tôi biết, có hai lý do chính khiến không có trình duyệt nào triển khai thuật toán. Một là các nhà cung cấp trình duyệt sợ phá vỡ cấu trúc tiêu đề của các trang web đã sử dụng các thành phần phân đoạn không chính xác. Lý do khác là thông số thuật toán phác thảo tài liệu hiện tại rất khó triển khai và chưa có nhà cung cấp trình duyệt nào sẵn sàng dành thời gian để triển khai nó

Liên quan đến lý do đầu tiên, có một cuộc thảo luận dài về việc kết hợp một phần tử



327 mới thay vì sử dụng phần tử


319 để yêu cầu các trình duyệt sử dụng thuật toán phác thảo tài liệu. Tôi đã ủng hộ ý tưởng phần tử


327 mới này cho đến khi tôi nhận ra rằng một thuộc tính trên phần tử


330 hoặc thêm thẻ


331 vào phần tử


332 sẽ hoạt động tốt hơn nữa như một phương tiện để thông báo cho các trình duyệt rằng việc sử dụng thuật toán là an toàn. Các tiêu đề quay trở lại


319 trong các trình duyệt không được hỗ trợ cũng tốt hơn là quay trở lại


334

Tuy nhiên, nếu bạn muốn thử nghiệm với khái niệm



327 này, có một plugin gọi là hfill. Nó cho phép bạn lồng các tiêu đề


336 bên trong các phần tử phân chia để tạo dàn bài tài liệu mà không phải lo lắng quá nhiều về cấp độ tiêu đề. Có bản demo cho bạn dùng thử. Tuy nhiên, lỗ hổng lớn trong plugin này là cách duy nhất để tăng cấp độ tiêu đề là lồng các phần tử phân đoạn vào nhau. Không có động lực


319-là-lớn-hơn-


338 trong plugin này, đó là lý do chính khiến tôi không thích ý tưởng yếu tố


327 này. Việc thiếu phân cấp tiêu đề này sẽ khiến trình soạn thảo văn bản có định dạng CMS trở nên quá khó sử dụng đối với khách hàng

Đối với vấn đề xung quanh độ khó triển khai, công việc đang được thực hiện để tạo ra một thông số kỹ thuật đơn giản hóa mà các nhà cung cấp trình duyệt có nhiều khả năng áp dụng hơn. Thuật toán phác thảo tài liệu đã có trong thông số kỹ thuật HTML trong nhiều năm. Hy vọng thông số kỹ thuật đơn giản hóa này sẽ cho phép thuật toán trở thành hiện thực

Mặc dù thuật toán chưa được hỗ trợ ở bất kỳ đâu nhưng chúng ta vẫn có thể xây dựng dựa trên thuật toán. Nếu chúng ta xây dựng với nó trong tâm trí, thì chúng ta sẽ đạt được những lợi ích sau

  1. Chúng tôi chứng minh các trang web của mình trong tương lai trong trường hợp thuật toán được triển khai
  2. Chúng tôi có thể cải thiện đáng kể trải nghiệm người dùng cho người dùng trình đọc màn hình
  3. Chúng tôi có khả năng cải thiện tối ưu hóa công cụ tìm kiếm (SEO) do các công cụ tìm kiếm có thể hiểu rõ hơn nội dung của trang web
  4. Chúng tôi có thể tạo trải nghiệm người dùng tốt hơn cho người dùng bằng cách cho phép họ sử dụng các tính năng gốc của trình duyệt sử dụng các thành phần phân đoạn, như Chế độ đọc

phân chia nội dung

Hãy xem bố cục mô phỏng này mà tôi đã tập hợp lại và nghĩ xem bạn có thể chia nó thành các phần như thế nào

Các phần của html là gì?

Đây là cách tôi chia bố cục thành các phần tử phân chia (chỉ các đường liền nét biểu thị các phần tử phân chia)

Các phần của html là gì?

Về mặt đánh dấu HTML, có vẻ như thế này



33

Phần tử 82

Có một yếu tố ngữ nghĩa rất quan trọng mà tôi đã sử dụng trong phần đánh dấu ở trên mà tôi chưa đề cập đến và đó là yếu tố



82. Phần tử


82 đại diện cho nội dung chính của trang. Nó không được phép có bất kỳ thanh bên hoặc thành phần điều hướng nào trong đó. Bạn cũng không được có nhiều hơn một phần tử


82 trên trang trừ khi tất cả các phần tử


82 khác trên trang đều có thuộc tính


345 được áp dụng cho chúng (điều này là vì lợi ích của SPA)

Phần tử



82 không phải là phần tử phân đoạn. Điều này có nghĩa là nó không giúp đóng góp vào thuật toán phác thảo tài liệu và nó không thể làm nổi bật phần tử


75 hoặc


317 dưới dạng phần tử con trực tiếp. Tuy nhiên, đây là một yếu tố mang tính bước ngoặt nên người dùng trình đọc màn hình có thể điều hướng đến nó khá dễ dàng

Tôi không chắc chắn 100% rằng việc sử dụng



4 trong phần tử


82 như tôi đã làm ở trên có cần thiết hay không. Về mặt ngữ nghĩa, nó có ý nghĩa. Nội dung chính là độc lập, do đó biện minh cho việc sử dụng phần tử


4 theo cách này. Từ góc độ thuật toán phác thảo tài liệu, phần tử


4 cũng hỗ trợ cấu trúc tài liệu

Từ quan điểm về khả năng sử dụng, nó cảm thấy hơi không cần thiết và thuật toán phác thảo tài liệu thậm chí không hoạt động ở bất kỳ đâu vào lúc này. Tôi sẽ tiếp tục sử dụng nó trong suốt các ví dụ của mình nhưng tôi muốn biết người khác nghĩ gì về điều này trong phần bình luận

Bạn cần dán nhãn các phần của mình. Đây là ba phương pháp

Tôi sẽ nói rất nhiều từ “nhãn” trong suốt bài viết này. Hãy nhớ rằng tôi không nói về phần tử



353. Phần tử


353 không được sử dụng để gắn nhãn các phần tử phân chia

Các phần tử phân đoạn yêu cầu nhãn để người dùng trình đọc màn hình có thể nhanh chóng xác định nội dung họ có thể tìm thấy bên trong phần cụ thể đó của trang web. Tôi cân nhắc việc sử dụng các phần tử phân chia mà không cung cấp các nhãn phần được liên kết vì khả năng truy cập không thành công, trừ khi đó là phần tử duy nhất thuộc loại này trên trang. Cũng không nên sử dụng cùng một văn bản nhãn trên nhiều thành phần phân đoạn (hoặc thành phần tiêu đề). Điều này làm cho mỗi phần dễ nhận biết hơn đối với người dùng trình đọc màn hình, giúp họ điều hướng trang web dễ dàng hơn

Có ba cách để gắn nhãn một phần tử phân đoạn. Trong các ví dụ sau, tôi đề cập đến “vận chuyển” và “tính di động” như một cách giải thích việc lưu phần đó vào một thành phần dễ dàng như thế nào và sử dụng thành phần đó nhiều lần trong nhiều ngữ cảnh khác nhau

Tôi cũng cung cấp danh sách các mặt tích cực và tiêu cực trong các ví dụ. Trong các danh sách này, tôi giả sử rằng bạn muốn trình đọc màn hình có thể đọc được nhãn phần nhưng ẩn đối với người dùng có thị lực

Phương pháp 1. Thêm một thuộc tính nhãn aria

Đây là cách nhanh nhất và dễ dàng nhất để gắn nhãn cho phần tử phân vùng



34
Vấn đề dịch aria-nhãn

Hạn chế chính của



85 (tại thời điểm viết) là hầu hết các trình duyệt không thể dịch các giá trị này cho người dùng nói ngôn ngữ khác với bạn. Các nhà phát triển tại Google gần đây đã sửa lỗi này trong Chrome, tuy nhiên đây vẫn là vấn đề đối với mọi trình duyệt khác

Nếu trang web của bạn có lượng người xem quốc tế lớn hoặc bạn biết rằng nhiều người dùng không nói được ngôn ngữ của bạn, thì có lẽ bạn nên tránh sử dụng thuộc tính này cho đến khi tất cả các trình duyệt hỗ trợ bản dịch của thuộc tính này. Nếu bạn không có những loại người dùng đó, sẽ khá an toàn khi cho rằng những người dùng khiếm thị đang xem trang web của bạn có thể hiểu ngôn ngữ của bạn — dù sao cũng đủ để có thể điều hướng trang web của bạn

Nếu bạn cần thuyết phục hơn, giả sử trang web của bạn có rất ít người dùng quốc tế. Điều đó có nghĩa là người dùng của bạn thường đến từ cùng một quốc gia với bạn. Nếu họ đến từ cùng một quốc gia thì có khả năng họ sẽ nói cùng ngôn ngữ với bạn, do đó, đã có một tỷ lệ khá nhỏ người dùng không hiểu ngôn ngữ mẹ đẻ của trang web của bạn. Bây giờ hãy tính đến việc



85 chỉ ảnh hưởng đến người dùng trình đọc màn hình. Đó hiện chỉ là một phần nhỏ của một tỷ lệ phần trăm nhỏ người dùng của bạn sẽ gặp phải sự cố. Và bây giờ hãy xem xét rằng Chrome (cho đến nay là trình duyệt phổ biến nhất trên thế giới) hiện hỗ trợ dịch thuộc tính


85. Người dùng cũng không được sử dụng phiên bản Chrome cập nhật vì trình duyệt của họ gặp sự cố dịch thuật. Nếu bạn tính tất cả những yếu tố đó lại với nhau, thì rất có thể bạn sẽ không có bất kỳ người dùng nào vừa có thể nhận biết các thuộc tính của


85 vừa không thể hiểu những gì họ nói. Điều này khiến tôi cảm thấy rằng sự hỗ trợ đa ngôn ngữ tồi tệ trong


85 thực sự không đáng lo ngại nhiều trừ khi bạn có một lượng lớn khán giả quốc tế hoặc bạn có nhiều người dùng mà bạn biết không nói được ngôn ngữ của mình

tích cực
  • Siêu nhanh và dễ thực hiện
  • Không ảnh hưởng đến cấu trúc tiêu đề
  • Làm cho các thành phần dễ dàng vận chuyển
  • Không nhìn thấy được đối với người dùng sáng mắt
tiêu cực
  • Không được dịch sang các ngôn ngữ khác trong các trình duyệt không phải Chrome (tại thời điểm viết bài)
  • Thường không được hỗ trợ bởi các công cụ phân tích cấu trúc trang
  • Sự nhầm lẫn có thể phát sinh do không biết các tiêu đề khác trong phần nên ở cấp độ nào

Phương pháp 2. Thêm phần tử


83 vào nó

Bởi



83, ý tôi là


319,


338,


364,______4365,


366, hoặc


320 tùy thuộc vào ý nghĩa của nó. Thêm tiêu đề vào thành phần phân đoạn là một cách nhanh chóng để gắn nhãn cho nó

vị trí tiêu đề

Tiêu đề có thể được đặt trực tiếp trong thành phần phân đoạn, như thế này



35

…hoặc được đặt bên trong phần tử



75



36

Bạn cũng có thể đặt bao nhiêu phần tử trình bao bọc



80 giữa phần tử phân đoạn và tiêu đề tùy thích



37
Chỉ một tiêu đề ở mức cao nhất cho mỗi phần tử phân đoạn

Thực sự chỉ nên có một tiêu đề cấp cao nhất trong phần tử phân đoạn. Thông số kỹ thuật nói rằng khi có nhiều tiêu đề cấp cao nhất hoặc tiêu đề cấp cao hơn tiêu đề đầu tiên, trình duyệt phải đóng phần tử phân đoạn trước đó và bắt đầu một tiêu đề mới cùng loại

Phần tử đầu tiên của nội dung tiêu đề trong một phần tử của nội dung phân đoạn đại diện cho tiêu đề cho phần rõ ràng đó. Các tiêu đề tiếp theo có thứ hạng bằng hoặc cao hơn bắt đầu các phần phụ ngụ ý mới là một phần của phần chính của phần trước. Các tiêu đề tiếp theo có thứ hạng thấp hơn bắt đầu các tiểu mục ngụ ý mới là một phần của tiểu mục trước đó. Trong cả hai trường hợp, phần tử đại diện cho tiêu đề của phần ngụ ý

—HTML 5. 3, Tiêu đề và Mục

Trong thực tế, trình duyệt sử dụng tiêu đề đầu tiên làm nhãn phần nhưng các phần ngụ ý này không bao giờ được tạo. Nó chỉ thông báo tiêu đề như khi nó gặp nó. Nó không tệ đến mức kinh hoàng nhưng nó hơi khó hiểu



38
Tiêu đề luôn đi trước

Nếu phần tử phân đoạn có phần tử



83, thì tiêu đề cấp cao nhất đó phải luôn là phần nội dung đầu tiên bên trong phần tử phân đoạn đó. Không làm như vậy được tính là khả năng truy cập không thành công

Nếu bạn thấy mình cần đặt nội dung trước tiêu đề của mình (chẳng hạn như hình ảnh), bạn có thể sử dụng Flexbox để sắp xếp lại thứ tự trực quan. Điều này sẽ cho phép nó trông giống như hình ảnh xuất hiện trước tiêu đề nhưng trong phần đánh dấu, tiêu đề xuất hiện trước hình ảnh. Có một lỗi trong IE đôi khi khiến văn bản không được bao bọc trong phần tử



371. Bạn có thể khắc phục sự cố này bằng cách áp dụng chiều rộng tối đa cho phần tử con flex



39

Lưu ý rằng việc sắp xếp lại thứ tự trực quan để đáp ứng Nguyên tắc 1 của WCAG. 3. 2. Trình tự có ý nghĩa có thể xung đột trực tiếp với Hướng dẫn 2 của WCAG. 4. 3. Thứ tự tập trung. Ví dụ: nếu hình ảnh đó là một liên kết đến một bài viết và tiêu đề bạn đặt ở trên cũng là một liên kết đến bài viết, thì việc đặt tiêu đề trước sẽ phá vỡ thứ tự tiêu điểm. Đặt hình ảnh đầu tiên phá vỡ chuỗi ý nghĩa

Trong những tình huống như thế này khi hai hướng dẫn này xung đột với nhau, ý kiến ​​của tôi là 1. 3. 2. Hướng dẫn Trình tự có ý nghĩa là hướng dẫn quan trọng hơn cần tuân theo nếu bạn không thể giải quyết xung đột theo một cách nào đó. Thứ tự tiêu điểm không thành công dẫn đến người dùng cảm thấy khó chịu khi họ đang lướt qua nội dung và tiêu điểm được gửi đến một vị trí không mong muốn. Việc không tuân theo một trình tự có ý nghĩa dẫn đến việc người dùng bối rối không chắc chắn về mối quan hệ giữa các phần nội dung khác nhau

Tạo nhãn phần ẩn trực quan ra khỏi tiêu đề

Các tiêu đề được hiển thị cho người dùng sáng mắt theo mặc định. Điều này làm cho chúng trở nên cực kỳ hữu ích nếu bạn muốn hiển thị tiêu đề. Trong nhiều trường hợp, chúng tôi không muốn nhãn cho phần tử phân vùng của chúng tôi hiển thị. Để ngăn người dùng sáng mắt của chúng tôi nhìn thấy nhãn, chúng tôi cần sử dụng một số CSS



70
Các tiêu đề được hỗ trợ tốt bởi các công cụ phân tích cấu trúc

Các tiêu đề cũng có một lợi thế rất lớn cho các nhà phát triển ở chỗ bất kỳ công cụ phân tích cấu trúc trang nào bạn có thể tìm thấy sẽ có hỗ trợ cho chúng. Điều này làm cho cấu trúc tiêu đề dễ kiểm tra và gỡ lỗi. Hai phương pháp ghi nhãn phần khác có hỗ trợ rất kém trong các công cụ kiểm tra. Hiện tại, ngay cả dịch vụ Trình xác thực W3C chính thức cũng không hỗ trợ các lựa chọn thay thế. Tôi đã đăng một sự cố để khắc phục sự cố này - vui lòng xem xét giúp khắc phục sự cố nếu bạn giỏi viết mã trong Java

tích cực
  • Nhanh chóng thực hiện
  • Xuất hiện đáng tin cậy trong các công cụ phân tích cấu trúc trang giúp dễ dàng kiểm tra và gỡ lỗi
  • Tất cả các trình duyệt sẽ dịch văn bản sang các ngôn ngữ khác
  • Không nhầm lẫn về cấp độ của các tiêu đề khác trong phần
tiêu cực
  • Ảnh hưởng đến cấu trúc tiêu đề tài liệu
  • Cần đảm bảo rằng tiêu đề ở mức chính xác trước khi sử dụng
  • Hiển thị cho người dùng theo mặc định
  • Yêu cầu CSS để ẩn tiêu đề khỏi người dùng trực quan
  • Có thể làm cho các thành phần ít di động hơn do các yêu cầu về cấu trúc tiêu đề

Phương pháp 3. Sử dụng thuộc tính aria-labelledby

Đây là giao diện tạo nhãn phần ẩn bằng cách sử dụng



84



71
Có thể ẩn nhãn mà không cần CSS

Lưu ý rằng tôi đã sử dụng thuộc tính



345 trong ví dụ để ẩn div thay vì lớp CSS


374.


84 có thể đọc to văn bản thường bị ẩn khỏi người dùng trình đọc màn hình. Điều này bổ sung thêm hiệu ứng ngăn không cho trình đọc màn hình đọc to hai lần văn bản. Tuy nhiên, đừng sử dụng thuộc tính


376. Trình đọc màn hình sẽ không tìm thấy văn bản nhãn. Chà, NVDA không thể tìm thấy văn bản nhãn khi tôi kiểm tra nó. Tôi không chắc về các trình đọc màn hình khác

Vấn đề lớn về tính di động



84 là phương pháp khó sử dụng nhất trong số tất cả các phương pháp ghi nhãn phần. Khía cạnh chính khiến nó khó sử dụng là thuộc tính


84 hoạt động ngoài ID. Mọi thứ luôn trở nên phức tạp hơn bất cứ khi nào ID có liên quan. Điều này là do các trang web chỉ được phép có một phiên bản ID duy nhất trên trang vào bất kỳ thời điểm nào. Điều này làm cho tính di động của thành phần trở nên khó khăn

Do vấn đề về tính di động này, tôi thực sự chỉ đề xuất tùy chọn này nếu bạn cần hỗ trợ đối tượng đa ngôn ngữ và không muốn loay hoay với cấu trúc tiêu đề

Không cần đặt nhãn gần phần tử phân chia

Bạn không cần đặt phần tử có văn bản nhãn bên trong hoặc gần phần tử phần mà nó gắn nhãn. Văn bản cho nhãn có thể được đặt ở một vị trí hoàn toàn khác với thành phần phân đoạn. Điều này là nhờ ID liên kết hai yếu tố với nhau. Tôi không nhất thiết phải nói rằng bạn nên làm điều này, nhưng đó là một tính năng của



84 mà bạn nên biết



72
Biến các phần tử không phải tiêu đề thành nhãn phần

Có một lý do quan trọng khác mà bạn có thể muốn sử dụng



84. Nếu bạn có một phần tử không có tiêu đề hiển thị trên trang mà bạn muốn sử dụng làm nhãn cho một phần, thì


84 là lựa chọn hoàn hảo cho việc này. Phần tử


382 bên trong


383 là trường hợp sử dụng phổ biến cho việc này. Điều này không có nghĩa là bạn phải bọc các bộ trường trong các phần tử phân chia. Tôi chỉ chỉ ra nó trong trường hợp bạn thấy cần nó



73
tích cực
  • Tất cả các trình duyệt sẽ dịch văn bản sang các ngôn ngữ khác
  • Có thể chỉ định một phần tử không phải tiêu đề làm nhãn phần
  • Văn bản cho nhãn không cần đặt gần phần mà nó đang dán nhãn
tiêu cực
  • Yêu cầu sử dụng ID để hoạt động
  • Khó vận chuyển
  • Có thể khó theo dõi nơi lưu trữ văn bản cho nhãn trong mã nguồn của bạn
  • Văn bản được hiển thị theo mặc định trừ khi sử dụng thuộc tính
    
    
    
    345
  • Văn bản có thể được đọc hai lần bởi một số trình đọc màn hình nếu văn bản không bị ẩn
  • Sự nhầm lẫn có thể phát sinh do không biết các tiêu đề khác trong phần nên ở cấp độ nào

Chỉ sử dụng một phương pháp tại một thời điểm

Không sử dụng đồng thời thuộc tính



83,


85 và/hoặc


84 trên cùng một thành phần phân đoạn. Mỗi lần chỉ sử dụng một phương pháp ghi nhãn cho từng phần tử phân chia. Sử dụng nhiều phương pháp rất khó hiểu và dẫn đến nhãn bị ghi đè. Nó giống như khai báo cùng một thuộc tính hai lần trong CSS. Tôi không chắc trình đọc màn hình sẽ thực sự xử lý vấn đề này như thế nào nên tôi đã tạo một


5 lố bịch nhất từ ​​trước đến nay và chạy nó qua NVDA



74

Đây là thứ tự ưu tiên mà NVDA đưa ra cho các phương pháp đánh nhãn khác nhau từ mạnh nhất đến yếu nhất

  1. 
    
    
    84
  2. 
    
    
    85
  3. 
    
    
    83

Thêm nhãn phần vào bố cục ví dụ của chúng tôi

Trong một thời gian dài, tôi đã sử dụng tiêu đề như phương tiện duy nhất để ghi nhãn các phần. Sự hỗ trợ đa ngôn ngữ kém được cung cấp bởi



85 khiến tôi sợ hãi; . Tuy nhiên, chúng tôi gặp một chút vấn đề nếu chúng tôi chỉ sử dụng các tiêu đề để gắn nhãn các phần. Tôi sẽ chỉ cho bạn ý của tôi



75

Nếu chúng ta nhìn vào cấu trúc tiêu đề của mình bây giờ, nó sẽ trông như thế này (in nghiêng = ẩn; in đậm = hiển thị)

  • 
    
    
    338 Chính [nav]
  • 
    
    
    338 Thứ cấp [điều hướng]

Lưu ý rằng tiêu đề



319 của chúng tôi không ở đầu danh sách?

Dạng cấu trúc tiêu đề này thực sự được W3C cho phép nên nó không được tính là khả năng truy cập không thành công. Tôi vẫn nghĩ rằng đây là một trải nghiệm người dùng khá tệ đối với người dùng trình đọc màn hình. Nó không phải là một sự tiến triển hợp lý từ



319 đến


338. Sẽ hợp lý nhất nếu tiêu đề đầu tiên bạn bắt gặp trên trang là


319, sau đó chuyển thành


338 rồi


364, v.v.

Đặt Tiêu đề 1 làm tiêu đề đầu tiên

Trong một thời gian rất dài, tôi đã nghĩ rằng cách tuyệt đối tốt nhất để xử lý câu hỏi hóc búa này là làm cho



319 ẩn đi một cách trực quan và đặt nó ở phần nội dung đầu tiên trên trang. Điều mà mọi người nghĩ là


319 thực sự trở thành


338

Đây là kiểu cấu trúc đó trông như thế nào trong thực tế



76

Bây giờ chúng ta có một phác thảo tài liệu trông như thế này (in nghiêng = ẩn; in đậm = hiển thị)

  • 
    
    
    319 Tiêu đề bài viết chính
    • 
      
      
      338 Chính [nav]
    • 
      
      
      338 Thứ cấp [điều hướng]
    • 
      
      
      338 Cơ thể. Tiêu đề bài viết chính
      • 
        
        
        364 Tiêu đề phụ của bài báo
    • 
      
      
      338 Thanh bên
      • 
        
        
        364 Chia sẻ
      • 
        
        
        364 Được đề xuất
        • 
          
          
          365 Bài viết liên quan
        • 
          
          
          365 Bài viết liên quan

Điều này chủ yếu cảm thấy đúng.



319 ở trên cùng và tất cả đều trôi chảy hoàn hảo với các phần tử


338 đại diện cho các phần chính của trang và các phần tử


364 đại diện cho các phần phụ. Điều khó xử chính là ________ 4319 thực tế và thứ mà mọi người nghĩ là ________ 4319 về cơ bản là bản sao của nhau

Mãi cho đến khi tôi viết xong phiên bản đầu tiên của bài báo này, gần như được xuất bản, rồi bị ném ra ngoài cửa sổ, tôi mới bắt đầu nghĩ khác. Tôi đã nói chuyện với hai chuyên gia tư vấn về khả năng tiếp cận về vấn đề này. Cả hai đều đồng ý rằng, mặc dù đây là một giải pháp kỹ thuật thông minh cho vấn đề, nhưng nó làm mất đi trải nghiệm của chính những người mà nó đang cố gắng giúp đỡ.

Vấn đề là khi mọi trang web khác trên thế giới đặt tiêu đề



319 ở đầu khu vực nội dung chính, đó là điều mà người dùng trình đọc màn hình mong đợi. Khi trang web của bạn là bông tuyết đặc biệt thực hiện những điều khác biệt, nó sẽ khiến người dùng trình đọc màn hình bối rối và họ phải mất một thời gian để tìm ra cách cấu trúc tiêu đề của bạn hoạt động

Vì vậy, với ý nghĩ đó, tôi đã giải quyết một phương pháp mới để xử lý việc ghi nhãn các phần tử phân chia. Về cơ bản, bất cứ khi nào tôi sử dụng tiêu đề ẩn trực quan, bây giờ tôi sẽ sử dụng thuộc tính



85 để thay thế. Nếu trang web có lượng lớn khán giả nói tiếng nước ngoài, tôi sẽ sử dụng


84 thay vì


85

Mối quan tâm với thông số thuật toán phác thảo đơn giản hóa

Nếu thuật toán phác thảo đơn giản hóa được phê duyệt ở trạng thái hiện tại, chúng tôi thực sự sẽ cần bắt đầu cấu trúc các trang web của mình giống như ví dụ về



319 ẩn trực quan (chỉ cần thay thế các phần tử


338,


364 và


365 bằng các phần tử


319)

Thông số kỹ thuật ban đầu nhằm mục đích tạo đường viền thông qua việc ghi nhãn các phần tử phân chia. Thông số kỹ thuật mới này rõ ràng là nhằm cố gắng tạo đường viền hoàn toàn thông qua các cấp tiêu đề. Về cơ bản, thuật toán tính toán cấp độ tiêu đề dựa trên số lượng phần tử phân chia tổ tiên mà một tiêu đề có cộng với giá trị cấp độ tiêu đề cơ sở của tiêu đề. Nó có một chút sắc thái hơn so với thông số kỹ thuật, nhưng đó là ý tưởng chung về cách thức hoạt động của nó một cách đơn giản

Thuật toán đơn giản hóa hiện không đề cập đến



85 hoặc


84. Điều này có nghĩa là những thuộc tính đó sẽ không giúp đóng góp vào bố cục tài liệu mà thuật toán đơn giản hóa tạo ra. Với việc thiếu hỗ trợ


85, điều này có nghĩa là việc gắn nhãn một thành phần phân đoạn bằng


85 có thể dễ dàng dẫn đến các cấp tiêu đề bị bỏ qua sâu hơn trong cây



77

Thông số kỹ thuật đơn giản hóa cũng coi nó không hợp lệ đối với

  • không có cấp tiêu đề là 1 ở gốc tài liệu (điều này có vấn đề nếu bạn đang đặt nội dung chính bên trong phần tử
    
    
    
    4);
  • không có tiêu đề cấp 1 là tiêu đề đầu tiên trong tài liệu (phần lớn điều này không sao, trừ khi bạn cần sử dụng tiêu đề trong tiêu đề trang hoặc trong thanh bên trái)

Tuy nhiên, nó cho phép có nhiều hơn một tiêu đề cấp 1 ở thư mục gốc của tài liệu, điều mà tôi thấy rất kỳ quặc và không tốt cho khả năng truy cập (mặc dù mối lo ngại của tôi về điều này dường như đã bị bỏ qua)

Tôi đã nêu các vấn đề tôi gặp phải với thông số kỹ thuật và đề xuất các giải pháp khả thi trong cuộc thảo luận GitHub

Hiện tại, tốt nhất vẫn là sử dụng các thuộc tính



85 và/hoặc


84 thay vì các tiêu đề ẩn trực quan để gắn nhãn các thành phần phân đoạn. Không đáng để làm giảm trải nghiệm của người dùng ngày nay chỉ vì một thông số kỹ thuật thậm chí còn chưa được hoàn thiện hoặc chấp nhận

Sử dụng aria trên các yếu tố phân chia bố cục ví dụ

Sử dụng


85

Đây là cấu trúc HTML trông như thế nào nếu chúng ta sử dụng thuộc tính



85 để gắn nhãn cho các thành phần phân đoạn



78

Đây là bố cục trong CodePen trong trường hợp bạn muốn chơi thử với nó (xin lỗi người dùng di động, nó không thân thiện với thiết bị di động)

Dự phòng nhúng CodePen

Sử dụng


84

Nhưng hãy giả sử rằng bạn có một lượng lớn khán giả quốc tế nói đủ thứ ngôn ngữ. Trong trường hợp đó, tốt hơn là sử dụng thuộc tính



84. Đây là những gì nó sẽ trông như thế nào



79

Kết quả của việc sử dụng aria

Cấu trúc tiêu đề cho trang web tại thời điểm này trông như thế này

  • 
    
    
    319 Tiêu đề bài viết chính
    • 
      
      
      338 Tiêu đề phụ của bài viết
    • 
      
      
      338 Chia sẻ
    • 
      
      
      338 Được đề xuất
      • 
        
        
        364 Bài viết liên quan
      • 
        
        
        364 Bài viết liên quan

Phác thảo tài liệu (giả sử rằng thuật toán phác thảo ban đầu được triển khai) trông như thế này

  • 
    
    
    6 Tài liệu
    • 
      
      
      2 Chính
    • 
      
      
      2 Trung học
    • 
      
      
      4 Tiêu đề bài viết chính
      • 
        
        
        752 Tiêu đề phụ của bài báo
    • 
      
      
      3 Thanh bên
      • 
        
        
        5 Chia sẻ
      • 
        
        
        5 Khuyến nghị
        • 
          
          
          4 Bài viết liên quan
        • 
          
          
          4 Bài viết liên quan

Bạn có thể nghĩ rằng đường viền tài liệu trông hơi trống. Chẳng phải những thứ như đầu trang, chân trang và tìm kiếm cũng được thông báo trong đó sao? . Chúng tôi nhận được rất nhiều thông tin ẩn được cung cấp miễn phí cho người dùng bằng cách sử dụng các phần tử HTML chính xác trong một cấu trúc tốt. Đây là phiên bản đơn giản hóa về cách người dùng trình đọc màn hình có thể trải nghiệm trang web

  • [Văn bản được sử dụng trong phần tử
    
    
    
    758]
    • mốc biểu ngữ
      • Liên kết, logo trang web [(tiêu điểm) “đi tới trang chủ”]
      • Cột mốc điều hướng “chính”
        • [Danh sách các liên kết điều hướng]
      • Mốc tìm kiếm “trang web”
    • Cột mốc điều hướng “phụ”
      • [Danh sách các liên kết điều hướng]
    • mốc chính
      • “Tiêu đề bài viết chính” mốc bài viết, tiêu đề cấp 1
        • [Nội dung]
        • Tiêu đề cấp 2, “Tiêu đề phụ của bài viết”
          • [Nội dung]
    • Cột mốc miễn phí “Thanh bên”
      • Cột mốc khu vực “Chia sẻ”, tiêu đề cấp 2
        • [Danh sách liên kết chia sẻ]
      • Mốc vùng “Được đề xuất”, tiêu đề cấp 2
        • Danh sách có 2 mục
          • Mục, “Bài viết liên quan” mốc bài viết, đề mục cấp 3
            • [Nội dung]
          • Mục, “Bài viết liên quan” mốc bài viết, đề mục cấp 3
            • [Nội dung]
    • Mốc thông tin nội dung
      • [Danh sách các liên kết chân trang]

Như bạn có thể thấy, cấu trúc trang web trở nên khá rõ ràng và dễ hiểu đối với người dùng trình đọc màn hình khi bạn tính đến tất cả thông tin ngầm bổ sung mà bạn nhận được từ việc sử dụng cấu trúc HTML tốt

Vì vậy, mặc dù không có trình duyệt nào hỗ trợ thuật toán phác thảo tài liệu, nhưng vẫn đáng để nỗ lực suy nghĩ về dàn bài. Trình đọc màn hình vẫn cho người dùng biết loại phần nào đó, phần bắt đầu ở đâu và (đôi khi) kết thúc (tùy thuộc vào trình đọc màn hình) và nhãn phần là gì. Điều này có nghĩa là những nỗ lực của bạn để tạo ra một cấu trúc tài liệu tốt sẽ không bị lãng phí

Loại cấu trúc này đi kèm với nhiều lợi ích

  • Trang tương thích 100% với thuật toán phác thảo tài liệu, sẽ chứng minh điều đó trong tương lai trong trường hợp thuật toán được triển khai trong một trình duyệt thực
  • Cấu trúc đề mục hoàn toàn logic
  • Người dùng trình đọc màn hình điều hướng qua các tiêu đề có thể nhanh chóng chuyển đến thông tin quan trọng
  • Người dùng trình đọc màn hình điều hướng qua các mốc có rất nhiều mốc hữu ích để di chuyển trên trang
  • Người dùng trình đọc màn hình có thể nhanh chóng hiểu nội dung của từng phần mà không cần phải đọc bất kỳ nội dung nào bên trong chúng
  • Nội dung được nhóm thành các phần ngữ nghĩa, vì vậy người dùng trình đọc màn hình không bị nhầm lẫn khi rời khỏi phần này và vào phần khác
  • Các công cụ tìm kiếm có thể hiểu rõ hơn thông tin mà mỗi phần chứa, điều này có khả năng cải thiện SEO
  • Người dùng sáng mắt có thể tận dụng các tính năng của trình duyệt gốc như Chế độ đọc

Điều gì xảy ra khi bạn cần 87?

Còn một điểm khó khăn nữa khi nói đến việc gắn nhãn các yếu tố phân chia mà tôi chưa giải quyết. Giả sử bạn bằng cách nào đó đã xoay sở để sử dụng hết sáu cấp độ tiêu đề gốc và hiện đang gặp khó khăn khi cần thêm một cấp độ nữa. Bạn làm nghề gì?

Bạn có thể sử dụng kỹ thuật



84 nếu nó chỉ nhằm mục đích ghi nhãn một phần. Giả sử bạn thực sự muốn tiêu đề này xuất hiện trong cấu trúc tiêu đề hoặc có thể bạn chỉ muốn tránh sử dụng ID càng nhiều càng tốt. Dù lý do là gì, bạn cần một phần tử


87 nhưng


87 không tồn tại

Đây là lúc thuộc tính



763 ra tay giải cứu. Thuộc tính


763 sẽ xác định cấp độ tiêu đề cho các phần tử đã áp dụng


765 cho chúng. Đây là cách W3C khuyên bạn nên tạo phần tử


87



0

Không phải tất cả trình đọc màn hình đều hỗ trợ cú pháp này. Tôi biết rằng JAWS coi những phần tử này giống như phần tử



338 hơn là phần tử


87. Nếu bạn biết bất kỳ trình đọc màn hình nào không hoạt động, vui lòng báo cáo lỗi cho nhà phát triển trình đọc màn hình và cũng để lại nhận xét bên dưới

Khi tôi cần đạt được một



87, tôi sẽ thường sử dụng


765 ngụ ý từ một phần tử


320 để thay thế. Thuộc tính


763 sẽ ghi đè mức “6” ngầm định của phần tử


320. Điều này không được xác nhận chính xác bởi W3C mặc dù. Nó sạch hơn và sẽ cho phép tiêu đề vẫn xuất hiện trong các công cụ kiểm tra cấu trúc tiêu đề và đề cương tài liệu (mặc dù chúng thường xuất hiện dưới dạng tiêu đề cấp độ


320 hoặc


338, không phải tiêu đề cấp độ


87)



1

Bằng cách sử dụng



763, giờ đây bạn có quyền truy cập vào vô số cấp độ tiêu đề

Trang web của bạn có cấu trúc tốt không?

Bây giờ bạn đã biết cách tạo cấu trúc HTML phù hợp, bạn có thể áp dụng những gì bạn đã học vào trang web của mình không?

Tôi đã tìm thấy một tiện ích mở rộng trình duyệt khá hay có tên là “Bản đồ tiêu đề” có sẵn cho cả Chrome và Firefox. Tiện ích mở rộng này sẽ cho phép bạn dễ dàng xem cả biểu diễn cấu trúc tiêu đề phẳng của trang web của bạn (i. e. tất cả các trình duyệt hiện đọc cấu trúc tiêu đề như thế nào) và cấu trúc tài liệu trông như thế nào trong trình duyệt hỗ trợ thuật toán phác thảo tài liệu (i. e. cách một trình duyệt lý thuyết trong tương lai hỗ trợ thuật toán phác thảo sẽ trình bày cấu trúc trang web). Trước tiên, chế độ xem Phác thảo HTML5 cần được bật trong menu cài đặt. Điều này là để ngăn người dùng bị lừa nghĩ rằng họ có thể sử dụng thuật toán phác thảo trong các trang web sản xuất

Các phần của html là gì?

Bản đồ tiêu đề hiện không hỗ trợ các thuộc tính



85 và


84 trên các thành phần phân đoạn trong tab đại cương HTML5. Tôi đã nói chuyện với nhà phát triển và anh ấy đang cố gắng khắc phục sự cố này. Nếu bạn biết về một công cụ kiểm tra dàn bài tài liệu tốt đã tính đến


85 và


84, vui lòng chia sẻ liên kết tới công cụ đó trong phần nhận xét

Sau khi bạn có một công cụ kiểm tra cấu trúc tài liệu tốt, hãy kiểm tra xem cả cấu trúc tiêu đề và bố cục tài liệu có hiển thị theo thứ tự hợp lý không thiếu tiêu đề hoặc nhãn phần bị thiếu ở bất kỳ đâu

Tải xuống và sử dụng trình đọc màn hình

Cách tốt nhất để kiểm tra ngữ nghĩa ngụ ý mà bạn nhận được từ việc sử dụng đúng HTML là tải xuống trình đọc màn hình thực tế và thử điều hướng trang web của bạn bằng trình đọc đó. NVDA là một trong những trình đọc màn hình được sử dụng nhiều nhất bởi những người dùng trình đọc màn hình thực. Nó cũng miễn phí

Xin lưu ý rằng cài đặt mặc định cho NVDA được tối ưu hóa để người dùng khiếm thị sử dụng. Các cài đặt mặc định này có thể khiến người dùng sáng mắt phát điên. Để tận hưởng thời gian sử dụng NVDA, hãy thực hiện các bước sau (các bước dựa trên thiết lập Windows, tôi không có máy Mac)

  1. Tải xuống NVDA và cài đặt nó
  2. Tạo lối tắt đến NVDA trên thanh tác vụ của bạn (Bạn sẽ mở và đóng nó thường xuyên trong khi thử nghiệm)
  3. Mở NVDA từ thanh tác vụ
  4. Tìm NVDA trong khay hệ thống của bạn (xem bên dưới)
  5. Nhấp chuột phải vào biểu tượng khay > “tùy chọn” > “cài đặt”
  6. Chọn “chuột” trong bảng điều khiển bên trái
  7. Bỏ chọn “Bật tính năng theo dõi chuột” (Bây giờ bạn có thể di chuyển chuột mà không cần NVDA hét vào mặt)
  8. Nhấn OK"
  9. Nhấp chuột phải vào biểu tượng khay > “Công cụ” > “Trình xem giọng nói” (Bây giờ bạn có thể xem nhật ký mọi thứ NVDA nói, tuy nhiên đừng hoàn toàn dựa vào điều này khi thử nghiệm)
  10. Trong Speech Viewer, đánh dấu hộp kiểm “Show Speech Viewer on Startup” (Hiển thị Speech Viewer khi bạn mở NVDA)
  11. Làm quen với một số phím điều khiển
  12. Để đóng NVDA, Nhấp chuột phải vào biểu tượng khay > “Thoát” > “OK”
Các phần của html là gì?
Vị trí của NVDA trên Windows

NVDA hiện không hỗ trợ các phần tử



4 và


5. Có một vấn đề trên GitHub về việc hỗ trợ các phần tử


4. Khi tôi bắt đầu viết bài viết này, các phần tử


5 đã được hỗ trợ. Hỗ trợ cho


5 dường như đã giảm vì một số lý do. Điều này có nghĩa là NVDA phải được sửa. Điều đó không có nghĩa là bạn nên ngừng sử dụng đúng ngữ nghĩa trong HTML của mình

Xây dựng trang web của bạn dựa trên phác thảo tài liệu, sau đó kiểm tra ngữ nghĩa bằng Bản đồ tiêu đề và NVDA (hoặc trình đọc màn hình khác). Nếu bạn làm như vậy, bạn sẽ làm cho người dùng trình đọc màn hình của bạn rất hài lòng. Bạn thậm chí có thể làm cho các công cụ tìm kiếm hài lòng hơn. 😊


Đặc biệt cảm ơn Kevin Galvin (một nhà tư vấn chính tại tôi 2 khả năng truy cập) để được tư vấn xung quanh các vấn đề về khả năng sử dụng của việc sử dụng phần tử



319 ẩn trực quan ở đầu trang và đề xuất


85 như một giải pháp thay thế cho việc sử dụng các tiêu đề ẩn trực quan

Có bao nhiêu phần trong chương trình HTML?

Một tài liệu HTML chủ yếu được chia thành hai phần . CÁI ĐẦU. Phần này chứa thông tin về tài liệu HTML. Ví dụ: Tiêu đề của trang, phiên bản HTML, Dữ liệu Meta, v.v. THÂN THỂ. Phần này chứa mọi thứ bạn muốn hiển thị trên Trang Web.

7 phần trong việc tạo HTML là gì?

4. 3 phần .
1 Yếu tố cơ thể
2 Yếu tố bài báo
3 Phần tử phần
4 Phần tử điều hướng
5 Yếu tố sang một bên
6 Các phần tử h1 , h2 , h3 , h4 , h5 và h6
7 Phần tử tiêu đề
8 Phần tử chân trang

5 phần cơ bản của HTML là gì?

Cấu trúc cơ bản của một tài liệu HTML bao gồm 5 thành phần. .
<. LOẠI TÀI LIỆU>
<đầu>

3 phần của HTML là gì?

HTML 4. 0 tài liệu thường bao gồm ba phần. dòng chứa thông tin phiên bản, phần tiêu đề mô tả và phần thân chứa nội dung thực của tài liệu.