Accessibility

Accessibility Principles

🧠 Cognitive Ease

  • Clear structure
  • Simple language
  • Predictable flow

👁️ Visual Support

  • High contrast
  • Resizable text
  • No image-only text

🎧 Audio Access

  • Captions
  • Transcripts
  • No autoplay

⌨️ Keyboard Navigation

  • Tab-friendly
  • Visible focus ring
  • Logical tab order

📱 Device Flexibility

  • Touch-friendly UI
  • Responsive layout
  • Large tap targets

🧩 Interaction Clarity

  • Clear buttons
  • No hidden interactions
  • Consistent behavior

🍦 My Favorite Flavors 🥤

FLAVOR SMOOTHIE ICE CREAM
🍫 Chocolate 🥤 🍦
🍦 Vanilla
🍓 Strawberry 🥤 🍦
🍌 Banana 🥤 🍦
🥤 = Love it as smoothie | 🍦 = Love it as ice cream

Accessibility Review of the USD 116 Calendar

Reviewing the USD 116 calendar was surprisingly difficult because the page contained a huge amount of code. I didn't expect such a simple page to have that much going on behind the scenes. While looking through the code, I found several issues that affect both accessibility and performance. The main problems were missing alt text on images, too many separate files loading at once, and a large amount of inline CSS that makes the page harder to maintain.

Unnecessary Code

This code will make things very confusing and frustrating, and it hides an element that probably doesn't even exist on the page.

<style>
    img#wpstats {
        display: none
    }
</style>

Huge Inline CSS in HTML

There is huge inline CSS in the HTML that makes things very difficult to sort through. Instead, they should have a separate CSS file to style everything. Having hundreds of lines of CSS directly in the HTML makes the page slower and harder to maintain.

<style id='astra-theme-css-inline-css'>
    :root {
        --ast-post-nav-space: 0;
        --ast-container-default-xlg-padding: 3em;
        /* ... hundreds of lines of CSS ... */
    }
</style>

Too Many CSS Files Loading

There are also too many CSS files loading, which slows down the website.

<link rel='stylesheet' id='astra-theme-css-css' href='...' />
<link rel='stylesheet' id='astra-google-fonts-css' href='...' />
<link rel='stylesheet' id='hfe-widgets-style-css' href='...' />
<!-- 30+ more stylesheet links! -->

Conclusion

Reviewing the website, I got really confused and overwhelmed with the amount of code that was there. I wonder how they keep adding more content to the website without getting confused and forgetting where they started off. Overall, the website would benefit greatly from consolidating CSS files, moving inline styles to external files, and removing unnecessary code.