Skip to content

[accessibility] Replace <th> with <td> for both title and subtitle elements #679

@jooyoungseo

Description

@jooyoungseo

Currently, title and subtitle arguments in gt::tab_header() are rendered as <th> tag for html output.

However, please use <td> and just rely on css for their visual aspects.

<th> is semantically associated with either column or row headers, so using <th> tag for title and subtitle causes significant confusion for assistive technologies (e.g., screen readers or robots).

Now that we surround title and subtitle inside <thead>, that suffices.

Reprex

# Load package
library(gt)

# Create gt table with title and subtitle
airquality[1:10, ] %>%
  gt::gt() %>%
  gt::tab_header(
    title = "Title",
    subtitle = "Subtitle"
  )
<style>html { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif; } #lgryvgugsx .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; } #lgryvgugsx .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; } #lgryvgugsx .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; border-bottom-color: #FFFFFF; border-bottom-width: 0; } #lgryvgugsx .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 0; padding-bottom: 4px; border-top-color: #FFFFFF; border-top-width: 0; } #lgryvgugsx .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; } #lgryvgugsx .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; } #lgryvgugsx .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; } #lgryvgugsx .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; } #lgryvgugsx .gt_column_spanner_outer:first-child { padding-left: 0; } #lgryvgugsx .gt_column_spanner_outer:last-child { padding-right: 0; } #lgryvgugsx .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%; } #lgryvgugsx .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; } #lgryvgugsx .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; } #lgryvgugsx .gt_from_md > :first-child { margin-top: 0; } #lgryvgugsx .gt_from_md > :last-child { margin-bottom: 0; } #lgryvgugsx .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; } #lgryvgugsx .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; } #lgryvgugsx .gt_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; } #lgryvgugsx .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; } #lgryvgugsx .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; } #lgryvgugsx .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; } #lgryvgugsx .gt_striped { background-color: rgba(128, 128, 128, 0.05); } #lgryvgugsx .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; } #lgryvgugsx .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; } #lgryvgugsx .gt_footnote { margin: 0px; font-size: 90%; padding: 4px; } #lgryvgugsx .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; } #lgryvgugsx .gt_sourcenote { font-size: 90%; padding: 4px; } #lgryvgugsx .gt_left { text-align: left; } #lgryvgugsx .gt_center { text-align: center; } #lgryvgugsx .gt_right { text-align: right; font-variant-numeric: tabular-nums; } #lgryvgugsx .gt_font_normal { font-weight: normal; } #lgryvgugsx .gt_font_bold { font-weight: bold; } #lgryvgugsx .gt_font_italic { font-style: italic; } #lgryvgugsx .gt_super { font-size: 65%; } #lgryvgugsx .gt_footnote_marks { font-style: italic; font-size: 65%; } </style>
Title
Subtitle
Ozone Solar.R Wind Temp Month Day
41 190 7.4 67 5 1
36 118 8.0 72 5 2
12 149 12.6 74 5 3
18 313 11.5 62 5 4
NA NA 14.3 56 5 5
28 NA 14.9 66 5 6
23 299 8.6 65 5 7
19 99 13.8 59 5 8
8 19 20.1 61 5 9
NA 194 8.6 69 5 10

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

Metadata

Metadata

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions