Html được sử dụng như thế nào trong truy cập?

Khi bạn tìm hiểu thêm về HTML — đọc thêm tài nguyên, xem thêm ví dụ, v.v. — bạn sẽ tiếp tục thấy một chủ đề chung. tầm quan trọng của việc sử dụng HTML ngữ nghĩa [đôi khi được gọi là POSH hoặc HTML ngữ nghĩa cũ đơn giản]. Điều này có nghĩa là sử dụng các thành phần HTML chính xác cho mục đích đã định của chúng càng nhiều càng tốt

Bạn có thể thắc mắc tại sao điều này lại quan trọng đến vậy. Rốt cuộc, bạn có thể sử dụng kết hợp CSS và JavaScript để làm cho bất kỳ phần tử HTML nào hoạt động theo bất kỳ cách nào bạn muốn. Ví dụ: nút điều khiển để phát video trên trang web của bạn có thể được đánh dấu như thế này

Play video

Nhưng như bạn sẽ thấy chi tiết hơn sau này, sẽ rất hợp lý khi sử dụng đúng thành phần cho công việc

Play video

Các

My heading

This is the first section of my document.

I'll add another paragraph here too.


  Here is
  a list for
  you to read


My subheading


  This is the first subsection of my document.
  I'd love people to be able to find this content!


My 2nd subheading


  This is the second subsection of my content,
  which I think is more interesting than the last one.

HTML ngữ nghĩa không mất nhiều thời gian để viết hơn so với đánh dấu phi ngữ nghĩa [xấu] nếu bạn làm điều đó một cách nhất quán ngay từ đầu dự án của mình. Tốt hơn nữa, đánh dấu ngữ nghĩa có những lợi ích khác ngoài khả năng truy cập

1. Dễ dàng phát triển hơn — như đã đề cập ở trên, bạn nhận được một số chức năng miễn phí, ngoài ra nó còn dễ hiểu hơn
2. Tốt hơn trên thiết bị di động — HTML ngữ nghĩa có kích thước tệp nhẹ hơn nhiều so với mã spaghetti phi ngữ nghĩa và dễ dàng đáp ứng hơn
3. Tốt cho SEO - các công cụ tìm kiếm coi trọng các từ khóa bên trong tiêu đề, liên kết, v.v. hơn các từ khóa được bao gồm trong các

   My heading
   
   This is the first section of my document.
   
   I'll add another paragraph here too.
   
   
     Here is
     a list for
     you to read
   
   
   My subheading
   
   
     This is the first subsection of my document.
     I'd love people to be able to find this content!
   
   
   My 2nd subheading
   
   
     This is the second subsection of my content,
     which I think is more interesting than the last one.
   
   

   2 phi ngữ nghĩa, v.v. , vì vậy khách hàng sẽ dễ dàng tìm thấy tài liệu của bạn hơn

Hãy bắt đầu và xem HTML có thể truy cập chi tiết hơn

Ghi chú. Bạn nên thiết lập trình đọc màn hình trên máy tính cục bộ của mình để có thể thực hiện một số thử nghiệm đối với các ví dụ được hiển thị bên dưới. Xem của chúng tôi để biết thêm chi tiết

Chúng ta đã nói về tầm quan trọng của ngữ nghĩa phù hợp và tại sao chúng ta nên sử dụng phần tử HTML phù hợp cho công việc. Không thể bỏ qua điều này, vì đây là một trong những nơi chính mà khả năng tiếp cận bị hỏng nếu không được xử lý đúng cách

Trên mạng, sự thật là mọi người làm một số điều rất kỳ lạ với đánh dấu HTML. Một số lạm dụng HTML là do các hoạt động cũ chưa bị lãng quên hoàn toàn và một số chỉ là do sự thiếu hiểu biết đơn thuần. Dù thế nào đi chăng nữa, bạn nên thay thế mã xấu như vậy

Đôi khi bạn không ở vị trí để loại bỏ đánh dấu tệ hại — các trang của bạn có thể được tạo bởi một số loại khung phía máy chủ mà bạn không có toàn quyền kiểm soát hoặc bạn có thể có nội dung của bên thứ ba trên trang của mình [chẳng hạn như

Mục tiêu không phải là "tất cả hoặc không có gì";

Một trong những công cụ trợ năng tốt nhất mà người dùng trình đọc màn hình có thể có là cấu trúc nội dung xuất sắc với tiêu đề, đoạn văn, danh sách, v.v. Một ví dụ ngữ nghĩa xuất sắc có thể trông giống như sau

My heading

This is the first section of my document.

I'll add another paragraph here too.


  Here is
  a list for
  you to read


My subheading


  This is the first subsection of my document.
  I'd love people to be able to find this content!


My 2nd subheading


  This is the second subsection of my content,
  which I think is more interesting than the last one.

Chúng tôi đã chuẩn bị một phiên bản có văn bản dài hơn để bạn dùng thử bằng trình đọc màn hình [xem ngữ nghĩa tốt. html]. Nếu bạn thử điều hướng qua phần này, bạn sẽ thấy rằng phần này khá dễ điều hướng

1. Trình đọc màn hình đọc từng tiêu đề khi bạn xem qua nội dung, thông báo cho bạn tiêu đề là gì, đoạn văn là gì, v.v.
2. Nó dừng lại sau mỗi phần tử, cho phép bạn đi theo bất kỳ tốc độ nào phù hợp với bạn
3. Bạn có thể chuyển tới tiêu đề tiếp theo/trước đó trong nhiều trình đọc màn hình
4. Bạn cũng có thể hiển thị danh sách tất cả các tiêu đề trong nhiều trình đọc màn hình, cho phép bạn sử dụng chúng làm mục lục tiện dụng để tìm nội dung cụ thể

Mọi người đôi khi viết tiêu đề, đoạn văn, vv. sử dụng ngắt dòng và thêm các phần tử HTML hoàn toàn để tạo kiểu, đại loại như sau

My heading

This is the first section of my document.

I'll add another paragraph here too.

1. Here is

2. a list for

3. you to read

My subheading

This is the first subsection of my document.
I'd love people to be able to find this content!

My 2nd subheading

This is the second subsection of my content.
I think is more interesting than the last one.

Nếu bạn dùng thử phiên bản dài hơn của chúng tôi với trình đọc màn hình [xem ngữ nghĩa xấu. html], bạn sẽ không có trải nghiệm tốt — trình đọc màn hình không có bất kỳ thứ gì để sử dụng làm biển chỉ dẫn, vì vậy bạn không thể truy xuất mục lục hữu ích và toàn bộ trang được xem như một khối khổng lồ duy nhất,

Có những vấn đề khác nằm ngoài khả năng truy cập - ví dụ: khó định kiểu nội dung bằng CSS hoặc thao tác nội dung bằng JavaScript vì không có phần tử nào để sử dụng làm bộ chọn

Sử dụng ngôn ngữ rõ ràng

Ngôn ngữ bạn sử dụng cũng có thể ảnh hưởng đến khả năng tiếp cận. Nói chung, bạn nên sử dụng ngôn ngữ rõ ràng, không quá phức tạp và không sử dụng các thuật ngữ tiếng lóng hoặc biệt ngữ không cần thiết. Điều này không chỉ mang lại lợi ích cho những người khuyết tật về nhận thức hoặc khuyết tật khác; . Ngoài ra, bạn nên cố gắng tránh sử dụng ngôn ngữ và ký tự mà trình đọc màn hình không đọc rõ ràng. Ví dụ

• Đừng sử dụng dấu gạch ngang nếu bạn có thể tránh nó. Thay vì viết 5–7, hãy viết 5 đến 7
• Mở rộng các từ viết tắt — thay vì viết Jan, hãy viết January
• Mở rộng các từ viết tắt, ít nhất một hoặc hai lần, sau đó sử dụng thẻ

  My heading
  
  This is the first section of my document.
  
  I'll add another paragraph here too.
  
  
    Here is
    a list for
    you to read
  
  
  My subheading
  
  
    This is the first subsection of my document.
    I'd love people to be able to find this content!
  
  
  My 2nd subheading
  
  
    This is the second subsection of my content,
    which I think is more interesting than the last one.
  
  

  3 để mô tả chúng

Trước đây, mọi người thường tạo bố cục trang bằng bảng HTML - sử dụng các ô bảng khác nhau để chứa tiêu đề, chân trang, thanh bên, cột nội dung chính, v.v. Đây không phải là một ý tưởng hay vì trình đọc màn hình có thể sẽ đưa ra các thông số khó hiểu, đặc biệt nếu bố cục phức tạp và có nhiều bảng lồng nhau

Hãy thử cách bố trí bảng ví dụ của chúng tôi. ví dụ html, trông giống như thế này

  
  
    
      Header
    
  
  
  
    
      Home
    
    
      Our team
    
    
      Projects
    
    
      Contact
    
    
      
        Search
          
        
      
    
    
      Go!
    
  
  
  
    
  
  
  
    
      
    
    
      Related

      
    
  
  
  
    
  
  
  
    
      ©Copyright 1996 by nobody. All rights reversed.
    
  

Nếu bạn cố điều hướng phần này bằng trình đọc màn hình, nó có thể sẽ cho bạn biết rằng có một bảng cần xem [mặc dù một số trình đọc màn hình có thể đoán được sự khác biệt giữa bố cục bảng và bảng dữ liệu]. Sau đó, bạn sẽ có khả năng [tùy thuộc vào trình đọc màn hình bạn đang sử dụng] phải đi xuống bảng dưới dạng một đối tượng và xem xét các tính năng của nó một cách riêng biệt, sau đó ra khỏi bảng một lần nữa để tiếp tục điều hướng nội dung

Bố cục bảng là một di tích của quá khứ — chúng có ý nghĩa khi hỗ trợ CSS không phổ biến trong các trình duyệt, nhưng bây giờ chúng chỉ gây nhầm lẫn cho người dùng trình đọc màn hình. Ngoài ra, mã nguồn của họ yêu cầu nhiều đánh dấu hơn, khiến chúng kém linh hoạt hơn và khó bảo trì hơn. Bạn có thể xác minh những tuyên bố này bằng cách so sánh trải nghiệm trước đây của mình với một ví dụ về cấu trúc trang web hiện đại hơn, có thể giống như thế này

________số 8

Nếu bạn thử ví dụ về cấu trúc hiện đại hơn của chúng tôi với trình đọc màn hình, bạn sẽ thấy rằng phần đánh dấu bố cục không còn cản trở và gây nhầm lẫn khi đọc nội dung. Nó cũng gọn gàng và nhỏ hơn nhiều về kích thước mã, có nghĩa là mã dễ bảo trì hơn và ít băng thông hơn để người dùng tải xuống [đặc biệt phổ biến đối với những người có kết nối chậm]

Một cân nhắc khác khi tạo bố cục là sử dụng các phần tử ngữ nghĩa HTML như đã thấy trong ví dụ trên [xem ] — bạn có thể tạo bố cục chỉ bằng cách sử dụng các phần tử

My heading

This is the first section of my document.

I'll add another paragraph here too.


  Here is
  a list for
  you to read


My subheading


  This is the first subsection of my document.
  I'd love people to be able to find this content!


My 2nd subheading


  This is the second subsection of my content,
  which I think is more interesting than the last one.

My heading

This is the first section of my document.

I'll add another paragraph here too.


  Here is
  a list for
  you to read


My subheading


  This is the first subsection of my document.
  I'd love people to be able to find this content!


My 2nd subheading


  This is the second subsection of my content,
  which I think is more interesting than the last one.

Ghi chú. Ngoài việc có ngữ nghĩa tốt và bố cục hấp dẫn, nội dung của bạn phải có ý nghĩa hợp lý theo thứ tự nguồn của nó — bạn luôn có thể đặt nó ở nơi bạn muốn bằng cách sử dụng CSS sau này, nhưng bạn nên lấy thứ tự nguồn ngay từ đầu, vậy màn hình nào

Theo điều khiển giao diện người dùng, chúng tôi muốn nói đến các phần chính của tài liệu web mà người dùng tương tác — phổ biến nhất là nút, liên kết và điều khiển biểu mẫu. Trong phần này, chúng ta sẽ xem xét các mối quan tâm cơ bản về khả năng truy cập cần lưu ý khi tạo các điều khiển như vậy. Các bài viết sau về WAI-ARIA và đa phương tiện sẽ xem xét các khía cạnh khác của khả năng truy cập giao diện người dùng

Một khía cạnh quan trọng về khả năng truy cập của các điều khiển giao diện người dùng là theo mặc định, các trình duyệt cho phép chúng được thao tác bằng bàn phím. Bạn có thể dùng thử tính năng này bằng cách sử dụng khả năng truy cập bàn phím gốc của chúng tôi. ví dụ html [xem mã nguồn]. Mở cái này trong một tab mới và thử nhấn phím tab; . Các phần tử tập trung được cung cấp một kiểu mặc định được tô sáng trong mọi trình duyệt [kiểu này hơi khác nhau giữa các trình duyệt khác nhau] để bạn có thể biết phần tử nào được tập trung

Ghi chú. Bạn có thể bật lớp phủ hiển thị thứ tự tab trang trong công cụ dành cho nhà phát triển của mình. Để biết thêm thông tin xem.

Sau đó, bạn có thể nhấn Enter/Return để theo một liên kết có tiêu điểm hoặc nhấn một nút [chúng tôi đã bao gồm một số JavaScript để làm cho các nút thông báo tin nhắn] hoặc bắt đầu nhập để nhập văn bản trong kiểu nhập văn bản. Các phần tử biểu mẫu khác có các điều khiển khác nhau;

Ghi chú. Các trình duyệt khác nhau có thể có sẵn các tùy chọn điều khiển bàn phím khác nhau. Xem để biết thêm chi tiết

Về cơ bản, bạn có được hành vi này miễn phí, chỉ bằng cách sử dụng các yếu tố thích hợp, e. g

Play video

Điều này có nghĩa là sử dụng các liên kết, nút, thành phần biểu mẫu và nhãn một cách thích hợp [bao gồm cả thành phần

My heading

This is the first section of my document.

I'll add another paragraph here too.


  Here is
  a list for
  you to read


My subheading


  This is the first subsection of my document.
  I'd love people to be able to find this content!


My 2nd subheading


  This is the second subsection of my content,
  which I think is more interesting than the last one.

Tuy nhiên, một lần nữa, mọi người đôi khi làm những điều kỳ lạ với HTML. Ví dụ: đôi khi bạn thấy các nút được đánh dấu bằng cách sử dụng

My heading

This is the first section of my document.

I'll add another paragraph here too.


  Here is
  a list for
  you to read


My subheading


  This is the first subsection of my document.
  I'd love people to be able to find this content!


My 2nd subheading


  This is the second subsection of my content,
  which I think is more interesting than the last one.

Play video

Nhưng việc sử dụng mã như vậy không được khuyến khích — bạn sẽ ngay lập tức mất khả năng truy cập bàn phím gốc mà lẽ ra bạn có nếu bạn chỉ sử dụng các phần tử

My heading

This is the first section of my document.

I'll add another paragraph here too.


  Here is
  a list for
  you to read


My subheading


  This is the first subsection of my document.
  I'd love people to be able to find this content!


My 2nd subheading


  This is the second subsection of my content,
  which I think is more interesting than the last one.

My heading

This is the first section of my document.

I'll add another paragraph here too.

1. Here is

2. a list for

3. you to read

My subheading

This is the first subsection of my document.
I'd love people to be able to find this content!

My 2nd subheading

This is the second subsection of my content.
I think is more interesting than the last one.

Xây dựng khả năng truy cập bàn phím trở lại

Việc thêm lại những lợi thế như vậy sẽ mất một chút công việc [bạn có thể xem một ví dụ trong fake-div-buttons của chúng tôi. html — cũng xem mã nguồn]. Ở đây, chúng tôi đã cung cấp cho các nút

My heading

This is the first section of my document.

I'll add another paragraph here too.


  Here is
  a list for
  you to read


My subheading


  This is the first subsection of my document.
  I'd love people to be able to find this content!


My 2nd subheading


  This is the second subsection of my content,
  which I think is more interesting than the last one.

My heading

This is the first section of my document.

I'll add another paragraph here too.

1. Here is

2. a list for

3. you to read

My subheading

This is the first subsection of my document.
I'd love people to be able to find this content!

My 2nd subheading

This is the second subsection of my content.
I think is more interesting than the last one.

My heading

This is the first section of my document.

I'll add another paragraph here too.

1. Here is

2. a list for

3. you to read

My subheading

This is the first subsection of my document.
I'd love people to be able to find this content!

My 2nd subheading

This is the second subsection of my content.
I think is more interesting than the last one.

My heading

This is the first section of my document.

I'll add another paragraph here too.


  Here is
  a list for
  you to read


My subheading


  This is the first subsection of my document.
  I'd love people to be able to find this content!


My 2nd subheading


  This is the second subsection of my content,
  which I think is more interesting than the last one.

Về cơ bản, thuộc tính chủ yếu nhằm mục đích cho phép các phần tử có thể lập bảng có thứ tự tab tùy chỉnh [được chỉ định theo thứ tự số dương], thay vì chỉ được sắp xếp theo thứ tự nguồn mặc định của chúng. Đây gần như luôn là một ý tưởng tồi, vì nó có thể gây nhầm lẫn lớn. Chỉ sử dụng nó nếu bạn thực sự cần, ví dụ: nếu bố cục hiển thị mọi thứ theo thứ tự trực quan rất khác với mã nguồn và bạn muốn làm cho mọi thứ hoạt động hợp lý hơn. Có hai lựa chọn khác cho

My heading

This is the first section of my document.

I'll add another paragraph here too.

1. Here is

2. a list for

3. you to read

My subheading

This is the first subsection of my document.
I'd love people to be able to find this content!

My 2nd subheading

This is the second subsection of my content.
I think is more interesting than the last one.

• My heading
  
  This is the first section of my document.
  
  I'll add another paragraph here too.
  
  1. Here is
  
  2. a list for
  
  3. you to read
  
  My subheading
  
  This is the first subsection of my document.
  I'd love people to be able to find this content!
  
  My 2nd subheading
  
  This is the second subsection of my content.
  I think is more interesting than the last one.
  

  4 — như đã chỉ ra ở trên, giá trị này cho phép các phần tử thường không thể lập bảng trở nên có thể lập bảng. Đây là giá trị hữu ích nhất của

  My heading
  
  This is the first section of my document.
  
  I'll add another paragraph here too.
  
  1. Here is
  
  2. a list for
  
  3. you to read
  
  My subheading
  
  This is the first subsection of my document.
  I'd love people to be able to find this content!
  
  My 2nd subheading
  
  This is the second subsection of my content.
  I think is more interesting than the last one.
  

  6

• 
    
    
      
        Header
      
    
    
    
      
        Home
      
      
        Our team
      
      
        Projects
      
      
        Contact
      
      
        
          Search
            
          
        
      
      
        Go!
      
    
    
    
      
    
    
    
      
        
      
      
        Related
  
        
      
    
    
    
      
    
    
    
      
        ©Copyright 1996 by nobody. All rights reversed.
      
    
  
  

  0 — điều này cho phép các phần tử không thể lập bảng thông thường nhận được tiêu điểm theo chương trình, e. g. , thông qua JavaScript hoặc làm mục tiêu của liên kết

Mặc dù bổ sung ở trên cho phép chúng tôi chuyển sang các nút, nhưng nó không cho phép chúng tôi kích hoạt chúng thông qua phím Enter/Return. Để làm điều đó, chúng tôi phải thêm một chút thủ thuật JavaScript sau

My heading

This is the first section of my document.

I'll add another paragraph here too.


  Here is
  a list for
  you to read


My subheading


  This is the first subsection of my document.
  I'd love people to be able to find this content!


My 2nd subheading


  This is the second subsection of my content,
  which I think is more interesting than the last one.

Ở đây chúng tôi thêm một trình nghe vào đối tượng

  
  
    
      Header
    
  
  
  
    
      Home
    
    
      Our team
    
    
      Projects
    
    
      Contact
    
    
      
        Search
          
        
      
    
    
      Go!
    
  
  
  
    
  
  
  
    
      
    
    
      Related

      
    
  
  
  
    
  
  
  
    
      ©Copyright 1996 by nobody. All rights reversed.
    
  

  
  
    
      Header
    
  
  
  
    
      Home
    
    
      Our team
    
    
      Projects
    
    
      Contact
    
    
      
        Search
          
        
      
    
    
      Go!
    
  
  
  
    
  
  
  
    
      
    
    
      Related

      
    
  
  
  
    
  
  
  
    
      ©Copyright 1996 by nobody. All rights reversed.
    
  

  
  
    
      Header
    
  
  
  
    
      Home
    
    
      Our team
    
    
      Projects
    
    
      Contact
    
    
      
        Search
          
        
      
    
    
      Go!
    
  
  
  
    
  
  
  
    
      
    
    
      Related

      
    
  
  
  
    
  
  
  
    
      ©Copyright 1996 by nobody. All rights reversed.
    
  

Đây là rất nhiều rắc rối thêm để xây dựng lại chức năng trong. Và chắc chắn sẽ có những vấn đề khác với nó. Tốt hơn là chỉ sử dụng đúng yếu tố cho đúng công việc ngay từ đầu

Nhãn văn bản có ý nghĩa

Nhãn văn bản điều khiển giao diện người dùng rất hữu ích đối với tất cả người dùng, nhưng việc sử dụng đúng chúng đặc biệt quan trọng đối với người dùng khuyết tật

Bạn nên đảm bảo rằng nút và nhãn văn bản liên kết của bạn dễ hiểu và dễ phân biệt. Không chỉ sử dụng "Nhấp vào đây" cho nhãn của bạn, vì đôi khi người dùng trình đọc màn hình nhận được danh sách các nút và điều khiển biểu mẫu. Ảnh chụp màn hình sau đây cho thấy các điều khiển của chúng tôi được liệt kê bởi VoiceOver trên máy Mac

Đảm bảo rằng các nhãn của bạn có ý nghĩa ngoài ngữ cảnh, có thể đọc theo cách riêng của chúng cũng như trong ngữ cảnh của đoạn văn mà chúng nằm trong đó. Ví dụ: phần sau đây cho thấy một ví dụ về văn bản liên kết tốt

Play video

nhưng đây là văn bản liên kết xấu

Play video

Ghi chú. Bạn có thể tìm hiểu thêm về cách triển khai liên kết và các phương pháp hay nhất trong bài viết Tạo siêu liên kết của chúng tôi. Bạn cũng có thể xem một số ví dụ tốt và xấu tại liên kết tốt. html và liên kết xấu. html

Nhãn biểu mẫu cũng rất quan trọng để cung cấp cho bạn manh mối về những gì bạn cần nhập vào mỗi lần nhập biểu mẫu. Sau đây có vẻ như là một ví dụ đủ hợp lý

Play video

Tuy nhiên, điều này không hữu ích cho người dùng khuyết tật. Không có gì trong ví dụ trên để liên kết nhãn một cách rõ ràng với đầu vào biểu mẫu và làm rõ cách điền nhãn nếu bạn không thể nhìn thấy nó. Nếu bạn truy cập phần này bằng một số trình đọc màn hình, bạn chỉ có thể được cung cấp một mô tả dọc theo dòng "chỉnh sửa văn bản. "

Sau đây là một ví dụ tốt hơn nhiều

Play video

Với mã như thế này, nhãn sẽ được liên kết rõ ràng với đầu vào; . chỉnh sửa văn bản. "

Như một phần thưởng bổ sung, trong hầu hết các trình duyệt, việc liên kết nhãn với đầu vào biểu mẫu có nghĩa là bạn có thể nhấp vào nhãn để chọn hoặc kích hoạt thành phần biểu mẫu. Điều này mang lại cho đầu vào một vùng nhấn lớn hơn, giúp dễ dàng chọn hơn

Ghi chú. Bạn có thể xem một số ví dụ về hình thức tốt và xấu trong hình thức tốt. html và dạng xấu. html

Bạn có thể tìm thấy lời giải thích hay về tầm quan trọng của nhãn văn bản thích hợp và cách điều tra các vấn đề về nhãn văn bản bằng Trình kiểm tra khả năng truy cập của Firefox trong video sau

Ví dụ, một bảng dữ liệu cơ bản có thể được viết bằng cách đánh dấu rất đơn giản

Play video

Nhưng điều này có vấn đề — không có cách nào để người dùng trình đọc màn hình liên kết các hàng hoặc cột với nhau dưới dạng nhóm dữ liệu. Để làm điều này, bạn cần biết các hàng tiêu đề là gì và liệu chúng có hướng lên các hàng, cột, v.v. Điều này chỉ có thể được thực hiện trực quan đối với bảng trên [xem bad-table. html và tự mình thử ví dụ]

Bây giờ, hãy xem ví dụ về bảng ban nhạc punk của chúng tôi — bạn có thể thấy một số công cụ hỗ trợ tiếp cận đang hoạt động tại đây

• Tiêu đề bảng được xác định bằng các phần tử

  
    
    
      
        Header
      
    
    
    
      
        Home
      
      
        Our team
      
      
        Projects
      
      
        Contact
      
      
        
          Search
            
          
        
      
      
        Go!
      
    
    
    
      
    
    
    
      
        
      
      
        Related
  
        
      
    
    
    
      
    
    
    
      
        ©Copyright 1996 by nobody. All rights reversed.
      
    
  
  

  6 — bạn cũng có thể chỉ định xem chúng có phải là tiêu đề cho hàng hoặc cột hay không bằng cách sử dụng thuộc tính

  
    
    
      
        Header
      
    
    
    
      
        Home
      
      
        Our team
      
      
        Projects
      
      
        Contact
      
      
        
          Search
            
          
        
      
      
        Go!
      
    
    
    
      
    
    
    
      
        
      
      
        Related
  
        
      
    
    
    
      
    
    
    
      
        ©Copyright 1996 by nobody. All rights reversed.
      
    
  
  

  7. Điều này cung cấp cho bạn các nhóm dữ liệu hoàn chỉnh mà trình đọc màn hình có thể sử dụng dưới dạng các đơn vị
• Cả phần tử

  
    
    
      
        Header
      
    
    
    
      
        Home
      
      
        Our team
      
      
        Projects
      
      
        Contact
      
      
        
          Search
            
          
        
      
      
        Go!
      
    
    
    
      
    
    
    
      
        
      
      
        Related
  
        
      
    
    
    
      
    
    
    
      
        ©Copyright 1996 by nobody. All rights reversed.
      
    
  
  

  8 và thuộc tính

  
    Header
  
  
  
    
  
  
  
  
    
    
      Article heading
  
      
    
  
    
      Related
  
      
    
  
  
  
  
  
    
  
  

  0 của phần tử

  
    
    
      
        Header
      
    
    
    
      
        Home
      
      
        Our team
      
      
        Projects
      
      
        Contact
      
      
        
          Search
            
          
        
      
      
        Go!
      
    
    
    
      
    
    
    
      
        
      
      
        Related
  
        
      
    
    
    
      
    
    
    
      
        ©Copyright 1996 by nobody. All rights reversed.
      
    
  
  

  9 đều thực hiện các công việc tương tự — chúng đóng vai trò là văn bản thay thế cho một bảng, cung cấp cho người dùng trình đọc màn hình một bản tóm tắt nhanh hữu ích về nội dung của bảng. Phần tử

  
    
    
      
        Header
      
    
    
    
      
        Home
      
      
        Our team
      
      
        Projects
      
      
        Contact
      
      
        
          Search
            
          
        
      
      
        Go!
      
    
    
    
      
    
    
    
      
        
      
      
        Related
  
        
      
    
    
    
      
    
    
    
      
        ©Copyright 1996 by nobody. All rights reversed.
      
    
  
  

  8 thường được ưu tiên hơn vì nó giúp người dùng sáng mắt cũng có thể truy cập nội dung của nó, những người cũng có thể thấy nó hữu ích. Bạn không thực sự cần cả hai

Ghi chú. Xem bài viết về khả năng truy cập và các tính năng nâng cao của bảng HTML của chúng tôi để biết thêm chi tiết về các bảng dữ liệu có thể truy cập

Trong khi nội dung văn bản vốn có thể truy cập được, thì điều tương tự không nhất thiết phải nói đối với nội dung đa phương tiện - người khiếm thị không thể nhìn thấy nội dung hình ảnh và video và người khiếm thính không thể nghe thấy nội dung âm thanh. Chúng tôi trình bày chi tiết nội dung video và âm thanh trong đa phương tiện Có thể truy cập, nhưng đối với bài viết này, chúng tôi sẽ xem xét khả năng truy cập cho phần tử

  Header



  




  
  
    Article heading

    
  

  
    Related

    
  





  

Chúng tôi có một ví dụ đơn giản được viết ra, hình ảnh có thể truy cập. html, có bốn bản sao của cùng một hình ảnh

Play video

Hình ảnh đầu tiên, khi được trình đọc màn hình xem, không thực sự giúp ích nhiều cho người dùng — ví dụ như VoiceOver đọc to "/dinosaur. png, hình ảnh". Nó đọc tên tệp để cố gắng cung cấp một số trợ giúp. Trong ví dụ này, ít nhất người dùng sẽ biết đó là một loại khủng long nào đó, nhưng thường các tệp có thể được tải lên với tên tệp do máy tạo [e. g. từ máy ảnh kỹ thuật số] và những tên tệp này có thể sẽ không cung cấp ngữ cảnh cho nội dung của hình ảnh

Ghi chú. Đây là lý do tại sao bạn không bao giờ nên đưa nội dung văn bản vào bên trong hình ảnh — trình đọc màn hình không thể truy cập nội dung đó. Cũng có những nhược điểm khác — bạn không thể chọn và sao chép/dán nó. Chỉ cần không làm điều đó

Khi trình đọc màn hình bắt gặp hình ảnh thứ hai, nó sẽ đọc thuộc tính alt đầy đủ — "A red Tyrannosaurus Rex. Một con khủng long hai chân đứng thẳng như người, tay nhỏ, đầu to với nhiều răng sắc nhọn. "

Điều này nhấn mạnh tầm quan trọng của việc không chỉ sử dụng tên tệp có ý nghĩa trong trường hợp không có văn bản thay thế, mà còn đảm bảo rằng văn bản thay thế được cung cấp trong thuộc tính

  Header



  




  
  
    Article heading

    
  

  
    Related

    
  





  

Lưu ý rằng nội dung của thuộc tính

  Header



  




  
  
    Article heading

    
  

  
    Related

    
  





  

Nội dung của thuộc tính

  Header



  




  
  
    Article heading

    
  

  
    Related

    
  





  

  Header



  




  
  
    Article heading

    
  

  
    Related

    
  





  

  Header



  




  
  
    Article heading

    
  

  
    Related

    
  





  

  Header



  




  
  
    Article heading

    
  

  
    Related

    
  





  

Bất kỳ kiến ​​thức cá nhân hoặc mô tả bổ sung nào không nên được đưa vào đây, vì nó không hữu ích cho những người chưa xem hình ảnh trước đây. Nếu quả bóng là đồ chơi yêu thích của Fluffy hoặc nếu người dùng trang web không thể biết điều đó từ hình ảnh, thì đừng đưa nó vào

Một điều cần xem xét là liệu hình ảnh của bạn có ý nghĩa bên trong nội dung của bạn hay liệu chúng chỉ đơn thuần là để trang trí trực quan và do đó không có ý nghĩa gì. Nếu chúng là trang trí, tốt hơn là viết một văn bản trống làm giá trị cho thuộc tính

  Header



  




  
  
    Article heading

    
  

  
    Related

    
  





  

Ghi chú. Đọc Hình ảnh trong HTML và Hình ảnh đáp ứng để biết thêm thông tin về triển khai hình ảnh và các phương pháp hay nhất

Nếu bạn muốn cung cấp thêm thông tin theo ngữ cảnh, bạn nên đặt nó trong văn bản xung quanh hình ảnh hoặc bên trong thuộc tính

Play video

Chúng ta hãy xem nhanh phương pháp thứ tư

Play video

Trong trường hợp này, chúng tôi hoàn toàn không sử dụng thuộc tính

  Header



  




  
  
    Article heading

    
  

  
    Related

    
  





  

Play video

Play video

Play video

  Header



  




  
  
    Article heading

    
  

  
    Related

    
  





  

Ghi chú.

Play video

HTML bao gồm hai phần tử —

Play video

Play video

Play video

Mặc dù có hỗ trợ trình đọc màn hình hỗn hợp liên kết chú thích hình với hình của chúng, bao gồm cả

Play video

Play video

Play video

Có thể đôi khi một hình ảnh được đưa vào thiết kế của trang, nhưng mục đích chính của nó là để trang trí trực quan. Bạn sẽ nhận thấy trong ví dụ mã ở trên rằng thuộc tính

  Header



  




  
  
    Article heading

    
  

  
    Related

    
  





  

Lý do sử dụng một

  Header



  




  
  
    Article heading

    
  

  
    Related

    
  





  

  Header



  




  
  
    Article heading

    
  

  
    Related

    
  





  

  Header



  




  
  
    Article heading

    
  

  
    Related

    
  





  

Play video

Play video

Play video

Ghi chú. Nếu có thể bạn nên sử dụng CSS để hiển thị hình ảnh chỉ mang tính chất trang trí

Liên kết [phần tử

Play video

Play video

Theo mặc định, các liên kết hiển thị khác với văn bản khác về cả màu sắc và cách trang trí văn bản, với các liên kết có màu xanh lam và được gạch chân theo mặc định, màu tím và được gạch chân nếu được truy cập và có vòng tiêu điểm khi chúng nhận được tiêu điểm bàn phím

Không nên sử dụng màu sắc làm phương pháp duy nhất để phân biệt các liên kết với nội dung không liên kết. Màu văn bản liên kết, giống như tất cả văn bản, phải khác biệt đáng kể so với màu nền [4. 5. 1 độ tương phản]. Ngoài ra, các liên kết phải khác biệt đáng kể so với văn bản không liên kết, với yêu cầu về độ tương phản tối thiểu là 3. 1 giữa văn bản liên kết và văn bản xung quanh và giữa các trạng thái mặc định, đã truy cập và tiêu điểm/hoạt động và 4. 5. 1 độ tương phản giữa tất cả các màu trạng thái đó và màu nền

Các thẻ neo thường bị lạm dụng với sự kiện

  
  
    
      Header
    
  
  
  
    
      Home
    
    
      Our team
    
    
      Projects
    
    
      Contact
    
    
      
        Search
          
        
      
    
    
      Go!
    
  
  
  
    
  
  
  
    
      
    
    
      Related

      
    
  
  
  
    
  
  
  
    
      ©Copyright 1996 by nobody. All rights reversed.
    
  

My heading

This is the first section of my document.

I'll add another paragraph here too.


  Here is
  a list for
  you to read


My subheading


  This is the first subsection of my document.
  I'd love people to be able to find this content!


My 2nd subheading


  This is the second subsection of my content,
  which I think is more interesting than the last one.

My heading

This is the first section of my document.

I'll add another paragraph here too.


  Here is
  a list for
  you to read


My subheading


  This is the first subsection of my document.
  I'd love people to be able to find this content!


My 2nd subheading


  This is the second subsection of my content,
  which I think is more interesting than the last one.

Các giá trị này gây ra hành vi không mong muốn khi sao chép hoặc kéo liên kết, mở liên kết trong tab hoặc cửa sổ mới, đánh dấu trang và khi JavaScript vẫn đang tải xuống, lỗi hoặc bị tắt. Điều này cũng truyền đạt ngữ nghĩa không chính xác cho các công nghệ hỗ trợ [e. g. , trình đọc màn hình]. Trong những trường hợp này, nên sử dụng

My heading

This is the first section of my document.

I'll add another paragraph here too.


  Here is
  a list for
  you to read


My subheading


  This is the first subsection of my document.
  I'd love people to be able to find this content!


My 2nd subheading


  This is the second subsection of my content,
  which I think is more interesting than the last one.

Các liên kết mở trong một tab hoặc cửa sổ mới thông qua khai báo

My heading

This is the first section of my document.

I'll add another paragraph here too.


  Here is
  a list for
  you to read


My subheading


  This is the first subsection of my document.
  I'd love people to be able to find this content!


My 2nd subheading


  This is the second subsection of my content,
  which I think is more interesting than the last one.

Play video

Những người có tình trạng thị lực kém, những người đang điều hướng với sự hỗ trợ của công nghệ đọc màn hình hoặc những người có lo ngại về nhận thức có thể bị nhầm lẫn khi tab, cửa sổ hoặc ứng dụng mới được mở bất ngờ. Các phiên bản cũ hơn của phần mềm đọc màn hình thậm chí có thể không thông báo hành vi

Liên kết mở tab hoặc cửa sổ mới

Play video

Liên kết đến tài nguyên không phải HTML

My heading

This is the first section of my document.

I'll add another paragraph here too.


  Here is
  a list for
  you to read


My subheading


  This is the first subsection of my document.
  I'd love people to be able to find this content!


My 2nd subheading


  This is the second subsection of my content,
  which I think is more interesting than the last one.

Nếu một biểu tượng được sử dụng thay cho văn bản để biểu thị loại hành vi liên kết này, hãy đảm bảo rằng nó bao gồm một

• WebAIM. Liên kết và siêu văn bản - Hypertext Links
• G200. Chỉ mở các cửa sổ và tab mới từ một liên kết khi cần thiết. Kỹ thuật W3C cho WCAG 2. 0
• G201. Đưa ra cảnh báo nâng cao cho người dùng khi mở một cửa sổ mới. Kỹ thuật W3C cho WCAG 2. 0

Liên kết bỏ qua, còn được gọi là Skipnav, là một phần tử

My heading

This is the first section of my document.

I'll add another paragraph here too.


  Here is
  a list for
  you to read


My subheading


  This is the first subsection of my document.
  I'd love people to be able to find this content!


My 2nd subheading


  This is the second subsection of my content,
  which I think is more interesting than the last one.

My heading

This is the first section of my document.

I'll add another paragraph here too.


  Here is
  a list for
  you to read


My subheading


  This is the first subsection of my document.
  I'd love people to be able to find this content!


My 2nd subheading


  This is the second subsection of my content,
  which I think is more interesting than the last one.

Bỏ qua liên kết đặc biệt hữu ích cho những người điều hướng với sự trợ giúp của công nghệ hỗ trợ như điều khiển công tắc, khẩu lệnh hoặc thanh miệng/cây đũa phép đầu, trong đó hành động di chuyển qua các liên kết lặp đi lặp lại có thể là một nhiệm vụ tốn nhiều công sức

• WebAIM. Liên kết "Bỏ qua Điều hướng"
• Làm thế nào để. Sử dụng liên kết Bỏ qua Điều hướng - Dự án A11Y
• Hiểu Tiêu chí Thành công 2. 4. 1. W3C Hiểu WCAG 2. 0

Một lượng lớn nội dung tương tác—bao gồm cả các neo—được đặt gần nhau về mặt hình ảnh nên có khoảng trống được chèn vào để phân tách chúng. Khoảng cách này có lợi cho những người gặp vấn đề về kiểm soát vận động tinh và có thể vô tình kích hoạt nội dung tương tác sai trong khi điều hướng

Khoảng cách có thể được tạo bằng các thuộc tính CSS, chẳng hạn như

My heading

This is the first section of my document.

I'll add another paragraph here too.


  Here is
  a list for
  you to read


My subheading


  This is the first subsection of my document.
  I'd love people to be able to find this content!


My 2nd subheading


  This is the second subsection of my content,
  which I think is more interesting than the last one.

• Hand tremors and the giant-button-problem - Axess Lab

Bạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . Khả năng truy cập HTML để xác minh rằng bạn đã giữ lại thông tin này trước khi tiếp tục

Bây giờ bạn đã thành thạo trong việc viết HTML có thể truy cập cho hầu hết các trường hợp. Bài viết cơ bản về WAI-ARIA của chúng tôi sẽ giúp lấp đầy những lỗ hổng trong kiến ​​thức này, nhưng bài viết này đã đề cập đến những điều cơ bản. Tiếp theo, chúng ta sẽ khám phá CSS và JavaScript và khả năng truy cập bị ảnh hưởng như thế nào bởi việc sử dụng tốt hay xấu của chúng

Làm cách nào để kết nối Access với HTML?

Bạn có thể nhập HTML vào Access không?

Làm cách nào để lưu trữ dữ liệu biểu mẫu HTML trong cơ sở dữ liệu Access?

Ngôn ngữ lập trình nào được sử dụng trong Access?