kubernetes / kubernetes/website

Mobile navigation and close controls are missing accessible labels..

Open Beginner friendly
#56,014 3 comments 0 reactions 0 assignees View on GitHub
kind/bug triage/accepted
Dominant language
HTML
Stars
5.4k
Forks
15.7k
Avg merge
4d 18h
Merged PRs (30d)
204

Description

Image

### 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

Image

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.