search

FSWebDevBook / speedscore-dev

This the author's sandbox repo for the SpeedScore personal speedgolf app developed in the book.
0 stars 0 forks source link

Should ARIA be used to label non-semantic elements? #11

Open anevins12 opened 3 years ago

anevins12 commented 3 years ago

Should 'aria-label' be used on non-semantic elements that do not contain a role?

A non-semantic element that is using aria-label may not be conveyed correctly or accurately to assistive technologies. More info: 1) ARIA thread: https://github.com/w3c/aria/issues/833 2) Validation errors from the W3C HTML Validator

Example of problem:

<div id="loginModePage" tabindex="0" class="app-page login-mode" aria-label="Log In" hidden="">
chundhau commented 3 years ago

@anevins12 I found just one issue like this--the one you point out. I do use aria-label in a <div> element that is given the semantic role "modebar" (line 59 of index.html). I think the aria-label is justified here. Do you agree.

anevins12 commented 3 years ago

Agree with you here. What are your thoughts for the use of aria-label on <div id="loginModePage" ... >? My thinking is that it's fine to use aria-label, but that it must also be combined with a role attribute if it's used on a non-semantic element. The fix for this would be to just add a role of something like region, i.e.:

<div id="loginModePage" tabindex="0" class="app-page login-mode" aria-label="Log In" hidden="" role="region">
chundhau commented 3 years ago

Yeah, that seems reasonable. But in this case, the <div> elements have child <h1> elements that describe their content. Will the <h1> elements provide sufficient semantics?

anevins12 commented 3 years ago

Yea, sounds like aria-label should then be removed if the <h1> describes that section.