Sókrates Wiki

Website Source Code Optimization and Accessibility Audit

3 min read

Website Source Code Optimization and Accessibility Audit

Summary

A systematic optimization process performed on the Sokrates website source code to improve SEO, accessibility, and error resilience. The process involved migrating to dynamic sitemap generation, implementing accessibility standards, and establishing error boundaries within the Next.js framework.

Details

Following a source code review, a series of high-impact optimizations were executed to address technical debt and improve the user experience of the Sokrates web presence. The audit identified seven primary areas for improvement, ranging from broken navigation anchors to missing internationalization metadata.

SEO and Internationalization

The website’s SEO strategy was upgraded by replacing the static public/sitemap.xml with a dynamic src/app/sitemap.ts implementation. This change allowed the system to automatically generate locale-aware URLs for both English (/en) and Icelandic (/is) versions of the site. The new sitemap includes all 8 locale-specific URLs and properly configured hreflang alternates, ensuring search engines correctly index the multilingual content, including specific pages like /verdmat. Additionally, a theme-color meta tag with the value #121416 was added to [locale]/layout.tsx to improve mobile browser integration and PWA (Progressive Web App) signaling.

Accessibility (A11y) Improvements

Two significant accessibility gaps were addressed:

  1. Skip-to-Content Link: A “skip-to-content” link was implemented in [locale]/layout.tsx and page.tsx. This link uses an sr-only class to remain hidden from sighted users while allowing screen reader users to bypass navigation menus and jump directly to the #main-content anchor.
  2. Aria-Hidden Attributes: Decorative icons in the Footer.tsx component were updated with aria-hidden="true". This prevents screen readers from attempting to announce visual-only elements that provide no semantic value, reducing auditory noise for users with visual impairments.

Error Handling and Resilience

To prevent the application from displaying a blank page during runtime exceptions, a new client-side error boundary was established. The file src/app/[locale]/error.tsx was created to catch unhandled errors within the locale route segment. This component provides a user-friendly error message and a “reset” button, allowing users to attempt to recover from the error without a full page reload.

General Maintenance and Cleanup

  • Anchor Fix: A broken navigation link targeting #our-approach was resolved by adding the missing id="our-approach" attribute to the IntegrationJourney.tsx component.
  • Asset Optimization: An unused image file, public/images/Logo-v3-2.jpeg, was identified and deleted, resulting in a 1.2 MB reduction in the repository and build size.
  • Code Verification: The audit confirmed that certain setTimeout implementations in the verdmat logic were intentional and that Vercel Analytics integrations were correctly configured to no-op in non-Vercel environments, requiring no further action.

Graph View