Đã đăng vào thg 9 25, 3:59 SA 14 phút đọc

Cách sử dụng thuộc tính HTML để làm cho trang web và ứng dụng của bạn dễ truy cập hơn (P1)

Bạn đã bao giờ sử dụng một thuộc tính trong HTML mà không hiểu rõ mục đích của nó? Bài viết này sẽ giới thiệu chi tiết về các thuộc tính HTML quan trọng giúp nâng cao khả năng truy cập, giải thích chức năng và cách sử dụng hiệu quả.

Để thực hiện theo hướng dẫn này, bạn cần có hiểu biết cơ bản về HTML và một chút kiến thức về Javascript. Nếu như bạn đã trang bị đầy đủ thì chúng ta cùng bắt đầu nhé.

Thuộc tính ARIA là gì?

Hầu hết các thuộc tính HTML được liệt kê trong bài viết này là thuộc tính ARIA. ARIA là viết tắt của Accessible Rich Internet Applications (Ứng dụng Internet phong phú có thể truy cập), là một tập hợp các thuộc tính được W3C (World Wide Web Consortium) định nghĩa để nâng cao khả năng truy cập của các ứng dụng web.

Các thuộc tính ARIA cung cấp thông tin bổ sung cho các công nghệ hỗ trợ như trình đọc màn hình. Việc sử dụng chúng một cách chính xác có thể giúp các ứng dụng web phức tạp trở nên dễ truy cập hơn đối với những người khiếm thị, khiếm thính hoặc khó khăn về vận động.

Một nguyên tắc quan trọng khi sử dụng ARIA là đôi khi tốt nhất là không nên sử dụng nó. Mặc dù điều này nghe có vẻ mâu thuẫn, nhưng bạn chỉ nên sử dụng thuộc tính ARIA khi cần thiết. Việc lạm dụng ARIA có thể gây gián đoạn trải nghiệm cho người dùng dựa vào các công nghệ hỗ trợ. Trong khi người dùng sighted có thể không nhận thấy bất kỳ sự cố nào, nhưng việc sử dụng ARIA quá mức hoặc không đúng cách có thể ảnh hưởng tiêu cực đến khả năng truy cập.

Sau đây sẽ là chi tiết các thuộc tính HTML thuộc ARIA mà bạn cần nắm vững

Thuộc tính alt

Thuộc tính alt có thể không còn xa lạ với bạn nếu bạn đã từng sử dụng hình ảnh HTML. Bạn sử dụng nó để cung cấp văn bản thay thế hiển thị khi hình ảnh không được hiển thị đúng cách trên màn hình.

Nhưng công dụng quan trọng nhất của thuộc tính alt là để truy cập. Nếu thuộc tính alt không có trong phần tử hình ảnh, thì trình đọc màn hình có thể thông báo tên của tệp hình ảnh hoặc URL của hình ảnh thay vì giải thích những gì nó đang hiển thị. Điều này có thể không hữu ích và chúng ta không muốn điều đó.

Nội dung trong thuộc tính alt nên ngắn gọn vì mục đích chính của nó là mô tả ngắn gọn một hình ảnh cho những người không thể nhìn thấy nó. Điều này bao gồm người dùng dựa vào trình đọc màn hình, công cụ tìm kiếm và người dùng có kết nối internet chậm, nơi hình ảnh có thể không tải được. Nếu văn bản alt quá dài, nó có thể bao gồm những chi tiết không cần thiết, không bổ sung giá trị cho sự hiểu biết của người dùng.

Thuộc tính alt khác với chú thích hình ảnh. Chú thích hiển thị và có thể cung cấp thêm ngữ cảnh hoặc thông tin bổ sung về hình ảnh. Việc sử dụng chú thích làm văn bản alt có thể khiến nó quá dài và dư thừa.

Nếu hình ảnh chỉ mang tính chất trang trí, thì thuộc tính alt nên được để trống. Nếu một hình ảnh có thuộc tính alt trống, thì công cụ hỗ trợ sẽ bỏ qua nó. Điều này rất quan trọng để giúp người dùng tập trung vào nội dung và không làm họ sao lãng bởi những thông tin không cần thiết.

Dưới đây là ví dụ về cách bạn có thể sử dụng thuộc tính alt:

<p>Lions are remarkable for their powerful roars, 
which can be heard up to five miles away. 
These roars are used to communicate with other 
members of the pride, as well as to ward off rival lions and intruders. 
Although lions are often associated with the African savannah, 
a small population of Asiatic lions still exists in India's Gir Forest, 
making them one of the world's most endangered big cats.</p>

<img src="lion.jpg" alt="a lion" /> <!-- brief and gives context to the paragraph -->

<img src="background-stars.png" alt="" /> <!-- This image is purely for 
decoration so it's left empty -->

Thuộc tính aria-label

Thuộc tính aria-label được sử dụng để cung cấp tên có thể truy cập cho một phần tử có thể không có văn bản hiển thị. Ví dụ phổ biến về điều này là một nút chứa hình ảnh hoặc SVG.

Rất nhiều phần tử có tên có thể truy cập - tên có thể truy cập là nội dung bên trong phần tử. Tên có thể truy cập cho tiêu đề trong ví dụ này là "Câu hỏi thường gặp"

<h1>Frequently Asked Questions</h1>

Mọi người, bao gồm cả những người sử dụng công nghệ hỗ trợ, đều có thể hiểu rõ ý nghĩa của ví dụ trên vì nó chứa nội dung hiển thị.

Nhưng trong ví dụ bên dưới, người dùng dựa vào trình đọc màn hình có thể bỏ lỡ nội dung trong nút nếu nó không có aria-label. Điều này là do nội dung trong nút là SVG và SVG không chứa bất kỳ nội dung hiển thị nào:

<button aria-label="Search">
    <svg
      fill="#000000" 
      height="20px"
      width="20px"
      xmlns="http://www.w3.org/2000/svg" 
      viewBox="0 0 488.4 488.4">
        <g stroke-width="0"></g>
        <g stroke-linecap="round" stroke-linejoin="round"></g>
        <g><g>
        <g>
          <path d="M0,203.25c0,112.1,91.2,203.2,203.2,203.2c51.6,0,98.8-19.4,134.7-51.2l129.5,129.5c2.4,2.4,5.5,3.6,8.7,3.6 s6.3-1.2,8.7-3.6c4.8-4.8,4.8-12.5,0-17.3l-129.6-129.5c31.8-35.9,51.2-83,51.2-134.7c0-112.1-91.2-203.2-203.2-203.2 S0,91.15,0,203.25z M381.9,203.25c0,98.5-80.2,178.7-178.7,178.7s-178.7-80.2-178.7-178.7s80.2-178.7,178.7-178.7 S381.9,104.65,381.9,203.25z" />
        </g> 
        </g></g>
    </svg>
</button>

Đừng lạm dụng aria-label. Không phải tất cả nội dung đều cần aria-label - ví dụ: nếu bạn có một nút chứa hình ảnh có alt hoặc SVG có title, thì các thuộc tính đó đóng vai trò là tên có thể truy cập cho phần tử đó.

<button>
    <img src="search-icon.png" alt="Search" /> <!-- no need for aria-label -->
</button>

<!-- Another example -->

<button>
  <svg
    fill="#000000"
    height="20px"
    width="20px"
    role="image"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 488.4 488.4">
        <title>Search Icon</title> <!-- Accessible name -->
        <g stroke-width="0"></g>
        <g stroke-linecap="round" stroke-linejoin="round"></g>
        <g><g>
        <g>
         <path d="M0,203.25c0,112.1,91.2,203.2,203.2,203.2c51.6,0,98.8-19.4,134.7-51.2l129.5,129.5c2.4,2.4,5.5,3.6,8.7,3.6 s6.3-1.2,8.7-3.6c4.8-4.8,4.8-12.5,0-17.3l-129.6-129.5c31.8-35.9,51.2-83,51.2-134.7c0-112.1-91.2-203.2-203.2-203.2 S0,91.15,0,203.25z M381.9,203.25c0,98.5-80.2,178.7-178.7,178.7s-178.7-80.2-178.7-178.7s80.2-178.7,178.7-178.7 S381.9,104.65,381.9,203.25z" />
        </g> 
        <g><g>
  </svg>
</button>

Bạn nên sử dụng aria-label một cách tiết kiệm và phù hợp. Việc lạm dụng thuộc tính có thể dẫn đến một số vấn đề:

Nội dung aria-label không hiển thị đối với người dùng sighted. Nếu người dùng bị khuyết tật nhận thức đang sử dụng trình đọc màn hình để hỗ trợ, họ có thể không hiểu tại sao họ lại nghe thấy thông tin khác với những gì họ nhìn thấy trên màn hình.
Việc sử dụng aria-label rộng rãi trong cơ sở mã lớn có thể khiến HTML khó bảo trì hơn. Bạn có thể gặp khó khăn trong việc theo dõi nhãn đến từ đâu, đặc biệt nếu chúng được đặt theo chương trình hoặc ở nhiều nơi.

Cách sử dụng aria-label tốt nhất

Bất cứ khi nào có thể, hãy sử dụng nhãn văn bản hiển thị. Chúng dễ hiểu và bảo trì hơn và đảm bảo trải nghiệm nhất quán cho tất cả người dùng.
Khi có thể: Nếu đã có nhãn hiển thị trên trang, hãy sử dụng aria-labelledby để liên kết phần tử với văn bản hiện có thay vì tạo nhãn mới bằng aria-label (chúng ta sẽ nói về điều này bên dưới).
Nếu bạn sử dụng aria-label, hãy giữ cho văn bản ngắn gọn và đi thẳng vào vấn đề. Nó nên mô tả mục đích của phần tử trong càng ít từ càng tốt.

Thuộc tính aria-labelledby

Thuộc tính aria-labelledby được sử dụng để liên kết một phần tử với một phần tử khác đóng vai trò là nhãn của nó. Nó liên kết phần tử đích với một hoặc nhiều phần tử khác trên trang chứa văn bản sẽ được sử dụng làm nhãn.

Bạn có thể sử dụng thuộc tính này khi đã có nhãn văn bản hiển thị hoặc khi nhãn cần được tạo thành từ nhiều phần tử văn bản.

Ví dụ: bạn có thể sử dụng aria-labelledby trong phần tử 'section' để liên kết nó với tiêu đề hoặc văn bản khác đóng vai trò là nhãn cho toàn bộ phần.

<h2 id="about-heading">About Us</h2> 
<section aria-labelledby="about-heading"> <!-- use the id of the h2 -->
    <p>We are a company dedicated to providing excellent service...</p>
</section>

<h2 id="services-heading">Our Services</h2>
<section aria-labelledby="services-heading">
    <p>We offer a wide range of services including...</p>
</section>

Đôi khi, bạn có thể muốn kết hợp nhiều đoạn văn bản làm nhãn. Bạn có thể thực hiện việc này bằng cách liệt kê nhiều ID trong thuộc tính aria-labelledby:

<h1 id="dialog-title">Confirmation Required</h1>
<p id="dialog-description">Are you sure you want to delete this item?</p>
<button aria-labelledby="dialog-title dialog-description">Yes</button>

aria-labelledby tương tự như aria-label ở chỗ mục đích của nó là cung cấp một phần tử có thể truy cập.

aria-label khác với aria-labelledby như thế nào? aria-label gán trực tiếp một chuỗi văn bản làm nhãn cho một phần tử. Văn bản này không hiển thị trên màn hình nhưng được các công nghệ hỗ trợ như trình đọc màn hình thông báo. Nó thường được sử dụng khi không có nhãn văn bản hiển thị.

aria-labelledby trỏ đến một hoặc nhiều phần tử hiện có trên trang (sử dụng thuộc tính id của chúng) sẽ được sử dụng làm nhãn cho phần tử. Văn bản nhãn hiển thị cho tất cả người dùng vì nó là một phần nội dung của một phần tử khác.

Cách sử dụng aria-labelledby tốt nhất:

Sử dụng aria-labelledby thay cho aria-label khi đã có văn bản trên trang có thể đóng vai trò là nhãn. Điều này làm giảm sự dư thừa và đảm bảo rằng cả người dùng sighted và người dùng trình đọc màn hình đều nhìn thấy cùng một nội dung.
Các thuộc tính id được tham chiếu bởi aria-labelledby phải là duy nhất trên trang và trỏ chính xác đến các phần tử hiện có. Nếu ID bị thiếu hoặc không chính xác, nhãn sẽ không hoạt động, dẫn đến các vấn đề về khả năng truy cập.
Khi kết hợp nhiều nhãn, hãy đảm bảo rằng nhãn kết quả có ý nghĩa khi đọc cùng nhau. Thứ tự của các ID trong aria-labelledby rất quan trọng, vì trình đọc màn hình sẽ đọc các nhãn theo thứ tự chúng được liệt kê.
Giống như aria-label, tránh lạm dụng aria-labelledby trong những tình huống mà một cách tiếp cận đơn giản hơn (như sử dụng trực tiếp phần tử label hiển thị) là đủ. Điều này giúp giữ cho mã có thể bảo trì và giảm tải nhận thức cho người dùng.

Thuộc tính aria-describedby

Thuộc tính aria-describedby được sử dụng để liên kết một phần tử với một hoặc nhiều phần tử cung cấp thông tin mô tả bổ sung về nó. Thuộc tính aria-describedby được sử dụng để cung cấp thêm ngữ cảnh hoặc hướng dẫn cho một phần tử.

Không giống như aria-labelledby, được dùng để cung cấp nhãn hoặc tên, aria-describedby nhằm mục đích cung cấp cho người dùng thông tin hoặc ngữ cảnh chi tiết hơn về một phần tử, thường là để bổ sung những gì họ đã biết từ nhãn.

<label id="full-name">Full name</label>
<input type="text" aria-labelledby="full-name" aria-describedby="info">
<span id="info">Enter your full name.</span>

Khi cả aria-labelledby và aria-describedby được sử dụng trên cùng một phần tử, trình đọc màn hình sẽ thông báo trước nhãn (từ aria-labelledby), sau đó là vai trò của phần tử (ví dụ: "nút") và cuối cùng là mô tả (từ aria-describedby).

Cách sử dụng aria-describedby tốt nhất

Áp dụng aria-describedby khi bạn cần cung cấp cho người dùng ngữ cảnh hoặc hướng dẫn bổ sung vượt ra ngoài nhãn. Điều này đặc biệt hữu ích cho biểu mẫu, điều khiển phức tạp hoặc bất kỳ phần tử nào có thể yêu cầu làm rõ.
Mặc dù aria-describedby có nghĩa là dành cho các mô tả chi tiết hơn, nhưng hãy tránh văn bản quá dài. Giữ cho phần mô tả tập trung vào những gì người dùng cần biết để tương tác với phần tử một cách hiệu quả.
Cũng giống như với aria-labelledby, hãy đảm bảo rằng các phần tử được tham chiếu bởi aria-describedby có các thuộc tính id duy nhất và có liên quan. Nội dung của các phần tử này phải liên quan trực tiếp đến phần tử mà chúng mô tả.

Thuộc tính role

Thuộc tính role được sử dụng để chỉ định vai trò của một phần tử. Bạn có thể sử dụng nó để ghi đè vai trò mặc định của một phần tử ngữ nghĩa. Nó giúp các công nghệ hỗ trợ hiểu cách thức một phần tử nên được diễn giải hoặc tương tác.

Khi sử dụng các phần tử phi ngữ nghĩa (như 'div' hoặc 'span') để tạo các điều khiển tương tác (nút, hộp thoại, tab, v.v.), thuộc tính role sẽ thông báo cho các công nghệ hỗ trợ về hành vi dự định của phần tử. Bạn cũng có thể sử dụng vai trò để xác định các vai trò mốc hỗ trợ điều hướng, chẳng hạn như banner hoặc complementary, xác định cấu trúc của trang cho người dùng trình đọc màn hình.

Các giá trị role phổ biến

Vai trò cho các vùng mốc:

banner: Đại diện cho tiêu đề trang web.
navigation: Xác định phần điều hướng của trang, thường là cho các liên kết điều hướng trang web hoặc trang.
main: Đánh dấu nội dung chính của tài liệu, khác biệt với thanh bên, chân trang, v.v.
contentinfo: Đại diện cho thông tin chân trang.

Ví dụ dưới đây chỉ nhằm mục đích minh họa - bạn nên sử dụng phần tử ngữ nghĩa phù hợp khi có thể:

<div role="banner">
    <h1>My Website</h1>
</div>

<div role="navigation">
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</div>

<div role="main">
    <h2>Welcome to My Website</h2>
    <p>Here is some main content...</p>
</div>

<div role="contentinfo">
    <p>&copy; 2024 My Website</p>
</div>

Vai trò cho Widget và Phần tử tương tác:

button: Đại diện cho một phần tử nút mà người dùng có thể nhấp vào để kích hoạt một hành động.
dialog: Đánh dấu hộp thoại hoặc modal yêu cầu tương tác của người dùng.
alert: Xác định một phần tử là thông báo quan trọng hoặc cảnh báo yêu cầu sự chú ý của người dùng.
tablist, tab, tabpanel: Được sử dụng cho các giao diện tab, trong đó tablist chứa các tab và mỗi tab kiểm soát khả năng hiển thị của tabpanel tương ứng.

<div role="button" tabindex="0" onclick="submitForm()">Submit</div>

<div role="dialog" aria-labelledby="dialog-title" aria-modal="true">
    <h2 id="dialog-title">Confirmation</h2>
    <p>Are you sure you want to proceed?</p>
    <button onclick="closeDialog()">Close</button>
</div>

Ví dụ về bảng điều khiển có tab:

<div role="tablist" aria-label="Sample Tabs">
    <button role="tab" id="tab-1" aria-controls="panel-1" aria-selected="true" tabindex="0">Tab 1</button>
    <button role="tab" id="tab-2" aria-controls="panel-2" aria-selected="false" tabindex="-1">Tab 2</button>
    <button role="tab" id="tab-3" aria-controls="panel-3" aria-selected="false" tabindex="-1">Tab 3</button>
</div>

<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
    <h2>Content for Tab 1</h2>
    <p>This is the content of the first tab.</p>
</div>

<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
    <h2>Content for Tab 2</h2>
    <p>This is the content of the second tab.</p>
</div>

<div role="tabpanel" id="panel-3" aria-labelledby="tab-3" hidden>
    <h2>Content for Tab 3</h2>
    <p>This is the content of the third tab.</p>
</div>

Cách sử dụng thuộc tính role tốt nhất

Luôn ưu tiên sử dụng các phần tử HTML gốc đã có vai trò phù hợp. Điều này cung cấp hỗ trợ khả năng truy cập tốt hơn trên nhiều trình duyệt và thiết bị khác nhau.
Không lạm dụng hoặc sử dụng sai thuộc tính role vì điều này có thể dẫn đến nhầm lẫn và giảm khả năng truy cập. Sử dụng role để nâng cao hoặc làm rõ khi cần thiết, không phải để thay thế HTML ngữ nghĩa.
Hiểu các vai trò ngầm định. Nhiều phần tử HTML có vai trò ngầm định. Ví dụ: một phần tử 'a' có thuộc tính href sẽ tự động có vai trò link. Tránh thêm các thuộc tính role dư thừa cho các phần tử này.

Thuộc tính aria-controls

Thuộc tính aria-controls thông báo cho trình đọc màn hình rằng phần tử được điều khiển hoặc bị ảnh hưởng bởi một phần tử khác. Nó thường được sử dụng để chỉ ra rằng một thành phần (như nút hoặc tab) điều khiển hoặc tương tác với một phần khác của trang (như bảng điều khiển hoặc menu). Nó cũng được sử dụng trong các thành phần tương tác như tab, accordion và thanh trượt để mô tả phần nào của trang bị ảnh hưởng khi người dùng tương tác với thành phần.

Ví dụ: bạn có thể sử dụng aria-controls trên nút tab để cho biết bảng điều khiển nào mà mỗi nút điều khiển:

<!-- Tab Buttons -->
<button id="tab1" aria-controls="panel1">Tab 1</button>
<button id="tab2" aria-controls="panel2">Tab 2</button>

<!-- Content Panels -->
<div id="panel1" role="tabpanel">Content for Tab 1</div>
<div id="panel2" role="tabpanel">Content for Tab 2</div>

Cách sử dụng aria-controls tốt nhất

Đảm bảo rằng ID được sử dụng trong aria-controls khớp chính xác với id của phần tử được điều khiển.
Sử dụng aria-controls kết hợp với các thuộc tính vai trò và trạng thái như aria-selected hoặc role="tabpanel" để cung cấp thông tin đầy đủ hơn về các phần tử được điều khiển và trạng thái của chúng.
Áp dụng aria-controls cho các phần tử tương tác như nút hoặc liên kết có ảnh hưởng trực tiếp đến các phần tử khác. Nó thường không được sử dụng cho nội dung không tương tác.

Thuộc tính aria-selected

Thuộc tính aria-selected được sử dụng để cho biết trạng thái lựa chọn hiện tại của một phần tử trong một nhóm các mục có thể chọn. Một mục có thể chọn có thể là một tùy chọn trong menu, một tab trong bảng điều khiển tab hoặc một mục trong hộp danh sách.

Dưới đây là ví dụ về trạng thái lựa chọn trong hộp danh sách. aria-selected="true" trong tùy chọn 1 cho biết Tùy chọn 1 hiện đang được chọn.

<!-- Listbox -->
<ul role="listbox">
  <li role="option" aria-selected="true">Option 1</li>
  <li role="option" aria-selected="false">Option 2</li>
  <li role="option" aria-selected="false">Option 3</li>
</ul>

Cách sử dụng aria-selected tốt nhất

Sử dụng aria-selected="true" cho mục đã chọn và aria-selected="false" cho mục chưa được chọn. Giá trị phải là một chuỗi, không phải là boolean.
Đảm bảo rằng trạng thái hiển thị của phần tử (ví dụ: tab đang hoạt động hoặc tùy chọn đã chọn) khớp với giá trị aria-selected. Các trạng thái không nhất quán có thể dẫn đến nhầm lẫn cho người dùng sử dụng công nghệ hỗ trợ.
Sử dụng aria-selected kết hợp với các thuộc tính role phù hợp (ví dụ: role="option" cho các mục trong hộp danh sách) để cung cấp ngữ cảnh đầy đủ.
Đảm bảo rằng aria-selected được cập nhật động khi người dùng tương tác với giao diện. Ví dụ: khi người dùng chọn một tùy chọn mới, hãy cập nhật thuộc tính aria-selected cho phù hợp.

Thuộc tính tabindex

Thuộc tính tabindex được sử dụng để kiểm soát điều hướng bằng bàn phím của một phần tử. Bạn có thể sử dụng nó để kích hoạt tiêu điểm cho các phần tử không tương tác như div, p hoặc span hoặc tắt tiêu điểm cho các phần tử tương tác như button, a, input. Bạn cũng có thể sử dụng nó để kiểm soát thứ tự tiêu điểm trên một trang.

Các giá trị tabindex khả thi: Giá trị dương: Các phần tử có giá trị dương sẽ có thể lấy tiêu điểm và được bao gồm trong thứ tự tab với các số của chúng xác định thứ tự mà chúng được lấy tiêu điểm. Các phần tử có số thấp hơn được lấy tiêu điểm trước các phần tử có số cao hơn.

<button tabindex="2">Cancel</button> <!-- This will recieve focus last -->
<button tabindex="1">Submit</button> <!-- This will recieve focus first -->

Các phần tử có cùng giá trị sẽ được điều hướng theo thứ tự chúng xuất hiện.

Lưu ý: Việc sử dụng các giá trị tabindex dương có thể dẫn đến thứ tự tab khó hiểu và không trực quan. Nói chung, tốt hơn là sử dụng tabindex="0" cho các phần tử nên nằm trong thứ tự tab tự nhiên.

Số không: Bạn sử dụng giá trị này để làm cho một phần tử có thể lấy tiêu điểm và đưa nó vào thứ tự tab tự nhiên dựa trên vị trí của nó trong tài liệu. Nó hữu ích để làm cho các phần tử có thể lấy tiêu điểm mà thông thường không thể lấy tiêu điểm (như 'div' hoặc 'span').

<div role="button" tabindex="0">Submit</div> 
<!-- The element becomes focusable using the keyboard -->

Giá trị âm: Bạn sử dụng giá trị này để xóa một phần tử khỏi thứ tự tab, nghĩa là nó không thể lấy tiêu điểm bằng phím Tab. Tuy nhiên, nó vẫn có thể được lấy tiêu điểm theo chương trình (thông qua JavaScript). Nó hữu ích cho các phần tử không nên lấy tiêu điểm theo mặc định nhưng có thể cần lấy tiêu điểm trong một số điều kiện nhất định.

<input type="text" name="name">
<input type="text" name="other-names" tabindex="-1">
<input type="text" placeholder="email">

<!-- other-names will be skipped when tabbing through the inputs; 
only name and email will receive focus -->

Cách sử dụng tabindex tốt nhất

Dựa vào thứ tự tab tự nhiên càng nhiều càng tốt. Sử dụng tabindex="0" để đưa các phần tử vào thứ tự tab và tránh sử dụng các giá trị dương trừ khi thực sự cần thiết.
Việc sử dụng các giá trị tabindex dương có thể tạo ra thứ tự tab khó đoán và khiến người dùng khó điều hướng hơn. Tốt hơn là sử dụng luồng mặc định và tabindex="0".
Sử dụng tabindex="-1" cho các phần tử không nhằm mục đích lấy tiêu điểm.
Đảm bảo rằng thứ tự tiêu điểm tuân theo một trình tự hợp lý và trực quan, phù hợp với bố cục trực quan và luồng tương tác của trang.
Kiểm tra bằng bàn phím và công nghệ hỗ trợ.
Khi thêm hoặc xóa động các phần tử có thể lấy tiêu điểm (ví dụ: thông qua JavaScript), hãy đảm bảo rằng việc quản lý tiêu điểm được xử lý đúng cách để duy trì trải nghiệm mượt mà.

Thuộc tính title

Thuộc tính title trong HTML được sử dụng để cung cấp thông tin bổ sung về một phần tử. Nội dung trong thuộc tính hiển thị trong chú giải công cụ khi người dùng di chuột qua phần tử chứa tiêu đề. Nó có thể được áp dụng cho hầu hết các phần tử HTML, bao gồm liên kết, hình ảnh và trường biểu mẫu.

Bạn có thể sử dụng thuộc tính title để cung cấp giải thích ngắn gọn hoặc mô tả về nội dung của một phần tử. Ví dụ: bạn có thể sử dụng nó để làm rõ ý nghĩa của các từ viết tắt hoặc từ viết tắt khi được sử dụng với thẻ 'abbr'.

<abbr title="World Wide Web">WWW</abbr>
<!-- Hovering over "WWW" displays the tooltip "World Wide Web," 
explaining the abbreviation. -->

<img src="logo.png" 
alt="Company Logo" 
title="This is the logo of our company">
<!-- Users will see "This is the logo of our company" 
when hovering over the image. -->

Các vấn đề về khả năng truy cập với Thuộc tính title:

Thuộc tính title có thể hữu ích, nhưng nó đi kèm với một số lo ngại về khả năng truy cập:

Trình đọc màn hình không nhất quán thông báo thuộc tính title, đặc biệt là khi cũng có thuộc tính alt - hoặc chúng có thể bỏ qua hoàn toàn. Người dùng sử dụng công nghệ hỗ trợ có thể bỏ lỡ thông tin được cung cấp bởi thuộc tính title, đặc biệt nếu họ chỉ dựa vào trình đọc màn hình.
Chú giải công cụ được tạo bởi thuộc tính title thường chỉ xuất hiện khi di chuột bằng chuột hoặc bàn di chuột. Người dùng điều hướng bằng bàn phím hoặc màn hình cảm ứng có thể không có quyền truy cập vào thông tin này.
Nội dung của thuộc tính title bị ẩn theo mặc định và chỉ được hiển thị khi di chuột qua. Điều này làm cho nó kém khả năng truy cập đối với những người dùng không biết rằng họ cần di chuột qua để nhận thêm thông tin.
Chú giải công cụ có thể khó đọc vì chúng thường biến mất nhanh chóng và nội dung của chúng có thể bị cắt bớt hoặc quá dài để vừa với cửa sổ chú giải công cụ.

Cách sử dụng Thuộc tính title tốt nhất:

Tránh chỉ dựa vào thuộc tính title. Đảm bảo rằng thông tin quan trọng có sẵn theo cách dễ truy cập hơn, chẳng hạn như văn bản hiển thị hoặc thuộc tính ARIA.
Sử dụng thuộc tính title cho thông tin bổ sung, không thiết yếu, giúp nâng cao trải nghiệm người dùng nhưng không quan trọng để hiểu nội dung.
Đối với đầu vào biểu mẫu, hãy sử dụng thuộc tính aria-describedby để liên kết các hướng dẫn bổ sung với một phần tử biểu mẫu. Sử dụng nhãn hoặc mô tả hiển thị thay vì hoặc ngoài thuộc tính title để đảm bảo rằng tất cả người dùng đều có quyền truy cập vào thông tin.
Nếu bạn sử dụng thuộc tính title, hãy giữ cho văn bản ngắn gọn và đi thẳng vào vấn đề. Chú giải công cụ dài có thể khó đọc và có thể bị cắt bớt.

Phần 1 của bài viết sẽ tạm thời dừng ở đây nhé, cảm ơn các bạn đã theo dõi.