AboutArticlesProjectsAccessibilityPublicationsTravelCV

Accessibility Features

This page details the importance of web accessibility and the specific features implemented on this website to ensure an inclusive experience for all users, including those with disabilities. It documents the accessibility practices, standards compliance, and testing methodologies used.

Accessibility
WCAG
Inclusive Design
Web Standards

Why Accessibility Matters

As a portfolio website aimed at showcasing my technical skills and projects to potential employers and collaborators, ensuring accessibility is not just a legal or ethical requirement— it's a demonstration of my professional competence and inclusive design thinking. Here's why accessibility is particularly important for my website:

  • Universal Access: A portfolio should be accessible to all potential viewers, including hiring managers, colleagues, and collaborators who may have disabilities or situational limitations.
  • Professional Credibility: As a computer science and engineering student, demonstrating knowledge of accessibility standards reflects technical competence and attention to detail that employers value.
  • Technical Showcase: Implementing accessibility features serves as a practical example of the technical skills being presented.
  • Academic Integrity: In an academic context, ensuring that educational resources (like the LaTeX tutorial) are accessible to all students reflects a commitment to educational equity.

Accessibility Features Implemented

1. Comprehensive Image Alt Text

Every image on my website has been carefully evaluated and provided with appropriate alt text. I distinguish between:

  • Decorative images: Images that are purely decorative, such as the LaTeX tutorial thumbnail, have alt text that indicates their decorative nature (e.g., "Decorative thumbnail showing LaTeX code and formatting example").
  • Informative images: Images that convey information, such as project screenshots, have detailed alt text describing their content (e.g., "Screenshot of HRIStudio application showing the robot control dashboard on a laptop").
Implementation details: I implemented this by adding custom "imageAlt" properties to all projects and "alts" arrays for travel items in my data structure, ensuring consistent image descriptions throughout the site.

2. Accessible Video Player

I developed a custom video player for the LaTeX tutorial with several accessibility features:

  • Closed captions that can be toggled on/off
  • Full transcript available with expandable details element
  • Keyboard-accessible controls for play/pause, volume, and caption toggling
  • ARIA labels for all controls to improve screen reader compatibility
  • Video poster image with appropriate alt text
Implementation details: I created a custom AccessibleVideo component that wraps the HTML5 video element with additional accessibility features, including captions integration, keyboard navigation, and proper ARIA attributes.

3. Semantic HTML and ARIA

My website uses semantic HTML throughout to ensure proper structure and meaning:

  • Proper heading hierarchy (h1, h2, h3) for logical document structure
  • Semantic elements like <nav>, <main>, <section>, and <article>
  • ARIA attributes for components without native semantics
  • Skip-to-content links for keyboard users
Implementation details: I audited all pages for proper heading structure and added semantic HTML elements. For custom components like cards and badges, I ensured proper ARIA attributes were used to convey their purpose and state.

4. Color Contrast and Dark Mode

I carefully selected color choices on my website to ensure readability:

  • All text meets WCAG AA contrast requirements (4.5:1 for normal text, 3:1 for large text)
  • Dark mode support for users who prefer or require reduced brightness
  • Color is never used as the sole means of conveying information
  • Interactive elements have visual focus indicators that don't rely solely on color
Implementation details: I used the TailwindCSS color palette with careful consideration of contrast ratios. The dark mode implementation respects user system preferences and provides consistent contrast ratios in both modes.

Platform Limitations and Workarounds

While building this website, I encountered some limitations in the Next.js framework and implemented workarounds:

  • Next.js Client/Server Components: Next.js divides components into client and server components, which can create hydration issues when implementing certain interactive accessibility features. I addressed this by creating client-side wrapper components for features requiring interactivity, such as the video player and navigation menu.
  • PDF Accessibility: The CV section uses PDF rendering which has inherent accessibility limitations. As a workaround, I provide the same information in HTML format elsewhere on the site, ensuring that users who cannot access the PDF can still view the content.