Skip to content

a11y: homepage sweep - #4177

Open
ellieplayswow wants to merge 5 commits into
elementary:masterfrom
ellieplayswow:feature/a11y-sweep
Open

ellieplayswow wants to merge 5 commits into
elementary:masterfrom
ellieplayswow:feature/a11y-sweep

Conversation

@ellieplayswow

@ellieplayswow ellieplayswow commented Oct 4, 2026 •

Copy link
Copy Markdown

hi! i noticed a few accessibility issues on the homepage (and might continue this to other pages if desired?)

things were already pretty good! this just adds a bit more polish, and reduces the accessibility issues (audited via firefox) to contrast and a lack of explicit label on the custom amount input. for the blue colours, i just made them progressively darker until firefox reported a contrast ratio >4.5. i didn't wanna touch this for the buttons since that's a bit more involved of a change!

the custom amount input probably requires some redesigning magic, since a visible <label> is required

Changes Summary

  • links: update blue slightly to better meet colour contrast reqs
  • workflow section: label each figure with existing h4
  • workflow section: mark mail icon as aria-hidden="true"
  • showcase section: rework links into buttons with explicit aria-controls
  • showcase section: mark all tabs except current as hidden
  • header: add explicit title to elementary logo type
  • press: add explicit title to all logos
  • icons: mark some purely decorative icons as aria-hidden="true"

This pull request is ready for review.

- links: update blue slightly to better meet colour contrast reqs
- workflow section: label each figure with existing h4
- workflow section: mark mail icon as aria-hidden="true"
- showcase section: rework links into buttons with explicit aria-controls
- showcase section: mark all tabs except current as hidden
- header: add explicit title to elementary logo type
- press: add explicit title to all logos
- icons: mark some purely decorative icons as aria-hidden="true"
…oid marking #choice-buttons as a clickable element
@ellieplayswow

Copy link
Copy Markdown
Author

needed to rework the showcase js a little bit more, it's now fully navigable with tab+space.

we can effectively mark all the tabs as tabindex="-1" (so they can never be scrolled to naturally) and then force only the back button to be tabindex="0" which means once the parent grabs focus it's guaranteed to be the next thing, and it allows you to exit that section gracefully

@ellieplayswow

ellieplayswow commented Oct 4, 2026 •

Copy link
Copy Markdown
Author
image
  • all the text leafs are complaining due to poor contrast
  • the "back" buttons are from the showcase, and it's kinda just gonna be like that without a bit of a visual update. basically, the transition requires the element to be visible in order to slide nicely. this goes away if we correctly let the hidden elements be hidden (maybe we can aria-hidden="true" this instead?) but is a side-effect of the design overriding the hidden attribute
  • the custom button is due to no label

a11y: increase snappiness of showcase focusing by using `transitionend`
showcase: const some reused selectors
@ellieplayswow

Copy link
Copy Markdown
Author

ok i had dinner and a nap and figured out how to fix the showcase section :) the only remaining a11y issues on the homepage are the custom label & bad text contrast.

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.

1 participant