Description
- The interactive year slider at the top of the page is not associated with any label or accessible name. In the code, the slider is created as an
<input type="range"> and appended to the page without a <label> or aria-label
TimeSlider.js
- As a result, screen readers will announce it only as a generic “slider” with a value (e.g., “50”), but users won’t know what the number represents. Sighted users see the slider but no visible label indicating it’s a year selector, and non-sighted users get no context at all.
Steps to Reproduce
- Navigate to the page and focus the year slider (e.g., by pressing the Tab key until the slider is selected).
- Listen with a screen reader (or use dev tools Accessibility inspector) to the slider’s announcement.
- Notice that the slider is announced with just a value (like the number 2025) and no descriptive name, since there is no label in the HTML for it.
Expected Behavior
The range input should have an accessible name that describes its purpose (for example, “Select year”). This can be achieved by wrapping it in a <label> tag or adding an aria-label="Year selector" attribute. A user of assistive tech should hear something like “Year slider, 2025, adjustable” when focusing the control.
Actual Behavior
The slider is currently announced without context (e.g., just “2025 slider, 1990 to 2025”), leaving the user unsure what adjusting the value will do. Visually, there’s also no caption or label on the page indicating it’s a timeline/era selector.
Why it matters
Every form control or interactive input must have an accessible name or label. Without it, users who rely on screen readers cannot effectively use the control. In this case, they won’t know the slider controls the displayed “era” of the portfolio.
Recommended Fix
Provide a label for the slider. For example, in HTML:
<label for="year-slider">Select Year:</label>
<input id="year-slider" type="range" min="1990" max="2025" …>
If a visible label is not desired in the UI, use an aria-label="Select year" or aria-labelledby pointing to some visible text. This will ensure the slider’s purpose is conveyed to all users.
Assignee: @deepjoshi11th
Description
<input type="range">and appended to the page without a<label>or aria-labelTimeSlider.js
Steps to Reproduce
Expected Behavior
The range input should have an accessible name that describes its purpose (for example, “Select year”). This can be achieved by wrapping it in a
<label>tag or adding anaria-label="Year selector"attribute. A user of assistive tech should hear something like “Year slider, 2025, adjustable” when focusing the control.Actual Behavior
The slider is currently announced without context (e.g., just “2025 slider, 1990 to 2025”), leaving the user unsure what adjusting the value will do. Visually, there’s also no caption or label on the page indicating it’s a timeline/era selector.
Why it matters
Every form control or interactive input must have an accessible name or label. Without it, users who rely on screen readers cannot effectively use the control. In this case, they won’t know the slider controls the displayed “era” of the portfolio.
Recommended Fix
Provide a label for the slider. For example, in HTML:
If a visible label is not desired in the UI, use an
aria-label="Select year"oraria-labelledbypointing to some visible text. This will ensure the slider’s purpose is conveyed to all users.Assignee: @deepjoshi11th