CSS ComponentThe latest version of this package is: 17.0.30-alpha.8, Opens in new window
The Comparison Table Component is used to compare insurance products.
This component provides .css
, .styl
, .less
and .scss
-files.
To be able to install this component, please refer to the Project Setup documentation.
$ npm i @ids-core/comparison-table@17.0.30-alpha.8
Person insurances
|
RecommendedStor bil
|
Helförsäkring
|
Halvförsäkring
|
TrafikXtra
|
Trafikförsäkring
|
||||
---|---|---|---|---|---|---|---|---|---|
Trafik personskada | This is included in the product: Stor | This is included in the product: Helförsäkring | This is included in the product: Halvförsäkring | This is included in the product: TrafikXtra | |||||
Trafik annans egendom | This is included in the product: Stor | This is included in the product: Helförsäkring | This is included in the product: Halvförsäkring | ||||||
Stöld av bil | This is included in the product: Stor |
Table of Contents
Edit this section, Opens in new windowUsage
Standard
Person insurances
|
RecommendedStor bil
|
Helförsäkring
|
Halvförsäkring
|
TrafikXtra
|
Trafikförsäkring
|
---|---|---|---|---|---|
Trafik personskada | This is included in the product: Stor | This is included in the product: Helförsäkring | This is included in the product: Halvförsäkring | This is included in the product: TrafikXtra | |
Trafik annans egendom | This is included in the product: Stor | This is included in the product: Helförsäkring | This is included in the product: Halvförsäkring | ||
Stöld av bil | This is included in the product: Stor |
<table class="if comparison-table">
<thead class="if">
<tr class="if">
<th class="if product-title-holder" scope="col">
<div class="if insurance-header">
<span class="if product-title">Product title</span>
</div>
</th>
<th class="if" scope="col">
<div class="if insurance-header">
<span class="if is-recommended">Recommended</span
><span class="if title">Title</span>
</div>
</th>
<th class="if spacer" aria-hidden="true"></th>
<th class="if" scope="col">
<div class="if insurance-header"><span class="if title">Title</span></div>
</th>
<th class="if spacer" aria-hidden="true"></th>
<th class="if" scope="col">
<div class="if insurance-header"><span class="if title">Title</span></div>
</th>
<th class="if spacer" aria-hidden="true"></th>
<th class="if" scope="col">
<div class="if insurance-header"><span class="if title">Title</span></div>
</th>
<th class="if spacer" aria-hidden="true"></th>
<th class="if" scope="col">
<div class="if insurance-header"><span class="if title">Title</span></div>
</th>
</tr>
</thead>
<tbody class="if">
<tr class="if">
<td class="if">Trafik personskada</td>
<td class="if">
<span role="presentation" class="if included"></span
><span class="if axe sr-only">This is included in the product: Stor</span>
</td>
<td class="if spacer" aria-hidden="true"></td>
<td class="if">
<span role="presentation" class="if included"></span
><span class="if axe sr-only">This is included in the product: Helförsäkring</span>
</td>
<td class="if spacer" aria-hidden="true"></td>
<td class="if">
<span role="presentation" class="if included"></span
><span class="if axe sr-only">This is included in the product: Halvförsäkring</span>
</td>
<td class="if spacer" aria-hidden="true"></td>
<td class="if">
<span role="presentation" class="if included"></span
><span class="if axe sr-only">This is included in the product: TrafikXtra</span>
</td>
<td class="if spacer" aria-hidden="true"></td>
<td class="if"></td>
</tr>
…
</tbody>
</table>
Dual
Recommended
|
||||
---|---|---|---|---|
Person insurances
|
Stor bil
|
Helförsäkring
|
Halvförsäkring
|
TrafikXtra
|
Trafik personskada | This is included in the product: Stor | This is included in the product: Helförsäkring | This is included in the product: Halvförsäkring | This is included in the product: TrafikXtra |
Trafik personskada | This is included in the product: Stor | This is included in the product: Helförsäkring | This is included in the product: Halvförsäkring | This is included in the product: TrafikXtra |
Stöld av bil | This is included in the product: Stor |
<table class="if comparison-table dual">
<thead class="if">
<tr class="if">
<th class="if"></th>
<th class="if insurance-header-holder" scope="colgroup" colspan="2">
<div class="if insurance-header">
<span class="if is-recommended">Recommended</span>
</div>
</th>
<th class="if spacer" aria-hidden="true"></th>
<th class="if insurance-header-holder" scope="colgroup" colspan="2"></th>
</tr>
<tr class="if">
<th class="if product-title-holder" scope="col">
<div class="if insurance-header"><span class="if product-title">Title</span></div>
</th>
<th class="if" scope="col">
<div class="if insurance-header">
<span class="if title">Title</span>
</div>
</th>
<th class="if" scope="col">
<div class="if insurance-header"><span class="if title">Title</span></div>
</th>
<th class="if spacer" aria-hidden="true"></th>
<th class="if" scope="col">
<div class="if insurance-header"><span class="if title">Title</span></div>
</th>
<th class="if" scope="col">
<div class="if insurance-header"><span class="if title">Title</span></div>
</th>
</tr>
</thead>
<tbody class="if">
<tr class="if">
<td class="if">Trafik personskada</td>
<td class="if">
<span role="presentation" class="if included"></span
><span class="if axe sr-only">This is included in the product: Stor</span>
</td>
<td class="if">
<span role="presentation" class="if included"></span
><span class="if axe sr-only">This is included in the product: Helförsäkring</span>
</td>
<td class="if spacer" aria-hidden="true"></td>
<td class="if">
<span role="presentation" class="if included"></span
><span class="if axe sr-only">This is included in the product: Halvförsäkring</span>
</td>
<td class="if">
<span role="presentation" class="if included"></span
><span class="if axe sr-only">This is included in the product: TrafikXtra</span>
</td>
</tr>
…
</tbody>
</table>
Expandable
Person insurances
|
RecommendedStor bil
|
Helförsäkring
|
Halvförsäkring
|
TrafikXtra
|
Trafikförsäkring
|
||||
---|---|---|---|---|---|---|---|---|---|
Trafik personskada | This is included in the product: Stor | This is included in the product: Helförsäkring | This is included in the product: Halvförsäkring | This is included in the product: TrafikXtra | |||||
Du får ersättning för dina saker som skadas eller förloras vid inbrott eller skadegörelse i bostaden, vattenläckage, brand eller blixtnedslag. Försäkringsbeloppet är 1,5 miljoner kr om du inte själv valt ett högre belopp. | |||||||||
Trafik personskada | This is included in the product: Stor | This is included in the product: Helförsäkring | This is included in the product: Halvförsäkring | ||||||
Du får ersättning för dina saker som skadas eller förloras vid inbrott eller skadegörelse i bostaden, vattenläckage, brand eller blixtnedslag. Försäkringsbeloppet är 1,5 miljoner kr om du inte själv valt ett högre belopp. | |||||||||
Trafik personskada | This is included in the product: Stor | This is included in the product: Helförsäkring | This is included in the product: Halvförsäkring | ||||||
Du får ersättning för dina saker som skadas eller förloras vid inbrott eller skadegörelse i bostaden, vattenläckage, brand eller blixtnedslag. Försäkringsbeloppet är 1,5 miljoner kr om du inte själv valt ett högre belopp. | |||||||||
Trafik personskada | This is included in the product: Stor | This is included in the product: Helförsäkring | This is included in the product: Halvförsäkring | ||||||
Du får ersättning för dina saker som skadas eller förloras vid inbrott eller skadegörelse i bostaden, vattenläckage, brand eller blixtnedslag. Försäkringsbeloppet är 1,5 miljoner kr om du inte själv valt ett högre belopp. | |||||||||
Trafik personskada | This is included in the product: Stor | This is included in the product: Helförsäkring | This is included in the product: Halvförsäkring | ||||||
Du får ersättning för dina saker som skadas eller förloras vid inbrott eller skadegörelse i bostaden, vattenläckage, brand eller blixtnedslag. Försäkringsbeloppet är 1,5 miljoner kr om du inte själv valt ett högre belopp. | |||||||||
Trafik personskada | This is included in the product: Stor | This is included in the product: Helförsäkring | This is included in the product: Halvförsäkring | ||||||
Du får ersättning för dina saker som skadas eller förloras vid inbrott eller skadegörelse i bostaden, vattenläckage, brand eller blixtnedslag. Försäkringsbeloppet är 1,5 miljoner kr om du inte själv valt ett högre belopp. | |||||||||
Trafik personskada | This is included in the product: Stor | This is included in the product: Helförsäkring | This is included in the product: Halvförsäkring | ||||||
Du får ersättning för dina saker som skadas eller förloras vid inbrott eller skadegörelse i bostaden, vattenläckage, brand eller blixtnedslag. Försäkringsbeloppet är 1,5 miljoner kr om du inte själv valt ett högre belopp. | |||||||||
Stöld av bil | This is included in the product: Stor | ||||||||
Du får ersättning för dina saker som skadas eller förloras vid inbrott eller skadegörelse i bostaden, vattenläckage, brand eller blixtnedslag. Försäkringsbeloppet är 1,5 miljoner kr om du inte själv valt ett högre belopp. |
<table class="if comparison-table expandable">
<thead class="if">
<tr class="if">
<th scope="col" class="if product-title-holder">
<div class="if insurance-header">
<span class="if product-title">Person insurances</span>
</div>
</th>
<th scope="col" class="if">
<div class="if insurance-header">
<span class="if is-recommended">Recommended</span
><span class="if title">Stor bil</span>
</div>
</th>
<th class="if spacer" aria-hidden="true"></th>
<th scope="col" class="if">
<div class="if insurance-header"><span class="if title">Helförsäkring</span></div>
</th>
…
</tr>
</thead>
<tbody class="if">
<tr class="if expandable">
<td class="if"><span class="if" role="button" aria-controls="description-1" aria-expanded="false" tabindex="0">Trafik personskada</span></td>
<td class="if">
<span role="presentation" class="if included"></span
><span class="if axe sr-only">This is included in the product: Stor</span>
</td>
…
</tr>
<tr class="if" id="description-1">
<td class="if" colspan="10">
Du får ersättning för dina saker som skadas eller förloras vid inbrott eller skadegörelse i
bostaden, vattenläckage, brand eller blixtnedslag. Försäkringsbeloppet är 1,5 miljoner kr om du
inte själv valt ett högre belopp.
</td>
</tr>
<tr class="if expandable is-expanded">
<td class="if"><span class="if" role="button" aria-controls="description-2" aria-expanded="true" tabindex="0">Trafik personskada</span></td>
<td class="if">
<span role="presentation" class="if included"></span
><span class="if axe sr-only">This is included in the product: Stor</span>
</td>
…
</tr>
<tr class="if" id="description-2">
<td class="if" colspan="10">
Du får ersättning för dina saker som skadas eller förloras vid inbrott eller skadegörelse i
bostaden, vattenläckage, brand eller blixtnedslag. Försäkringsbeloppet är 1,5 miljoner kr om du
inte själv valt ett högre belopp.
</td>
</tr>
</tbody>
</table>
Accessibility
Sighted users can visually scan a table. They can quickly make visual associations between data in the table and their appropriate row and/or column headers.
Someone that cannot see the table cannot make these visual associations, so proper markup must be used to make a programmatic association between elements within the table. When the proper HTML markup is in place, users of screen readers can navigate through comparison table one cell at a time, and they will hear the column and row headers spoken to them.
Considerations
- The comparison table headers accurately describe the data contained in the rows and columns.
- If the comparison table has a labels it should be clear and concise.
- If the comparison table has a description, aria-describedby should be set on the table element with a value referring to the element containing the description.
To meet the WCAG 2.1 requirements, every table must have the correct attributes set.
Label
Every table should have a label. If it's a separate element, use aria-labelledby
; otherwise use aria-label
:
<table class="if table" aria-label="A label"></table>
Or:
<table class="if table" aria-labelledby="id-to-label-element"></table>
Description
Not every table needs to have a caption or description, but every table that does should use aria-describedby
to connect it with that element:
<table class="if table" aria-describedby="id-to-description-element"></table>
Identify column and row headers
Identify the direction of the table headers. If the headers are horizontally, use scope="col"
on the th
s:
The headers are in the first row
Header | Header | Header | Header |
---|---|---|---|
Cell | |||
Cell | |||
Cell |
<table class="if comparison-table" …>
<thead class="if">
<tr class="if">
<th class="if" scope="col">…</th>
<th class="if" scope="col">…</th>
<th class="if" scope="col">…</th>
<th class="if" scope="col">…</th>
</tr>
</thead>
</table>
If the header cell spans more than one column, use scope="colgroup"
.
The header spans two columns
Header | ||
---|---|---|
Cell | ||
Cell | ||
Cell |
<table class="if" …>
<tbody class="if">
<tr class="if">
<th class="if">…</th>
<th class="if" scope="colgroup" colspan="2">…</th> </tr>
</tbody>
</table>
If the column header changes in the middle of the table, make sure that each data cell is associated
with the correct header. Each th
element must have a unique id
and each td
cell must have a headers
attribute that lists the id values of the associated header cells.
Table with multiple headers in one column
Header | Header | Header | Header |
---|---|---|---|
Cell | |||
Cell | |||
Cell | |||
Header | |||
Cell | |||
Cell | |||
Cell |
<table class="if">
<thead class="if">
<th id="header-1" scope="col">Header</th> …
</thead>
<tbody class="if">
<tr class="if">
<td headers="header-1" class="if">Cell</td> <td headers="header-1" class="if">Cell</td>
<td headers="header-1" class="if">Cell</td>
</tr>
<tr>
<th id="header-2" class="if" scope="col">Header</th> <td headers="header-2" class="if">Cell</td> <td headers="header-2" class="if">Cell</td>
…
</tr>
</tbody>
</table>
Expandable table
- The first cell of each row contains a disclosure button that controls the visibility of the hidden content.
- When the controlled content is hidden, the button is styled with a down-pointing arrow to hint that activating the button will display additional content. When the content is visible, the arrow points up.
- When the content is visible, the disclosure button must have
aria-expanded
attribute set to true. When the content area is hidden, it should be set to false. - The disclosure button must have
aria-controls
attribute that refers to element that contains all the content that is shown or hidden. - To activate the disclosure button and toggle the visibility of the disclosure content, user can use button "Enter" or "Space".
Table with expandable rows
Header | Header | Header |
---|---|---|
Cell | ||
Donec auctor arcu vel diam facilisis, ultricies efficitur libero condimentum. Proin volutpat ac justo ac efficitur. | ||
Cell | ||
Donec auctor arcu vel diam facilisis, ultricies efficitur libero condimentum. Proin volutpat ac justo ac efficitur. | ||
Cell | ||
Donec auctor arcu vel diam facilisis, ultricies efficitur libero condimentum. Proin volutpat ac justo ac efficitur. |
<table class="if comparison-table expandable">
<tbody class="if">
…
<tr class="if expandable is-expanded">
<td class="if">
<span
class="if"
role="button"
aria-controls="description-2" aria-expanded="true" tabindex="0"
>...</span>
</td>
…
</tr>
<tr class="if" id="description-2"> <td class="if" colspan="3">
<p class="if">
Donec auctor arcu vel diam facilisis, ultricies efficitur libero condimentum. Proin
volutpat ac justo ac efficitur.
</p>
</td>
</tr>
</tbody>
</table>
Announcements
- Inform the user that the table contains expandable rows or table can be sorted after each column, by adding
aria-describedby
attribute. - Let the user know if the hidden content is visible or not after pressing the disclosure button.
The rule that applies to layout tables also applies to data tables. Let the browser window determine the width of the table whenever possible, to reduce the horizontal scrolling required of those with low vision. If cell widths need to be defined, use relative values, such a percentages, rather than pixel values. Defined cell heights should generally be avoided so the cell can expand downward to accommodate its content - something especially useful for users with low vision that may enlarge text content.
Resources
- W3C WAI-ARIA Authoring Practices Table Design Pattern covers the usage of ARIA names, state and roles, as well as the expected keyboard intractions.
- W3C Tutorial - Table Concepts covers the usage of various tables, headers, and captions.
Tokens
Comparison Table tokens
Name | Value | Is aliased in |
---|---|---|
$ids-comparison-table-cell-border |
none |
|
$ids-comparison-table-background-color-default |
transparent |
|
$ids-comparison-table-background-color-vertical |
rgba(232,224,217,0.2) |
|
$ids-comparison-table-background-color-intersection |
rgba(232,224,217,0.6) |
|
$ids-comparison-table-background-color-horizontal |
rgba(232,224,217,0.2) |
|
$ids-comparison-table-spacer-min-width |
1.25rem |
|
$ids-comparison-table-title-holder-min-width |
20rem |
|
$ids-comparison-table-title-font-size |
1rem |
|
$ids-comparison-table-header-min-height |
4rem |
|
$ids-comparison-table-expandable-padding-left |
4rem |
|
$ids-comparison-table-expandable-background-position |
left 1rem center |
|
$ids-comparison-table-expandable-background-size |
2rem |
|
$ids-comparison-table-expandable-background-image-closed |
url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Ctitle%3Esmall down%3C/title%3E%3Cg class=%27nc-icon-wrapper%27 stroke-linecap=%27square%27 stroke-linejoin=%27miter%27 stroke-width=%271.5%27 fill=%27%230054f0%27 stroke=%27%230054f0%27%3E%3Cpolyline fill=%27none%27 stroke=%27%230054f0%27 stroke-miterlimit=%2710%27 points=%2722,13 16,19 10,13 %27/%3E%3C/g%3E%3C/svg%3E") |
|
$ids-comparison-table-expandable-background-image-opened |
url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Ctitle%3Esmall up%3C/title%3E%3Cg class=%27nc-icon-wrapper%27 stroke-linecap=%27square%27 stroke-linejoin=%27miter%27 stroke-width=%271.5%27 fill=%27%230054f0%27 stroke=%27%230054f0%27%3E%3Cpolyline fill=%27none%27 stroke=%27%230054f0%27 stroke-miterlimit=%2710%27 points=%2710,19 16,13 22,19 %27/%3E%3C/g%3E%3C/svg%3E") |
|
$ids-comparison-table-expandable-button-padding |
1rem 4rem |
|
$ids-comparison-table-expanded-padding-right |
3rem |
|
$ids-comparison-table-expanded-background-color |
rgb(250, 249, 247) |
|
$ids-comparison-table-included-dimension |
1.25rem |
|
$ids-comparison-table-included-background-color |
rgb(0, 84, 240) |
|
$ids-comparison-table-included-background-size |
10px |
|
$ids-comparison-table-included-background-image |
url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Ctitle%3Echeck%3C/title%3E%3Cg class=%27nc-icon-wrapper%27 stroke-linecap=%27square%27 stroke-linejoin=%27miter%27 stroke-width=%274%27 fill=%27%23faf9f7%27 stroke=%27%23faf9f7%27%3E%3Cpolyline points=%272 16 11 25 30 6%27 fill=%27none%27 stroke=%27%23faf9f7%27 stroke-miterlimit=%2710%27/%3E%3C/g%3E%3C/svg%3E") |
|
$ids-comparison-table-recommended-font-size |
1rem |
|
$ids-comparison-table-recommended-color-text |
rgb(173, 66, 0) |
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
15.0.1 (2022-12-09)
⚠ BREAKING CHANGES
- Added button to comparison table expansion trigger, improve helper/aria HTML tags
for all tables
666329
- Merged PR 98423: fix(table, comparison-table): improve A11Y of table and comparison table comp... (947545f), closes #666329
14.24.5 (2022-06-17)
Bug Fixes
- comparison-table: add data-table variables into comparison-table (67306a3)
14.22.2 (2022-05-03)
Miscellaneous chores
- package locks: update package locks (813eac7)
14.20.1 (2022-04-19)
Miscellaneous chores
- changelog: regenerate all CHANGELOG.md files (64ab385) , closes #586342
- changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270
14.18.3 (2022-04-13)
Bug Fixes
- changelog: generate new CHANGELOG.md files for root and
packages (349fda4)
,
closes #586063
. We regenerate the files to include all relevant commits and to use
conventional-commits
at 100%
14.16.0 (2022-04-07)
Bug Fixes
14.13.0 (2022-04-06)
Bug Fixes
- 🐛 Encode data-value in design token documentation (85737c6)
14.9.0 (2022-03-03)
Bug Fixes
- 🐛 Add missing CHANGELOG.md in files (3e4c089)
Miscellaneous chores
- 🤖 Bootstrap (6822f5b)
14.8.1 (2022-02-23)
Bug Fixes
reinstall (d425056)
bootstrap (9a713df)
merge (2b1c5f1)
reinstall (5221600)
14.5.0 (2022-02-15)
Code Refactoring
-
update generation (5844ce4)
reinstall (147df55)
14.3.0 (2022-02-09)
Features
Bug Fixes
-
Set default cursor to table headings (945a1b7)
reinstall (aae7082)
- Working on it (17da0cb)