Currently, stub (AKA, row names) are denoted with <td> tag for html output.
However, this is not a recommended practice for accessibility purpose.
As of writing this issue, the row names are not auto-announced when navigating row by row with screen readers.
Please consider using <th> instead. That will resolve this issue.
Plus, ideally, it would be best if we could add scope = "row" attribute as well.
Please consult with this technical spec.
Reprex
# Load required packages
library(dplyr)
#>
#> Attaching package: 'dplyr'
#> The following objects are masked from 'package:stats':
#>
#> filter, lag
#> The following objects are masked from 'package:base':
#>
#> intersect, setdiff, setequal, union
library(gt)
# Create a tibble
islands_tbl <-
dplyr::tibble(
name = names(islands),
size = islands
) %>%
dplyr::arrange(desc(size)) %>%
dplyr::slice(1:10)
# Make a gt table with row names (i.e., stub)
islands_tbl %>%
gt::gt(rowname_col = "name")
<style>html {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
}
#yfykbqqfcc .gt_table {
display: table;
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
color: #333333;
font-size: 16px;
font-weight: normal;
font-style: normal;
background-color: #FFFFFF;
width: auto;
border-top-style: solid;
border-top-width: 2px;
border-top-color: #A8A8A8;
border-right-style: none;
border-right-width: 2px;
border-right-color: #D3D3D3;
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: #A8A8A8;
border-left-style: none;
border-left-width: 2px;
border-left-color: #D3D3D3;
}
#yfykbqqfcc .gt_heading {
background-color: #FFFFFF;
text-align: center;
border-bottom-color: #FFFFFF;
border-left-style: none;
border-left-width: 1px;
border-left-color: #D3D3D3;
border-right-style: none;
border-right-width: 1px;
border-right-color: #D3D3D3;
}
#yfykbqqfcc .gt_title {
color: #333333;
font-size: 125%;
font-weight: initial;
padding-top: 4px;
padding-bottom: 4px;
border-bottom-color: #FFFFFF;
border-bottom-width: 0;
}
#yfykbqqfcc .gt_subtitle {
color: #333333;
font-size: 85%;
font-weight: initial;
padding-top: 0;
padding-bottom: 4px;
border-top-color: #FFFFFF;
border-top-width: 0;
}
#yfykbqqfcc .gt_bottom_border {
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: #D3D3D3;
}
#yfykbqqfcc .gt_col_headings {
border-top-style: solid;
border-top-width: 2px;
border-top-color: #D3D3D3;
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: #D3D3D3;
border-left-style: none;
border-left-width: 1px;
border-left-color: #D3D3D3;
border-right-style: none;
border-right-width: 1px;
border-right-color: #D3D3D3;
}
#yfykbqqfcc .gt_col_heading {
color: #333333;
background-color: #FFFFFF;
font-size: 100%;
font-weight: normal;
text-transform: inherit;
border-left-style: none;
border-left-width: 1px;
border-left-color: #D3D3D3;
border-right-style: none;
border-right-width: 1px;
border-right-color: #D3D3D3;
vertical-align: bottom;
padding-top: 5px;
padding-bottom: 6px;
padding-left: 5px;
padding-right: 5px;
overflow-x: hidden;
}
#yfykbqqfcc .gt_column_spanner_outer {
color: #333333;
background-color: #FFFFFF;
font-size: 100%;
font-weight: normal;
text-transform: inherit;
padding-top: 0;
padding-bottom: 0;
padding-left: 4px;
padding-right: 4px;
}
#yfykbqqfcc .gt_column_spanner_outer:first-child {
padding-left: 0;
}
#yfykbqqfcc .gt_column_spanner_outer:last-child {
padding-right: 0;
}
#yfykbqqfcc .gt_column_spanner {
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: #D3D3D3;
vertical-align: bottom;
padding-top: 5px;
padding-bottom: 6px;
overflow-x: hidden;
display: inline-block;
width: 100%;
}
#yfykbqqfcc .gt_group_heading {
padding: 8px;
color: #333333;
background-color: #FFFFFF;
font-size: 100%;
font-weight: initial;
text-transform: inherit;
border-top-style: solid;
border-top-width: 2px;
border-top-color: #D3D3D3;
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: #D3D3D3;
border-left-style: none;
border-left-width: 1px;
border-left-color: #D3D3D3;
border-right-style: none;
border-right-width: 1px;
border-right-color: #D3D3D3;
vertical-align: middle;
}
#yfykbqqfcc .gt_empty_group_heading {
padding: 0.5px;
color: #333333;
background-color: #FFFFFF;
font-size: 100%;
font-weight: initial;
border-top-style: solid;
border-top-width: 2px;
border-top-color: #D3D3D3;
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: #D3D3D3;
vertical-align: middle;
}
#yfykbqqfcc .gt_from_md > :first-child {
margin-top: 0;
}
#yfykbqqfcc .gt_from_md > :last-child {
margin-bottom: 0;
}
#yfykbqqfcc .gt_row {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 5px;
padding-right: 5px;
margin: 10px;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #D3D3D3;
border-left-style: none;
border-left-width: 1px;
border-left-color: #D3D3D3;
border-right-style: none;
border-right-width: 1px;
border-right-color: #D3D3D3;
vertical-align: middle;
overflow-x: hidden;
}
#yfykbqqfcc .gt_stub {
color: #333333;
background-color: #FFFFFF;
font-size: 100%;
font-weight: initial;
text-transform: inherit;
border-right-style: solid;
border-right-width: 2px;
border-right-color: #D3D3D3;
padding-left: 12px;
}
#yfykbqqfcc .gt_summary_row {
color: #333333;
background-color: #FFFFFF;
text-transform: inherit;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 5px;
padding-right: 5px;
}
#yfykbqqfcc .gt_first_summary_row {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 5px;
padding-right: 5px;
border-top-style: solid;
border-top-width: 2px;
border-top-color: #D3D3D3;
}
#yfykbqqfcc .gt_grand_summary_row {
color: #333333;
background-color: #FFFFFF;
text-transform: inherit;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 5px;
padding-right: 5px;
}
#yfykbqqfcc .gt_first_grand_summary_row {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 5px;
padding-right: 5px;
border-top-style: double;
border-top-width: 6px;
border-top-color: #D3D3D3;
}
#yfykbqqfcc .gt_striped {
background-color: rgba(128, 128, 128, 0.05);
}
#yfykbqqfcc .gt_table_body {
border-top-style: solid;
border-top-width: 2px;
border-top-color: #D3D3D3;
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: #D3D3D3;
}
#yfykbqqfcc .gt_footnotes {
color: #333333;
background-color: #FFFFFF;
border-bottom-style: none;
border-bottom-width: 2px;
border-bottom-color: #D3D3D3;
border-left-style: none;
border-left-width: 2px;
border-left-color: #D3D3D3;
border-right-style: none;
border-right-width: 2px;
border-right-color: #D3D3D3;
}
#yfykbqqfcc .gt_footnote {
margin: 0px;
font-size: 90%;
padding: 4px;
}
#yfykbqqfcc .gt_sourcenotes {
color: #333333;
background-color: #FFFFFF;
border-bottom-style: none;
border-bottom-width: 2px;
border-bottom-color: #D3D3D3;
border-left-style: none;
border-left-width: 2px;
border-left-color: #D3D3D3;
border-right-style: none;
border-right-width: 2px;
border-right-color: #D3D3D3;
}
#yfykbqqfcc .gt_sourcenote {
font-size: 90%;
padding: 4px;
}
#yfykbqqfcc .gt_left {
text-align: left;
}
#yfykbqqfcc .gt_center {
text-align: center;
}
#yfykbqqfcc .gt_right {
text-align: right;
font-variant-numeric: tabular-nums;
}
#yfykbqqfcc .gt_font_normal {
font-weight: normal;
}
#yfykbqqfcc .gt_font_bold {
font-weight: bold;
}
#yfykbqqfcc .gt_font_italic {
font-style: italic;
}
#yfykbqqfcc .gt_super {
font-size: 65%;
}
#yfykbqqfcc .gt_footnote_marks {
font-style: italic;
font-size: 65%;
}
</style>
|
|
size
|
|
Asia
|
16988
|
|
Africa
|
11506
|
|
North America
|
9390
|
|
South America
|
6795
|
|
Antarctica
|
5500
|
|
Europe
|
3745
|
|
Australia
|
2968
|
|
Greenland
|
840
|
|
New Guinea
|
306
|
|
Borneo
|
280
|
Created on 2020-11-07 by the reprex package (v0.3.0.9001)
Session info
sessioninfo::session_info()
#> - Session info ---------------------------------------------------------------
#> setting value
#> version R version 4.0.3 (2020-10-10)
#> os Windows 10 x64
#> system x86_64, mingw32
#> ui RTerm
#> language (EN)
#> collate English_United States.1252
#> ctype English_United States.1252
#> tz America/New_York
#> date 2020-11-07
#>
#> - Packages -------------------------------------------------------------------
#> package * version date lib source
#> assertthat 0.2.1 2019-03-21 [1] CRAN (R 4.0.3)
#> backports 1.1.10 2020-09-15 [1] CRAN (R 4.0.3)
#> checkmate 2.0.0 2020-02-06 [1] CRAN (R 4.0.3)
#> cli 2.1.0 2020-10-12 [1] CRAN (R 4.0.3)
#> colorspace 1.4-1 2019-03-18 [1] CRAN (R 4.0.3)
#> crayon 1.3.4 2017-09-16 [1] CRAN (R 4.0.3)
#> digest 0.6.27 2020-10-24 [1] CRAN (R 4.0.3)
#> dplyr * 1.0.2 2020-08-18 [1] CRAN (R 4.0.3)
#> ellipsis 0.3.1 2020-05-15 [1] CRAN (R 4.0.3)
#> evaluate 0.14 2019-05-28 [1] CRAN (R 4.0.3)
#> fansi 0.4.1 2020-01-08 [1] CRAN (R 4.0.3)
#> fs 1.5.0 2020-07-31 [1] CRAN (R 4.0.3)
#> generics 0.1.0 2020-10-31 [1] CRAN (R 4.0.3)
#> ggplot2 3.3.2 2020-06-19 [1] CRAN (R 4.0.3)
#> glue 1.4.2 2020-08-27 [1] CRAN (R 4.0.3)
#> gt * 0.2.2 2020-11-07 [1] Github (rstudio/gt@6287519)
#> gtable 0.3.0 2019-03-25 [1] CRAN (R 4.0.3)
#> highr 0.8 2019-03-20 [1] CRAN (R 4.0.3)
#> htmltools 0.5.0.9002 2020-11-01 [1] Github (rstudio/htmltools@0741213)
#> knitr 1.30.2 2020-10-25 [1] local
#> lifecycle 0.2.0 2020-03-06 [1] CRAN (R 4.0.3)
#> magrittr 1.5 2014-11-22 [1] CRAN (R 4.0.3)
#> munsell 0.5.0 2018-06-12 [1] CRAN (R 4.0.3)
#> pillar 1.4.6 2020-07-10 [1] CRAN (R 4.0.3)
#> pkgconfig 2.0.3 2019-09-22 [1] CRAN (R 4.0.3)
#> purrr 0.3.4 2020-04-17 [1] CRAN (R 4.0.3)
#> R.cache 0.14.0 2019-12-06 [1] CRAN (R 4.0.3)
#> R.methodsS3 1.8.1 2020-08-26 [1] CRAN (R 4.0.3)
#> R.oo 1.24.0 2020-08-26 [1] CRAN (R 4.0.3)
#> R.utils 2.10.1 2020-08-26 [1] CRAN (R 4.0.3)
#> R6 2.5.0 2020-10-28 [1] CRAN (R 4.0.3)
#> rappdirs 0.3.1 2016-03-28 [1] CRAN (R 4.0.3)
#> rematch2 2.1.2 2020-05-01 [1] CRAN (R 4.0.3)
#> reprex 0.3.0.9001 2020-10-25 [1] Github (tidyverse/reprex@d3fc4b8)
#> rlang 0.4.8 2020-10-08 [1] CRAN (R 4.0.3)
#> rmarkdown 2.5.3 2020-11-04 [1] Github (rstudio/rmarkdown@bb7d952)
#> sass 0.2.0.9005 2020-11-04 [1] Github (rstudio/sass@fef1d25)
#> scales 1.1.1 2020-05-11 [1] CRAN (R 4.0.3)
#> sessioninfo 1.1.1 2018-11-05 [1] CRAN (R 4.0.3)
#> stringi 1.5.3 2020-09-09 [1] CRAN (R 4.0.3)
#> stringr 1.4.0 2019-02-10 [1] CRAN (R 4.0.3)
#> styler 1.3.2 2020-02-23 [1] CRAN (R 4.0.3)
#> tibble 3.0.4 2020-10-12 [1] CRAN (R 4.0.3)
#> tidyselect 1.1.0 2020-05-11 [1] CRAN (R 4.0.3)
#> vctrs 0.3.4 2020-08-29 [1] CRAN (R 4.0.3)
#> withr 2.3.0 2020-09-22 [1] CRAN (R 4.0.3)
#> xfun 0.19.3 2020-11-06 [1] Github (yihui/xfun@12e77f5)
#> yaml 2.2.1 2020-02-01 [1] CRAN (R 4.0.3)
#>
#> [1] C:/Program Files/R/R-4.0.3/library
Currently,
stub(AKA, row names) are denoted with<td>tag for html output.However, this is not a recommended practice for accessibility purpose.
As of writing this issue, the row names are not auto-announced when navigating row by row with screen readers.
Please consider using
<th>instead. That will resolve this issue.Plus, ideally, it would be best if we could add scope = "row" attribute as well.
Please consult with this technical spec.
Reprex
Created on 2020-11-07 by the reprex package (v0.3.0.9001)
Session info