Make WordPress Core

Opened 6 years ago

Closed 5 years ago

#47390 closed defect (bug) (fixed)

Improve accessibility of forms elements within some "form-table" forms

Reported by: afercia's profile afercia Owned by: afercia's profile afercia
Milestone: 5.2.3 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-patch has-screenshots needs-testing fixed-major
Focuses: accessibility, multisite, privacy Cc:

Description

Follow-up to #46899.

In #46899, an attribute role="presentation" was added to most of the form-table used in the admin pages. These tables contain forms and in most of the cases they are used just for layout purposes. The role="presentation" helps in removing the table semantics where appropriate.

Note: this should be considered a temporary improvement, pending decision on the proposal to entirely remove layout tables from WordPress. See #16413, #18801, #39441, and the explorations made on https://github.com/wpaccessibility/settings-api-enhanced.

That said, there are a few cases where the semantics of these forms within tables can be improved. I'm working on a patch to address these cases.

Attachments (5)

47390.diff (15.4 KB) - added by afercia 6 years ago.
01 select before.png (53.8 KB) - added by afercia 6 years ago.
select privacy page before
02 select after.png (44.3 KB) - added by afercia 6 years ago.
select privacy page after
03 change before.png (58.6 KB) - added by afercia 6 years ago.
change privacy page before
04 change after.png (50.8 KB) - added by afercia 6 years ago.
change privacy page after

Download all attachments as: .zip

Change History (11)

@afercia
6 years ago

#1 @afercia
6 years ago

  • Keywords has-patch has-screenshots added

47390.diff does the following:

  • adds role="presentation" to the edit comment layout table
  • removes a few pointless <fieldset> elements
  • adds a few missing <label> elements, especially on some network admin pages
  • adds the CSS class class="td-full" to table rows spanning to multiple cells
  • adds explicit scope="row" attribute to the table headers in options-permalink.php: this table is better communicated as data table
  • consistently use label association in the "Privacy Settings" page, see attached screenshots
  • in the installation "Set up your database connection" page: associates descriptions to their inout fields using aria-describedby
  • improves the link to gravatar.com in the user-edit.php page

Re: the "Privacy Settings" page, the select label should be the bold text in the left column. I'd like to propose to remove Select an existing page: and just use the left column text as the <label>, also for consistency with all the similar settings tables in the admin. See attached screenshots.

@afercia
6 years ago

select privacy page before

@afercia
6 years ago

select privacy page after

@afercia
6 years ago

change privacy page before

@afercia
6 years ago

change privacy page after

#2 @afercia
6 years ago

  • Focuses privacy added

#3 @afercia
6 years ago

  • Focuses multisite added

#4 @afercia
6 years ago

  • Owner set to afercia
  • Resolution set to fixed
  • Status changed from new to closed

In 45416:

Accessibility: Improve settings tables and forms after [45403].

  • adds role="presentation" to the edit comment table
  • removes a few pointless <fieldset> elements
  • adds a few missing <label> elements
  • adds the CSS class class="td-full" to table rows spanning to multiple cells
  • adds explicit scope="row" attribute to the table headers in options-permalink.php: this table is better communicated as data table
  • uses consistent label association in the "Privacy Settings" page
  • in the installation page "Set up your database connection": associates descriptions to their inout fields using aria-describedby
  • improves the link to gravatar.com in the user-edit.php page

See #46899.
Fixes #47390.

#5 @JeffPaul
5 years ago

  • Keywords needs-testing fixed-major added
  • Milestone changed from 5.3 to 5.2.3
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening this so it can be back-ported to the 5.2 branch, also needs testing to validate if this ticket is good to land in 5.2.3.

#6 @SergeyBiryukov
5 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 45835:

Accessibility: Improve settings tables and forms after [45403].

  • adds role="presentation" to the edit comment table
  • removes a few pointless <fieldset> elements
  • adds a few missing <label> elements
  • adds the CSS class class="td-full" to table rows spanning to multiple cells
  • adds explicit scope="row" attribute to the table headers in options-permalink.php: this table is better communicated as data table
  • uses consistent label association in the "Privacy Settings" page
  • in the installation page "Set up your database connection": associates descriptions to their inout fields using aria-describedby
  • improves the link to gravatar.com in the user-edit.php page

Props afercia.
Merges [45416] to the 5.2 branch.
See #46899.
Fixes #47390.

Note: See TracTickets for help on using tickets.