Making WordPress.org

Opened 2 years ago

Closed 3 months ago

#6305 closed defect (bug) (fixed)

Inaccessible icons in Support Forums

Reported by: sabernhardt's profile sabernhardt Owned by: coffee2code's profile coffee2code
Milestone: Priority: normal
Component: Support Forums Keywords: has-patch needs-testing
Cc:

Description

  1. On the HelpHub front page, these icons are linked without any text inside them (empty links). Either the links could be removed from the icons to match the Support Forums page, or else the icons can be placed inside the links with the heading instead of having them separate.
  2. Accessibility guidelines require a color contrast of at least 3:1 for icons against their background, and #32373c at 40% opacity is insufficient (2.2:1).
  3. The icon character can be hidden from screen readers with aria-hidden.

Attachments (3)

helphub-main-page-icons-current.png (34.9 KB) - added by sabernhardt 2 years ago.
HelpHub front page's current gray icons
helphub-main-page-icons-8d969f.png (35.1 KB) - added by sabernhardt 2 years ago.
using #8d969f gray for icons
#6305.patch (574 bytes) - added by hilayt24 22 months ago.
Color added and opacity removed

Download all attachments as: .zip

Change History (9)

#1 @sabernhardt
2 years ago

The styles should have a text color without the reduced opacity. #8d969f has a 3:1 contrast ratio against white, and a darker option would be fine.

		.dashicons {
			font-size: ms(16);
			color: #8d969f;
			width: auto;
			height: auto;
		}

If grouping the icon and heading within the link, the .icon-wrapper element can be a div or a span:

<div class="info-box">
	<a href="https://wordpress.org/support/category/getting-started/">
		<span class="icon-wrapper">
			<span class="dashicons dashicons-wordpress" aria-hidden="true"></span>
		</span>
		<h3>Getting Started</h3>
	</a>

@sabernhardt
2 years ago

HelpHub front page's current gray icons

@sabernhardt
2 years ago

using #8d969f gray for icons

#2 @tellyworth
2 years ago

  • Keywords good-first-bug added

#3 @hilayt24
22 months ago

Hi @sabernhardt, Thanks for the ticket and the suggestions. I added the color to the dash icons and removed the opacity from them.

@hilayt24
22 months ago

Color added and opacity removed

#4 @hilayt24
22 months ago

  • Keywords has-patch reporter-feedback added; good-first-bug removed

#5 @sabernhardt
16 months ago

  • Component changed from HelpHub to Support Forums
  • Keywords needs-testing added; reporter-feedback removed
  • Summary changed from Inaccessible icons on HelpHub (and Support Forums) to Inaccessible icons in Support Forums

HelpHub apparently does not have the icons anymore.

I do not know how to test the patch properly, but the change looks good for the Support Forums.

#6 @coffee2code
3 months ago

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

In 13370:

Support: Improve color contrast of icons on forums page.

Props hilayt24, sabernhardt.
Fixes #6305.

Note: See TracTickets for help on using tickets.