--- title: "Making Table Views accessible to screen readers with row headers" date: 2026-07-17 author: "Casey Burridge" link: "https://www.gravitykit.com/docs/gravityview/customizing-your-views/table-row-headers-screen-reader-accessibility/" --- [GravityView](https://www.gravitykit.com/products/gravityview/) 3.1 adds a new field setting to the Table layout: **Use this field as a row header**. Enabling it marks one column of your table as the label for each row, so screen readers announce that value as context for every other cell. This article explains what row headers do, when to use them, and how to turn them on. **Note:** This feature requires GravityView 3.1 or newer and applies to Views using the Table layout. ## What row headers are Think about how you read a table. If you're looking at a member directory and want someone's phone number, your eye finds the row for "Jane Smith" and slides across. The name anchors everything else in that row, so you always know whose data you're looking at. A screen reader user doesn't get that anchor by default. Behind the scenes, a table is made of header cells and data cells. GravityView's Table layout has always marked the top row (Name, Email, Phone) as column headers, but every cell below that was a plain data cell. Someone moving down the Phone column with a screen reader hears bare values ("555-0142... 555-0198... 555-0177") with no indication of whose numbers those are. To find out, they have to navigate back across each row to the name, for every single row. A row header fixes that. When one column is marked as the row header, screen readers treat its cells as the label for their whole row. Moving through the table, the user hears the identifying value announced together with each cell, for example: "Jane Smith, Phone, 555-0142". Whatever cell they land on, they know which record it belongs to. The exact announcement varies between screen readers (NVDA, JAWS, and VoiceOver each phrase it slightly differently), but all of them use row headers to provide this context. ## When to use row headers Enable the setting on the one field that identifies each record in your View: - A member or staff directory – the **Name** field - A job board – the **Job title** field - An equipment inventory – the **Asset ID** field - A support log – the **Ticket number** field A few things to keep in mind: - **Enable it for one field per row.** A row has one label. Marking multiple columns as row headers gives screen readers conflicting context. - **Nothing changes visually.** Row headers are a semantic improvement for assistive technology; sighted visitors see the same table as before. - **It helps with accessibility audits.** Properly labeled data tables are part of [WCAG success criterion 1.3.1 (Info and Relationships)](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html), and automated checkers and manual auditors both look for them. If you build for government, education, or other organizations with accessibility requirements, this setting helps your Views pass review. ## How to enable a row header - Edit your View (it must use the Table layout). - In the **Multiple Entries** tab, click the gear icon on the field that identifies each row (for example, **Name**). - In the field settings panel, check **Use this field as a row header**. - Click **Update** to save the View. ![GravityView field Display settings with a red arrow pointing to the enabled "Use this field as a row header" checkbox](https://www.gravitykit.com/wp-content/uploads/2026/07/CleanShot-2026-07-17-at-12.23.10@2x-1024x426.png) *That's it. The setting takes effect the next time the View renders* ## What changes in your table's markup For the technically curious: HTML distinguishes header cells (``) from data cells (``), and the `scope` attribute tells assistive technology what a header cell labels. With the setting enabled, GravityView renders that column's cells as `` instead of ``: ``` Jane Smith jane@example.com 555-0142 ``` The `scope="row"` attribute is what tells screen readers to announce "Jane Smith" as context for the email and phone cells in that row. No custom code, template overrides, or CSS changes are involved. ## Related articles - [Getting Started: Setting up Your First View](https://www.gravitykit.com/docs/gravityview/getting-started/how-to-setup-your-first-view/) - [Tables tutorial from the W3C Web Accessibility Initiative](https://www.w3.org/WAI/tutorials/tables/)