Cel używania „aria-labelledby” na już oznaczonych elementach wejściowych?

Wiele witryn demonstracyjnych ARIA używa kodu, takiego jak:

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

Ale jaki jest cel używania aria-labelledbyatrybutu w tym przypadku? inputElement został już oznaczony przez labelelement, który jest przy użyciu foratrybutu, prawda?

Jest kilka dobrych przykładów jego użycia na stronach Mozilla Developer . Być może najlepszym z ich przykładów jest sytuacja, w której jest używany do powiązania menu podręcznego z elementem menu nadrzędnego - jest to przykład 7 na stronie:

<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>  
    ...  

Atrybuty ARIA wydają się być najbardziej przydatne w budowaniu dostępnych, bogatych aplikacji internetowych : o ile trzymasz się standardowego semantycznego HTML - używając formularzy ze standardowymi etykietami - nie powinieneś go wcale potrzebować: więc nie ma powodu, aby go używać para LABEL / INPUT. Ale jeśli budujesz „bogaty interfejs użytkownika” od podstaw (DIV i inne elementy niskiego poziomu z interaktywnością dodającą javascript), konieczne jest poinformowanie czytnika ekranu, jakie są intencje wyższego poziomu.

Zawsze pojawiają się problemy ze wsparciem UA z czymkolwiek nowym, dlatego programiści zwracają uwagę na stopniowe ulepszanie. Ta technika ARIA umożliwia pozbycie się atrybutu „za” i pozwala innym elementom stać się częścią bogatej formy. Techniki te staną się powszechną praktyką.