kubernetes / kubernetes/website
Mobile navigation and close controls are missing accessible labels..
- Dominant language
- HTML
- Stars
- 5.4k
- Forks
- 15.7k
- Avg merge
- 4d 18h
- Merged PRs (30d)
- 204
Description
### Problem
While testing the Kubernetes website on a mobile viewport, I noticed that some mobile navigation and close controls appear to be icon-only buttons without accessible names.
At viewport size `390x844`, the following controls appear without visible text, `aria-label`, or `title`:
- `#hamburger`
- `#closeButton`
- `.btn.fa.fa-times`
Because these controls do not have accessible labels, screen reader users may only hear a generic announcement such as "button" instead of a meaningful action like "Open navigation menu" or "Close navigation menu".
### Pages checked
I spot-checked the following routes:
- `/`
- `/docs/home/`
- `/blog/`
- `/community/`
### Expected behavior
Icon-only navigation controls should have clear accessible names.
For example:
```html
Contributor guide
Research direction
Start by inspecting the mobile navigation and close-control implementations associated with #hamburger, #closeButton, and .btn.fa.fa-times on the listed routes. Check the controls at 390x844 and give each icon-only button a clear accessible name, then verify that screen readers no longer announce only "button".
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 65/100