WordPress / five-for-the-future

Plugins and themes for the Five for the Future subsite
https://wordpress.org/five-for-the-future/
44 stars 21 forks source link

Accessibility: Links text lack context #226

Open alexstine opened 1 year ago

alexstine commented 1 year ago

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.

naokomc commented 1 year ago

@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.

alexstine commented 1 year ago

@naokomc

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

Looks good, please proceed with edits.

Thanks.

naokomc commented 1 year ago

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?

alexstine commented 1 year ago

@naokomc The UL would work fine for these.