feat: comprehensive accessibility improvements

- Add skip navigation link for keyboard users
- Implement proper ARIA labels and roles throughout interface
- Add semantic HTML structure with headings and landmarks
- Enhance form accessibility with help text and fieldsets
- Improve screen reader support with live regions
- Add proper focus management for sidebar toggle
- Include descriptive labels for all interactive elements
- Ensure WCAG compliance for navigation and forms
This commit is contained in:
2025-06-28 05:49:56 +02:00
parent c5a95edc91
commit 9eb86b0502
4 changed files with 187 additions and 121 deletions

View File

@ -22,6 +22,13 @@ export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<body className="bg-background text-foreground min-h-screen font-sans antialiased">
{/* Skip navigation link for keyboard users */}
<a
href="#main-content"
className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded focus:outline-none focus:ring-2 focus:ring-ring"
>
Skip to main content
</a>
<Providers>{children}</Providers>
<Toaster />
</body>