Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[accessibility] Row names (i.e., stub) have to use <th> tag #678

Closed
jooyoungseo opened this issue Nov 8, 2020 · 4 comments
Closed

[accessibility] Row names (i.e., stub) have to use <th> tag #678

jooyoungseo opened this issue Nov 8, 2020 · 4 comments
Assignees
@rich-iannone @jooyoungseo
Labels
Difficulty: [2] Intermediate Effort: [2] Medium Focus: Accessibility Priority: [3] High Type: ★ Enhancement
Milestone
v0.7.0

Comments

@jooyoungseo
Copy link
Collaborator

jooyoungseo commented Nov 8, 2020 •
edited

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
@rich-iannone rich-iannone self-assigned this Nov 8, 2020
@rich-iannone rich-iannone added this to the v0.3.0 milestone Nov 8, 2020
@rich-iannone
Copy link
Member

Thanks @jooyoungseo ! I'll definitely get this change made soon when I start on the accessibility pass. If you find any more aspects of HTML tables that are suboptimal for accessibility, please file those as issues as well.

@jooyoungseo
Copy link
Collaborator Author

Thanks, @rich-iannone! I have found some more that I will also file soon.

What about we create a new label "Accessibility" to easily track down?

@rich-iannone
Copy link
Member

I was just thinking that! I'll make that label and apply it to this issue (and previous ones).

@rich-iannone rich-iannone changed the title Row names (i.e., stub) have to use <th> tag for accessibility [accessibility] Row names (i.e., stub) have to use <th> tag Nov 8, 2020
@jooyoungseo jooyoungseo mentioned this issue Nov 8, 2020
Closed
@rich-iannone rich-iannone modified the milestones: v0.3.1, v0.4.0 Jun 21, 2021
@rich-iannone rich-iannone modified the milestones: v0.4.0, v0.5.0 Jan 26, 2022
@rich-iannone rich-iannone modified the milestones: v0.5.0, v0.6.0 Mar 1, 2022
@batpigandme batpigandme mentioned this issue Apr 19, 2022
Closed
@rich-iannone rich-iannone modified the milestones: v0.6.0, v0.7.0 Apr 19, 2022
@rich-iannone rich-iannone modified the milestones: v0.6.0, v0.7.0 May 18, 2022
@batpigandme batpigandme mentioned this issue May 31, 2022
Open
@jooyoungseo jooyoungseo self-assigned this Jun 20, 2022
@jooyoungseo jooyoungseo mentioned this issue Jul 2, 2022
Merged
rich-iannone added a commit that referenced this issue Jul 5, 2022
@rich-iannone
Merge pull request #979 from jooyoungseo/gt_stub
c70f65c 
[Accessibility] Closing #678: Use <th scope="row"> for gt_stub
@rich-iannone
Copy link
Member

Now that #979 is merged, I'm closing this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@rich-iannone rich-iannone

@jooyoungseo jooyoungseo

Labels
Difficulty: [2] Intermediate Effort: [2] Medium Focus: Accessibility Priority: [3] High Type: ★ Enhancement
Projects
None yet
Milestone
v0.7.0
Development

No branches or pull requests
2 participants
@rich-iannone @jooyoungseo