标签：#a11y

A reviewer approves “update dependencies,” but the system later interprets that as publishing a package. The human was present; meaningful approval was not. The missing artifact is evidence connecting the reviewed plan, its authority, and its consequences to the exact action that ran. What is verified According to OpenAI's July 21 disclosure, a combination of models operating in an internal benchmark with reduced cyber refusals compromised Hugging Face infrastructure. The primary statement is https://openai.com/index/hugging-face-model-evaluation-security-incident/ . July 24 coverage separately reports US discussion of independent audits and emergency-shutdown rules; it should be read as policy reporting and proposals, not as established incident detail or enacted law. Nothing public there establishes the exact attack path, full asset set, or complete response. The approval evidence card Before asking for approval, show: Field Question it answers Stop condition immutable plan version is this still the reviewed plan? version changed actions and arguments what will happen? hidden or wildcard action destinations where will effects land? destination unresolved credential scope/expiry what authority is granted? broad or persistent grant reversibility what can be undone? irreversible effect unexplained independent checks what constrained the plan? required check missing stop receipt did revocation complete? receipt unconfirmed Flow: draft plan -> automated checks -> human review -> version-bound approval -> execution receipts -> completion or emergency stop -> post-action summary. Any plan mutation loops back to review. “Approve all future actions” is not a shortcut; it changes the authority being requested. Research protocol Give participants three scenarios: a harmless wording change, a destination change, and an irreversible action inserted after review. Ask them to identify what they authorize, what would make them refuse, and where they expect emergency stop. Success

An accessible combobox can follow the correct ARIA pattern and still become unusable when two search responses arrive in the wrong order. Reproduce this sequence: Type ca , then quickly type cat . The cat response arrives first and highlights cat facts . The slower ca response arrives and replaces the list. aria-activedescendant now points to an option that no longer exists. IME input adds another boundary: searching during composition can send partial text the user has not committed. I would model the request generation explicitly: let generation = 0 ; let composing = false ; async function search ( query : string ) { const mine = ++ generation ; const options = await fetchOptions ( query ); if ( mine !== generation || composing ) return ; render ( options ); restoreActiveOptionByKey (); } The stable key matters. An array index cannot preserve the active option when ranking changes. Regression matrix Input Injected failure Expected evidence ca → cat first request delayed only cat results render Arrow Down result refresh active key survives or resets visibly Escape response arrives afterward popup stays closed IME composition network is fast no request until compositionend A Playwright test should assert focus remains on the input, every aria-activedescendant resolves to a live element, and Escape invalidates outstanding generations. A manual screen-reader pass should confirm result-count announcements are not emitted for discarded responses. The WAI-ARIA Authoring Practices combobox pattern defines the keyboard contract. The missing production step is testing that contract under asynchronous replacement, not only against static example data. Which stale-response failure has been hardest to reproduce in your search UI?

Web Accessibility for Startups: 5 Small Wins That Scale Palak jain Palak jain Palak jain Follow Oct 7 '25 Web Accessibility for Startups: 5 Small Wins That Scale # webaccessibility # webdev # frontend # startup 21 reactions 4 comments 4 min read

Wer digitale Finanzprodukte baut, trifft früh eine grundlegende Entscheidung: native App, installierbare Desktop-Software oder eine Anwendung, die komplett im Browser läuft. Capitnex hat sich für den letzten Weg entschieden. Der WebTrader ist als browserbasierte Umgebung angelegt und benötigt keine lokale Softwareinstallation. Aus Produkt- und UX-Sicht ist genau diese Weichenstellung der spannendste Ausgangspunkt, weil sie fast jede weitere Gestaltungsentscheidung beeinflusst. Auch für Leser, die nicht handeln möchten, lohnt der Blick darauf, wie ein solches Produkt aufgebaut ist. Der Browser als Laufzeitumgebung Eine Anwendung ohne Installation senkt die Einstiegshürde spürbar. Es gibt kein Setup, keine Versionskonflikte auf dem Endgerät und keine Betriebssystembindung, mit der sich Anwender beschäftigen müssen. Der Zugang erfolgt über einen gängigen Webbrowser, und die Oberfläche steht damit unabhängig vom konkreten Gerät bereit. Für Entwickler hat dieser Ansatz eine klare Konsequenz: Die gesamte Darstellung muss auf unterschiedliche Bildschirmgrößen und Eingabearten reagieren. Capitnex beschreibt die Oberfläche als responsiv und konfigurierbar, was genau diese Anforderung adressiert. Der Verzicht auf ein lokales Client-Programm ist deshalb keine Nebensache, sondern eine Produktentscheidung mit Folgen für Verteilung, Wartung und die Konsistenz über verschiedene Endgeräte hinweg. Ein weiterer Effekt betrifft die Zugänglichkeit im weiteren Sinn. Wenn eine Anwendung ohne vorherige Installation erreichbar ist, entfällt eine ganze Klasse von Hürden, die sonst zwischen Interesse und erstem Zugriff liegen. Kein Download, keine Rechteverwaltung auf dem Gerät, keine Rücksicht auf ältere Hardware-Anforderungen. Die Anwendung trifft den Nutzer dort, wo er ohnehin arbeitet, nämlich im Browser. Das ist keine formale Barrierefreiheit im engen technischen Sinn, aber es ist eine bewusst niedrige Einstiegsschwelle, die in der Produktkonzeption angelegt ist. Informationsarchitektur

This button passes every automated accessibility scan we've thrown at it: <button class= "btn-primary" type= "button" > Check availability </button> And it breaks every AI agent that tries to book a room through it. The markup is clean: a real <button> , a proper accessible name from its text content, an explicit type . Nothing to flag. The failure isn't in the button, it's in what happens after the click. And no static scanner ever clicks. What a scanner actually sees Static accessibility scanners evaluate the DOM at a point in time. Usually the initial render: HTML parsed, framework hydrated, nothing interacted with. They check that state against WCAG rules, missing alt text, contrast ratios, label associations, heading order. That's genuinely useful. It's also a photograph of a lobby, when the task happens in the hallways. Here's what never appears in the initial DOM of a typical booking flow: The date picker that mounts when the check-in field receives focus The error message injected after a failed form submit The room-selection modal that opens on "Check availability" The loading state between "Book now" and the confirmation A scanner reports zero issues on all of these, for the simple reason that at scan time, none of them exist. What an agent actually traverses An AI agent completing a booking doesn't evaluate a snapshot. It walks the flow: reads the accessibility tree, decides on an action, performs it, waits for the interface to respond, reads the tree again. Every state transition is a place where the tree can lie to it. Let's look at three patterns we keep finding in real audits. All three pass static scans. All three stop an agent. 1. The modal that exists on screen but not in the tree { isOpen && ( < div className = "modal-overlay" > < div className = "modal" > < h2 > Select your room </ h2 > < RoomList rooms = { available } /> </ div > </ div > )} Visually: a modal. In the accessibility tree: a div soup appended somewhere in the body, with no role="di

GitHub announced Copilot Vision general availability on July 1, 2026, allowing developers to attach screenshots to Copilot conversations as visual context. Primary source: GitHub Changelog, “Copilot Vision is generally available” . A screenshot can shorten “make this component look like that.” It can also become an invisible source of truth: unlabeled attachment controls, image-only requirements, generated markup with no semantics, and an error state communicated only by a thumbnail badge. The accessibility target should be stronger than “a screen reader can upload a file.” A keyboard or screen-reader user must be able to understand the supplied requirements, remove or replace the image, follow processing state, and verify the generated interface. Add a text contract beside the screenshot Use a structured alternative, not a filename: <fieldset> <legend> Reference design </legend> <label for= "shot" > Screenshot </label> <input id= "shot" type= "file" accept= "image/png,image/jpeg" /> <label for= "requirements" > Required behavior and content </label> <textarea id= "requirements" aria-describedby= "requirements-help" ></textarea> <p id= "requirements-help" > Describe text, controls, order, states, and behavior that must not be inferred from appearance alone. </p> <p id= "upload-status" role= "status" aria-live= "polite" ></p> </fieldset> Example text contract: Dialog title: Delete workspace? Body: This cannot be undone. Focus starts on Cancel. Tab order: Cancel, Delete, close button. Escape closes and returns focus to the launch button. Delete is destructive; color is not its only indicator. The screenshot communicates spacing and visual hierarchy. The text carries names, order, behavior, and safety requirements. Model attachment states explicitly type AttachmentState = | { kind : ' empty ' } | { kind : ' reading ' ; name : string } | { kind : ' ready ' ; name : string ; alt : string } | { kind : ' error ' ; name : string ; message : string }; Render each state with

GitHub announced on July 14, 2026 that Copilot for JetBrains expanded bring-your-own-key capabilities. Primary source: GitHub Changelog, July 14, 2026 . Provider and model selection looks like two dropdowns, but behaves like one dependent workflow: credential context -> provider -> compatible models -> confirmed session This is a proposed accessibility test plan, not a hands-on review. It does not claim that the current product has an accessibility defect. Test outcomes, not widget assumptions A keyboard or screen-reader user should be able to reach the provider control, discover its name and current value, inspect options, commit or cancel, understand that model choices changed, and select a compatible model without losing context. Use this matrix: Case Action Keyboard expectation Screen-reader expectation State expectation P1 Reach provider Visible focus Name, role, value No change P2 Open options Documented key works Expanded state is clear Existing value retained P3 Browse providers No focus escape Option and selection announced Browsing does not commit P4 Select provider Pointer not required New value announced once Model refresh begins M1 Reach model after refresh Focus not stolen Availability communicated Options match provider M2 Search models Keys do not conflict Query and result are clear Search does not select R1 Change provider later No trap Invalidated model explained Stale pair cannot submit E1 Loading fails Retry/cancel reachable Error and next action announced Last valid state is clear The matrix separates interaction, announcement, and state correctness. A control can pass one and fail another. Record the environment ide : " <product and exact version>" plugin : " GitHub Copilot <exact version>" os : " <name and version>" assistive_technology : " <name and version>" keymap : " <default or named alternative>" initial_state : " <unconfigured or existing selection>" Vary one versus many providers, short versus long model names, loaded/loading/empty/err

Two buttons in a confirmation dialog look simple: Cancel and Confirm. Keyboard behavior makes the component a small state machine. A recent MonkeyCode change gives us a concrete example. Issue #862 and PR #863 add these shortcuts to the slash-command confirmation: ArrowLeft -> focus Cancel ArrowRight -> focus Confirm The reviewed implementation at commit c58bcd4 moves focus through button refs. That is a useful extra interaction. It is not a replacement for the dialog's accessibility foundation. Keep the baseline first For an alert-style confirmation, users still need: an accessible name and description; focus moved inside when the dialog opens; Tab and Shift+Tab constrained to dialog controls; Escape to dismiss when cancellation is allowed; visible focus; focus returned to the trigger after close; actual buttons whose labels explain the actions. The WAI-ARIA Authoring Practices Alert Dialog Pattern describes the modal semantics and keyboard foundation. Left/right mapping is a product shortcut, not a required AlertDialog convention. That means we must not steal keys from the established behavior around it. Isolate the extra mapping The companion keyboard.mjs starts with a pure function: export function arrowAction ( key ) { if ( key === " ArrowLeft " ) return " cancel " ; if ( key === " ArrowRight " ) return " confirm " ; return null ; } The event handler ignores unrelated and modified keys: export function handleDialogArrow ( event , controls ) { const action = arrowAction ( event . key ); if ( ! action || event . altKey || event . ctrlKey || event . metaKey ) return false ; event . preventDefault (); controls [ action ]. focus (); return true ; } Notice what is absent: no handler for Tab , Shift+Tab , Escape , or Enter . The native <dialog> and buttons in the minimal demo retain their normal jobs. In a React component, use a well-tested modal/dialog primitive for focus containment and dismissal, then add this narrow handler to its content. A complete minimal dialo

Playing the game of writing technical post was funny two years ago. Now, I am a mod and it is...

I'm Safdar Ali , a frontend engineer in Bengaluru. Last quarter I audited a client dashboard that looked polished — clean Tailwind, smooth transitions, Lighthouse performance in the 90s — and failed basic keyboard navigation in under two minutes. Tab order jumped randomly, modals trapped nothing, and icon-only buttons had no labels. WCAG 2.2 is not a legal checkbox for enterprise contracts alone. It is how you ship React UI that works for everyone: screen reader users, keyboard-only users, people on slow 4G with zoom enabled, and your future self debugging at 11pm. This guide covers the wcag 2.2 react patterns I run before every merge. Why WCAG 2.2 matters for React in 2026 WCAG 2.2 added criteria that directly affect React apps: focus not obscured, dragging movements, target size minimums, and consistent help. React's component model makes accessibility both easier and easier to break — you can encapsulate good patterns in a shared Dialog component, but you can also copy-paste a div-with-onClick button across forty files. The legal landscape in India is catching up. Government portals and fintech products increasingly require accessibility audits before launch. Even when nobody asks, inclusive UI reduces support tickets — unclear error messages and broken focus management generate more "the form is broken" emails than actual backend failures. React does not ship accessible components by default. A is focusable; a is not, unless you wire it. Your job is to make the accessible path the default path in your design system. Focus traps — modals that actually work A focus trap keeps keyboard focus inside a modal until the user dismisses it. Without one, Tab sends focus to elements behind the overlay — confusing for sighted keyboard users and disorienting for screen reader users who hear content from two layers at once. Continue Reading...

In 2024, Apple shipped something genuinely great: AirPods Pro can run a clinical-style hearing test and then act as hearing assistance, tuned to your ears. People love it. There's just one catch — it needs an iPhone to set up, recent AirPods to run, and if you're on Android you get nothing. Meanwhile, the average pair of prescription hearing aids costs about $4,700 , and surveys show a $1,500 device is simply out of reach for more than half the people who need one. There are a billion-plus Android phones out there, most of them sitting next to a pair of ordinary earbuds that already contain everything you physically need: a microphone, a DAC, and speakers. The gap seemed absurd. So I've spent the past weeks building OpenHearing — a free, GPLv3 Android app that does the whole pipeline: Hearing check — a pure-tone test using the modified Hughson–Westlake staircase (the same adaptive up-down procedure audiologists use), per ear, per frequency. Or skip it and type in the numbers from a real audiogram. Sound profile — the results are fitted into a per-ear gain curve (half-gain rule for v1; NAL-NL2 is a pluggable strategy for later). Real-time assist — mic in, per-ear DSP, earbuds out. Quiet speech gets louder. Works with whatever earbuds you already own. No root, no special hardware. It is very deliberately not a medical device — no diagnosis, no treatment claims, big disclaimer before anything plays a tone. Think of it as the open, inspectable "gateway" tier below real hearing care. This post is about the three engineering decisions that turned out to matter most. 1. The safety-critical DSP is pure Kotlin — and that's the whole point An app that amplifies sound directly into human ears has exactly one unforgivable failure mode: being loud when it shouldn't be. So the entire signal chain is plain Kotlin with zero Android dependencies, hidden behind a tiny I/O interface. AudioRecord / AudioTrack is a dumb shell; everything that can hurt someone is JVM-testable: input → EQ

My father is a stroke patient. Watching him try to speak clearly again — with patience, repetition, and no small amount of courage — is what pushed me to build Voice Revive. It’s a free web app for stroke survivors and people with aphasia: pick a category, hear a word, say it back, get forgiving feedback. No accounts, no scores, no pressure. I vibecoded most of it with AI tools, but the reason behind it is deeply personal. If it helps even one person feel a little more confident speaking again, it was worth it. Let’s work together: Voice Revive is a personal project, and I’m open to: Collaboration — features, accessibility, reaching more people who need it Sponsorships — to keep the app free and accessible Part-time / freelance web development — I’m comfortable building with: What I work with today: Next.js & TypeScript Node.js (Express) Python (FastAPI) Tailwind CSS What I’ve built with before (freelance): Kotlin & Java for Android Development(previous experience - freelance) ESP32 & C++ for IOT Development Try it: https://voicerevive.online/ Connect with me: https://www.linkedin.com/in/aaron-mercado-163b02369/

Prologue A while ago, I decided to develop a fully accessible main navigation component in React and write a series of articles documenting the steps it took to create a non-trivial accessible component. This article completes the process of creating a main navigation component that is universally accessible, both perceptually and operatively; can operate in a controlled or uncontrolled state; and is operable when displayed in a horizontal, desktop arrangement as well as in a vertical, mobile scenario. Note : This article is one of a series demonstrating building a React navigational component from scratch while considering accessibility through the process. The articles are accompanied by a GitHub repository with releases tied to one or more articles; each builds on the previous one until a fully implemented navigation component is complete. Each release and its associated tag contain fully runnable code for the article. The code discussed in this article is available in the release. and may be downloaded at release 1.0.0 . Links in the article will take you to the proper file in the tagged GitHub Repository. Because the code for this release is scattered across components, line numbers are added to make it easier to locate in the linked GitHub file. Line numbers are also provided for those who would like to follow along with a downloaded copy. While code examples are written in JavaScript for brevity, all actual code is written in Typescript and targets React 19.x, all while using vanilla CSS. Examples use Next.js v16.x, which is not required to run the navigation component. You can view the requirements for Vertical Alignment along with previous requirements. Content Links Introduction Acceptance Criteria Data Setup Keeping SubLists Open Allowing Scroll when Focus Shifts Down Arrow Key Implementation Up Arrow Key Implementation Conclusion Introduction Up until now, all keyboard handling has been implemented with the default horizontal layout in mind. When display

Semantic HTML and Accessibility: Building Better Websites Introduction Semantic HTML is the practice of using HTML elements that clearly describe the purpose of the content on a webpage. Instead of using many <div> elements, semantic tags such as <header> , <nav> , <main> , <section> , <article> , and <footer> make the page easier to understand. Semantic HTML is important because it improves accessibility, helps search engines understand web pages, and makes code easier to read and maintain. Before: Non-Semantic HTML <div class= "header" > <h1> My Portfolio </h1> </div> <div class= "navigation" > <a href= "index.html" > Home </a> <a href= "about.html" > About </a> </div> <div class= "content" > <p> Welcome to my portfolio website. </p> </div> After: Semantic HTML <header> <h1> My Portfolio </h1> </header> <nav> <a href= "index.html" > Home </a> <a href= "about.html" > About </a> </nav> <main> <section> <p> Welcome to my portfolio website. </p> </section> </main> Accessibility Issues I Found 1. Images Missing Alternative Text Before: <img src= "images/profile.jpg" > After: <img src= "images/profile.jpg" alt= "Profile picture of Grace Loko" > Adding alternative text allows screen readers to describe images to users with visual impairments. 2. Navigation Was Not Semantic Before: <div> <a href= "index.html" > Home </a> <a href= "about.html" > About </a> </div> After: <nav> <a href= "index.html" > Home </a> <a href= "about.html" > About </a> </nav> Using the <nav> element helps assistive technologies identify the website navigation. 3. Form Inputs Had No Labels Before: <input type= "text" placeholder= "Your Name" > After: <label for= "name" > Name </label> <input type= "text" id= "name" name= "name" > Labels improve accessibility by helping screen readers identify each form field. Conclusion This accessibility audit helped me understand the importance of semantic HTML and accessible web design. By replacing non-semantic elements with semantic tags, adding image alt text,

An accessibility audit is not only a compliance activity. For engineering teams, it is also a quality review of how real users interact with the product. If you are preparing for a WCAG 2.2 AA audit, the biggest mistake is waiting for the auditor to tell you what information is missing. You can make the process much smoother by preparing the right workflows, accounts, test data, and remediation owners upfront. Scope the product by user flow Do not start with only a list of URLs. URLs matter, but accessibility bugs often appear inside stateful interactions: Form validation Custom dropdowns Modal dialogs Keyboard focus management Error recovery Dynamic tables Authenticated dashboards Document downloads Instead of asking, "Which pages should we test?" ask: What tasks must users be able to complete? That usually gives you a better audit scope. Prepare accounts and stable data If a workflow requires authentication, roles, or sample records, prepare them before the audit starts. Useful prep includes: Admin, standard user, and limited-role accounts Stable sample records Forms with prefilled data where needed Test payment or transaction flows if applicable Known feature flags Environment notes This avoids spending audit time debugging access problems. Confirm the standards WCAG 2.2 AA may be the target, but the report may also need to reference WCAG 2.1 AA, Section 508, EN 301 549, GIGW, or IS 17802. Engineering teams should know this early because it affects reporting language and remediation priority. Make evidence developer-friendly A useful issue should be reproducible. Good audit findings usually include: Affected URL or screen Component or selector Steps to reproduce User impact WCAG success criterion Expected behavior Screenshot or notes This helps teams move from report to ticket without guessing. Plan remediation ownership Accessibility issues do not always map cleanly to one discipline. Examples: Missing form label: engineering Confusing error copy: content and pr

Originally published on danholloran.me The original Grimicorn was an exercise in restraint: muted pastels on a blue-gray base, tuned so nothing on screen ever burns your eyes. Grimicorn Neon is the opposite impulse. Same grim-reaper-meets-unicorn idea, except this one is plugged into the mains — saturated, glowing accents on a near-black base, dark-only, loud on purpose. What makes the pair interesting from an engineering angle is how little had to change to get there. Neon is not a new theme so much as the same theme with the volume knob turned all the way up. That only works because of a decision made back in the calm version: colors are defined by role, not by appearance. Eight roles, eight louder hexes Both themes share the exact same role map. Blue is keywords, links, and the primary accent. Green is strings, success, and the cursor. Yellow is types, decorators, and warnings. The accent hierarchy is still blue → purple → teal, and the semantic anchors still hold: green means good, the error color means wrong. What changes is only the values bound to those roles. Calm Grimicorn's blue is a soft #83AFE5 ; Neon's is an electric #2323FF . Calm green is a sage #A9CE93 ; Neon green is an acid #A3E635 . The error role even swaps identity, from a gentle salmon to a hot #FF2D9B pink. Lay the two palettes side by side and the structure is identical — only the saturation and brightness move: // same eight roles, two personalities const calm = { blue : " #83AFE5 " , green : " #A9CE93 " , error : " #DD9787 " , base : " #253039 " , }; const neon = { blue : " #2323FF " , green : " #A3E635 " , error : " #FF2D9B " , base : " #0A0A0B " , }; Because every one of the fourteen tool ports — VS Code, Ghostty, Obsidian, Claude Code, JetBrains, tmux, and the rest — is generated from a single palette.md , producing the neon set was mostly a matter of feeding the build a different eight values. The emitters that translate roles into VS Code scopes or ANSI slots never knew the difference.

Why Semantic HTML is a Superpower for Your Website As I’ve been building my personal portfolio during the IYF Season 11 program, I realized that writing code is about more than just making things look "right"—it’s about making them accessible for everyone. The secret is Semantic HTML. What is Semantic HTML? Semantic HTML uses tags that provide meaning to the web page rather than just layout instructions. Tags like , , , , and tell the browser and screen readers exactly what content they are interacting with. If you use for everything, you are handing a screen reader a blank map. Semantic tags act like a GPS, allowing users with visual impairments to navigate your site efficiently. Before vs. After The difference is clear when comparing structure: Before (Non-Semantic): HTML My Portfolio Home | About | Contact Welcome to my site... After (Semantic): HTML My Portfolio Home About Contact Welcome to my site... Fixing Accessibility Issues During my accessibility audit (Task 2.3), I identified three key areas to improve: Missing alt Attributes: I had images without descriptions. I fixed this by adding context, such as alt="Portrait of Gladwell Muthoni, web development student", ensuring screen readers can describe images to visually impaired users. Lack of Semantic Structure: My initial gallery relied on generic containers. Switching to and tags organized my project list logically, helping assistive technology categorize the content. Heading Hierarchy: I was using tags for visual styling rather than logical structure. I corrected this to follow a strict to hierarchy, which helps screen readers outline the page properly. My portfolios URL https://github.com/gladwellmuthoni/iyf-s11-week-01-gladwellmuthoni.git

Prologue A while ago, I decided to develop a fully accessible main navigation component in React and write a series of articles documenting the steps it took to create a non-trivial accessible component. In my last development article , I finally completed the requirements for delivering an uncontrolled navigation component with a horizontal layout; with full keyboard functionality, along with adding the niceties of closing sublists when lists are closed and making sure any open sublist on the top row closes when focus shifts away from it. Rather than write an entirely new component for a mobile version, I'm going to modify the existing code. This first article outlines the steps necessary to set up and work with a controlled component. -— Note : This article is one of a series demonstrating building a React navigational component from scratch while considering accessibility through the process. The articles are accompanied by a GitHub repository with releases tied to one or more articles; each builds on the previous one until a fully implemented navigation component is complete. Each release and its associated tag contain fully runnable code for the article. The code discussed in this article is available in the release. and may be downloaded at release 1.0.0 . Links in the article will take you to the proper file in the tagged GitHub Repository. Because the code for this release is scattered across components, line numbers are added to make it easier to locate in the linked GitHub file. Line numbers are also provided for those who would like to follow along with a downloaded copy. While code examples are written in JavaScript for brevity, all actual code is written in Typescript and targets React 19.x, all while using vanilla CSS. Examples use Next.js v16.x, which is not required to run the navigation component. You can view the requirements for the Controlled Components Release along with previous requirements. Content Links Introduction Acceptance Criteria Contr

When I started learning web development, I discovered that creating a webpage is more than making it look good. It is also important to make websites accessible and easy for everyone to use. Two concepts that helped me improve my website were semantic HTML and web accessibility. Semantic HTML means using HTML elements according to their purpose instead of using generic elements for everything. Semantic elements such as , , , , , and make the structure of a webpage clear. They improve readability, help search engines understand the content, and make websites easier for people using screen readers. Before (Non-Semantic HTML) My Website Welcome to my website. After (Semantic HTML) <h1>My Website</h1> Welcome to my website. The semantic version is much easier to understand because each element clearly describes its purpose. During my accessibility audit, I found several improvements that made my website more user-friendly. The first issue was that images needed descriptive alternative text. I added meaningful alt attributes so screen readers can describe the images to users who cannot see them. The second improvement was the heading hierarchy. I used one for the page title and organized the remaining sections with headings. This creates a logical structure that is easier to navigate. The third improvement involved descriptive links. Instead of using vague text, I changed links to clearly describe where they lead. For example, I used "Visit GitHub" instead of a generic phrase. I also ensured that the HTML document included the lang="en" attribute and that all form fields had properly associated elements. These small changes improve accessibility and usability for everyone. Working with semantic HTML and accessibility has shown me that building websites is not only about appearance but also about creating experiences that everyone can use. As I continue learning web development, I will continue applying these best practices in all my projects. My Portfolio Portfolio Websi

Note : This article is one of a series demonstrating building a React navigational component from scratch while considering accessibility through the process. The articles are accompanied by a GitHub repository with releases tied to one or more articles; each builds on the previous one until a fully implemented navigation component is complete. Each release and its associated tag contain fully runnable code for the article. The code discussed in this article is available in the release. and may be downloaded at release 0.9.0 . A page showcasing these base components may be run locally through this release. While code examples are written in JavaScript for brevity, all actual code is written in Typescript and targets React 19.x, all while using vanilla CSS. Examples use Next.js v16.x, which is not required to run the navigation component.] The design requirements for this release are available . -— Content Links Introduction Layout Appearance <nav / > Generic Styling Reimagining Focus and Hover Achieving Parity aria-current Refinements Summary Introduction With only one more release coming up and the horizontal layout styling complete, now is the time to focus on completing vertical layout styling. Most of the layout itself was completed in an earlier release and described in the article Laying it all out on the vertical . When styling a component, care must be taken to ensure parity with the information provided by screen readers through some aria attributes. For instance, a navigation component must set the aria-current="page" attribute on a link whose href points to the current page. In the example being shown, the link in question is the "by Era" link, under Find Your Next Story and Tales. ) While screen reader users hear which button or link is the item currently capturing focus, styling is needed to achieve the same for screen users. Visual styling is necessary to guarantee that visual and auditory/tactile users have the same information. Layout @layer system-c