docs: clean up completed accessibility issue, expand WCAG guidelines

- Remove Issue #31 (weak password validation) from Tasks.md
- Mark Issue #32 (accessibility) done in Tasks.md
- Expand Web-Development.md §14 with WCAG compliance rules, ARIA guide, keyboard nav, form accessibility, testing

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Docs/Web-Development.md

@@ -1719,12 +1719,46 @@ React error boundaries catch render-time exceptions and allow graceful fallback
 
 ## 14. Accessibility
 
-- Use semantic HTML elements (`<button>`, `<nav>`, `<table>`, `<main>`, `<header>`) — not `<div>` with click handlers.
-- Every interactive element must be **keyboard accessible** (focusable, operable with Enter/Space/Escape as appropriate).
-- Images and icons require `alt` text or `aria-label`.
-- Form inputs must have associated `<label>` elements.
-- Maintain sufficient color contrast ratios (WCAG AA minimum).
-- Test with a screen reader periodically.
+BanGUI targets **WCAG 2.1 AA** compliance. All interactive elements must be keyboard-accessible and screen-reader-compatible.
+
+### Semantic HTML
+- Use semantic elements: `<button>`, `<nav>`, `<table>`, `<main>`, `<header>`, `<aside>`, `<footer>`.
+- Do **not** use `<div>` or `<span>` with click handlers as a substitute for `<button>`.
+- When a `<div>` must be interactive (e.g., a country on a map SVG), set `role="button"` and ensure both `onClick` and `onKeyDown` (Enter/Space) are implemented.
+
+### Keyboard Navigation
+- Every interactive element must be focusable (`tabIndex={0}` for non-native focusable elements).
+- Operable with **Enter** and **Space** for actions, **Escape** for dismissal/cancel.
+- Logical tab order follows visual reading order.
+- Focus is never trapped without a visible escape mechanism.
+
+### ARIA Attributes
+- **`aria-label`**: Required on all icon-only buttons, interactive images, and non-textual UI elements.
+- **`aria-live`**: Use `aria-live="polite"` on status regions that update dynamically (e.g., ban count badges, spinner labels).
+- **`aria-sort`**: Apply to sortable table column headers (`ascending` / `descending` / `none`).
+- **`role`**: Set on custom interactive elements (`role="button"`, `role="listbox"`, `role="option"`, etc.).
+- **`aria-pressed`**: Use on toggle buttons that have a selected state.
+
+### Forms and Inputs
+- All `<input>` and `<select>` elements must have associated `<label>` elements.
+- Use `aria-describedby` when input has helper text or validation messages.
+- Group related inputs with `<fieldset>` and `<legend>`.
+
+### Color and Contrast
+- Text: **4.5:1** minimum contrast ratio (normal text), **3:1** for large text and UI components.
+- Interactive elements (buttons, links): **3:1** minimum against background.
+- Do not rely on color alone to convey information (use icons, text, or patterns alongside).
+- Reference: [Fluent UI Color Accessibility Guide](https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/fabric-website/files/coloraccessibility_29sep2016.pdf).
+
+### Testing
+- Test with a screen reader (NVDA on Windows, VoiceOver on macOS) periodically.
+- Verify keyboard-only navigation through the entire user flow.
+- Use browser accessibility inspector tools (Firefox Accessibility Inspector, Chrome A11y panel).
+
+### Data Tables
+- Fluent UI `DataGrid` automatically provides `role="grid"` and accessible cell navigation.
+- Always set a descriptive `aria-label` on the `DataGrid` root (e.g., `aria-label="Ban records table"`).
+- Pagination buttons must have `aria-label` (e.g., `"Previous page"`, `"Next page"`).
 
 ---