Making WordPress.org

Opened 17 months ago

Last modified 7 months ago

#6305 new defect (bug)

Inaccessible icons in Support Forums

Reported by: sabernhardt's profile sabernhardt Owned by:
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 17 months ago.
HelpHub front page's current gray icons
helphub-main-page-icons-8d969f.png (35.1 KB) - added by sabernhardt 17 months ago.
using #8d969f gray for icons
#6305.patch (574 bytes) - added by hilayt24 13 months ago.
Color added and opacity removed

Download all attachments as: .zip

Change History (8)

#1 @sabernhardt
17 months 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
17 months ago

HelpHub front page's current gray icons

@sabernhardt
17 months ago

using #8d969f gray for icons

#2 @tellyworth
15 months ago

  • Keywords good-first-bug added

#3 @hilayt24
13 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
13 months ago

Color added and opacity removed

#4 @hilayt24
13 months ago

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

#5 @sabernhardt
7 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.

Note: See TracTickets for help on using tickets.