Add WCAG 2.1 AA accessibility guidelines to design reference (#36)

* Add WCAG 2.1 AA accessibility guidelines to design reference

- Add Accessibility section to design-aesthetics.md with mandatory
  WCAG 2.1 AA compliance rules for generated Power Pages sites
- Covers semantic HTML, color contrast, focus states, keyboard nav,
  images/media alt text, form accessibility, reduced motion, and links

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Bump version to 1.0.2 in plugin.json

- 🔧 Updated version from 1.0.1 to 1.0.2

-Priyanshu

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: priyanshu92

plugins/power-pages/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "power-pages",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Create and deploy Power Pages sites using modern development approaches. Supports code sites (SPAs) with React, Angular, Vue, or Astro, with more site types coming soon.",
   "author": {
     "name": "Microsoft",

plugins/power-pages/skills/create-site/references/design-aesthetics.md

@@ -28,6 +28,18 @@ Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colo
 ### Motion
 Use animations for effects and micro-interactions. Prioritize CSS-only solutions. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (`animation-delay`) creates more delight than scattered micro-interactions.
 
+### Accessibility
+Accessibility is mandatory (WCAG 2.1 AA). Semantic structure, strong contrast, visible focus states, keyboard navigation, accessible form validation.
+
+- **Semantic HTML**: Use `<header>`, `<nav>`, `<main>`, `<section>`, `<footer>`, `<article>` — never rely on `<div>` soup. Headings (`h1`–`h6`) must follow a logical hierarchy with no skipped levels.
+- **Color contrast**: Text must meet WCAG AA minimums — 4.5:1 for normal text, 3:1 for large text (18px+ bold or 24px+ regular). Never convey meaning through color alone.
+- **Focus states**: Every interactive element must have a visible focus indicator. Use `outline` (not just `box-shadow`) with sufficient contrast against the background. Never use `outline: none` without a replacement.
+- **Keyboard navigation**: All functionality must be operable via keyboard. Tab order must follow a logical reading sequence. Use `tabindex="0"` for custom interactive elements, never positive `tabindex` values.
+- **Images & media**: All `<img>` tags must have meaningful `alt` text (or `alt=""` for purely decorative images). Icons used as actions need `aria-label`.
+- **Forms**: Every `<input>` must have an associated `<label>`. Use `aria-required`, `aria-invalid`, and `aria-describedby` for validation messages. Error messages must be announced to screen readers.
+- **Motion**: Wrap non-essential animations in `@media (prefers-reduced-motion: reduce)` to disable or minimize them. Essential transitions (e.g., loading indicators) may remain but should be simplified.
+- **Links**: Link text must be descriptive — never use "click here" or "read more" without context. Links that open new windows must indicate this (e.g., `aria-label` or visible icon with `sr-only` text).
+
 ### Backgrounds
 Create atmosphere and depth rather than defaulting to solid colors. Layer CSS gradients, use geometric patterns, or add contextual effects that match the overall aesthetic.