Aria-colspan - Accessibility - MDN Web Docs - Mozilla

Trang chủ » Html Td Colspan Style » Aria-colspan - Accessibility - MDN Web Docs - Mozilla

Có thể bạn quan tâm

  1. References
  2. Accessibility
  3. ARIA
  4. ARIA states and properties
  5. aria-colspan
Article Actions
  • English (US)
    • Remember language
    • Deutsch
    • 中文 (简体)
  • Description
  • Example
  • Values
  • Associated interfaces
  • Associated roles
  • Specifications
  • See also
  1. Accessibility
  2. Guides
    1. Accessibility information for web authors
    2. Accessibility: What users can do to browse more safely
    3. An overview of accessible web applications and widgets
    4. Keyboard-navigable JavaScript widgets
    5. Mobile accessibility checklist
    6. Understanding the Web Content Accessibility Guidelines
    7. Cognitive accessibility
    8. Accessibility and Spacial Patterns
    9. Web Accessibility: Understanding Colors and Luminance
    10. Web accessibility for seizures and physical reactions
  3. Learn accessibility
    1. Accessibility
    2. What is accessibility?
    3. HTML: A good basis for accessibility
    4. CSS and JavaScript accessibility best practices
    5. WAI-ARIA basics
    6. Accessible multimedia
    7. Mobile accessibility
    8. Assessment: Accessibility troubleshooting
  4. WCAG
      1. Overview
      2. Keyboard
      3. Operable
      4. Perceivable
      5. Robust
      6. Text labels and names
      7. Understandable
  5. ARIA
  6. ARIA guides
    1. ARIA guides
    2. ARIA live regions
    3. ARIA Screen Reader Implementors Guide
    4. Using ARIA: Roles, states, and properties
    5. Multipart labels: Using ARIA for labels with embedded fields inside them
    6. How to file ARIA-related bugs
  7. ARIA states and properties
      1. Overview
      2. aria-activedescendant
      3. aria-atomic
      4. aria-autocomplete
      5. aria-braillelabel
      6. aria-brailleroledescription
      7. aria-busy
      8. aria-checked
      9. aria-colcount
      10. aria-colindex
      11. aria-colindextext
      12. aria-colspan
      13. aria-controls
      14. aria-current
      15. aria-describedby
      16. aria-description
      17. aria-details
      18. aria-disabled
      19. aria-dropeffect Deprecated
      20. aria-errormessage
      21. aria-expanded
      22. aria-flowto
      23. aria-grabbed Deprecated
      24. aria-haspopup
      25. aria-hidden
      26. aria-invalid
      27. aria-keyshortcuts
      28. aria-label
      29. aria-labelledby
      30. aria-level
      31. aria-live
      32. aria-modal
      33. aria-multiline
      34. aria-multiselectable
      35. aria-orientation
      36. aria-owns
      37. aria-placeholder
      38. aria-posinset
      39. aria-pressed
      40. aria-readonly
      41. aria-relevant
      42. aria-required
      43. aria-roledescription
      44. aria-rowcount
      45. aria-rowindex
      46. aria-rowindextext
      47. aria-rowspan
      48. aria-selected
      49. aria-setsize
      50. aria-sort
      51. aria-valuemax
      52. aria-valuemin
      53. aria-valuenow
      54. aria-valuetext
  8. ARIA roles
      1. Overview
      2. ARIA: alert role
      3. ARIA: alertdialog role
      4. ARIA: application role
      5. ARIA: article role
      6. ARIA: banner role
      7. ARIA: button role
      8. ARIA: cell role
      9. ARIA: checkbox role
      10. ARIA: columnheader role
      11. ARIA: combobox role
      12. ARIA: command role
      13. ARIA: comment role
      14. ARIA: complementary role
      15. ARIA: composite role
      16. ARIA: contentinfo role
      17. ARIA: definition role
      18. ARIA: dialog role
      19. ARIA: directory role Deprecated
      20. ARIA: document role
      21. ARIA: document structural roles
      22. ARIA: feed role
      23. ARIA: figure role
      24. ARIA: form role
      25. ARIA: generic role
      26. ARIA: grid role
      27. ARIA: gridcell role
      28. ARIA: group role
      29. ARIA: heading role
      30. ARIA: img role
      31. ARIA: input role
      32. ARIA: landmark role
      33. ARIA: link role
      34. ARIA: list role
      35. ARIA: listbox role
      36. ARIA: listitem role
      37. ARIA: log role
      38. ARIA: main role
      39. ARIA: mark role
      40. ARIA: marquee role
      41. ARIA: math role
      42. ARIA: menu role
      43. ARIA: menubar role
      44. ARIA: menuitem role
      45. ARIA: menuitemcheckbox role
      46. ARIA: menuitemradio role
      47. ARIA: meter role
      48. ARIA: navigation role
      49. ARIA: none role
      50. ARIA: note role
      51. ARIA: option role
      52. ARIA: presentation role
      53. ARIA: progressbar role
      54. ARIA: radio role
      55. ARIA: radiogroup role
      56. ARIA: range role
      57. ARIA: region role
      58. ARIA: roletype role
      59. ARIA: row role
      60. ARIA: rowgroup role
      61. ARIA: rowheader role
      62. ARIA: scrollbar role
      63. ARIA: search role
      64. ARIA: searchbox role
      65. ARIA: section role
      66. ARIA: sectionhead role
      67. ARIA: select role
      68. ARIA: separator role
      69. ARIA: slider role
      70. ARIA: spinbutton role
      71. ARIA: status role
      72. ARIA: structure role
      73. ARIA: suggestion role
      74. ARIA: switch role
      75. ARIA: tab role
      76. ARIA: table role
      77. ARIA: tablist role
      78. ARIA: tabpanel role
      79. ARIA: term role
      80. ARIA: textbox role
      81. ARIA: timer role
      82. ARIA: toolbar role
      83. ARIA: tooltip role
      84. ARIA: tree role
      85. ARIA: treegrid role
      86. ARIA: treeitem role
      87. ARIA: widget role
      88. ARIA: window role
  • Description
  • Example
  • Values
  • Associated interfaces
  • Associated roles
  • Specifications
  • See also

The aria-colspan attribute defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

Description

Intended for cells and gridcells which are not contained in a native HTML <table>, the aria-colspan property value defines the number of columns spanned by an individual cell an ARIA table, grid, or treegrid.

In HTML, <th> and <td> elements have the colspan attribute. When using the semantic <table>, use the native colspan attribute as designed. This ARIA attribute is intended for cells and gridcells which are not contained in a native table, and will be ignored if used on a cell in a <table>.

Note: The first rule of ARIA use is if you can use a native feature with the semantics and behavior you require already built in, instead of repurposing an element and adding an ARIA role, state or property to make it accessible, then do so. Employ HTML <table> elements, including <td> and <th> with the colspan attribute instead of non-semantic elements with ARIA roles and attributes whenever possible.

The value of aria-colspan should be a positive integer. The default or assumed value of a cell span is 1. Make sure that the included value does cause the cell or gridcell to overlap the next cell or gridcell in the same row and does not cause the cell to span outside of the containing table, grid, or treegrid.

Example

The following is an example of part of a bowling tournament league scoring spreadsheet. Each game spans 10 frames, and each frame spans a 3 scores: two balls and the current total. The 10th (and last) frame in each game spans 4 columns in case someone is scoring all strikes.

html<div role="grid" aria-rowcount="27"> aria-label="Bowling League Scores" <div role="rowgroup"> <div role="row" aria-rowindex="1"> <!-- aria-rowspan and aria-colspan provide assistive technologies with the correct data cell header information when header cells span more than one row or column. --> <span role="columnheader" aria-rowspan="2">Team</span> <span role="columnheader" aria-colspan="2">Player</span> <span role="columnheader" aria-colspan="31">Game 1 Frames</span> <span role="columnheader" aria-colspan="31">Game 2 Frames</span> <span role="columnheader" aria-colspan="31">Game 3 Frames</span> <span role="columnheader" aria-rowspan="2">Total</span> </div> <div role="row" aria-rowindex="2"> <span role="columnheader">Last Name</span> <span role="columnheader">First Name</span> <span role="columnheader" aria-colspan="3">1</span> <span role="columnheader" aria-colspan="3">2</span> <span role="columnheader" aria-colspan="3">3</span> <span role="columnheader" aria-colspan="3">4</span> <span role="columnheader" aria-colspan="3">5</span> <span role="columnheader" aria-colspan="3">6</span> <span role="columnheader" aria-colspan="3">7</span> <span role="columnheader" aria-colspan="3">8</span> <span role="columnheader" aria-colspan="3">9</span> <span role="columnheader" aria-colspan="4">10</span> <span role="columnheader" aria-colspan="3">1</span> <span role="columnheader" aria-colspan="3">2</span> <span role="columnheader" aria-colspan="3">3</span> <span role="columnheader" aria-colspan="3">4</span> <span role="columnheader" aria-colspan="3">5</span> <span role="columnheader" aria-colspan="3">6</span> <span role="columnheader" aria-colspan="3">7</span> <span role="columnheader" aria-colspan="3">8</span> <span role="columnheader" aria-colspan="3">9</span> <span role="columnheader" aria-colspan="4">10</span> <span role="columnheader" aria-colspan="3">1</span> <span role="columnheader" aria-colspan="3">2</span> <span role="columnheader" aria-colspan="3">3</span> <span role="columnheader" aria-colspan="3">4</span> <span role="columnheader" aria-colspan="3">5</span> <span role="columnheader" aria-colspan="3">6</span> <span role="columnheader" aria-colspan="3">7</span> <span role="columnheader" aria-colspan="3">8</span> <span role="columnheader" aria-colspan="3">9</span> <span role="columnheader" aria-colspan="4">10</span> </div> </div> <div role="rowgroup"> <div role="row" aria-rowindex="10"> <span role="rowheader" aria-rowspan="3">The Mighty Quokkas</span> <span role="cell">Henderson</span> <span role="cell">Alice</span> <span role="cell">7</span> <span role="cell">/</span> <span role="cell">20</span> <span role="cell" aria-colspan="2">X</span> <span role="cell">39</span> <span role="cell">9</span> <span role="cell">-</span> <span role="cell">48</span> <span role="cell" aria-colspan="2">X</span> <span role="cell">76</span> <span role="cell" aria-colspan="2">X</span> <span role="cell">96</span> <span role="cell">8</span> <span role="cell">/</span> <span role="cell">113</span> <span role="cell">7</span> <span role="cell">-</span> <span role="cell">120</span> <span role="cell" aria-colspan="2">X</span> <span role="cell">146</span> <span role="cell" aria-colspan="2">X</span> <span role="cell">166</span> <span role="cell">6</span> <span role="cell">/</span> <span role="cell">X</span> <span role="cell">186</span> <span role="cell">7</span> <span role="cell">2</span> <span role="cell">9</span> <span role="cell">6</span> <span role="cell">-</span> <span role="cell">15</span> <span role="cell" aria-colspan="2">X</span> <span role="cell">35</span> <span role="cell">7</span> <span role="cell">/</span> … </div> <div role="row" aria-rowindex="11"> <span role="cell">McPherson</span> <span role="cell">Leslie</span> <span role="cell">9</span> <span role="cell">-</span> <span role="cell">9</span> <span role="cell">8</span> <span role="cell">1</span> <span role="cell">18</span> … </div> </div> </div>

If we had used a <table> and semantic table elements our markup would have been less verbose and accessible by default.

Values

<integer>

An integer greater than or equal to the default value of 1 defining the number of columns spanned by the cell. The value must be less than what would cause a cell to overlap the next cell in the same row.

Associated interfaces

Element.ariaColSpan

The ariaColSpan property, part of each element's interface, reflects the value of the aria-colspan attribute, which defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

Associated roles

Used in roles:

  • cell

Inherits into roles:

  • columnheader
  • rowheader

Specifications

Specification
Accessible Rich Internet Applications (WAI-ARIA) # aria-colspan

See also

  • The <th> and <td> colspan attribute
  • aria-colindex property
  • aria-rowspan property
  • cell role
  • columnheader role
  • rowheader role

Help improve MDN

Was this page helpful to you?YesNoLearn how to contribute.

This page was last modified on Jul 25, 2024 by MDN contributors.

View this page on GitHub • Report a problem with this content

Từ khóa » Html Td Colspan Style