Improve accessibility: add alt text, aria-labels, fix tap targets#593
Improve accessibility: add alt text, aria-labels, fix tap targets#593smmuskan140 wants to merge 1 commit intoAOSSIE-Org:mainfrom
Conversation
📝 WalkthroughWalkthroughThis pull request enhances web accessibility across multiple components and pages by adding descriptive alt text, ARIA labels, and semantic HTML elements. Additionally, the Footer is restructured with navigation links, the About page layout is simplified, and various image components receive improved descriptions for screen readers. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Tip Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
src/helper/projects.js (1)
22-92:⚠️ Potential issue | 🟡 MinorRemove unused
altproperties from project objects in src/helper/projects.js.Both
CardEffect.jsx(line 15) andprojects.jsx(line 49) generate alt text dynamically as${heading} project logoand${project.name} project logorespectively, and do not reference thealtproperty defined in each project object. These properties are dead metadata and should be removed.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/helper/projects.js` around lines 22 - 92, The project objects in src/helper/projects.js include an unused "alt" property that is never read because CardEffect.jsx (uses `${heading} project logo`) and projects.jsx (uses `${project.name} project logo`) generate alt text dynamically; remove the "alt" keys from each project object (e.g., entries with logo: AgoraLogo, logo: Djed, etc.) to eliminate dead metadata and keep only name, description, link, and logo fields.src/pages/index.jsx (2)
152-169:⚠️ Potential issue | 🟡 MinorDecorative icon should stay
aria-hidden="true", not exposed asrole="img".This bar-chart SVG is a purely visual embellishment next to the "projects" heading. Changing it from
aria-hidden="true"torole="img"means screen readers will now announce "Bar chart icon representing data visualization" immediately before the heading text — redundant noise that degrades the screen reader experience rather than improving it.Some versions of assistive technologies will announce CSS-generated content as well as specific icon fonts; that announcement may be redundant, inaccurate, and/or meaningless — so
aria-hidden="true"is used.♻️ Proposed fix
<svg - role="img" - aria-label="Bar chart icon representing data visualization" + aria-hidden="true" className="scale-125 font-extrabold text-white dark:text-black" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" >🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/index.jsx` around lines 152 - 169, The SVG decorative icon (the <svg> inside the div with className "relative top-2 hidden h-12 w-12 translate-x-px ...") should be treated as purely decorative: remove role="img" and aria-label and instead set aria-hidden="true" on the <svg> so screen readers ignore it; keep the surrounding markup and styling unchanged.
190-198:⚠️ Potential issue | 🟡 MinorRemove the unused
logoAltprop from theCardEffectcomponent call.The
logoAltprop passed on line 195 is never consumed byCardEffect. The component only acceptsheading,content, andlogo(line 3 ofCardEffect.jsx), and it hardcodes the alt text asalt={`${heading} project logo`}instead. Sinceheading={project.name}, the generated alt text is identical to whatlogoAltwould be, so there's no functional impact. However, the unused prop should be removed fromindex.jsxto avoid confusion.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/index.jsx` around lines 190 - 198, Remove the unused logoAlt prop passed to the CardEffect component in the randomProjects.map render; CardEffect only accepts heading, logo and content (see CardEffect.jsx) and already constructs the alt attribute from heading, so update the JSX where CardEffect is called (inside the randomProjects.map callback) to pass only heading={project.name}, logo={project.logo}, and content={project.description} and delete the logoAlt={...} prop to avoid confusion.
🧹 Nitpick comments (4)
src/pages/apply.jsx (1)
80-131: Alt text additions look good overall.One consideration: each icon image sits directly above a
<p>with the same label text (e.g., "Join us on Discord"). Screen readers will announce both the image alt and the paragraph, which creates some repetition. If the icons are purely decorative alongside the text labels,alt=""withrole="presentation"would avoid double-reading. The current approach is still acceptable since the alt text adds visual context (shape/color descriptions) beyond what the label provides.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/apply.jsx` around lines 80 - 131, These icon images are redundant with their adjacent text labels; update each Image component that sits above a matching <p> label (e.g., the Image with src="/ele1.svg", "/ele2.svg", "/ele3.svg", "/ele4.svg", "/ele5.svg") to be treated as decorative by setting alt="" and adding role="presentation" so screen readers won't double-read the icon and the paragraph label.src/components/Footer.jsx (1)
43-105: Nice accessibility improvements witharia-labelandtitleon social links.Two observations worth considering:
External links lack
target="_blank": Social/external links (GitHub, GitLab, Twitter, YouTube, Discord) typically open in a new tab. Next.jsLinksupportstarget="_blank"withrel="noopener noreferrer"for external URLs.Tap target sizing: The PR mentions improved tap targets for mobile, but these icon links rely solely on the icon's intrinsic size (
size="xl"≈ 1.5em). Consider adding minimum padding or dimensions (e.g.,min-w-[48px] min-h-[48px]withinline-flex items-center justify-center) to reliably meet the WCAG 48×48px tap target guideline.Example for one link
<Link aria-label="AOSSIE on GitHub" - className="text-zinc-400 hover:text-[`#00843D`] dark:text-zinc-400 dark:hover:text-yellow-400 transition" + className="inline-flex items-center justify-center min-w-[48px] min-h-[48px] text-zinc-400 hover:text-[`#00843D`] dark:text-zinc-400 dark:hover:text-yellow-400 transition" href="https://github.com/AOSSIE-Org" + target="_blank" + rel="noopener noreferrer" >🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/Footer.jsx` around lines 43 - 105, Update each external social Link in Footer.jsx (the Link elements wrapping FontAwesomeIcon for faGithub, faGitlab, faTwitter, faYoutube, faDiscord and the mailto link) to open in a new tab and use safe rel attributes by adding target="_blank" and rel="noopener noreferrer"; also ensure each clickable icon meets mobile tap-target sizing by adding utility classes like inline-flex items-center justify-center and min-w-[48px] min-h-[48px] (apply to the Link's className or the inner span that contains the FontAwesomeIcon) so icons are centered and at least 48×48px.src/pages/ideas/index.jsx (1)
83-101: Good use ofrole="img"+aria-labelfor CSS background-image elements.This is the correct accessibility pattern for making background-image divs visible to screen readers.
Note:
src/pages/projects.jsx(lines 103-122) handles the same logos by switching to Next.js<Image>components instead. Consider aligning the two pages on the same approach for consistency —<Image>is generally preferred since it provides built-in optimization and nativealtsupport.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/ideas/index.jsx` around lines 83 - 101, Replace the two decorative background-image divs (the left and right logo divs that currently use role="img" and aria-label) with Next.js <Image> components so both pages use the same approach; specifically, swap the divs that include role="img" and aria-label and the one using style={{ backgroundImage: "url('/logo.png')" }} for <Image src="/logo.png" width={75} height={75} className="hidden md:block m-2 absolute left-10" alt="AOSSIE open-source GSoC logo — circular design with a white code symbol" /> and the corresponding right-side image (adjusting className to absolute right-10), preserving the sizing and responsive classes and removing role/aria-label attributes; this aligns with projects.jsx and enables built-in optimization and native alt text.src/pages/about.jsx (1)
87-100:<h2>for stat display numbers misrepresents the document outline to screen readers.Screen readers use heading elements to navigate the page structure. Announcing "34+", "500+", "3800+" as section headings is semantically misleading. Consider
<p>or<span>styled with the samefontSize/fontWeightinstead.♻️ Proposed refactor (one stat shown; apply to all three)
<div className="text-green-600 dark:text-zinc-400 text-lg font-mono leading-7 font-bold"> - <h2 style={{ fontSize: '2rem', color: '#FFCC00', fontWeight: 'bold' }}>34+</h2> - <p>Active Projects</p> + <p style={{ fontSize: '2rem', color: '#FFCC00', fontWeight: 'bold' }}>34+</p> + <p>Active Projects</p> </div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/about.jsx` around lines 87 - 100, Replace the three visual-stat heading elements (<h2> "34+", "500+", "3800+") with non-heading semantic elements (e.g., <p> or <span>) inside the stats container so screen readers aren't misled; preserve the inline styles (fontSize, color, fontWeight) and existing classes (text-green-600, dark:text-zinc-400, text-lg, font-mono, leading-7, font-bold) to keep visual appearance, and if these stats need an accessible label for screen readers add a visually hidden <span aria-label="Active Projects: 34+"> or use aria-hidden="true" on the decorative number plus a sibling off-screen label for screen readers.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/CardEffect.jsx`:
- Line 3: The CardEffect component currently drops the logoAlt prop passed by
callers; update the CardEffect function signature to destructure logoAlt from
props (e.g., function CardEffect({ heading, content, logo, logoAlt })) and use
it as the img alt attribute where the logo is rendered (replace the current
hardcoded or missing alt on that img with logoAlt, optionally falling back to
heading or an empty string). Ensure you only change the CardEffect component
(not callers) so the alt text propagates correctly.
- Line 5: The <a> element in the CardEffect component is used as a non-link
container and lacks an href so it's not keyboard-accessible; change the anchor
to a semantic container (replace the opening <a className="group ..."> and its
matching closing tag with a <div className="group ..."> / </div>) or, if it
should be navigable, add a valid href and ensure accessibility attributes;
update any event handlers or CSS selectors that target the anchor accordingly
(look for the JSX element with className "group relative block h-[22rem]
max-lg:w-72 max-xl:w-60 w-72 cursor-pointer" inside CardEffect.jsx).
In `@src/helper/projects.js`:
- Line 49: The alt text string defined in the projects helper (property "alt")
contains a double space: alt: 'Pictopy App Logo for GSoC project'; fix it by
removing the extra space so it reads 'Pictopy App Logo for GSoC project' (update
the alt property value where it's defined in src/helper/projects.js).
- Line 57: The alt text value assigned to the alt property in the project object
contains a duplicated phrase ("for GSoC project for GSoC project"); update the
alt string in src/helper/projects.js (the alt property) to remove the repeated
phrase so it reads cleanly (e.g., "EduAid Logo for GSoC project" or an
equivalent concise description), preserving other surrounding object
keys/structure.
In `@src/pages/about.jsx`:
- Around line 146-148: The paragraph element with className "text-green-600
dark:text-yellow-400 text-lg font-mono leading-7 font-bold" contains literal
ASCII dashes which screen readers will announce; fix by making the dashes purely
decorative: either remove the "-----" and apply a visual separator via CSS
(e.g., add a border or ::before/::after styling to that paragraph) or wrap only
the dash characters in a span with aria-hidden="true" (e.g., keep the
surrounding text but put the dashes inside a span aria-hidden="true") so
assistive tech will ignore them.
- Around line 129-144: Remove role="img" from the <figure> so native
figure/figcaption semantics are preserved, give the <figcaption> an id and
either rely on it as the accessible name or add aria-labelledby on the <figure>
pointing to that id, and set the <Line> (canvas) component to aria-hidden="true"
since the caption provides the descriptive text; update references to the
<figure>, <figcaption>, and Line component accordingly so screen readers read
the full figcaption instead of the shorter aria-label.
---
Outside diff comments:
In `@src/helper/projects.js`:
- Around line 22-92: The project objects in src/helper/projects.js include an
unused "alt" property that is never read because CardEffect.jsx (uses
`${heading} project logo`) and projects.jsx (uses `${project.name} project
logo`) generate alt text dynamically; remove the "alt" keys from each project
object (e.g., entries with logo: AgoraLogo, logo: Djed, etc.) to eliminate dead
metadata and keep only name, description, link, and logo fields.
In `@src/pages/index.jsx`:
- Around line 152-169: The SVG decorative icon (the <svg> inside the div with
className "relative top-2 hidden h-12 w-12 translate-x-px ...") should be
treated as purely decorative: remove role="img" and aria-label and instead set
aria-hidden="true" on the <svg> so screen readers ignore it; keep the
surrounding markup and styling unchanged.
- Around line 190-198: Remove the unused logoAlt prop passed to the CardEffect
component in the randomProjects.map render; CardEffect only accepts heading,
logo and content (see CardEffect.jsx) and already constructs the alt attribute
from heading, so update the JSX where CardEffect is called (inside the
randomProjects.map callback) to pass only heading={project.name},
logo={project.logo}, and content={project.description} and delete the
logoAlt={...} prop to avoid confusion.
---
Nitpick comments:
In `@src/components/Footer.jsx`:
- Around line 43-105: Update each external social Link in Footer.jsx (the Link
elements wrapping FontAwesomeIcon for faGithub, faGitlab, faTwitter, faYoutube,
faDiscord and the mailto link) to open in a new tab and use safe rel attributes
by adding target="_blank" and rel="noopener noreferrer"; also ensure each
clickable icon meets mobile tap-target sizing by adding utility classes like
inline-flex items-center justify-center and min-w-[48px] min-h-[48px] (apply to
the Link's className or the inner span that contains the FontAwesomeIcon) so
icons are centered and at least 48×48px.
In `@src/pages/about.jsx`:
- Around line 87-100: Replace the three visual-stat heading elements (<h2>
"34+", "500+", "3800+") with non-heading semantic elements (e.g., <p> or <span>)
inside the stats container so screen readers aren't misled; preserve the inline
styles (fontSize, color, fontWeight) and existing classes (text-green-600,
dark:text-zinc-400, text-lg, font-mono, leading-7, font-bold) to keep visual
appearance, and if these stats need an accessible label for screen readers add a
visually hidden <span aria-label="Active Projects: 34+"> or use
aria-hidden="true" on the decorative number plus a sibling off-screen label for
screen readers.
In `@src/pages/apply.jsx`:
- Around line 80-131: These icon images are redundant with their adjacent text
labels; update each Image component that sits above a matching <p> label (e.g.,
the Image with src="/ele1.svg", "/ele2.svg", "/ele3.svg", "/ele4.svg",
"/ele5.svg") to be treated as decorative by setting alt="" and adding
role="presentation" so screen readers won't double-read the icon and the
paragraph label.
In `@src/pages/ideas/index.jsx`:
- Around line 83-101: Replace the two decorative background-image divs (the left
and right logo divs that currently use role="img" and aria-label) with Next.js
<Image> components so both pages use the same approach; specifically, swap the
divs that include role="img" and aria-label and the one using style={{
backgroundImage: "url('/logo.png')" }} for <Image src="/logo.png" width={75}
height={75} className="hidden md:block m-2 absolute left-10" alt="AOSSIE
open-source GSoC logo — circular design with a white code symbol" /> and the
corresponding right-side image (adjusting className to absolute right-10),
preserving the sizing and responsive classes and removing role/aria-label
attributes; this aligns with projects.jsx and enables built-in optimization and
native alt text.
| import Image from 'next/image' | ||
|
|
||
| export function CardEffect({heading, content, logo}) { | ||
| export function CardEffect({ heading, content, logo }) { |
There was a problem hiding this comment.
logoAlt prop from callers is silently dropped.
According to the AI summary, src/pages/index.jsx passes a logoAlt prop to CardEffect, but this component doesn't destructure or use it. Either wire it through to the alt attribute on line 15, or remove the prop from the call site to avoid confusion.
Proposed fix — accept and use logoAlt
-export function CardEffect({ heading, content, logo }) {
+export function CardEffect({ heading, content, logo, logoAlt }) {Then on line 15:
- alt={`${heading} project logo`}
+ alt={logoAlt || `${heading} project logo`}#!/bin/bash
# Verify how CardEffect is called in index.jsx to confirm logoAlt is passed
rg -n 'CardEffect' -g '*.jsx' -g '*.js' -A5🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/CardEffect.jsx` at line 3, The CardEffect component currently
drops the logoAlt prop passed by callers; update the CardEffect function
signature to destructure logoAlt from props (e.g., function CardEffect({
heading, content, logo, logoAlt })) and use it as the img alt attribute where
the logo is rendered (replace the current hardcoded or missing alt on that img
with logoAlt, optionally falling back to heading or an empty string). Ensure you
only change the CardEffect component (not callers) so the alt text propagates
correctly.
| export function CardEffect({heading, content, logo}) { | ||
| export function CardEffect({ heading, content, logo }) { | ||
| return ( | ||
| <a className="group relative block h-[22rem] max-lg:w-72 max-xl:w-60 w-72 cursor-pointer"> |
There was a problem hiding this comment.
<a> element without href is not keyboard-accessible.
This <a> tag has no href, making it non-focusable via keyboard and semantically incorrect. Since this PR is focused on accessibility, consider changing it to a <div> (if it's just a visual container) or adding a proper href if it should be a link.
Proposed fix if it's a container
- <a className="group relative block h-[22rem] max-lg:w-72 max-xl:w-60 w-72 cursor-pointer">
+ <div className="group relative block h-[22rem] max-lg:w-72 max-xl:w-60 w-72 cursor-pointer">And close tag:
- </a>
+ </div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/CardEffect.jsx` at line 5, The <a> element in the CardEffect
component is used as a non-link container and lacks an href so it's not
keyboard-accessible; change the anchor to a semantic container (replace the
opening <a className="group ..."> and its matching closing tag with a <div
className="group ..."> / </div>) or, if it should be navigable, add a valid href
and ensure accessibility attributes; update any event handlers or CSS selectors
that target the anchor accordingly (look for the JSX element with className
"group relative block h-[22rem] max-lg:w-72 max-xl:w-60 w-72 cursor-pointer"
inside CardEffect.jsx).
| 'PictoPy is a modern desktop app designed to transform the handling of digital photos. It facilitates efficient gallery management with a robust focus on privacy, offering smart tagging capabilities for photos based on objects, faces, or scenes.', | ||
| link: { href: 'https://github.com/AOSSIE-Org/PictoPy', label: 'PictoPy' }, | ||
| logo: PictoPy, | ||
| alt: 'Pictopy App Logo for GSoC project', |
There was a problem hiding this comment.
Double space typo in alt text.
"Pictopy App Logo** **for GSoC project" has an extra space.
Proposed fix
- alt: 'Pictopy App Logo for GSoC project',
+ alt: 'Pictopy App Logo for GSoC project',📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| alt: 'Pictopy App Logo for GSoC project', | |
| alt: 'Pictopy App Logo for GSoC project', |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/helper/projects.js` at line 49, The alt text string defined in the
projects helper (property "alt") contains a double space: alt: 'Pictopy App Logo
for GSoC project'; fix it by removing the extra space so it reads 'Pictopy App
Logo for GSoC project' (update the alt property value where it's defined in
src/helper/projects.js).
| 'An online tool that can generate short quizzes on input educational content can be of great use to teachers and students alike as it can help retain important information, frame questions and quickly revise large chunks of content.', | ||
| link: { href: 'https://github.com/AOSSIE-Org/EduAid', label: 'EduAid' }, | ||
| logo: DefaultLogo, | ||
| alt: 'EduAid Logo for GSoC project for GSoC project', |
There was a problem hiding this comment.
Duplicated phrase in alt text: "for GSoC project for GSoC project".
This is a copy-paste error — "for GSoC project" appears twice.
Proposed fix
- alt: 'EduAid Logo for GSoC project for GSoC project',
+ alt: 'EduAid Logo for GSoC project',📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| alt: 'EduAid Logo for GSoC project for GSoC project', | |
| alt: 'EduAid Logo for GSoC project', |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/helper/projects.js` at line 57, The alt text value assigned to the alt
property in the project object contains a duplicated phrase ("for GSoC project
for GSoC project"); update the alt string in src/helper/projects.js (the alt
property) to remove the repeated phrase so it reads cleanly (e.g., "EduAid Logo
for GSoC project" or an equivalent concise description), preserving other
surrounding object keys/structure.
| <figure | ||
| role="img" | ||
| aria-label="Line chart showing number of AOSSIE completed projects per year from 2016 to 2024, with peaks in 2018 and 2024." | ||
| style={{ width: '100%', height: '400px', marginBottom: '20px' }} | ||
| > | ||
| <Line | ||
| data={data} | ||
| options={options} | ||
| aria-hidden="false" | ||
| /> | ||
| {/* Fallback for screen readers */} | ||
| <figcaption className="sr-only"> | ||
| Number of completed projects by year: 2016 - 4 projects, 2017 - 8, 2018 - 12, 2019 - 9, 2020 - 9, | ||
| 2021 - 11, 2022 - 8, 2023 - 6, 2024 - 18. | ||
| </figcaption> | ||
| </figure> |
There was a problem hiding this comment.
role="img" on <figure> makes the <figcaption> inaccessible to AT — defeating its purpose.
Most screen readers treat an element with role="img" like a "black box" and do not access the individual elements inside it. This means the detailed year-by-year <figcaption> data (lines 141–142) is entirely hidden from assistive technology — only the shorter aria-label string on the <figure> is announced.
The correct pattern per MDN is to rely on native <figure> semantics (no role override): use the appropriate semantic HTML elements <figure> and <figcaption>, and let the figcaption serve as the accessible name for the figure — or, when retrofitting, use aria-labelledby on the figure pointing to the caption's id.
Additionally, the <Line> (canvas) element should use aria-hidden="true" since the text alternative is already provided by the <figcaption>.
♿ Proposed fix
- <figure
- role="img"
- aria-label="Line chart showing number of AOSSIE completed projects per year from 2016 to 2024, with peaks in 2018 and 2024."
- style={{ width: '100%', height: '400px', marginBottom: '20px' }}
- >
- <Line
- data={data}
- options={options}
- aria-hidden="false"
- />
+ <figure
+ aria-labelledby="gsoc-chart-caption"
+ style={{ width: '100%', height: '400px', marginBottom: '20px' }}
+ >
+ <Line
+ data={data}
+ options={options}
+ aria-hidden="true"
+ />
{/* Fallback for screen readers */}
- <figcaption className="sr-only">
+ <figcaption id="gsoc-chart-caption" className="sr-only">
Number of completed projects by year: 2016 - 4 projects, 2017 - 8, 2018 - 12, 2019 - 9, 2020 - 9,
2021 - 11, 2022 - 8, 2023 - 6, 2024 - 18.
</figcaption>
</figure>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <figure | |
| role="img" | |
| aria-label="Line chart showing number of AOSSIE completed projects per year from 2016 to 2024, with peaks in 2018 and 2024." | |
| style={{ width: '100%', height: '400px', marginBottom: '20px' }} | |
| > | |
| <Line | |
| data={data} | |
| options={options} | |
| aria-hidden="false" | |
| /> | |
| {/* Fallback for screen readers */} | |
| <figcaption className="sr-only"> | |
| Number of completed projects by year: 2016 - 4 projects, 2017 - 8, 2018 - 12, 2019 - 9, 2020 - 9, | |
| 2021 - 11, 2022 - 8, 2023 - 6, 2024 - 18. | |
| </figcaption> | |
| </figure> | |
| <figure | |
| aria-labelledby="gsoc-chart-caption" | |
| style={{ width: '100%', height: '400px', marginBottom: '20px' }} | |
| > | |
| <Line | |
| data={data} | |
| options={options} | |
| aria-hidden="true" | |
| /> | |
| {/* Fallback for screen readers */} | |
| <figcaption id="gsoc-chart-caption" className="sr-only"> | |
| Number of completed projects by year: 2016 - 4 projects, 2017 - 8, 2018 - 12, 2019 - 9, 2020 - 9, | |
| 2021 - 11, 2022 - 8, 2023 - 6, 2024 - 18. | |
| </figcaption> | |
| </figure> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/about.jsx` around lines 129 - 144, Remove role="img" from the
<figure> so native figure/figcaption semantics are preserved, give the
<figcaption> an id and either rely on it as the accessible name or add
aria-labelledby on the <figure> pointing to that id, and set the <Line> (canvas)
component to aria-hidden="true" since the caption provides the descriptive text;
update references to the <figure>, <figcaption>, and Line component accordingly
so screen readers read the full figcaption instead of the shorter aria-label.
| <p className="text-green-600 dark:text-yellow-400 text-lg font-mono leading-7 font-bold"> | ||
| ----- Number of Completed Projects Year Wise ----- | ||
| </p> |
There was a problem hiding this comment.
ASCII dashes ----- will be verbosely announced by screen readers.
The literal ----- characters are read aloud as "dash dash dash dash dash" by most AT. Since this is a purely decorative separator, either remove the dashes (use a CSS border or ::before/::after pseudo-element for the visual effect) or wrap them in a <span aria-hidden="true">.
♿ Quick fix using `aria-hidden`
- <p className="text-green-600 dark:text-yellow-400 text-lg font-mono leading-7 font-bold">
- ----- Number of Completed Projects Year Wise -----
- </p>
+ <p className="text-green-600 dark:text-yellow-400 text-lg font-mono leading-7 font-bold">
+ <span aria-hidden="true">----- </span>
+ Number of Completed Projects Year Wise
+ <span aria-hidden="true"> -----</span>
+ </p>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <p className="text-green-600 dark:text-yellow-400 text-lg font-mono leading-7 font-bold"> | |
| ----- Number of Completed Projects Year Wise ----- | |
| </p> | |
| <p className="text-green-600 dark:text-yellow-400 text-lg font-mono leading-7 font-bold"> | |
| <span aria-hidden="true">----- </span> | |
| Number of Completed Projects Year Wise | |
| <span aria-hidden="true"> -----</span> | |
| </p> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/about.jsx` around lines 146 - 148, The paragraph element with
className "text-green-600 dark:text-yellow-400 text-lg font-mono leading-7
font-bold" contains literal ASCII dashes which screen readers will announce; fix
by making the dashes purely decorative: either remove the "-----" and apply a
visual separator via CSS (e.g., add a border or ::before/::after styling to that
paragraph) or wrap only the dash characters in a span with aria-hidden="true"
(e.g., keep the surrounding text but put the dashes inside a span
aria-hidden="true") so assistive tech will ignore them.
1 participant
Addressed Issues:
Improves general accessibility across the site.
Summary of Changes:
alttext for all images.aria-labelattributes to all interactive icons (email, GitHub, GitLab, Twitter, YouTube, Discord).Screenshots/Recordings:
N/A — functional accessibility changes only.
)
(
this is for example reference
Additional Notes:
All changes tested locally. No visual layout changes.
Checklist
AI Usage Disclosure
I used ChatGPT to help review accessibility guidelines.
Summary by CodeRabbit
New Features
Improvements