43 <div className="relative border-b-2 mx-2 my-6">
44 <span className="absolute -top-2.5 text-center w-full "><a className="dark:bg-zinc-700 px-2 py-1 rounded-lg">OR</a></span>
45 </div>
46 <div className="transition ease-in-out dark:bg-zinc-100 dark:hover:bg-zinc-400 mx-2 text-black py-1.5 rounded-lg text-xl flex grid-cols-2 gap-4 my-4 justify-center cursor-pointer" onClick={ ()=>setGoogleSignin(!googleSignin)}>47 <img src="/images/GoogleLogo.webp" className="w-7"/>
48 <p>Sign in with Google</p>
49 </div>
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.
<div onClick={() => {}} />
<button onClick={() => {}} className="foo" />
<div className="foo" onClick={() => {}} role="button" />
<input type="text" onClick={() => {}} />