feat: Phase 1 - Critical WCAG 2.1 AA accessibility improvements
Implemented comprehensive accessibility enhancements to meet WCAG 2.1 AA standards: **Skip Navigation:** - Added skip-to-content link for keyboard users - Link appears on focus and jumps directly to main content area **Screen Reader Support:** - Created .sr-only and .sr-only-focusable utility classes - Added aria-hidden="true" to all decorative icons - Added descriptive aria-label attributes to all icon-only buttons **Enhanced Focus Indicators:** - Implemented 3px visible outlines on all interactive elements - Added :focus-visible for keyboard-only focus indicators - Special focus styling for primary actions (orange outline) - Consistent 2px outline-offset for better visibility **Table Accessibility:** - Added scope="col" attributes to all table headers - Properly grouped button actions with role="group" and aria-label **Button Improvements:** - All icon-only buttons now have descriptive ARIA labels - Added responsive text labels (visible on sm+ screens, hidden on mobile) - Improved button groups with proper ARIA roles **Files Modified:** - _Layout.cshtml: Skip link, accessible menu close button - Categories/Index.cshtml: ARIA labels, table scopes - Users/Index.cshtml: ARIA labels, table scopes - Orders/Index.cshtml: Table scopes - Products/Index.cshtml: Table scopes - ShippingRates/Index.cshtml: ARIA labels, table scopes - VariantCollections/Index.cshtml: ARIA labels, table scopes - modern-admin.css: Accessibility utilities and enhanced focus styles **WCAG 2.1 AA Criteria Addressed:** - 2.4.1 Bypass Blocks (Level A) - 2.4.7 Focus Visible (Level AA) - 4.1.2 Name, Role, Value (Level A) - 1.3.1 Info and Relationships (Level A) 🚀 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -108,13 +108,13 @@
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Order ID</th>
|
||||
<th>Customer</th>
|
||||
<th>Items</th>
|
||||
<th>Total</th>
|
||||
<th>Status</th>
|
||||
<th>Timeline</th>
|
||||
<th>Actions</th>
|
||||
<th scope="col">Order ID</th>
|
||||
<th scope="col">Customer</th>
|
||||
<th scope="col">Items</th>
|
||||
<th scope="col">Total</th>
|
||||
<th scope="col">Status</th>
|
||||
<th scope="col">Timeline</th>
|
||||
<th scope="col">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
Reference in New Issue
Block a user