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
35 const startIndex = (currentPage - 1) * contributorsPerPage;
36 const endIndex = startIndex + contributorsPerPage;
37 return contributors.slice(startIndex, endIndex).map(contributor => (
38 <div key={contributor.login} className="contributor-card" onClick={() => handleProfileClick(contributor.login)}>39 <img src={contributor.avatar_url} alt={contributor.login} />
40 <div className="contributor-info">
41 <h3>{contributor.login}</h3>
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={() => {}} />