731 lines
19 KiB
Markdown
731 lines
19 KiB
Markdown
# ⚡ VIBE BRUTALISM 2.0
|
||
|
||
|
||
|
||
|
||
|
||
|
||
**A bold, unapologetic, fully accessible neo-brutalist component library**
|
||
|
||
Vibe Brutalism 2.0 is a complete CSS and JavaScript component library inspired by brutalist architecture and modern design trends. It features thick borders, bold colors, offset shadows, and an uncompromising aesthetic that makes your web projects stand out - while being fully compliant with WCAG 2.1 AA and Section 508 accessibility standards.
|
||
|
||
---
|
||
|
||
## 🎯 Features
|
||
|
||
- **🎨 Neo-Brutalist Design** - Bold borders, high contrast, and striking visuals
|
||
- **♿ WCAG 2.1 AA Compliant** - Full accessibility with ARIA labels, keyboard navigation, and screen reader support
|
||
- **✓ Section 508 Compliant** - Meets federal accessibility requirements
|
||
- **📦 Complete Component Library** - 20+ ready-to-use accessible components
|
||
- **⚡ Zero Dependencies** - Just CSS and vanilla JavaScript
|
||
- **📱 Fully Responsive** - Works on all devices with hamburger menu
|
||
- **⌨️ Keyboard Navigation** - All components support full keyboard control
|
||
- **🔊 Screen Reader Optimized** - ARIA live regions and proper semantic HTML
|
||
- **🔧 Utility-First** - Extensive utility classes like Tailwind
|
||
- **🚀 Lightweight** - Small file size, fast performance
|
||
- **📚 Well Documented** - Comprehensive examples and accessibility guides
|
||
|
||
---
|
||
|
||
## ♿ Accessibility Features
|
||
|
||
Vibe Brutalism 2.0 is built from the ground up with accessibility in mind:
|
||
|
||
### WCAG 2.1 AA Compliance
|
||
- **Color Contrast:** All text meets 4.5:1 contrast ratio for normal text, 3:1 for large text
|
||
- **Keyboard Navigation:** Every interactive component is fully accessible via keyboard
|
||
- **Focus Management:** Visible focus indicators and proper focus trapping in modals
|
||
- **ARIA Attributes:** Proper roles, states, and properties throughout
|
||
- **Screen Reader Support:** ARIA live regions for dynamic content
|
||
- **Semantic HTML:** Proper use of headings, landmarks, and form labels
|
||
|
||
### Section 508 Compliance
|
||
- Meets all technical standards (§ 1194.22)
|
||
- Fully keyboard accessible
|
||
- Text alternatives for non-text content
|
||
- Programmatically determinable information
|
||
|
||
### Keyboard Shortcuts
|
||
|
||
All components support standard keyboard navigation:
|
||
- **Tab/Shift+Tab:** Navigate between interactive elements
|
||
- **Enter/Space:** Activate buttons and toggle controls
|
||
- **Arrow Keys:** Navigate dropdowns, tabs, accordions, and carousels
|
||
- **Escape:** Close modals, dropdowns, and menus
|
||
- **Home/End:** Jump to first/last items in lists
|
||
|
||
---
|
||
|
||
## 📦 Installation
|
||
|
||
### Option 1: Download Files
|
||
|
||
1. Download `vibe-brutalism.css` and `vibe-brutalism.js`
|
||
2. Include them in your HTML:
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>My Accessible Brutalist App</title>
|
||
|
||
<!-- Vibe Brutalism CSS -->
|
||
<link rel="stylesheet" href="path/to/vibe-brutalism.css">
|
||
|
||
<!-- Optional: Google Font for better typography -->
|
||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<!-- Skip link for keyboard users -->
|
||
<a href="#main-content" class="vb-skip-link">Skip to main content</a>
|
||
|
||
<!-- Your content here -->
|
||
<main id="main-content">
|
||
<!-- Your page content -->
|
||
</main>
|
||
|
||
<!-- Vibe Brutalism JS -->
|
||
<script src="path/to/vibe-brutalism.js"></script>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
### Option 2: CDN (Coming Soon)
|
||
|
||
```html
|
||
<link rel="stylesheet" href="https://cdn.example.com/vibe-brutalism/2.0.0/vibe-brutalism.min.css">
|
||
<script src="https://cdn.example.com/vibe-brutalism/2.0.0/vibe-brutalism.min.js"></script>
|
||
```
|
||
|
||
---
|
||
|
||
## 🚀 Quick Start
|
||
|
||
Here's a simple accessible example to get you started:
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Vibe Brutalism Demo</title>
|
||
<link rel="stylesheet" href="vibe-brutalism.css">
|
||
</head>
|
||
<body>
|
||
<a href="#main" class="vb-skip-link">Skip to main content</a>
|
||
|
||
<nav class="vb-navbar" role="navigation" aria-label="Main navigation">
|
||
<a href="#" class="vb-navbar-brand">My App</a>
|
||
|
||
<button class="vb-navbar-toggle">
|
||
<span class="vb-navbar-toggle-bar"></span>
|
||
<span class="vb-navbar-toggle-bar"></span>
|
||
<span class="vb-navbar-toggle-bar"></span>
|
||
</button>
|
||
|
||
<ul class="vb-navbar-menu">
|
||
<li><a href="#" class="vb-navbar-link">Home</a></li>
|
||
<li><a href="#" class="vb-navbar-link">About</a></li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<main id="main" class="vb-container">
|
||
<h1 class="vb-h1">Hello, Accessible Brutalism!</h1>
|
||
|
||
<div class="vb-card">
|
||
<div class="vb-card-header">My First Card</div>
|
||
<div class="vb-card-body">
|
||
<p>This is a fully accessible neo-brutalist card component.</p>
|
||
<button class="vb-btn vb-btn-primary" onclick="VB.Toast('Success!', 'success')">
|
||
Click Me
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<script src="vibe-brutalism.js"></script>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
---
|
||
|
||
## 📚 Components
|
||
|
||
### 🍔 Responsive Hamburger Navigation
|
||
|
||
Responsive navbar that automatically converts to a hamburger menu on mobile devices.
|
||
|
||
```html
|
||
<nav class="vb-navbar" role="navigation" aria-label="Main navigation">
|
||
<a href="#" class="vb-navbar-brand">Brand</a>
|
||
|
||
<!-- Hamburger toggle (auto-hidden on desktop) -->
|
||
<button class="vb-navbar-toggle" type="button">
|
||
<span class="vb-navbar-toggle-bar"></span>
|
||
<span class="vb-navbar-toggle-bar"></span>
|
||
<span class="vb-navbar-toggle-bar"></span>
|
||
</button>
|
||
|
||
<ul class="vb-navbar-menu">
|
||
<li><a href="#" class="vb-navbar-link">Home</a></li>
|
||
<li><a href="#" class="vb-navbar-link">About</a></li>
|
||
<li><a href="#" class="vb-navbar-link">Contact</a></li>
|
||
</ul>
|
||
</nav>
|
||
```
|
||
|
||
**Accessibility Features:**
|
||
- ARIA labels (aria-expanded, aria-controls)
|
||
- ESC key closes menu
|
||
- Screen reader announcements
|
||
- Focus management
|
||
|
||
### 🎠 Carousel
|
||
|
||
Accessible carousel for images and cards with keyboard navigation and autoplay control.
|
||
|
||
```html
|
||
<div class="vb-carousel" id="myCarousel" data-autoplay="true" data-interval="5000">
|
||
<div class="vb-carousel-inner">
|
||
<div class="vb-carousel-track">
|
||
<div class="vb-carousel-item">
|
||
<img src="image1.jpg" alt="Description of image 1">
|
||
<div class="vb-carousel-caption">
|
||
<h3>Slide Title</h3>
|
||
<p>Slide description</p>
|
||
</div>
|
||
</div>
|
||
<div class="vb-carousel-item">
|
||
<img src="image2.jpg" alt="Description of image 2">
|
||
</div>
|
||
<div class="vb-carousel-item">
|
||
<img src="image3.jpg" alt="Description of image 3">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button class="vb-carousel-control vb-carousel-control-prev" type="button">‹</button>
|
||
<button class="vb-carousel-control vb-carousel-control-next" type="button">›</button>
|
||
<div class="vb-carousel-indicators">
|
||
<button class="vb-carousel-indicator" type="button"></button>
|
||
<button class="vb-carousel-indicator" type="button"></button>
|
||
<button class="vb-carousel-indicator" type="button"></button>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
**Accessibility Features:**
|
||
- Left/Right arrow keys navigate slides
|
||
- Autoplay pauses on hover and focus
|
||
- Screen reader announces slide changes
|
||
- Proper ARIA labels on all controls
|
||
|
||
**JavaScript API:**
|
||
```javascript
|
||
// Access carousel instance
|
||
VB.carousels.myCarousel.next();
|
||
VB.carousels.myCarousel.prev();
|
||
VB.carousels.myCarousel.goTo(2);
|
||
VB.carousels.myCarousel.pauseAutoplay();
|
||
VB.carousels.myCarousel.startAutoplay();
|
||
```
|
||
|
||
### 🔔 Toast Notifications
|
||
|
||
Accessible toast notifications with automatic dismissal and screen reader support.
|
||
|
||
```javascript
|
||
// Show toast notification
|
||
VB.Toast('Operation successful!', 'success', 5000, 'top-right');
|
||
|
||
// Parameters:
|
||
// message: string
|
||
// type: 'success' | 'warning' | 'danger' | 'info'
|
||
// duration: number (milliseconds, 0 for no auto-dismiss)
|
||
// position: 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left'
|
||
```
|
||
|
||
**Accessibility Features:**
|
||
- ARIA live regions for screen reader announcements
|
||
- Keyboard dismissible
|
||
- Respects prefers-reduced-motion
|
||
- Proper color contrast
|
||
|
||
### 📮 Snackbar
|
||
|
||
Brief messages with optional action buttons.
|
||
|
||
```javascript
|
||
// Simple snackbar
|
||
VB.Snackbar('Message sent successfully!');
|
||
|
||
// With action button
|
||
VB.Snackbar('Item deleted', 'UNDO', () => {
|
||
// Undo action here
|
||
console.log('Undo clicked');
|
||
}, 5000);
|
||
|
||
// Parameters:
|
||
// message: string
|
||
// actionText: string | null
|
||
// actionCallback: function | null
|
||
// duration: number (milliseconds)
|
||
```
|
||
|
||
**Accessibility Features:**
|
||
- ARIA live regions
|
||
- Keyboard accessible action buttons
|
||
- Focus management
|
||
|
||
### 🔘 Buttons
|
||
|
||
Buttons come in multiple variants, sizes, and states.
|
||
|
||
```html
|
||
<!-- Variants -->
|
||
<button class="vb-btn vb-btn-primary">Primary</button>
|
||
<button class="vb-btn vb-btn-secondary">Secondary</button>
|
||
<button class="vb-btn vb-btn-accent">Accent</button>
|
||
<button class="vb-btn vb-btn-success">Success</button>
|
||
<button class="vb-btn vb-btn-warning">Warning</button>
|
||
<button class="vb-btn vb-btn-danger">Danger</button>
|
||
<button class="vb-btn vb-btn-info">Info</button>
|
||
<button class="vb-btn vb-btn-outline">Outline</button>
|
||
|
||
<!-- Sizes -->
|
||
<button class="vb-btn vb-btn-sm">Small</button>
|
||
<button class="vb-btn">Default</button>
|
||
<button class="vb-btn vb-btn-lg">Large</button>
|
||
|
||
<!-- Block button -->
|
||
<button class="vb-btn vb-btn-block">Full Width</button>
|
||
|
||
<!-- Disabled -->
|
||
<button class="vb-btn" disabled>Disabled</button>
|
||
```
|
||
|
||
### 🃏 Cards
|
||
|
||
Cards are versatile containers with headers, bodies, and footers.
|
||
|
||
```html
|
||
<div class="vb-card">
|
||
<div class="vb-card-header">Card Title</div>
|
||
<div class="vb-card-body">
|
||
<p>Card content goes here.</p>
|
||
</div>
|
||
<div class="vb-card-footer">
|
||
<button class="vb-btn vb-btn-primary vb-btn-sm">Action</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Colored variants -->
|
||
<div class="vb-card vb-card-primary">...</div>
|
||
<div class="vb-card vb-card-secondary">...</div>
|
||
<div class="vb-card vb-card-accent">...</div>
|
||
```
|
||
|
||
### 📝 Forms
|
||
|
||
Complete form components with proper labeling and ARIA attributes.
|
||
|
||
```html
|
||
<form>
|
||
<div class="vb-form-group">
|
||
<label class="vb-label" for="name">Name</label>
|
||
<input type="text" class="vb-input" id="name"
|
||
placeholder="Enter your name"
|
||
required
|
||
aria-required="true">
|
||
</div>
|
||
|
||
<div class="vb-form-group">
|
||
<label class="vb-label" for="email">Email</label>
|
||
<input type="email" class="vb-input" id="email"
|
||
placeholder="you@example.com"
|
||
required
|
||
aria-required="true">
|
||
</div>
|
||
|
||
<div class="vb-form-group">
|
||
<label class="vb-label" for="message">Message</label>
|
||
<textarea class="vb-textarea" id="message"></textarea>
|
||
</div>
|
||
|
||
<div class="vb-form-check">
|
||
<input type="checkbox" class="vb-checkbox" id="agree">
|
||
<label for="agree">I agree to terms</label>
|
||
</div>
|
||
|
||
<button type="submit" class="vb-btn vb-btn-primary">Submit</button>
|
||
</form>
|
||
```
|
||
|
||
### 📑 Tabs
|
||
|
||
Organize content with keyboard-accessible tabs.
|
||
|
||
```html
|
||
<div class="vb-tabs">
|
||
<ul class="vb-tab-list">
|
||
<li><button class="vb-tab-button">Tab 1</button></li>
|
||
<li><button class="vb-tab-button">Tab 2</button></li>
|
||
<li><button class="vb-tab-button">Tab 3</button></li>
|
||
</ul>
|
||
<div class="vb-tab-content">
|
||
<p>Content for Tab 1</p>
|
||
</div>
|
||
<div class="vb-tab-content">
|
||
<p>Content for Tab 2</p>
|
||
</div>
|
||
<div class="vb-tab-content">
|
||
<p>Content for Tab 3</p>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
**Keyboard Navigation:**
|
||
- Arrow Right/Down: Next tab
|
||
- Arrow Left/Up: Previous tab
|
||
- Home: First tab
|
||
- End: Last tab
|
||
|
||
### 📋 Accordion
|
||
|
||
Collapsible content panels with full keyboard support.
|
||
|
||
```html
|
||
<div class="vb-accordion">
|
||
<div class="vb-accordion-item">
|
||
<button class="vb-accordion-header">
|
||
<span>Section 1</span>
|
||
<span class="vb-accordion-icon" aria-hidden="true">▼</span>
|
||
</button>
|
||
<div class="vb-accordion-body">
|
||
<p>Content for section 1</p>
|
||
</div>
|
||
</div>
|
||
<div class="vb-accordion-item">
|
||
<button class="vb-accordion-header">
|
||
<span>Section 2</span>
|
||
<span class="vb-accordion-icon" aria-hidden="true">▼</span>
|
||
</button>
|
||
<div class="vb-accordion-body">
|
||
<p>Content for section 2</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
**Keyboard Navigation:**
|
||
- Arrow Up/Down: Navigate between headers
|
||
- Enter/Space: Toggle section
|
||
- Home/End: Jump to first/last section
|
||
|
||
### 🪟 Modals
|
||
|
||
Accessible modal dialogs with focus trapping.
|
||
|
||
```html
|
||
<!-- Trigger -->
|
||
<button class="vb-btn vb-btn-primary" data-vb-modal-target="myModal">
|
||
Open Modal
|
||
</button>
|
||
|
||
<!-- Modal -->
|
||
<div id="myModal" class="vb-modal">
|
||
<div class="vb-modal-content">
|
||
<div class="vb-modal-header">
|
||
<h3 class="vb-modal-title">Modal Title</h3>
|
||
<button class="vb-modal-close" aria-label="Close dialog">×</button>
|
||
</div>
|
||
<div class="vb-modal-body">
|
||
<p>Modal content here.</p>
|
||
</div>
|
||
<div class="vb-modal-footer">
|
||
<button class="vb-btn vb-btn-primary">Confirm</button>
|
||
<button class="vb-btn vb-btn-outline vb-modal-close">Cancel</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
**JavaScript API:**
|
||
```javascript
|
||
VB.modals.myModal.open();
|
||
VB.modals.myModal.close();
|
||
```
|
||
|
||
### 📂 Dropdowns
|
||
|
||
Keyboard-accessible dropdown menus.
|
||
|
||
```html
|
||
<div class="vb-dropdown">
|
||
<button class="vb-btn vb-btn-primary vb-dropdown-toggle">Menu</button>
|
||
<div class="vb-dropdown-menu">
|
||
<a href="#" class="vb-dropdown-item">Action 1</a>
|
||
<a href="#" class="vb-dropdown-item">Action 2</a>
|
||
<a href="#" class="vb-dropdown-item">Action 3</a>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
**Keyboard Navigation:**
|
||
- Arrow Down/Enter/Space: Open menu
|
||
- Arrow Up/Down: Navigate items
|
||
- ESC: Close menu
|
||
|
||
### 📊 Progress Bars
|
||
|
||
Visual progress indicators with ARIA support.
|
||
|
||
```html
|
||
<div class="vb-progress" id="myProgress">
|
||
<div class="vb-progress-bar"
|
||
role="progressbar"
|
||
aria-valuenow="75"
|
||
aria-valuemin="0"
|
||
aria-valuemax="100"
|
||
style="width: 75%;">
|
||
75%
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Colored variants -->
|
||
<div class="vb-progress">
|
||
<div class="vb-progress-bar vb-progress-bar-success" style="width: 100%;">
|
||
100%
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
**JavaScript API:**
|
||
```javascript
|
||
VB.SetProgress('myProgress', 75);
|
||
```
|
||
|
||
### ⚠️ Alerts
|
||
|
||
Display important messages with proper ARIA roles.
|
||
|
||
```html
|
||
<div class="vb-alert vb-alert-success" role="alert">
|
||
<strong>SUCCESS:</strong> Operation completed!
|
||
</div>
|
||
<div class="vb-alert vb-alert-warning" role="alert">
|
||
<strong>WARNING:</strong> Please review.
|
||
</div>
|
||
<div class="vb-alert vb-alert-danger" role="alert">
|
||
<strong>ERROR:</strong> Something went wrong.
|
||
</div>
|
||
<div class="vb-alert vb-alert-info" role="alert">
|
||
<strong>INFO:</strong> Helpful information.
|
||
</div>
|
||
```
|
||
|
||
### 🏷️ Badges
|
||
|
||
Small status indicators.
|
||
|
||
```html
|
||
<span class="vb-badge">Default</span>
|
||
<span class="vb-badge vb-badge-primary">Primary</span>
|
||
<span class="vb-badge vb-badge-success">Success</span>
|
||
<span class="vb-badge vb-badge-danger">Danger</span>
|
||
```
|
||
|
||
---
|
||
|
||
## 📐 Grid System
|
||
|
||
12-column responsive grid system.
|
||
|
||
```html
|
||
<div class="vb-container">
|
||
<div class="vb-row">
|
||
<div class="vb-col-12">Full width</div>
|
||
</div>
|
||
|
||
<div class="vb-row">
|
||
<div class="vb-col-6">Half width</div>
|
||
<div class="vb-col-6">Half width</div>
|
||
</div>
|
||
|
||
<div class="vb-row">
|
||
<div class="vb-col-4">One third</div>
|
||
<div class="vb-col-4">One third</div>
|
||
<div class="vb-col-4">One third</div>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
---
|
||
|
||
## 🔧 Utility Classes
|
||
|
||
### Spacing
|
||
- `vb-m-{0-6}`, `vb-mt-4`, `vb-mb-4`, `vb-ml-4`, `vb-mr-4`
|
||
- `vb-p-{0-6}`
|
||
|
||
### Text
|
||
- `vb-text-left`, `vb-text-center`, `vb-text-right`
|
||
- `vb-text-uppercase`, `vb-text-lowercase`
|
||
- `vb-font-bold`, `vb-font-normal`
|
||
|
||
### Display
|
||
- `vb-d-block`, `vb-d-inline`, `vb-d-flex`, `vb-d-none`
|
||
|
||
### Flex
|
||
- `vb-flex-row`, `vb-flex-column`
|
||
- `vb-justify-center`, `vb-justify-between`
|
||
- `vb-align-center`
|
||
- `vb-gap-4`
|
||
|
||
### Width
|
||
- `vb-w-full`, `vb-w-half`
|
||
|
||
### Background
|
||
- `vb-bg-primary`, `vb-bg-secondary`, `vb-bg-accent`
|
||
- `vb-bg-white`, `vb-bg-black`
|
||
|
||
### Accessibility
|
||
- `vb-sr-only` - Screen reader only content
|
||
- `vb-skip-link` - Skip to main content link
|
||
|
||
---
|
||
|
||
## 🎨 Customization
|
||
|
||
Customize via CSS variables:
|
||
|
||
```css
|
||
:root {
|
||
/* Colors */
|
||
--vb-primary: #FFD700;
|
||
--vb-secondary: #FF6B9D;
|
||
--vb-accent: #00F5FF;
|
||
--vb-success: #00FF88;
|
||
--vb-warning: #FFB800;
|
||
--vb-danger: #FF3366;
|
||
--vb-info: #6B9DFF;
|
||
|
||
/* Border */
|
||
--vb-border-width: 3px;
|
||
--vb-border-color: #000000;
|
||
|
||
/* Shadows */
|
||
--vb-shadow-md: 6px 6px 0 #000;
|
||
|
||
/* Typography */
|
||
--vb-font-family: 'Space Grotesk', 'Arial Black', sans-serif;
|
||
--vb-font-size-base: 1rem;
|
||
|
||
/* Spacing */
|
||
--vb-space-4: 1rem;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 💻 JavaScript API
|
||
|
||
```javascript
|
||
// Modals
|
||
VB.modals.myModal.open();
|
||
VB.modals.myModal.close();
|
||
|
||
// Carousels
|
||
VB.carousels.myCarousel.next();
|
||
VB.carousels.myCarousel.prev();
|
||
VB.carousels.myCarousel.goTo(2);
|
||
|
||
// Toasts
|
||
VB.Toast('Message', 'success', 5000, 'top-right');
|
||
|
||
// Snackbar
|
||
VB.Snackbar('Message', 'ACTION', callback, 5000);
|
||
|
||
// Progress
|
||
VB.SetProgress('elementId', 75);
|
||
|
||
// Form Validation
|
||
const isValid = VB.ValidateForm(formElement);
|
||
|
||
// Screen Reader Announcements
|
||
VB.announce('Message for screen readers', 'polite');
|
||
```
|
||
|
||
---
|
||
|
||
## ♿ Accessibility Testing
|
||
|
||
### Tested With:
|
||
- **Screen Readers:** NVDA, JAWS, VoiceOver
|
||
- **Keyboard Navigation:** All major browsers
|
||
- **Automated Tools:** axe DevTools, WAVE, Lighthouse
|
||
- **Color Contrast:** Meets WCAG AA standards
|
||
|
||
### Best Practices:
|
||
1. Always include skip links
|
||
2. Use proper semantic HTML
|
||
3. Provide text alternatives for images
|
||
4. Ensure keyboard accessibility
|
||
5. Test with screen readers
|
||
6. Maintain color contrast ratios
|
||
7. Use ARIA attributes appropriately
|
||
|
||
---
|
||
|
||
## 📱 Browser Support
|
||
|
||
- Chrome (latest)
|
||
- Firefox (latest)
|
||
- Safari (latest)
|
||
- Edge (latest)
|
||
- Opera (latest)
|
||
|
||
---
|
||
|
||
## 🤝 Contributing
|
||
|
||
Contributions are welcome! Feel free to submit issues, fork the repository, and create pull requests.
|
||
|
||
---
|
||
|
||
## 📝 License
|
||
|
||
This project is licensed under the MIT License.
|
||
|
||
---
|
||
|
||
## 🙏 Credits
|
||
|
||
- **Design Philosophy:** Inspired by Brutalist architecture and neo-brutalism web design
|
||
- **Typography:** Works great with [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk)
|
||
- **Accessibility:** Built following WCAG 2.1 AA and Section 508 guidelines
|
||
|
||
---
|
||
|
||
## 🚀 What's New in V2.0
|
||
|
||
- ✅ **Full WCAG 2.1 AA Compliance** - Every component now meets accessibility standards
|
||
- ✅ **Section 508 Compliance** - Federal accessibility requirements met
|
||
- ✅ **Responsive Hamburger Menu** - Mobile-first navigation with accessibility
|
||
- ✅ **Carousel Component** - Keyboard-accessible image and card carousels
|
||
- ✅ **Toast Notifications** - Screen reader friendly notifications
|
||
- ✅ **Snackbar** - Accessible brief messages with actions
|
||
- ✅ **Enhanced Keyboard Navigation** - All components support full keyboard control
|
||
- ✅ **ARIA Live Regions** - Dynamic content announcements for screen readers
|
||
- ✅ **Focus Management** - Proper focus trapping and restoration
|
||
- ✅ **Skip Links** - Jump to main content for keyboard users
|
||
|
||
---
|
||
|
||
**Made with 🖤 for modern, inclusive, and bold web development**
|
||
|
||
⚡ **VIBE BRUTALISM 2.0** - Be Bold. Be Accessible. Be Brutalist.
|