Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element
191 </div>
192 <div className="colleges">
193 {sortedColleges.map((college, index) => (
194 <div195 className={`college ${activeIndex === index ? 'active' : ''}`}196 key={college.id}197 onClick={createHandleCollegeClick(college)}198 onTouchStart={createHandleTouchStart(index)}199 onTouchEnd={handleTouchEnd}200 >201 <div className="college-content">
202 <div className="up">
203 <img className="college-image" src={college.imageURL} alt="College Logo" />
Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element
157 </li>
158 </ul>
159 </div>
160 <div className="hamburger" onClick={toggleMenu}>161 <div className={`bar ${menuOpen ? 'open' : ''}`}/>
162 <div className={`bar ${menuOpen ? 'open' : ''}`}/>
163 <div className={`bar ${menuOpen ? 'open' : ''}`}/>
Description
Static HTML elements do not have semantic meaning. This is clear in the case of <div>
and <span>
. It is less so clear in the case of elements that seem semantic, but that do not have a semantic mapping in the accessibility layer. For example <a>
, <big>
, <blockquote>
, <footer>
, <picture>
, <strike>
and <time>
-- to name a few -- have no semantic layer mapping. They are as void of meaning as <div>
.
The WAI-ARIA role
attribute confers a semantic mapping to an element. The semantic value can then be expressed to a user via assistive technology.
In order to add interactivity such as a mouse or key event listener to a static element, that element must be given a role value as well.
Bad Practice
<div onClick={() => {}} />
Recommended
<button onClick={() => {}} className="foo" />
<div className="foo" onClick={() => {}} role="button" />
<input type="text" onClick={() => {}} />