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.