fix: fix accessibility #20
Merged
Conversation
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
francescarpi
approved these changes
Jan 16, 2026
Collaborator
francescarpi
left a comment
francescarpi
left a comment
There was a problem hiding this comment.
Looks good, but caution with the other PR. There will be conflicts.
# Improve accessibility for sponsor button
## Summary
This PR improves the accessibility of the "Become a Sponsor" button that
copies the sponsor contact email to the clipboard.
## Changes
### 1. Visual feedback with focus management
- When the button is clicked, it is replaced by a confirmation message
("EMAIL COPIED!")
- The confirmation element (not a button) receives focus, ensuring
screen readers announce the success message
- After 2 seconds, the button reappears and focus is restored to it
- This works consistently across all interaction methods: mouse click,
keyboard (Space/Enter), and screen reader actions (VoiceOver VO+Space)
### 2. Equivalent experience for all users (WCAG 2.5.3 - Label in Name)
**Before:** The button used `aria-label="Copiar email de contacto para
patrocinadores"` which completely replaced the visible text "BECOME A
SPONSOR". This created different experiences:
- Visual users saw: "BECOME A SPONSOR"
- Screen reader users heard: "Copiar email de contacto para
patrocinadores"
**After:** Changed to use `aria-describedby` instead, so screen readers
now announce:
> "BECOME A SPONSOR, button. Copies the sponsor contact email"
This provides an equivalent experience while still giving screen reader
users the additional context about what the button does.
#### WCAG Reference
From [WCAG 2.5.3 - Label in Name (Level
A)](https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html):
> "For user interface components with labels that include text or images
of text, the name contains the text that is presented visually."
> "The intent of this success criterion is to ensure that the words
which visually label a component are also the words associated with the
component programmatically. This helps ensure that people with
disabilities can rely on visible labels as a means to interact with the
components."
> "When these match, speech-input users (i.e., users of speech
recognition applications) can navigate by speaking the visible text
labels of components, such as menus, links, and buttons, that appear on
the screen."
> "Both `aria-label` and `aria-labelledby` take precedence in the name
calculation, overriding the visible text as the accessible name even
when the visible text label is programmatically associated with the
control. For this reason, when a visible label already exists,
`aria-label` should be avoided or used carefully."
### 3. Confirmation message accessibility
- Added `role="status"` to the confirmation div for proper semantics
- Added `tabindex="-1"` to allow programmatic focus
- The message is announced by screen readers when it appears
## Testing
- [x] Mouse click shows confirmation and copies email
- [x] Keyboard activation (Space/Enter) works correctly
- [x] VoiceOver announces button name and description
- [x] VoiceOver announces confirmation message on activation
- [x] Focus management works correctly (moves to confirmation, returns
to button)
Change the ‘Emil copied’ message styling to prevent it from looking like a button. The focus styling made it look like a button, so this PR removes the custom focus style. In the terminal, `[ XXX ]` also resembled a button, so `[` was replaced with other decorative characters. >[!NOTE] >PR is opened against the `fix_accessibility` branch rather than `main`.
ctrl-alt-d
approved these changes
Jan 16, 2026
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
H1 "Matrix" Effect:
Implemented a separation of concerns. The 'h1' now uses an aria-label with the static text "PyCon ES 2026", while the visual animation is wrapped in a span with aria-hidden="true".
Added a check for prefers-reduced-motion. If enabled, the text renders instantly without the glitch effect.
Dynamic Subtitle (Loading Effect):
Hidden decorative chars using aria-hidden="true".
Added aria-live="polite" and aria-busy logic. The screen reader now waits for the loading animation to finish before announcing the final venue information.
The blinking cursor now stops if the user prefers reduced motion (motion-reduce:animate-none).
Sponsor Button:
Wrapped brackets in aria-hidden.
Added a descriptive aria-label ("Copiar email...").
Updated the copy-to-clipboard logic to provide auditory feedback ("Email copiado exitosamente") via aria-label updates.
-Refactor:
Extracted the email address to src/consts.ts and passed it via data-attributes to the DOM, avoiding hardcoded strings in the component.