The purpose of using “aria-labelledby” on already labeled input elements?

There’s some good examples of its use at Mozilla Developer pages. Perhaps the best of their examples is where it’s used to associate a popup menu with the parent menu item – it’s Example 7 in the page:

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

ARIA attributes tends to be of greatest use in building Accessible Rich Internet Applications: so long as you’re sticking with standard semantic HTML – using forms with standards labels – you shouldn’t need it at all: so there’s no reason to use it on a LABEL/INPUT pair. But if you’re building “rich UI” from scratch (DIVs and other low level elements with javascript adding interactivity), then it’s essential for letting a screenreader know what the higher-level intent is.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)