- A disclosure is a button that controls visibility of a section of content. - When the controlled conted is hidden, it is often styled as a typical push button with a right pointing arrow or triangle to hint that activating the button will display additional content. + A disclosure is a button that controls visibility of a section of content. + When the controlled conted is hidden, it is often styled as a typical push button with a right pointing arrow or triangle to hint that activating the button will display additional content. When the content is visible, the arrow or triangle typically points down.
@@ -2188,7 +2188,7 @@Multi-Thumb Slider Examples: Demonstrates two-thumb sliders for picking price ranges for an airline flight and hotel reservation.
@@ -3865,17 +3865,634 @@- Drafting content for this section is - issue 65. -
-- [placeholder]. - This section will cover colcount, rowcount, colindex, rowindex, colspan, rowspan, and sort. - It will explain when they are useful and how to use them. - It is referenced by the grid and table design patterns. - This section will refer readers to the grid and table design patterns for the basics of grid and table. + +
Accessibility APIs by default use the number of rows and columns to
+ determine the dimensions of a table or grid.
+ There are many situations where the number of rows and columns in the DOM
+ does not represent the total number of rows and columns
+ represented in the table or grid.
+ Examples include very large data sets where rendering the entire data set
+ in one table would be impractical, both from a screen realestate and
+ performance standpoint (e.g. the time to download large sets of data).
+ These conditions are especially apparent in mobile devices where screen size
+ and bandwidth are serious limitations to how fast and how much data can be
+ displayed at one time. ARIA provides support to describe the actual
+ dimensions and the rendered portion of the table or
+ grid using the colcount, rowcount,
+ colindex and rowindex attributes within the
+ context of a table row.
ARIA defines other When the total number of rows or columns is unknown when a table or
+ grid is created, but the number of rows or columns in the DOM does
+ not actually represent the total number of rows or columns, the
+ The following example demonstrates the use of When the total number rows and/or columns cannot be determined, are
+ unknown or are constantly changing set The One example of a grid that the dimensions are unknown is a search
+ result that only shows the five results a time. When
+ the user navigates to the last row in the grid, another five results are
+ automatically appended to the grid. Each time the user navigates to the
+ last row another five rows are added. The following example illustrates
+ the use of
+ The The example in the previous section demonstrates using
+ When the cells in a row are a continous set of columns,
+ The following example demonstrates the use of When the cells in a row are a not continous the
+ The following example demonstrates the use of When tables and grids are created using elements other than
+ The following example demonstrates the use of row and column spans on
+ Note: When using HTML5 to create content use the
+ native semantics of the
+ When rows are sorted based on one of the values in one of the columns
+ the The following example shows using the table and grid properties
+ for identifying spanned rows and columns, and the sorting order of a column.
+
+
+ Defining dimensions using
+
+ aria-colcount and aria-rowcount
+
+ Dimensions of a
+
+ table or grid are known
+ aria-colcount and aria-rowcount attributes
+ must be used to identify the total number of rows and columns in the
+ table or grid. The aria-colcount and aria-rowcount
+ attributes are placed on the element identifying the table or grid (
+ e.g. table, [role="table"] or
+ [role="grid"]). The value of aria-colcount
+ and aria-rowcount must be an integer equal to the total
+ number of rows or columns in the table or grid.
+
+ aria-rowcount
+ and aria-rowindex attributes for a hypothetical class list.
+ Course management systems typically only show a portion of the entire
+ list of students in a class and provide scrollbars and cursor key
+ navigation (e.g. a grid widget) to change which rows are visible to
+ the user. The aria-rowcount attribute on the
+ table element is used to identify the total number of rows
+ in the grid (e.g. students in the class) and the
+ aria-rowindex attribute on each tr element
+ is used identify which row in the grid it represents.
+
+
+
+
+ <!--
+ aria-rowcount tells users of assistive technologies that actual
+ size of the grid is 463 rows and not the number or rows
+ found in the markup.
+ -->
+ <table role="grid" aria-rowcount="463">
+ aria-label="Student roster for history 101"
+ <thead>
+ <tr aria-rowindex="1">
+ <th>Last Name</th>
+ <th>First Name</th>
+ <th>E-mail</th>
+ <th>Major</th>
+ <th>Minor</th>
+ <th>Standing</th>
+ </tr>
+ </thead>
+ <tbody>
+ <!--
+ aria-rowindex tells users of assistive technologies that this
+ row is row 51 in the grid of 463 rows.
+ -->
+ <tr aria-rowindex="51">
+ <td>Henderson</td>
+ <td>Alan</td>
+ <td>ahederson56@myuniveristy.edu</td>
+ <td>Business</td>
+ <td>Spanish</td>
+ <td>Junior</td>
+ </tr>
+ <!--
+ aria-rowindex tells users of assistive technologies that this
+ row is row 52 in the grid of 463 rows.
+ -->
+ <tr aria-rowindex="52">
+ <td>Henderson</td>
+ <td>Alice</td>
+ <td>ahederson345@myuniveristy.edu</td>
+ <td>Engineering</td>
+ <td>none</td>
+ <td>Sophomore</td>
+ </tr>
+ <!--
+ aria-rowindex tells users of assistive technologies that this
+ row is row 53 in the grid of 463 rows.
+ -->
+ <tr aria-rowindex="53">
+ <td>Henderson</td>
+ <td>Andrew</td>
+ <td>ahederson75@myuniveristy.edu</td>
+ <td>General Studies</td>
+ <td>none</td>
+ <td>Freshman</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ Dimensions of a
+ table or grid are
+ unknown
+ aria-colcount="-1"
+ and/or aria-rowcount="-1". Setting the value
+ to -1 provides information to assistive technologies
+ that the size of the table is not known. Assistive technologies can
+ determine the best way to communicate this information to users.
+ aria-colindex and aria-rowindex should
+ be used to identify the current column or row index in the table or
+ grid, even if the dimensions are unkown.
+ aria-rowcount="-1" for a library
+ book search. As the user navigates to the last row, another five
+ results are appended to the end of the gird.
+
+
+
+
+ <table role="grid" aria-rowcount="-1">
+ aria-label="Library book search results"
+ <!--
+ aria-rowcount tells users of assistive technologies that the
+ actual size of the grid cannot be determined. In this case since
+ the size is based on user interaction with the grid.
+ -->
+ <thead>
+ <tr aria-rowindex="1">
+ <th>Book Title</th>
+ <th>Author</th>
+ <th>Availability</th>
+ <th>Options</th>
+ </tr>
+ </thead>
+ <tbody>
+ <!--
+ aria-rowindex is still used to tell the user
+ which rows of the gird are being rendered.
+ -->
+ <tr aria-rowindex="21">
+ <td id="title21">Responsive web design with HTML5 and CSS3</td>
+ <td>Mike Smith</td>
+ <td>0 of 1</td>
+ <td><button id="req21" aria-labelledby="req21 title21">Request it</button></td>
+ </tr>
+ <!--
+ aria-rowindex is still used to tell the user
+ which rows of the gird are being rendered.
+ -->
+ <tr aria-rowindex="22">
+ <td id="title22">Functional programming for the web</td>
+ <td>Jean Mitchell</td>
+ <td>2 of 2</td>
+ <td><button id="req22" aria-labelledby="req22 title22">Request it</button></td>
+ </tr>
+ <!--
+ aria-rowindex is still used to tell the user
+ which rows of the gird are being rendered.
+ -->
+ <tr aria-rowindex="23">
+ <td id="title23">CSS3 and HTML5 in 24 Hours</td>
+ <td>Paul Mercer</td>
+ <td>1 of 1</td>
+ <td><button id="req23" aria-labelledby="req23 title23">Request it</button></td>
+ </tr>
+ <!--
+ aria-rowindex is still used to tell the user
+ which rows of the gird are being rendered.
+ -->
+ <tr aria-rowindex="24">
+ <td id="title24">HTML5, CSS2 and Javascript for Responsive Web Design</td>
+ <td>Sean Mauney</td>
+ <td>1 of 2</td>
+ <td><button id="req24" aria-labelledby="req24 title24">Request it</button></td>
+ </tr>
+ <!--
+ aria-rowindex is still used to tell the user
+ which rows of the gird are being rendered.
+ -->
+ <tr aria-rowindex="25">
+ <td id="title25">PHP and HTML5 web development</td>
+ <td>Sara Capasso</td>
+ <td>2 of 3</td>
+ <td><button id="req25" aria-labelledby="req25 title25">Request it</button></td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ Defining cell position using
+
+ aria-colindex and
+ aria-rowindex
+
+ Defining row indexes
+
+
+ aria-rowindex attribute is used on tr
+ elements or elements with role="row" to
+ identify a row's positional relationship to other rows in a table or
+ grid when the DOM only includes a portion of the rows associated with
+ a data set. Each row needs to include the aria-rowindex
+ with a value between 1 and the maximum number of rows defined by the
+ aria-rowcount value on the table.
+ aria-rowindex to identify whcih row in the of the grid
+ is being rendered.
+
+
+ Defining column position when indexes are continous
+
+
+ aria-colindex can be placed on the tr or
+ [role="row"] with the value representing the index of
+ the index of the first column. The browser will compute the value
+ of the remaining columns automatically. The value of
+ aria-colindex is based on the maximum number of
+ columns defined by aria-colcount and the number of cells
+ in a row.
+ aria-colcount
+ for an online grade book when only a few columns of grades are visible.
+ In this case the other columns all represent the next column in the
+ grid so the aria-colcount can go on the tr
+ element.
+
+
+
+
+ <table role="grid" aria-rowcount="463">
+ aria-label="Student grades for history 101"
+ <!--
+ aria-rowcount tells users of assistive technologies that actual
+ size of the grid is 463 rows and not the number or rows
+ found in the markup.
+ -->
+ <thead>
+ <!--
+ aria-colindex tells users of assistive technologies that the
+ following columns represent columns 10, 11, 12 and 13 of
+ the overall data set of grades.
+ -->
+ <tr aria-colindex="10" aria-rowindex="1">
+ <th>Homework 4</th>
+ <th>Quiz 2</th>
+ <th>Homework 5</th>
+ <th>Homework 6</th>
+ </tr>
+ </thead>
+ <tbody>
+ <!--
+ every row needs to define the aria-colindex attribute
+ -->
+ <tr aria-colindex="10" aria-rowindex="50">
+ <td>8</td>
+ <td>25</td>
+ <td>9</td>
+ <td>9</td>
+ </tr>
+ <!--
+ every row needs to define the aria-colindex attribute
+ -->
+ <tr aria-colindex="10" aria-rowindex="51">
+ <td>10</td>
+ <td>27</td>
+ <td>10</td>
+ <td>8</td>
+ </tr>
+ <!--
+ every row needs to define the aria-colindex attribute
+ -->
+ <tr aria-colindex="10" aria-rowindex="52">
+ <!--
+ every row needs to define the aria-colindex attribute
+ -->
+ <td>9</td>
+ <td>0</td>
+ <td>29</td>
+ <td>8</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ Defining column position when indexes are non-contiguous
+
+
+ aria-colindex attribute need to be places on event cell
+ in the row. The value of ranges from 1 to the maximum number of
+ columns defined by aria-colcount.
+ aria-colcount
+ for an online grade book when the first columns of the grade book
+ showing the student namnes is visible and the remaining columns
+ show a portion of the grade for a student. In this case each cell
+ in the row shas a aria-colindex attribute defined.
+
+
+
+
+
+ <table role="grid" aria-rowcount="463">
+ aria-label="Student grades for history 101"
+ <!--
+ aria-rowcount tells users of assistive technologies that actual
+ size of the grid is 463 rows and not the number or rows
+ found in the markup.
+ -->
+ <thead>
+ <tr aria-rowindex="1">
+ <!--
+ aria-colindex tells users of assistive technologies that the
+ following columns represent columns 1 and 2 of the overall
+ data set of the grades.
+ -->
+ <!--
+ aria-colindex tells users of assistive technologies that the
+ following columns represent the first and second columns from
+ the overall data set of grades.
+ -->
+ <th aria-colindex="1">Last Name</th>
+ <th aria-colindex="2">First Name</th>
+ <!--
+ aria-colindex tells users of assistive technologies that the
+ following columns represent columns 10, 11, 12 and 13 of
+ the overall data set of grades.
+ -->
+ <th aria-colindex="10">Homework 4</th>
+ <th aria-colindex="11">Quiz 2</th>
+ <th aria-colindex="12">Homework 5</th>
+ <th aria-colindex="13">Homework 6</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr aria-rowindex="50">
+ <!--
+ every cell needs to define the aria-colindex attribute
+ -->
+ <td aria-colindex="1">Henderson</td>
+ <td aria-colindex="2">Alan</td>
+ <td aria-colindex="10">8</td>
+ <td aria-colindex="11">25</td>
+ <td aria-colindex="12">9</td>
+ <td aria-colindex="13">9</td>
+ </tr>
+ <tr aria-rowindex="51">
+ <!--
+ every cell needs to define the aria-colindex attribute
+ -->
+ <td aria-colindex="1">Henderson</td>
+ <td aria-colindex="2">Alice</td>
+ <td aria-colindex="10">10</td>
+ <td aria-colindex="11">27</td>
+ <td aria-colindex="12">10</td>
+ <td aria-colindex="13">8</td>
+ </tr>
+ <tr aria-rowindex="52">
+ <!--
+ every cell needs to define the aria-colindex attribute
+ -->
+ <td aria-colindex="1">Henderson</td>
+ <td aria-colindex="2">Andrew</td>
+ <td aria-colindex="10">9</td>
+ <td aria-colindex="11">0</td>
+ <td aria-colindex="12">29</td>
+ <td aria-colindex="13">8</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ Defining cell spans using
+
+ aria-colspan and aria-rowspan
+ th and td elements, ARIA provides a means to
+ define row and column spans using the aria-rowspan and
+ aria-colspan attributes. Row and column span information
+ is used by assistive technologies to support the navigate of table cells
+ and in identifying headers for data cells.
+ span elements for listing test scores and a final grade. The
+ first row used row spans for the student name information and column
+ spans for identifying quizes. The second row includes cells for the score
+ and grade for each quiz.
+
+
+
+
+ <div role="grid" aria-rowcount="463">
+ aria-label="Student grades for history 101"
+ <div role="rowgroup">
+ <div role="row" aria-rowindex="1">
+ <!--
+ aria-rowspan and aria-colspan provides users of
+ assitive technologies with the correct data cell header
+ information when cells or headers span more than one row or
+ column.
+ -->
+
+ <span role="columnheader" aria-rowspan="2">Last Name</span>
+ <span role="columnheader" aria-rowspan="2">First Name</span>
+ <span role="columnheader" aria-colspan="2">Test 1</span>
+ <span role="columnheader" aria-colspan="2">Test 2</span>
+ <span role="columnheader" aria-colspan="2">Final</span>
+ </div>
+ <div role="row" aria-rowindex="2">
+ <span role="columnheader">Score</span>
+ <span role="columnheader">Grade</span>
+ <span role="columnheader">Score</span>
+ <span role="columnheader">Grade</span>
+ <span role="columnheader">Total</span>
+ <span role="columnheader">Grade</span>
+ </div>
+ </div>
+ <div role="rowgroup">
+ <div role="row" aria-rowindex="50">
+ <span role="cell">Henderson</span>
+ <span role="cell">Alan</span>
+ <span role="cell">89</span>
+ <span role="cell">B+</span>
+ <span role="cell">72</span>
+ <span role="cell">C</span>
+ <span role="cell">161</span>
+ <span role="cell">B-</span>
+ </div>
+ <div role="row" aria-rowindex="51">
+ <span role="cell">Henderson</span>
+ <span role="cell">Alice</span>
+ <span role="cell">94</span>
+ <span role="cell">A</span>
+ <span role="cell">86</span>
+ <span role="cell">B</span>
+ <span role="cell">180</span>
+ <span role="cell">A-</span>
+ </div>
+ <div role="row" aria-rowindex="52">
+ <span role="cell">Henderson</span>
+ <span role="cell">Andrew</span>
+ <span role="cell">82</span>
+ <span role="cell">B-</span>
+ <span role="cell">95</span>
+ <span role="cell">A</span>
+ <span role="cell">177</span>
+ <span role="cell">B+</span>
+ </div>
+ </div>
+ </div>
+
+ th and td elements
+ to define row and column spans using the rowspan and
+ colspan attributes. Native semantics are always preferred
+ over the use of ARIA attributes for providing accessibility information.
+
+ Identifying row sorting using
+ aria-sort
+ aria-sort attribute must be used on the
+ columnheader to identify the column being used to
+ sort the rows of the table or grid. The following table describes the
+ options for the values of aria-sort.
+
+
+
+ aria-sort
+
+
+
+
+ Value
+ Description
+
+
+ ascendingRows are sorted in ascending order by this column
+
+
+ descendingItems are sorted in descending order by this column.
+
+
+ otherRows are sorted by an algorithm other than ascending or
+ descending by this column.
+
+
+
+
+ noneThis column is not used for sorting the rows.
+ aria-sort to show
+ that the rows are sorted based on the score of "Quiz 2". The
+ aria-sort="descending" identifies the rows being
+ sorted from highest score to lowest score.
+
+
+
+
+
+ <table role="grid" aria-rowcount="463">
+ aria-label="Student grades for history 101"
+ <thead>
+ <tr aria-colindex="10" aria-rowindex="1">
+ <th>Homework 4</th>
+ <!--
+ aria-sort is used to identify the column with the heading
+ "Quiz 2" being used to sort the rows of the grid. The
+ value of aria-sort identifies the rows are being sorted in
+ descending order (e.g. highest score to lowest
+ score)
+ -->
+ <th aria-sort="descending">Quiz 2</th>
+ <th>Homework 5</th>
+ <th>Homework 6</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr aria-colindex="10" aria-rowindex="50">
+ <td>8</td>
+ <td>30</td>
+ <td>9</td>
+ <td>9</td>
+ </tr>
+ <tr aria-colindex="10" aria-rowindex="51">
+ <td>10</td>
+ <td>29</td>
+ <td>10</td>
+ <td>8</td>
+ </tr>
+ <tr aria-colindex="10" aria-rowindex="52">
+ <td>9</td>
+ <td>9</td>
+ <td>27</td>
+ <td>6</td>
+ </tr>
+ <tr aria-colindex="10" aria-rowindex="53">
+ <td>9</td>
+ <td>10</td>
+ <td>26</td>
+ <td>8</td>
+ </tr>
+ <tr aria-colindex="10" aria-rowindex="54">
+ <td>9</td>
+ <td>7</td>
+ <td>24</td>
+ <td>6</td>
+ </tr>
+ </tbody>
+ </table>
+
+