Accessibility and Compliance Changes

src/App.jsx

@@ -54,6 +54,7 @@ export default function App() {
 
           <div className="nav-icons">
             <a
+              id="instagram-nav-item"
               className="nav-icon"
               href="https://www.instagram.com/wichacks/"
               target="_blank"

src/page_components/Category.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import "../style/style.css";
 
 function CategoryBox({ image, category, description, fitClass }) {
@@ -9,24 +9,23 @@ function CategoryBox({ image, category, description, fitClass }) {
         type="button"
         className={`category-card ${flipped ? "is-flipped" : ""}`}
         onClick={() => setFlipped((v) => !v)}
-        aria-pressed={flipped}
-        aria-label={`${category} category card`}
+        aria-expanded={flipped}
+        aria-description={category}
         >
-        <div className="category-inner">
-            <div className="category-face category-front">
-            <img src={image} alt="" className="category-img" />
-            </div>
-
-            <div className="category-face category-back">
-            {/* IMPORTANT: pass the raw image path, not url(...) */}
-            <div className="category-mask" style={{ "--mask-url": image }}>
-                <div className={`category-back-content ${fitClass}`}>
-                <h3 className="category-title">{category}</h3>
-                <p className="category-desc">{description}</p>
+            <div className="category-inner">
+                <div className="category-face category-front">
+                    <img src={image} alt="" aria-hidden className="category-img" />
+                </div>
+                <div className="category-face category-back">
+                {/* IMPORTANT: pass the raw image path, not url(...) */}
+                <div className="category-mask" style={{ "--mask-url": image }} aria-hidden={!flipped}>
+                    <div className={`category-back-content ${fitClass}`}>
+                        <h3 className="category-title">{category}</h3>
+                        <p className="category-desc">{description}</p>
+                    </div>
+                </div>
                 </div>
             </div>
-            </div>
-        </div>
         </button>
     );
 }

src/page_components/Question.jsx

@@ -2,9 +2,9 @@ import "../style/style.css";
 
 function Question({ question, side, onClickEvent, classic}) {
     return (
-        <div className={classic} onClick={onClickEvent}>
+        <button type="button" className={`${classic} question`} onClick={onClickEvent}>
             <h3>{question}</h3>
-        </div>
+        </button>
     );
 }
 

src/pages/FAQ.jsx

@@ -19,11 +19,11 @@ function FAQ() {
             <div className="qna">
                 <div className="questions">
                     {qa.map((item, idx) => (
-                        <Question key={idx} classic={idx % 2 === 0 ? 'left question' : 'right question'} question={item.question} onClickEvent={() => setSelected(item)}/>
+                        <Question key={idx} classic={idx % 2 === 0 ? 'left' : 'right'} question={item.question} onClickEvent={() => setSelected(item)}/>
                     ))}
                 </div>
                 <div className="answer">
-                    <textarea value={selected?.answer ?? ""} readOnly></textarea>
+                    <textarea tabIndex="-1" value={selected?.answer ?? ""} readOnly></textarea>
                     {selected?.link ? (
                         <a href={selected.link} target="_blank" rel="noopener noreferrer">
                             {selected.linktext}

src/pages/Hero.jsx

@@ -44,7 +44,7 @@ function Hero() {
             </div>
             <div className="hero-spacer"></div> {/* gives space on right so you can see widget */}
             <div className="hero-bottom">
-                <div className="countdown" role="timer" aria-live="polite">
+                <div className="countdown" role="timer">
                     <h2>Countdown to WiCHacks 2026</h2>
                     {isLive ? (
                         <div className="countdown-live">We're live!</div>

src/pages/Sponsors.jsx

@@ -10,16 +10,16 @@ import sg from "../assets/sponsors/student-gov.png";
 import wegmans from "../assets/sponsors/wegmans.png";
 
 const sponsors = [
-    { image: csl, link: "https://www.csl.com/careers/early-careers-at-csl" },
-    { image: mandt},
-    { image: capitalone, link: "https://www.capitalonecareers.com/students" },
-    { image: kodak},
-    { image: mindex},
+    { label: "CSL", image: csl, link: "https://www.csl.com/careers/early-careers-at-csl" },
+    { label: "M and T Tech", image: mandt},
+    { label: "Capitalone", image: capitalone, link: "https://www.capitalonecareers.com/students" },
+    { label: "Kodak", image: kodak},
+    { label: "Mindex", image: mindex},
     // magic, student gov, & mlh are supporters
-    { image: magic },
-    { image: mlh },
-    { image: sg },
-    { image: wegmans },
+    { label: "Magic Spell Studios", image: magic },
+    { label: "Major League Hacking", image: mlh },
+    { label: "RIT Student Government", image: sg },
+    { label: "Wegmans", image: wegmans },
 ];
 
 const sponsor_rows = [1, 4, 4];
@@ -54,7 +54,7 @@ function Sponsors() {
                                 <div className="sponsor-box">
                                     <img
                                         src={sponsor.image}
-                                        alt={`sponsor-${rowIndex}-${index}`}
+                                        alt={sponsor.label}
                                         className="sponsor-image"
                                     />
                                 </div>
@@ -66,6 +66,7 @@ function Sponsors() {
                                     href={sponsor.link}
                                     target="_blank"
                                     rel="noopener noreferrer"
+                                    aria-label={sponsor.label}
                                 >
                                     {content}
                                 </a>