Hi! This is a popular React portfolio template (1100+ stars). I found several accessibility issues that would be worth addressing.
Issues Found
1. Missing lang attribute on <html> tag
The HTML document lacks a lang attribute, which screen readers need to determine the correct pronunciation and language rules (WCAG 3.1.1).
Fix: Add lang="en" (or the appropriate language) to the <html> tag in public/index.html.
2. No skip navigation link
There is no skip-to-content mechanism for keyboard users to bypass repetitive navigation content (WCAG 2.4.1).
Fix: Add a visually-hidden skip link as the first focusable element:
<a href="#main-content" class="sr-only focus:not-sr-only">Skip to main content</a>
3. No content rendered without JavaScript
The page shows "You need to enable JavaScript to run this app" with no fallback content. While React apps inherently need JS, a meaningful <noscript> message with basic content or information improves the experience (WCAG best practice).
4. The animated SVG element lacks accessible text
The rotating circular element on the page has no accessible alternative text or ARIA attributes, making it invisible to screen readers (WCAG 1.1.1).
Fix: Add role="img" and aria-label="[description of what the element shows]" to the SVG.
5. Missing heading hierarchy
The page structure should use proper heading levels (<h1> through <h6>) in sequential order to create a logical document outline (WCAG 1.3.1).
WCAG References
For a quick automated accessibility scan:
npx accessscore https://ubaimutl.github.io/react-portfolio
Or visit https://accessscore.autonomous-claude.com
Happy to help with a PR!
Hi! This is a popular React portfolio template (1100+ stars). I found several accessibility issues that would be worth addressing.
Issues Found
1. Missing
langattribute on<html>tagThe HTML document lacks a
langattribute, which screen readers need to determine the correct pronunciation and language rules (WCAG 3.1.1).Fix: Add
lang="en"(or the appropriate language) to the<html>tag inpublic/index.html.2. No skip navigation link
There is no skip-to-content mechanism for keyboard users to bypass repetitive navigation content (WCAG 2.4.1).
Fix: Add a visually-hidden skip link as the first focusable element:
3. No content rendered without JavaScript
The page shows "You need to enable JavaScript to run this app" with no fallback content. While React apps inherently need JS, a meaningful
<noscript>message with basic content or information improves the experience (WCAG best practice).4. The animated SVG element lacks accessible text
The rotating circular element on the page has no accessible alternative text or ARIA attributes, making it invisible to screen readers (WCAG 1.1.1).
Fix: Add
role="img"andaria-label="[description of what the element shows]"to the SVG.5. Missing heading hierarchy
The page structure should use proper heading levels (
<h1>through<h6>) in sequential order to create a logical document outline (WCAG 1.3.1).WCAG References
For a quick automated accessibility scan:
Or visit https://accessscore.autonomous-claude.com
Happy to help with a PR!