Make WordPress Core

Opened 13 years ago

Last modified 16 months ago

#18801 accepted enhancement

Accessibility Enhancements to Settings API

Reported by: taupecat's profile taupecat Owned by: joedolson's profile joedolson
Milestone: Future Release Priority: high
Severity: normal Version: 3.2.1
Component: Options, Meta APIs Keywords: has-patch settings-api
Focuses: accessibility Cc:

Description

I've only started working with the Settings API, but right off the bat I noticed two fairly major, but should be not too difficult to fix, accessibility issues.

1) The label/input field pairs are missing the HTML <label> tags that link the two.

Example: Field One <input id="field_one" name="field_one" type="text">
Should be rendered: <label for="field_one">Field One</label> <input id="field_one" name="field_one" type="text">

2) The settings pages themselves are laid out using a table. Tables should be reserved for tabular data, and not for page layout. CSS should be used for layout instead.

Thanks for your attention.

Attachments (2)

18801.diff (637 bytes) - added by sabreuse 12 years ago.
18801.2.diff (634 bytes) - added by sabreuse 12 years ago.

Download all attachments as: .zip

Change History (34)

#1 @RyanMurphy
13 years ago

Related to (duplicate of?): #16413, #18285

#2 @taupecat
12 years ago

  • Owner set to taupecat
  • Status changed from new to accepted

I've got some downtime at the moment, so I'm going to take a stab at patching this.

@sabreuse
12 years ago

@sabreuse
12 years ago

#3 @sabreuse
12 years ago

attachment:18801.2.diff provides a fallback to the ID of the settings field in the case where label_for isn't explicitly provided. (The first diff used the title instead; that was wrong.)

The second problem identified in the ticket, tables in settings output, is discussed in the related tickets in comment 1 -- it's a bigger problem than just this ticket, so I suggest handling the label issue first.

#4 @sabreuse
12 years ago

  • Keywords has-patch added

#5 @azaozz
12 years ago

The settings form elements that don't have <label> in the <th> have <fieldset> and <legend> with the same text. Those are usually multi-input, like radio buttons, that have individual labels.

Perhaps instead of <fieldset> and <legend> we can use aria-labelledby on them and point that to the <th>? That would avoid the repeating texts.

#6 @unknowndomain
12 years ago

  • Keywords settings-3.6 added

#7 @unknowndomain
12 years ago

  • Cc me@… added

#8 @SergeyBiryukov
12 years ago

  • Keywords settings-api added; settings-3.6 removed

#9 @helen
11 years ago

  • Milestone changed from Awaiting Review to 3.8

Should be done together with #16413, so moving to 3.8.

#10 @matt
11 years ago

  • Priority changed from normal to high

#11 @helen
11 years ago

  • Milestone changed from 3.8 to Future Release

#12 @nacin
11 years ago

  • Component changed from Accessibility to Administration
  • Focuses accessibility added

#13 @helen
10 years ago

  • Component changed from Administration to Options, Meta APIs

This ticket was mentioned in IRC in #wordpress-ui by joedolson. View the logs.


10 years ago

#15 @joedolson
10 years ago

I'm looking at this ticket, and it seems very problematic to find a way to use the table header as a label if we don't have access to the user function in the callback. We can set something as an ID, but if we can't intercept the function to add a reference to that ID, I'm not sure what our options are, practically.

I'm going to take a look at the fieldset/legend issue raised by @azaozz as a separate ticket, but I'm not sure what our practical options are for labeling if there's no label_for key set.

This ticket was mentioned in IRC in #wordpress-ui by _Redd. View the logs.


10 years ago

This ticket was mentioned in Slack in #accessibility by toscho. View the logs.


10 years ago

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


10 years ago

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


10 years ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


9 years ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


9 years ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


8 years ago

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


8 years ago

This ticket was mentioned in Slack in #accessibility by sergey. View the logs.


8 years ago

#25 @afercia
8 years ago

Not exactly a "settings page" but somehow related: #37848.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


8 years ago

This ticket was mentioned in Slack in #core by afercia. View the logs.


7 years ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


7 years ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


5 years ago

#30 @joedolson
19 months ago

  • Owner changed from taupecat to joedolson

Taking ownership to review as part of the remount of the core Fields API project.

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


19 months ago

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


16 months ago

Note: See TracTickets for help on using tickets.