Make WordPress Core

Opened 8 years ago

Closed 8 years ago

#34267 closed defect (bug) (fixed)

#a11y-headings - the FTP credentials screen and modal headings

Reported by: afercia's profile afercia Owned by: afercia's profile afercia
Milestone: 4.4 Priority: normal
Severity: normal Version: 4.3
Component: Administration Keywords: has-patch commit
Focuses: ui, accessibility Cc:

Description

The FTP credential screen and modal dialog display (conditionally) some headings:

'Connection Information' <-- h3
'Authentication Keys'    <-- h4
'Connection Type'        <-- h4
  • when displayed in the Updates screen they're inside an iframe, which technically is a separate document, so the first heading should be a H1 but this wouldn't make much sense for the overall headings hierarchy
  • when displayed in the modal dialog, the first heading should be a H1 because for assistive technologies the dialog content is the only available content on the screen (it has an ARIA role=dialog and keyboard navigation is constrained within the modal)

About the second and third headings, I'd propose to change them in fieldset legends. That seems the most semantic markup to me.

Not sure what to do with the first heading, would appreciate some feedback. Any thoughts more than welcome.

#a11y-headings

Attachments (2)

34267.patch (2.4 KB) - added by afercia 8 years ago.
34267.2.patch (3.4 KB) - added by afercia 8 years ago.

Download all attachments as: .zip

Change History (10)

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


8 years ago

#2 @afercia
8 years ago

A couple of screenshots for reference, please notice some form sections are displayed conditionally depending on the authentication type:

the FTP credentials form when updating from the Updates screen:

https://cldup.com/qYQe5rzEeu.png

the FTP credentials modal dialog and form when updating from the Plugins screen:

https://cldup.com/8lhxJ5MHYW.png

So, in the first case "Connection Information" should be a H2 but in the second case (within the modal) a H2 wouldn't make much sense.

@afercia
8 years ago

#3 @afercia
8 years ago

  • Keywords has-patch added

Attached patch is a first pass, waiting for some feedback about the "Connection Information" heading which is now a H2. The other two headings are now fieldset legends. See screenshots with the patch applied below, there are just a few pixel differences about the legend margins, not sure we should try to fix them I'd rather keep it simple.

https://cldup.com/SgSnpCpNmk.png

https://cldup.com/Z64hPWGq24.png

Last edited 8 years ago by afercia (previous) (diff)

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


8 years ago

#5 @afercia
8 years ago

  • Owner set to afercia
  • Status changed from new to assigned

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


8 years ago

@afercia
8 years ago

#7 @afercia
8 years ago

  • Keywords commit added

Refreshed patch, added a simple way to conditionally print out the heading as a <h1> in the credentials modal dialog and as <h2> in the updates screens. Tweaked and moved styles to forms.css.

#8 @wonderboymusic
8 years ago

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

In 35315:

Plugins/Updates: in request_filesystem_credentials(), alter the heading HTML tag based on the current screen for improved semantics.

Props afercia.
Fixes #34267.

Note: See TracTickets for help on using tickets.