a11y: homepage sweep by ellieplayswow · Pull Request #4177 · elementary/website

ellieplayswow · 2026-10-04T16:02:30Z

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 · 2026-10-04T16:33:37Z

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 · 2026-10-04T16:41:20Z

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 · 2026-10-04T22:32:21Z

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.

RMcNeely · 2026-10-12T15:13:14Z

First, thanks for taking the time to do the audit and submit this. We always appreciate the help 🙂

Can you tell me what has changed about all of the SVG's on this PR? They look, at least on the PR tab here, to be examly the same as before. Not sure if there is an intentional change there or not.

Still looking at the rest of this slowly.

ellieplayswow · 2026-10-12T18:44:48Z

@RMcNeely so there are 2 sets of svg changes here:

adding an explicit <title> to svgs that convey meaning (eg: the press icons)
adding aria-hidden="true" to decorative svgs (eg: the symbolic icons)
they should visually look the same, just with the added markup

RMcNeely · 2026-10-13T12:56:53Z

            const $iContainer = $('#' + n, this.container)

-            $iContainer.prepend('<div class="showcase-back"></div>')
+            $iContainer.prepend('<button type="button" class="showcase-back" aria-controls="showcase-index" aria-expanded="false" aria-label="Back" tabindex="-1"></button>')


Why exclude this from the tab index? Shouldn't you want to naturallly focus it instead so that you can get back out of the showcase?

by default actually no. we set the tabindex to 0 here: https://github.com/elementary/website/pull/4177/changes#diff-a375a752112dc75ce153214314f0ad86ca13deddee1be26df741aebae00ea20aR133 only for the relevant tab, so once you enter one tab's contents your next action is to go back.

this is technically a bit of a holdover from before i got the hidden working just right on those divs, where since the other tabs were previously visible (just out of your viewport) your next tab target was always the next tab's back button. hope that makes sense, between meetings rn :)

it might be able to be removed now? but it doesn't do any harm being this way i don't think

Not sure that link is taking me to the right spot in my browser (grrr GH) but should I be focused on this back button when after I hit enter and select a "tab"?

…relevant styles showcase: allow focus to animate arrow header: remove alt from h1 showcase: move aria-hidden from web screenshot

RMcNeely

I'm fine with the color changes and the SVG changes. The changes work well for the showcase section and are probably needed since its really more of an accordion pattern. Some small tweaks and a few questions about how we want this to work.

RMcNeely · 2026-10-15T15:28:40Z

-            <a href="#showcase-terminal"><li class="read-more"><img src="images/thirdparty-icons/apps/64/terminal.svg" alt="Terminal app icon"/>Terminal</li></a>
-            <a href="#showcase-code"><li class="read-more"><img src="images/thirdparty-icons/apps/64/code.svg" alt="Code editor app icon"/>Code</li></a>
-            <a href="#showcase-camera"><li class="read-more"><img src="images/thirdparty-icons/apps/64/camera.svg" alt="Camera app icon"/>Camera</li></a>
+            <li class="read-more"><button type="button" aria-controls="showcase-music" aria-expanded="false"><img src="images/thirdparty-icons/apps/64/music.svg" alt="Music app icon"/>Music</button></li>


I spoke with an a11y export at work becuase I wasn't sure about this but she says that adding type=button is just redundant information and not necessary. Screen readers will already anouce these as buttons so you're just adding extra noise.

the spec is unclear on this actually, mdn seems to suggest you always want to add the type="button". i wonder if this is some weird old browser compat thing?

happy to remove it if you'd prefer, though :)

is there any action needed here?

RMcNeely · 2026-10-15T16:14:18Z

  text-decoration: none;
 }

+section.grey a {


Is there a specific link here that you are always trying to get to be the same in an SVG?

i'm not sure what you mean? this styling just targets the grey sections, which had a slightly lower contrast ratio

is there any action needed here?

RMcNeely · 2026-10-15T16:21:04Z

            const $iContainer = $('#' + n, this.container)

-            $iContainer.prepend('<div class="showcase-back"></div>')
+            $iContainer.prepend('<button type="button" class="showcase-back" aria-controls="showcase-index" aria-expanded="false" aria-label="Back" tabindex="-1"></button>')


Not sure that link is taking me to the right spot in my browser (grrr GH) but should I be focused on this back button when after I hit enter and select a "tab"?

RMcNeely · 2026-10-15T16:25:07Z

+         * 
+         * @param {*} $target 
+         */
+        const hide = function($target) {


Inspecting this in FF when you click a button and go to the screenshot the entire list goes away in the a11y tree. Is that what we really want? I would think that we still want to mention that the list is there somehow and don't change the entire tree out from under a user.

(I have NOT tested this yet with a screenreader)

1st point: imo, it makes sense?

2nd point: it's out of the viewport in a way that you can only see it again is by going back, so why wouldn't it be what we want? in theory, the only "valid" action at the point of entering a tab is to go back, because there is no "go forwards". the current site has each link out of the viewport, so the only way you can navigate it is by seeing the links in the bottom change or just remembering the order.

since we remove the hidden attribute from the relevant showcase section and the buttons have an aria-controls, aria-expanded, a11y tools should announce the next action is to "go back".

if we want to keep the tree, then IMO the section needs some kind of redesign to keep each button visible and within the viewport at all times. i'm not sure what a preferred solution there would look like, especially when considering mobile.

just got back from a run, apologies if i came off as rude, not my intention :)

i largely agree that this should be seen as an accordion, and i think the convention would be that the title of the current item would remain focused even when expanded. but you also have to consider your available actions & what's visible. let's use this MDN playground as an example.

if you press <TAB> at the start, you select the first details item (the showcase equivalent would be the Music button). pressing <SPACE> opens that item.

you then have 2 options:

press <SPACE> again, closing that tab (the showcase equivalent here would be the go back button);

press <TAB>, moving to the next item

with my current showcase section, we don't have (1) as you're focusing the div itself, so the next <TAB> instead focuses the back button. you should, however, be informed that going back is an option. once you go back, (2) works just fine.

hope this makes a little more sense wrt how i'm thinking! ^^

ellieplayswow added 3 commits October 4, 2026 16:49

a11y: target specific elements for updateDownloadButton call, to av…

096ec0b

…oid marking #choice-buttons as a clickable element

a11y: allow showcase section to be fully navigable with tab+space

a9bb65d

a11y: properly hide extra tabs in showcase section

15d703d

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

a11y: mark icons in each showcase section as aria-hidden

aa9c91f

RMcNeely reviewed Oct 13, 2026

View reviewed changes

lewisgoddard requested changes Oct 15, 2026

View reviewed changes

Comment thread index.php Outdated

Comment thread index.php

Comment thread index.php Outdated

showcase: update markup from <button><li> to <li><button>, move over …

edef648

…relevant styles showcase: allow focus to animate arrow header: remove alt from h1 showcase: move aria-hidden from web screenshot

ellieplayswow requested a review from lewisgoddard October 15, 2026 10:42

logotype: remove "logo" from title as unnecessary for screenreaders

795931e

RMcNeely requested changes Oct 15, 2026

View reviewed changes

showcase: apply aria-hidden to icons on each button

97f2a1d

Conversation

ellieplayswow commented Oct 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes Summary

Uh oh!

ellieplayswow commented Oct 4, 2026

Uh oh!

ellieplayswow commented Oct 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ellieplayswow commented Oct 4, 2026

Uh oh!

RMcNeely commented Oct 12, 2026

Uh oh!

ellieplayswow commented Oct 12, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ellieplayswow Oct 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

RMcNeely left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ellieplayswow Oct 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ellieplayswow commented Oct 4, 2026 •

edited

Loading

ellieplayswow commented Oct 4, 2026 •

edited

Loading

ellieplayswow Oct 13, 2026 •

edited

Loading

ellieplayswow Oct 15, 2026 •

edited

Loading