Skip to content
GitLab
    • Explore Projects Groups Snippets
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • A a11yproject.com
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 40
    • Issues 40
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 10
    • Merge requests 10
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • The A11Y Project
  • a11yproject.com
  • Merge requests
  • !491

Formatting, additional info on scope

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Administrator requested to merge github/fork/alterlife/patch-1 into gh-pages 8 years ago
  • Overview 10
  • Commits 3
  • Pipelines 0
  • Changes 1

Created by: alterlife

  1. Cleaned up header indentation
  2. Added additional info about scope=row and scope=col.
  3. Fixed a couple of typos

note: I believe there's also 'colgroup' and 'rowgroup' for complex tables, perhaps that deserves a separate article?

Compare
  • gh-pages (base)

and
  • latest version
    6574f18a
    3 commits, 2 years ago

1 file
+ 12
- 9

    Preferences

    File browser
    Compare changes
_posts/2016-03-05-accessible-data-tables.md
+ 12
- 9
  • View file @ 6574f18a

  • Edit in single-file editor

  • Open in Web IDE


@@ -11,7 +11,7 @@ categories:
The semantic purpose of a data table is to present tabular data. Sighted users can quickly scan the table but a screen reader goes through line by line. Proper markup must be added to help the screen reader make the correct associations that a sighted user would.
# Example of an accessible data table.
## Example of an accessible data table.
{% highlight html %}
<table>
<caption>Monthly Budget</caption>
@@ -42,24 +42,27 @@ The semantic purpose of a data table is to present tabular data. Sighted users c
Making an accessible table isn’t hard and can be broken down into two main things.
1. Have a table caption.
1. Add a table caption.
2. Use `scope=”col”` on column headers, and `scope=”row”` on row headers.
2. Mark row and column headings using the 'scope' attribute
## Table Captions ##
Table captions are added right after the opening `<table>`tag with `<caption> Your caption goes here</caption>`.
## Table Captions
Table captions are added right after the opening `<table>` tag with `<caption>Your caption goes here</caption>`.
The screen reader will then say “Table with 3 rows and 4 columns, Monthly Budget” or something to that effect. Without this, the screen reader will just start reading off the values inside the table, which is going to be frustrating and not super useful. Imagine reading and entire table cell by cell and then piecing together what the table is trying to tell you.
The screen reader will then say “Table with 3 rows and 4 columns, Monthly Budget” or something to that effect. Without this, the screen reader will just start reading off the values inside the table, which is going to be frustrating and not super useful. Imagine reading an entire table cell by cell and then piecing together what the table is trying to tell you.
<p data-height="268" data-theme-id="0" data-slug-hash="zqOKvY" data-default-tab="result" data-user="franklynroth" class="codepen">See the Pen <a href="http://codepen.io/franklynroth/pen/zqOKvY/">Accessible Data Tables</a> by Franklyn (<a href="http://codepen.io/franklynroth">@franklynroth</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
### Scope="col" or scope="row"
The scope typically goes on the `<th>` element. If the `<th>` is a column like the <strong>"Amount Earned", "Amount Spent" and "Amount Saved"</strong> are in my example, you would put them all as `scope="col"`. This lets the screen reader know that the `<th>`’s are column headers for that entire column.
## Row and Column Headings
For sighted users, row and column headings of tables are often highlighted visually. The screen reader will need this information coded into the markup.
The `scope="row"` is typically put on the first `<th>` of the row. In this case <strong>"January" and "February"</strong> would get them.
Column headers should be marked using `scope="col"`. The `scope="col"` typically goes on the `<th>` element. If the `<th>` is a column like the <strong>"Amount Earned", "Amount Spent" and "Amount Saved"</strong> in my example, you would put them all as `scope="col"`. This lets the screen reader know that the `<th>`’s are column headers for that entire column. Column headers should be unique.
Row headers should be marked up using `scope="row"`. The `scope="row"` is typically put on the first `<th>` in the row. In this case <strong>"January" and "February"</strong> would get them. For optimal usability, the row header selected should be sufficiently unique and readable to identify the row.
The screen reader will most likely be able to figure out what is a column header and row header, but assigning this makes it unambiguous to the screen reader on what is a row or column header and how to proceed.
That’s pretty much it on how to make an accessible table. Use them for tabular data, assign a caption and use `scope="col"` or `scope="row"`.
0 Assignees
None
Assign to
0 Reviewers
None
Request review from
Labels
0
None
0
None
    Assign labels
  • Manage project labels

Milestone
No milestone
None
None
Time tracking
No estimate or time spent
Lock merge request
Unlocked
1
1 participant
Administrator
Reference: a11yproject/a11yproject.com!491
Source branch: github/fork/alterlife/patch-1

Menu

Explore Projects Groups Snippets