OnlineCBT Logo OnlineCBT
HTML Tutorial
HTML · LESSON 28

Table Accessibility

By Ratan Updated: 16 Oct 2026

Create accessible and screen-reader friendly tables using scope attributes and ARIA roles.

Level: Beginner to Advanced
Duration: ~60 Mins Deep-Dive

1. Table Accessibility for Screen Readers

For students with visual impairments who rely on screen readers (such as NVDA or VoiceOver), reading an unannotated grid of cells is confusing. Accessible HTML tables require explicit associations between data cells and their headers.

2. The scope Attribute

Add scope="col" to column headers and scope="row" to row headers:

Candidate Ranks and Percentile Score Card
Candidate Name Total Score All India Rank
Deepak Mehta 685 14

3. The Element

The element acts as the title or heading for the entire table. Screen readers announce this caption first, allowing users to understand the context of the table before navigating its contents.

📝 Live Lesson Practice

HTML/CSS JavaScript Python C++ C PHP
⌨️ Practice Inputs (लाइव इनपुट भरें) (खाली होने पर RED, भरने पर GREEN underline)
💻 Code Editor (Monaco VS Code Engine)
👀 Live Preview
पता संपर्क करें

+91 7877547686

ई-मेल

onlinecbtportal@gmail.com

हेल्पलाइन नंबर

+91 7877547686


डाउनलोड करने के लिए क्लिक करें
Get it on Google Play

ऐप डाउनलोड करने
के लिए Google Play पर
उपलब्ध है

WhatsApp Chat