Open
Conversation
src/sections/Organisers.astro
Added aria-label to all 5 partner links ("Resend", "Vulcan Works", "S-SA", "Digital Northants", "Barclays Eagle Labs") so screen readers announce the link destination. Added aria-hidden="true" to each partner SVG logo since they're decorative.
src/sections/Connect.astro
Added a visually-hidden aria-live="polite" region to announce form states to screen readers. The form now sets aria-busy="true" during submission and announces "Submitting..." and error messages. Added aria-hidden="true" to all 8 social media SVG icons since the parent <a> tags already have aria-label. Replaced the throw on error with a user-facing message. The sr-only class makes it visually invisible. It's positioned off-screen with 1px dimensions and clipped. Only screen readers can see it.
src/sections/Events.astro
Replaced aria-label on the "Read more" <p> with aria-hidden="true". aria-label on a non-interactive <p> is misused, and the parent <a> already provides context. Added aria-hidden="true" to the 3 decorative SVG icons (calendar, pin, price).
src/sections/Hero.astro
Added aria-hidden="true" to the .hero__grid container, which holds 24 empty decorative divs. Without this, screen readers traverse them unnecessarily.
src/layouts/Layout.astro
Added aria-hidden="true" to both hamburger and close SVG icons in the nav toggle button. The button's text label already provides the accessible name.
src/components/Checkbox.astro
Added aria-label={label} to the button to fix the empty button accessibility error. Added aria-hidden="true" to the checkmark SVG since it's decorative.
| fill: currentColor; | ||
| } | ||
|
|
||
| .sr-only { |
Collaborator
There was a problem hiding this comment.
This is very verbose way of doing it. Ana Tudor recently published a post about a way more concise way. I think only opacity and clip is more than enough at this point.
| /> | ||
| <button class="connect__submit">Subscribe</button> | ||
| </form> | ||
| <div class="sr-only" aria-live="polite" id="form-status"></div> |
Collaborator
There was a problem hiding this comment.
There is no styling around this one and the spacing looks bit awkward. Any chance we can add some styling to it, and also reduce the specificity of this selector please to match others? There is no need for such a high specificity of this one.
| @@ -170,13 +180,17 @@ import Input from "../components/Input.astro"; | |||
| form?.addEventListener("submit", async (e) => { | |||
Collaborator
There was a problem hiding this comment.
When submit is triggered, status should also be cleared.
| </li> | ||
| </ul> | ||
| <p class="events__more" aria-label={`Read more ${name}`}> | ||
| <p class="events__more" aria-hidden="true"> |
Collaborator
There was a problem hiding this comment.
I like this change a lot. Sometimes less is more, and the surrounding partner already has enough of a context for the assistive tech. Good one mate.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
src/sections/Organisers.astro
Added aria-label to all 5 partner links ("Resend", "Vulcan Works", "S-SA", "Digital Northants", "Barclays Eagle Labs") so screen readers announce the link destination. Added aria-hidden="true" to each partner SVG logo since they're decorative.
src/sections/Connect.astro
Added a visually-hidden aria-live="polite" region to announce form states to screen readers. The form now sets aria-busy="true" during submission and announces "Submitting..." and error messages. Added aria-hidden="true" to all 8 social media SVG icons since the parent tags already have aria-label. Replaced the throw on error with a user-facing message. The sr-only class makes it visually invisible. It's positioned off-screen with 1px dimensions and clipped. Only screen readers can see it.
src/sections/Events.astro
Replaced aria-label on the "Read more"
with aria-hidden="true". aria-label on a non-interactive
is misused, and the parent already provides context. Added aria-hidden="true" to the 3 decorative SVG icons (calendar, pin, price).
src/sections/Hero.astro
Added aria-hidden="true" to the .hero__grid container, which holds 24 empty decorative divs. Without this, screen readers traverse them unnecessarily.
src/layouts/Layout.astro
Added aria-hidden="true" to both hamburger and close SVG icons in the nav toggle button. The button's text label already provides the accessible name.
src/components/Checkbox.astro
Added aria-label={label} to the button to fix the empty button accessibility error. Added aria-hidden="true" to the checkmark SVG since it's decorative.