Mục đích của việc sử dụng "aria-labellingby" trên các phần tử đầu vào đã được gắn nhãn?

Nhiều trang web trình diễn ARIA sử dụng mã như:

<label for="name" id="label-name">Your Name</label>
<input id="name" aria-labelledby="label-name" type="text">

Nhưng mục đích của việc sử dụng aria-labelledbythuộc tính trong trường hợp này là gì? Phần inputtử đã được gắn nhãn bởi labelphần tử đang sử dụng forthuộc tính, phải không?

Có một số ví dụ điển hình về việc sử dụng nó tại các trang Nhà phát triển Mozilla . Có lẽ ví dụ tốt nhất của họ là nơi nó được sử dụng để liên kết menu bật lên với mục menu chính - đó là Ví dụ 7 trong trang:

<div role="menubar">  
    <div role="menuitem" aria-haspopup="true" id="fileMenu">File</div>  
    <div role="menu" aria-labelledby="fileMenu">  
        <div role="menuitem">Open</div>  
        <div role="menuitem">Save</div>  
       <div role="menuitem">Save as ...</div>  
       ...  
    </div>  
    ...  

Thuộc tính ARIA có xu hướng được sử dụng nhiều nhất trong việc xây dựng Ứng dụng Internet phong phú có thể truy cập : miễn là bạn đang gắn bó với HTML ngữ nghĩa tiêu chuẩn - sử dụng các biểu mẫu có nhãn tiêu chuẩn - bạn hoàn toàn không cần nó: vì vậy không có lý do gì để sử dụng nó trên một cặp LABEL / INPUT. Nhưng nếu bạn đang xây dựng "giao diện người dùng phong phú" từ đầu (DIV và các phần tử cấp thấp khác với javascript bổ sung tính tương tác), thì điều cần thiết là cho người đọc màn hình biết mục đích cấp cao hơn là gì.

Luôn có các vấn đề hỗ trợ UA với bất kỳ điều gì mới, đó là lý do tại sao các nhà phát triển tìm đến cải tiến liên tục. Kỹ thuật ARIA này cung cấp khả năng loại bỏ thuộc tính “for” và cho phép các phần tử khác trở thành một phần của biểu mẫu phong phú. Những kỹ thuật này sẽ trở thành thông lệ.