Accessibility & Design Choices

This page explains how I approached accessible design using POUR principles (Perceivable, Operable, Understandable, Robust), and why I made certain visual and layout choices across the site. I also used this page to put the things I learned in GD 100 into Practice.

Perceivable

Information should be presented in ways users can perceive.

  • Readable typography choices (serif headings + simple body font).
  • Consistent headings and spacing to support scanning.
  • Clear labels and descriptive link text (no “click here”).
  • Responsive layouts so content doesn’t overflow on small screens.
Hierarchy Spacing Responsive

Operable

The interface should work for keyboard and different input methods.

  • Navigation links are keyboard accessible.
  • Visible focus styles are enabled so keyboard users can see where they are.
  • Buttons and links have comfortable spacing for touch screens.
  • Sticky header helps navigation without forcing users to scroll back up.
Keyboard Focus states Touch-friendly

Understandable

Content and navigation should be clear and predictable.

  • Pages follow the same structure (header → content → footer).
  • Consistent navigation across pages.
  • Short descriptions on project cards explain what the link is.
  • Sections are labeled clearly (Projects, Photography, Game Design, etc.).
Consistency Clear labels Predictable layout

Robust

The site should work well across browsers and assistive technologies.

  • Semantic HTML structure (header, nav, main, section, footer).
  • Form labels are connected to inputs on the Contact page.
  • Uses straightforward HTML/CSS patterns that degrade gracefully.
  • Minimal reliance on “fragile” effects that could break readability.
Semantic HTML Compatible Simple patterns

Design choices

I chose a soft pink and greenery palette to create a calmer, more welcoming feel than my earlier “galaxy” style. I also wanted the site to feel less like practice code and more like a deliberate portfolio.

  • Color: soft blush + cream background with sage/forest accents for buttons and hover states.
  • Layout: card-based sections for easy scanning and consistent rhythm across pages.
  • Typography: serif headings for personality, simple body font for readability.
  • Motion: limited motion and subtle transitions to avoid distraction.
Soft palette Cards Low motion Readable type

License

Unless otherwise noted, this website content is shared under a Creative Commons license.

Recommended for portfolios: CC BY 4.0 (allows sharing with credit).

View CC BY 4.0 License

Note: Some project content (software, screenshots, game images) may belong to original creators and is used for educational/portfolio purposes.