Repository navigation
a11y: homepage sweep - #4177
a11y: homepage sweep#4177ellieplayswow wants to merge 5 commits into
Conversation
- 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
|
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 |
|
a11y: increase snappiness of showcase focusing by using `transitionend` showcase: const some reused selectors
|
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. |
|
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. |
|
@RMcNeely so there are 2 sets of svg changes here:
|
| 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>') |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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
2 participants
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 requiredChanges Summary
This pull request is ready for review.