Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Announce the character counters to screen readers

Closed Beginner friendly
  • Is something wrong?
#61 6 comments 0 reactions 1 assignee View on GitHub

Maintainers usually reply within 1 day

@Anushka157-cha is already working on this.

Since Oct 24, 2026.

  • #97 by @Anushka157-cha — merged

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
javascript, react
Domain
accessibility, frontend

Research direction

Read the Bio textarea and counter in client/src/pages/Profile.jsx, then the TaskForm description counter in client/src/pages/Tasks.jsx after issue #41 is merged. Link each field to its counter with aria-describedby and make the count understandable when read aloud without changing its visual appearance. Verify the Description in Chrome DevTools’ Accessibility panel for both fields.

Written by the indexing model from the issue text.

Description

difficulty: easy enhancement frontend good first issue hacktoberfest
Context

The Profile page's bio has a "120 / 300" counter (#54), and the task form is getting one too (#41). Sighted users can see them, but screen readers don't know the counters exist, because they aren't linked to their fields.

Please start this after #41 is merged, so both forms can be done in one PR.

Files likely involved
  • client/src/pages/Profile.jsx (the Bio <textarea> and its counter)
  • client/src/pages/Tasks.jsx (the TaskForm description counter from #41)
Acceptance criteria
  • Each counter has an id, and its field points to it with aria-describedby, so screen readers read the count when the field is focused.
  • The counter's text says what it counts in a way that makes sense when read aloud, for example a visually hidden "characters used" (sr-only) after "120 / 300".
  • Nothing changes visually.
How to test
  1. Chrome DevTools → Elements, select the Bio textarea → Accessibility panel: its Description shows the counter text.
  2. Optional: with a screen reader (Windows: NVDA or Narrator, Mac: VoiceOver), tab into the field and hear the count.
  3. Same for the task form's description field.

New here? 👋 Good first issues are reserved for people making their first few open-source contributions. Comment below to ask to work on this issue, and wait to be assigned. Then follow CONTRIBUTING.md for setup and how to open a pull request. Questions are welcome in the comments or in Discussions.

Dominant language
JavaScript
Stars
3
Forks
2
Avg merge
9h 29m
Merged PRs (30d)
40

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from KEX-03/taskflow

All issues in KEX-03/taskflow

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.