Accessibility

Alt Attribute for Images

• Rule: All <img> elements MUST have an alt attribute.

• Reason: The alt attribute provides alternative text for screen readers and when images fail to load.

Example (Correct):

<img src="logo.png" alt="Company Logo">
<img src="decorative-line.png" alt=""> <!-- Empty alt for decorative images -->

Example (Incorrect):

<img src="logo.png">

Form Labels

• Rule: Form inputs MUST have associated <label> elements.

• Reason: Labels improve accessibility and usability by providing clickable text associated with form controls.

Example (Correct):

<label for="email">Email:</label>
<input id="email" type="email" name="email">

<!-- Or wrapped -->
<label>
	Email:
	<input type="email" name="email">
</label>

ARIA Attributes

• Rule: ARIA attributes SHOULD be used when semantic HTML alone is insufficient.

• Reason: ARIA attributes enhance accessibility for complex interactive components.

Example:

<button aria-label="Close dialog" aria-pressed="false">
	<span class="icon-close"></span>
</button>

<div role="alert" aria-live="polite">
	Form submitted successfully.
</div>

Summary:

• All images MUST have an alt attribute.
• Form inputs MUST have associated labels.
• ARIA attributes SHOULD be used for complex interactive components.