Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update alt tags and Showcase header on home.md #2478

Merged
merged 9 commits into from Mar 11, 2024

Conversation

finekatie
Copy link
Contributor

@finekatie finekatie commented Feb 1, 2024

We propose removing alt text from website screenshots, as the images are decorative. The links to the sites are what's important. This was discussed with content and a11y team.

We also propose changing the title on that section from "Showcase" to "Sites built with USWDS". It's clearer than Showcase.

Summary

Removing alt tags from website screenshots and changing header on home page to make clearer.

Related issue

Closes #2469

Preview link

Preview link: https://federalist-ead78f8d-8948-417c-a957-c21ec5617a57.sites.pages.cloud.gov/preview/uswds/uswds-site/kf-homepage-showcase-tags/

Discussed with content and a11y team.

ANDI is flagging that the alt text in each of these images is redundant. Using "image remover" browser extention to Chrome one can see the page without the images and tell that those screen shots aren't critical for figuring out the purpose of those links

We propose removing alt text, as the images are decorative. The links to the sites are what's important.

We also propose changing the title on that section from "Showcase" to "Sites built with USWDS". It's clearer than Showcase.
pages/home.md Outdated Show resolved Hide resolved
Copy link
Contributor

@amyleadem amyleadem left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me! I've added @alex-hull and @amycole501 as reviewers just so that they can confirm the direction here. I also added a comment for them regarding the aria-label on the wrapping section.

Copy link

@amycole501 amycole501 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We did discuss these changes and the H2 will be much clearer so the region ARIA could easily be removed to reduce redundancy. Most AT users will be navigating using heading levels most likely anyway.

The screen shot image descriptions aren't adding much in the way of context so reducing the wordiness of the page should improve usability for screen reader users. The links to the example sites are what's important for context.

amyleadem and others added 2 commits February 20, 2024 08:52
No longer needed now that the h2 is more descriptive
@amyleadem amyleadem removed the request for review from alex-hull February 20, 2024 15:54
Copy link
Member

@thisisdano thisisdano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the accessibility team thinks this is better, then I approve.

@thisisdano
Copy link
Member

Getting the following issue in Circle:

Errors in http://localhost:4000/:

 • All page content must be contained by landmarks
   (https://dequeuniversity.com/rules/axe/3.5/region?application=axeAPI)

   (html > body > section:nth-child(7))

   <section class="usa-section bg-base-lightest showcase"> <div
   class="grid-container">...</section>

@mahoneycm
Copy link
Contributor

Pa11y error

Getting the following issue in Circle:

Errors in http://localhost:4000/:

 • All page content must be contained by landmarks
   (https://dequeuniversity.com/rules/axe/3.5/region?application=axeAPI)

   (html > body > section:nth-child(7))

   <section class="usa-section bg-base-lightest showcase"> <div
   class="grid-container">...</section>

It looks like this is happening because this <section> exists outside of an html landmark. For some reason adding the aria-label seems to cause the test to pass.

This <section> is a sibling of the <main> element but should probably be a child

Screenshot 2024-02-28 at 11 53 42 AM

@thisisdano
Copy link
Member

This PR also had some broken links that were causing errors.

  • I replaced old references to Federalist with new links and references to GitHub Pages
  • I replaced a broken link in the Pronouns pattern references section with an archived link to the page on archive.org.
  • Updated the changelog for the Pronouns pattern to document the link replacement

cc @annepetersen I think this should be our SOP for broken reference links we find in the future

@thisisdano
Copy link
Member

Merging over false positives

@thisisdano thisisdano merged commit 9755d8e into main Mar 11, 2024
7 of 11 checks passed
@thisisdano thisisdano deleted the kf-homepage-showcase-tags branch March 11, 2024 16:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add descriptive alt text to showcase images on USWDS homepage
5 participants