MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Have you ever wondered how someone who cannot see uses a smartphone or computer?
Or how someone with an injured arm or broken mouse navigates through an online exam portal?
Over 1 billion people worldwide live with some form of disability. This includes:
The creator of the World Wide Web, Sir Tim Berners-Lee, said:
In web development, accessibility is commonly abbreviated as a11y (because there are 11 letters between the 'a' and the 'y').
In this lesson, you will learn how to make your websites 100% accessible to every human being!
Imagine your school builds a brand-new library:
Building accessible websites is the exact digital equivalent of building ramps, Braille dots, and audio announcements!
When you build accessible websites, everyone wins — including students on slow internet connections, elderly grandparents with weak eyesight, and even search engine robots like Google!
A Screen Reader is a specialized software program that converts digital text and visual elements into spoken speech or Braille:
When a blind user visits your website, the screen reader does not look at CSS colors or font sizes. It reads the raw HTML structure aloud:
If you write clean, semantic HTML, the screen reader creates a pleasant, effortless experience. But if you build buttons out of plain <div> tags with no labels, the screen reader goes completely silent or announces: "Unlabeled object"!
ARIA stands for Accessible Rich Internet Applications. It is a set of special HTML attributes designed to add accessibility information when plain HTML cannot do it alone.
However, modern HTML5 already provides built-in accessibility for almost everything!
<button>, <dialog>, <nav>, or <input>), always use the native element!
Native HTML elements have built-in keyboard navigation, browser focus styling, and screen reader announcements completely for free. Only use ARIA when native HTML does not have a tag for what you are building.Here are the most important ARIA attributes you will use in your projects:
aria-label (Giving Spoken Names to Icon Buttons) 🏷️Modern websites love using compact icon-only buttons — like a magnifying glass for search, a cross icon for close, or a shopping cart.
To a sighted user, the magnifying glass icon is obvious. But to a screen reader, a button with only an icon has no text at all!
When a student tabs to this button, their phone proudly announces: "Search Course Syllabus, button"!
aria-hidden="true" (Hiding Decorative Emojis & Icons) 🙈Websites often use emojis and decorative icons for visual charm. However, listening to a screen reader read out 10 consecutive decorative emojis gets exhausting!
Use aria-hidden="true" to tell screen readers: "Ignore this decorative item; it is only visual decoration."
aria-labelledby (Linking a Container to an Existing Title) 🔗Sometimes an element already has a visible title heading on screen. You can point directly to that heading ID using aria-labelledby:
When the user enters this section, the screen reader introduces it using the exact title text from rules-heading!
role="alert" (Live Emergency Audio Announcements) 🚨When something urgent happens dynamically on screen — like a form validation error or an emergency school weather alert — you want the screen reader to announce it immediately, without waiting for the user to click on it:
As soon as this element appears, the screen reader interrupts whatever it was saying to speak the alert message!
Try this experiment right now on your computer: Unplug your mouse or turn off your touchpad for 2 minutes!
Can you navigate your website using only your keyboard?
tabindex Attribute:By default, links, buttons, and form inputs are naturally keyboard-focusable. For other elements, tabindex controls their keyboard behavior:
| Value | Behavior | When to Use |
|---|---|---|
tabindex="0" | Makes the element focusable in natural reading order. | Custom interactive cards or widgets. |
tabindex="-1" | Element can receive focus via code (JavaScript .focus()), but is skipped during normal <kbd>Tab</kbd> pressing. | Modals, popup alerts, or skip links. |
❌ Positive values (tabindex="1", "2"...) | Forces an unnatural, jumpy tab order. | NEVER use positive tabindex! It confuses keyboard users and ruins natural flow. |
alt Attribute 🖼️In Chapter 10, we learned about the alt attribute on <img>. Here is how accessibility experts handle images:
If the image conveys information, describe the content and context:
If the image is just a decorative divider, background pattern, or visual flourish, give it an empty alt attribute (alt=""):
alt attribute completely! If you write <img src="pic123.jpg"> without any alt, the screen reader is forced to read the raw filename aloud: "Image: pic 1 2 3 dot jpg", which is annoying and confusing!People with low vision or color-blindness cannot read low-contrast text (like light yellow text on a white background).
The Web Content Accessibility Guidelines (WCAG) recommend:
Here is a complete, production-ready, fully accessible webpage demonstrating proper semantics, ARIA labels, and keyboard support:
| ❌ Common Mistake | ✅ Best Practice | Why It Matters |
|---|---|---|
Building clickable buttons with <div onclick="...">. | Always use native <button type="button">. | <div> cannot be focused with the <kbd>Tab</kbd> key or pressed with the <kbd>Enter</kbd> / <kbd>Space</kbd> keys. |
Removing keyboard outline with outline: none; without providing an alternative. | Always provide a visible :focus outline style. | Keyboard-only users need the outline ring to see which button or link is currently focused! |
Using positive tabindex values (tabindex="1", tabindex="2"). | Only use tabindex="0" or tabindex="-1". | Positive numbers scramble the natural top-to-bottom tab order, causing keyboard users to get lost. |
Leaving alt off <img> completely. | Always provide alt="..." for informative photos, or alt="" for decorative images. | Missing alt forces screen readers to read noisy filenames like "IMG_9042_final.png". |
| Overusing ARIA when native HTML tags already exist. | Follow the First Rule of ARIA: Use native tags whenever possible! | Bad ARIA creates confusing, contradictory announcements on screen readers. |
<button>, <a href>, <nav>) are always better than adding ARIA to plain <div> tags!aria-label gives an accessible spoken text name to icon-only buttons.aria-hidden="true" hides decorative emojis and ornamental graphics from screen readers.role="alert" immediately announces critical warnings or dynamic status updates.Test your understanding with these multiple-choice questions:
aria-hidden="true" to a decorative emoji?tabindex values like tabindex="3"?Open VS Code and create a file named accessible-club-card.html.
Audit and build an Accessible Student Science Club Membership Card:
<article aria-labelledby="club-title">.<h2 id="club-title"><span aria-hidden="true">🔬</span> Young Innovators Club</h2>.alt text.<ul> list for member perks (e.g. Free Lab Access, Robotics Kits, Coding Mentorship).aria-label="Save Club to Favorites".aria-label="Share Club Details with Classmates".<button type="button">Apply for Membership 🚀</button>.Next Up: In Topic 12.3, we will explore Interactive Semantic Elements — how to build native expandable FAQ accordions (<details> & <summary>), modal popup dialogs (<dialog>), and progress meters with zero JavaScript!
In the next lesson, we will continue your web development journey with Interactive Elements: Dialog & Details (Semantic Tags).
👉 Continue to Next Lesson: Interactive Elements: Dialog & Details →
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
| Previous Lesson | Next Lesson |
|---|---|
| Semantic Layout Elements | Interactive Elements: Dialog & Details |
Test your understanding of this lesson with 5 questions. Each question has one correct answer.