Make WordPress Core

Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#36562 closed defect (bug) (fixed)

Customizer: site icon preview accessibility improvements

Reported by: afercia's profile afercia Owned by: afercia's profile afercia
Milestone: 4.6 Priority: normal
Severity: normal Version: 4.4
Component: Customize Keywords: has-screenshots
Focuses: accessibility Cc:

Description

Trying to address some issues noticed when discussing #36450.

The "browser interface" image used for the sidebar control has an alt attribute 'Browser interface preview' that should be removed for consistency with the same image used in the Media dialog.

Also, some text is redundant when using a screen reader:

  • the bold text and the alt attributes say the same thing
  • the site name is just for visual purposes, should be hidden for assistive technologies

About the image crop preview, the whole cropping task is not accessible at the moment so the best thing to do is probably just use an alt attribute to say what the image is and that cropping requires mouse interaction.

Props from #36450 go to shahpranaf and TacoVerdo.

In the screenshots below, the highlighted text should be hidden for assisitive technologies because it just repeats the images alt attributes or because it is not useful (e.g. the site name).

https://cldup.com/y0QFZUzaY9.png

https://cldup.com/jbo-iPBXj5.png

Attachments (1)

36562.patch (2.7 KB) - added by afercia 8 years ago.

Download all attachments as: .zip

Change History (6)

@afercia
8 years ago

#1 @afercia
8 years ago

  • Keywords has-patch has-screenshots added
  • Version set to 4.4

In the proposed patch:

  • use an empty alt attribute for the "browser interface" image in the sidebar
  • hide redundant text using aria-hidden="true"
  • describe what the image crop preview is with an alt text: Image crop area preview. Requires mouse interaction.

#2 @afercia
8 years ago

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

In 37229:

Customizer, Site Icon preview: improve alt attributes and text accessibility.

Props shahpranaf, TacoVerdo, afercia.

Fixes #36562.

#3 @celloexpressions
8 years ago

  • Keywords needs-patch added; has-patch removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

I think the preview in the customizer needs to have the alt attribute, or otherwise hidden text that explains that there's the browser preview and app icon preview. It had alt text because it doesn't have labels like in the modal.

#4 @afercia
8 years ago

@celloexpressions the actual site icon image does have an alt attribute. I've just removed the browser interface one. There's no pint (Edit: point, lol) in announcing the browser interface image.

https://cldup.com/9120S_jWj8.png

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

#5 @celloexpressions
8 years ago

  • Keywords needs-patch removed
  • Resolution set to fixed
  • Status changed from reopened to closed

Oh, I misread the commit. Looks good.

Note: See TracTickets for help on using tickets.