five-for-the-future icon indicating copy to clipboard operation
five-for-the-future copied to clipboard

Accessibility: Links text lack context

Open alexstine opened this issue 2 years ago • 4 comments

Please see the related thread in Slack: https://wordpress.slack.com/archives/C02QB8GMM/p1681178996567369

Who maintains this page? https://wordpress.org/five-for-the-future/ There is a need for slightly more descriptive link text. Looks like this is coming from the block editor. I placed quotes around the current links and what my suggestion would be for new links. Ready to get started? Contribute as an "individual" or as an "organization". Ready to get started? "Contribute as an individual" "Contribute as an organization" Makes more sense to arrange these as a list (ul) maybe? I am an individual interested in participating in WordPress "Get Involved" I am part of an organization interested in participating in WordPress "Get Started" I think these links can go away and the sentence can become the link?

There was concern about these links being too ugly but I do not think Gutenberg supports aria-label at this point. Could use some design feedback.

alexstine avatar Apr 11 '23 03:04 alexstine

@alexstine I have access to the dashboard, so I tried editing the section under H2 heading "How to Participate":

<!-- wp:columns {"className":"is-style-wporg-parallelogram"} -->
<div class="wp-block-columns is-style-wporg-parallelogram"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://wordpress.org/five-for-the-future/for-individuals/">Participate as an <strong>individual</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://wordpress.org/five-for-the-future/for-organizations/">Participate as an <strong>organization</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Test page link: https://wordpress.org/five-for-the-future/?page_id=15067&preview=1&_ppp=61386f1688

The visual representation on this page looks different from the actual modification because of the CSS rules applied only to the front page. Once the change is added to the front page, the colored background will cover behind the buttons.

Screenshot of the example code

If this sounds good, I can edit the front page.

The "Ready to get started?" part at the beginning of the page requires CSS change, so I'll leave it to a designer/developer.

naokomc avatar Jul 31 '23 05:07 naokomc

@naokomc

If this sounds good, I can edit the front page.

Looks good, please proceed with edits.

Thanks.

alexstine avatar Jul 31 '23 16:07 alexstine

Thanks for reviewing, @alexstine. I published the change to the "How to Participate" section: https://wordpress.org/five-for-the-future/

I have access to the Block Editor but I'm not the best person to suggest improvement to the CSS. Would be nice to have help there.

There is a need for slightly more descriptive link text. Looks like this is coming from the block editor. I placed quotes around the current links and what my suggestion would be for new links. Ready to get started? Contribute as an "individual" or as an "organization". Ready to get started? "Contribute as an individual" "Contribute as an organization" Makes more sense to arrange these as a list (ul) maybe?

naokomc avatar Aug 01 '23 01:08 naokomc

@naokomc The UL would work fine for these.

alexstine avatar Aug 01 '23 02:08 alexstine