15 <>
16 <div className="card w-72 card-bordered card-compact lg:card-normal border-solid border-black bg-white">
17 <figure>
18 <img src={obj.images[0]} />19 </figure>
20 <div className="card-body">
21 <h2 className="card-title">{obj.name}</h2>54 } w-full rounded-box`}
55 >
56 {userInfo.pfp ? (
57 <img58 className={"h-full object-contain w-full"}59 src={URL.createObjectURL(userInfo.pfp)}60 />61 ) : (
62 <p>Add Image</p>
63 )}28 className="bg-blue-400 m-2 rounded-box p-5 text-white flex items-center hover:cursor-pointer"
29 >
30 {product.images ? (
31 <img32 src={product.images[0]}33 className="h-16 w-16 rounded-xl"34 />35 ) : (
36 <div className="h-16 w-16 bg-red-500 rounded-xl"></div>
37 )}13 <a>
14 <div className="hover:bg-gray-200 rounded-box flex items-center p-2 active:bg-gray-300">
15 {product.images && (
16 <img src={product.images[0]} className="h-16 w-16 object-contain" />17 )}
18 <div className="block ml-2">
19 <h1 className="text-xl ">{product.name}</h1> 71 tabIndex={0}
72 className="m-1 hover:bg-gray-300 p-0 md:p-2 rounded-box"
73 >
74 <img src="/gearIcon.svg" className="h-5" /> 75 </div>
76 </div>
77 </div>The alternative text attached to any content is a critical component of accessibility for screen reader users as it helps them understand the content's purpose on the page. By default, this rule checks for alternative text on the following elements: <img>, <area>, <input type="image">, and <object>.
<img>: An<img>element must have thealtproperty set with meaningful text or as an empty string to indicate that it is an image for decoration. For images that are being used as icons for a button or control, thealtproperty should be set to an empty string (alt="").<button> <img src="icon.png" alt="" /> Save </button>The content of an
altattribute is used to determine accessibility of an element. Whereas the content of thelabelis use to show a text content of an element. For this reason, adding alabelto an icon can create confusion with the already present appropriate text content.<object>: Add alternative text to all embedded<object>elements using either inner text, setting thetitleprop, or using thearia-labeloraria-labelledbyprops.<input type="image">: All<input type="image">elements must have a non-emptyaltprop set with a meaningful description of the image or have thearia-labeloraria-labelledbyprops set.<area>: All clickable<area>elements within an image map have analt,aria-labeloraria-labelledbyprop that describes the purpose of the link.
Bad Practice
function Foo(props) {
return <img {...props} />
}
Recommended
function Foo({ alt, ...props}) {
return <img alt={alt} {...props} />
}
// OR
function Foo(props) {
const {
alt,
...otherProps
} = props;
return <img alt={alt} {...otherProps} />
}