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.

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

Tables used for presentation in theme options aren't marked as such #1641

Closed
SteelWagstaff opened this issue Apr 3, 2019 · 11 comments

Comments

Projects
None yet
5 participants
@SteelWagstaff
Copy link
Member

commented Apr 3, 2019

Description

On the theme options menus and on our cloning routine page, we present several sets of options within tables. These tables are used for presentation, but this information is not clearly indicated as such for users of assistive technology. The simplest fix would be to add role="none" to the various <table> elements to allow AT to disregard the tabular structure. In addition, we might also wish to replace tables altogether, dropping row header <th> elements with <label> elements.

SteelWagstaff added a commit to SteelWagstaff/pressbooks that referenced this issue Apr 3, 2019

@SteelWagstaff SteelWagstaff changed the title Table used for presentation in theme options aren't marked as such Tables used for presentation in theme options aren't marked as such Apr 3, 2019

@SteelWagstaff

This comment has been minimized.

Copy link
Member Author

commented Apr 11, 2019

Step 1: Fix this issue w/ javascript (we can't edit HTML directly right now)
Step 2: Open issue with WP -- let them know that these tables are lacking the ARIA attribute they need.
Step 3: Test our proposed javascript "fix" in a screenreader.

@greatislander

This comment has been minimized.

Copy link
Collaborator

commented Apr 11, 2019

@SteelWagstaff There is an existing WordPress issue—can you ping me about this? I can get it on the accessibility meeting agenda for tomorrow.

@connerbw

This comment has been minimized.

Copy link
Member

commented Apr 12, 2019

Step 3: Test our proposed javascript "fix" in a screenreader.

Where we can't directly modify PHP/HTML (WordPress core), I Tested the following in NVDA 2019.1

// Accessibility fix on form tables
$( 'table.form-table' ).attr( 'role', 'none' );

Before: Table X, Row Y, blah blah blah
After: blah blah blah

Works for me.

@greatislander

This comment has been minimized.

Copy link
Collaborator

commented Apr 12, 2019

@connerbw @SteelWagstaff I'm going to be opening a fix for this in core, more to come.

connerbw added a commit to pressbooks/excalibur that referenced this issue Apr 12, 2019

connerbw added a commit to pressbooks/pressbooks-cas-sso that referenced this issue Apr 12, 2019

connerbw added a commit to pressbooks/pressbooks-lti-provider that referenced this issue Apr 12, 2019

connerbw added a commit to pressbooks/pressbooks-saml-sso that referenced this issue Apr 12, 2019

connerbw added a commit to pressbooks/pressbooks-saml-sso that referenced this issue Apr 12, 2019

@greatislander

This comment has been minimized.

Copy link
Collaborator

commented Apr 12, 2019

Ticket, with patch: https://core.trac.wordpress.org/ticket/46899

Should be fairly uncontroversial, as a similar patch was just approved and merged (https://core.trac.wordpress.org/ticket/46725).

@connerbw

This comment has been minimized.

Copy link
Member

commented Apr 12, 2019

@greatislander we had a follow up meeting with Lisa and she said:

The new role="presentation" in aria 1.1 is role="none" which is exactly the same but the newer version of the same thing

Your patch is using role="presentation" but we are switching to role="none" based on our follow up meeting.

Source: https://www.w3.org/TR/wai-aria-1.1/#none

@SteelWagstaff

This comment has been minimized.

Copy link
Member Author

commented Apr 12, 2019

I think they're now considered synonyms, with some semantic web types having a preference for none: https://www.w3.org/TR/using-aria/#presentation

@greatislander

This comment has been minimized.

Copy link
Collaborator

commented Apr 12, 2019

I went with rel="presentation" as the other recent patch addressing the same issue (removing table semantics) did as well. But thanks for the additional info, @connerbw & @SteelWagstaff!

@mcgratay

This comment has been minimized.

Copy link
Member

commented Apr 17, 2019

Table used for presentation on following pages still need role="none":

  • Publish
  • Cover Generator
  • Add New User
  • User Profile Page
  • Sharing and Privacy Settings (from the Settings menu)
  • Export Settings (from the Settings menu)
  • Hypothesis Settings (from the Settings menu)
  • H5P Settings (from the Settings menu)
    Screen Shot 2019-04-17 at 3 01 50 PM
@dannylonglegs

This comment has been minimized.

Copy link
Contributor

commented Apr 17, 2019

@mcgratay mcgratay removed their assignment Apr 17, 2019

connerbw added a commit that referenced this issue Apr 18, 2019

Convert a11y.js file to vanilla js, add attributes for accessibility (#…
…1671)

fix #1636 , fix #1641 

These changes make sure that all tables with the class of form-table receive a `role=none` attribute and that table headers on `wp-list-table`s receive a `role=columnheader`

@connerbw connerbw assigned mcgratay and unassigned connerbw Apr 24, 2019

@mcgratay

This comment has been minimized.

Copy link
Member

commented Apr 24, 2019

Resolved 👍

@mcgratay mcgratay assigned connerbw and unassigned mcgratay Apr 24, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.