Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ARIA Attributes Example</title> <style> body { font-family: sans-serif; margin: 20px; line-height: 1.6; } .alert-box { padding: 15px; background-color: #f82626; color: white; border-radius: 4px; margin-bottom: 20px; font-weight: bold; } .custom-button { display: inline-block; padding: 10px 20px; background-color: #007bff; color: white; text-align: center; border-radius: 4px; cursor: pointer; } .custom-button:hover { background-color: #0056b3; } </style> </head> <body> <h2>1. Alerting the User</h2> <p>The div below uses <code>role="alert"</code>. When this box appears on the screen (e.g. via JavaScript after a failed login), a screen reader will immediately interrupt whatever it is doing to read the alert to the user.</p> <div class="alert-box" role="alert"> Error: The password you entered is incorrect. </div> <h2>2. Describing a Custom Element</h2> <p>The blue box below is actually just a <code><div></code>, but using <code>role="button"</code> tells the screen reader to treat it exactly like a real button. We also added <code>tabindex="0"</code> so a keyboard user can focus on it.</p> <div class="custom-button" role="button" tabindex="0" aria-pressed="false" onclick="alert('Clicked!')"> Submit Payment </div> <h2>3. Hiding Icons from Screen Readers</h2> <p>Below is a button with a decorative text icon. We don't want the screen reader to read the garbled symbol character out loud, so we hide it using <code>aria-hidden="true"</code>.</p> <button> <span aria-hidden="true">✔</span> Confirm Order </button> </body> </html>
