Making WordPress.org

Opened 14 months ago

Last modified 14 months ago

#8061 new defect (bug)

Accessibility Issues Found on WordPress CLI Page

Reported by: viralsampat Owned by:
Priority: normal Milestone:
Component: Make (Get Involved) / P2 Keywords: dev-feedback
Cc:

Description

Hello Team,

I have reviewed the following page and checked its accessibility using the WAVE tool:

​https://make.wordpress.org/cli/

During the review, I found some accessibility contrast errors that may affect compliance and usability. I believe it would be beneficial to address these issues to improve accessibility for all users.

For better understanding, I have attached a screenshot highlighting the identified errors.

Thanks,

Attachments (1)

Screenshot 2025-08-20 at 12.53.27 AM.png​ (572.7 KB ) - added by viralsampat 14 months ago.

Download all attachments as: .zip

Change History (2)

#1 @sabernhardt
14 months ago

  • Component General → Make (Get Involved) / P2
  • Keywords 2nd-opinion needs-testing has-screenshots removed

17 Errors:

  • 10 of the 'Linked image missing alternative text' errors are from the post author avatar images, and that is already reported on ​https://github.com/Automattic/o2/issues/240
  • Another 5 images missing alternative text are the hosting company logos in the text widget for WP-CLI.
  • One of the empty links is a Google Drive link in a comment.
  • The other link identified as empty contains a button with an aria-label. This link in the ​sidebar template, which closes the Make widgets panel, has the same ID as the link that opens the panel.
    <a href="#" id="secondary-toggle"><button aria-label="Close menu" class="wp-block-navigation__responsive-container-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></button></a>
    

5 Contrast Errors:

  • The social block links have text color related to each network, and the SVGs use white as the fill color. WAVE reports errors because these have visibly hidden text, though it is not a real problem.

Some of the Alerts:

  • The 'Select missing label' is the o2-filter-widget-select, which is hidden with display: none.
  • The 'Skipped heading level' is because the welcome panel has h4 headings instead of h2.
  • The 'Redundant title text' alerts come from 'Shortlink' and 'Reply' links. This could involve both the ​comment template and ​template-tags.
Last edited 14 months ago by sabernhardt (previous) (diff)
Note: See TracTickets for help on using tickets.