## Apa Itu Web Accessibility? Web Accessibility (atau disingkat **a11y** - ada 11 huruf antara 'a' dan 'y') adalah tentang bikin website yang bisa diakses dan digunakan oleh **semua orang**, termasuk mereka yang punya disabilitas. ### Analogi Sederhana Bayangin website kamu itu kayak **bangunan publik**: - **Accessible website** = bangunan dengan ramp, lift, pintu otomatis (semua orang bisa masuk) - **Inaccessible website** = bangunan cuma ada tangga curam, pintu berat (exclude wheelchair users) - **Alt text pada images** = deskripsi braille untuk blind users - **Keyboard navigation** = akses tanpa perlu mouse (untuk motor disability) - **Color contrast** = signage yang jelas untuk low vision - **Screen reader friendly** = audio guide untuk blind visitors Sama kayak bangunan fisik yang harus ada wheelchair access, escalator, dll—website juga harus "accessible" untuk semua user terlepas dari kemampuan mereka. Real talk: Ada lebih dari 1 miliar orang di dunia dengan berbagai jenis disabilitas. Itu ~15% dari populasi global. Kalau website kamu gak accessible, kamu literally nge-exclude 15% potential users. ## Kenapa a11y Penting? ### 1. **Legal & Ethical** Di banyak negara, accessible website adalah requirement legal (ADA di US, DDA di UK, dll). Lebih dari itu, ini tentang equal access—semua orang deserve akses ke informasi digital. ### 2. **Better UX for Everyone** Feature accessibility sering bantu semua user, bukan cuma yang punya disabilitas: - Captions di video? Berguna buat yang nonton di tempat rame tanpa headphone - Keyboard navigation? Berguna buat power users yang gak suka pakai mouse - High contrast? Membantu waktu ngeliat screen di bawah sinar matahari ### 3. **SEO Benefits** Google suka accessible websites. Semantic HTML, alt text, proper headings—semua ini boost SEO juga. ### 4. **Wider Audience** Lebih banyak orang = lebih banyak users/customers. Sesimpel itu. ## Benefits dengan Angka Konkret Accessibility bukan cuma "nice to have"—ada ROI nyata: ### Market Size & Revenue - **1.3 billion people** (16% populasi dunia) punya significant disability - **$13 trillion** disposable income dari disability community (global) - **$544 billion** spending power disability market di US aja - **71% users** with disabilities akan leave website yang sulit diakses - **2x more likely** users with disabilities belanja online (avoid physical stores) ### Legal & Compliance - **$10,000-$75,000** per violation fine untuk ADA non-compliance (US) - **350%+ increase** in web accessibility lawsuits (2013-2023) - **73% of top websites** masih punya accessibility issues (WebAIM study) - **Legal requirement** di US, EU, Australia, dan many countries ### SEO & Performance - **80% overlap** antara accessibility best practices dan SEO - **25% boost** dalam SEO ranking dengan proper accessibility - **Screen reader friendly** = search engine friendly (semantic HTML) - **Alt text** help Google understand images = better image search ranking ### User Experience (Everyone Benefits) - **Captions** on videos: 80% users watch with sound off - **Keyboard navigation**: Power users prefer keyboard shortcuts - **High contrast**: Easier to read in bright sunlight - **Clear language**: Help non-native speakers understand - **Larger touch targets**: Easier for everyone on mobile ### Business Impact (Real Examples) - **Legal & General** - £13M revenue increase setelah accessibility improvements - **Microsoft** - Customer satisfaction naik 15% dengan accessible products - **Target** - $6M settlement untuk accessibility lawsuit - **Domino's Pizza** - Reached Supreme Court untuk inaccessible website ### Development Benefits - **Better code quality** - Semantic HTML, clean structure - **Easier maintenance** - Well-structured, documented code - **Future-proof** - Works with new devices/assistive tech - **Team skill** - Accessibility knowledge = career advantage ## Jenis-jenis Disabilitas Understanding user needs: ### 1. **Visual** - Buta total → Butuh screen reader - Low vision → Butuh zoom, high contrast - Color blind → Jangan rely on color aja ### 2. **Auditory** - Tuli/hard of hearing → Butuh captions, transcripts ### 3. **Motor/Physical** - Gak bisa pake mouse → Butuh keyboard navigation - Tremor/limited dexterity → Butuh large click targets ### 4. **Cognitive** - Dyslexia, ADHD, autism → Butuh clear layout, simple language - Learning disabilities → Butuh consistent navigation ### 5. **Temporary** - Broken arm → Sementara gak bisa pake mouse - Mata sakit → Butuh dark mode ## WCAG: Web Content Accessibility Guidelines WCAG adalah standar internasional untuk web accessibility. Ada 3 level: - **Level A** - Minimum (basic) - **Level AA** - Mid-range (target ini!) - **Level AAA** - Highest (nice to have) 4 Prinsip WCAG (POUR): ### 1. **Perceivable** - User bisa ngeliat/denger content ### 2. **Operable** - User bisa navigate dan interact ### 3. **Understandable** - Content dan UI harus mudah dipahami ### 4. **Robust** - Content bisa diakses di berbagai tech/browser ## Kapan Harus Prioritas Accessibility? Accessibility penting untuk semua website, tapi ini situasi yang **CRITICAL**: ### 1. Government & Public Sector Websites **Priority: CRITICAL + LEGAL REQUIREMENT** - Mandatory compliance (ADA, Section 508) - Serve ALL citizens tanpa exception - High risk of lawsuits - Public perception critical **Target:** WCAG 2.1 Level AA minimum **Must-do:** - Full keyboard navigation - Screen reader compatible - High contrast mode - Alternative text for all images - Caption untuk videos ### 2. E-commerce & Financial Services **Priority: CRITICAL** - Exclude 15% potential customers = revenue loss - High lawsuit risk ($6M+ settlements) - Checkout flow MUST be accessible - Payment pages critical **Impact:** Direct revenue + legal liability **Focus:** - Form accessibility (labels, error messages) - Keyboard checkout flow - Color contrast for CTAs - Screen reader friendly product descriptions ### 3. Education Platforms **Priority: CRITICAL + LEGAL** - Students with disabilities have right to education - Legal compliance (ADA Title III) - Inclusive learning = better for everyone **Must-have:** - Video captions & transcripts - Accessible PDFs - Keyboard navigation - Screen reader friendly content - Alt text untuk diagrams ### 4. Healthcare & Medical Sites **Priority: CRITICAL** - Vital information = life/death decisions - Elderly users (often have disabilities) - Legal & ethical obligation - High trust required **Accessibility is essential:** - Clear language (no complex jargon) - High color contrast - Large text options - Voice navigation - Screen reader optimized ### 5. Content-Heavy Sites (News, Blogs, Media) **Priority: HIGH** - 80% overlap dengan SEO (traffic boost) - Wider audience reach - Social responsibility - User retention **Quick wins:** - Alt text for images - Proper heading structure - Color contrast - Keyboard navigation - Video captions ### 6. SaaS/Product Websites **Priority: HIGH** - Competitive advantage (most competitors ignore a11y) - Enterprise clients require compliance - Better UX for everyone - Legal protection **Focus:** - Dashboard accessibility - Form interactions - Keyboard shortcuts - Screen reader announcements - Focus management ### 7. Large Companies/Brands **Priority: HIGH** - Reputation risk - Lawsuit targets (deep pockets) - Corporate social responsibility - Brand perception **Compliance essential:** - Regular audits - Accessibility statement - WCAG AA compliance - Assistive tech testing ### 8. New Website/Redesign **Priority: MEDIUM-HIGH** - Easier to build accessible from start - Cheaper than retrofitting later - Avoid technical debt - Future-proof **Do it right from day 1:** - Semantic HTML - Accessible component library - Regular testing - Team training ### Skip Accessibility (But Really, Don't) Honestly, there's NO good reason to skip accessibility. Even if: - **MVP/Prototype** - At least basic semantic HTML & keyboard nav (almost zero cost) - **Internal tools** - Employees can have disabilities too - **Small budget** - Basic a11y is free (semantic HTML, alt text) - **Low traffic** - Those users matter too **Truth:** Basic accessibility is easy and cheap. There's no excuse. ### Accessibility Priority Matrix | Type | Priority | Risk | ROI | |------|----------|------|-----| | Government | Critical | Legal + PR | High | | E-commerce | Critical | Revenue + Legal | Very High | | Education | Critical | Legal | High | | Healthcare | Critical | Ethical + Legal | High | | SaaS | High | Competitive | Medium-High | | Content | High | SEO + Reach | High | | Portfolio | Medium | Career | Medium | | Internal | Medium | Employee | Medium | ## Accessibility Best Practices ### 1. Semantic HTML Always use proper HTML elements: ```html

Click me

Title

``` **Kenapa penting?** Screen readers ngandalin semantic HTML untuk memahami struktur page. ### 2. Heading Hierarchy Proper heading structure = roadmap buat screen readers: ```html

Main Title

Section

Subsection

Main Title

Section

Subsection

``` **Rules:** - Satu h1 per page - Jangan skip levels - Heading hierarchy harus logical ### 3. Alt Text untuk Images ```html

Full description of infographic...

``` **Tips Alt Text:** - Describe content & function, bukan "image of..." - Singkat aja (aim for less than 150 characters) - Decorative images: empty alt (`alt=""`) - Gak perlu bilang "image of" atau "picture of" ### 4. Keyboard Navigation SEMUA functionality harus accessible via keyboard: ```html

Custom Button

``` **Test keyboard navigation:** - Tab: Move forward - Shift + Tab: Move backward - Enter/Space: Activate buttons/links - Arrow keys: Navigate menus, radio buttons - Esc: Close modals/dropdowns ### 5. Focus Styles NEVER remove focus outline tanpa replacement: ```css /* Bad - removing focus outline */ button:focus { outline: none; /* NO! */ } /* Good - custom focus style */ button:focus { outline: 2px solid #0066cc; outline-offset: 2px; } /* Better - use :focus-visible */ button:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; } ``` `:focus-visible` cuma shows outline untuk keyboard users, bukan mouse clicks. ### 6. Color Contrast WCAG Level AA requirements: - **Normal text** (< 24px): minimum 4.5:1 - **Large text** (≥ 24px): minimum 3:1 - **UI components**: minimum 3:1 ```css /* Bad - low contrast */ .text { color: #999; /* Light gray */ background: #fff; /* White */ /* Ratio: 2.8:1 - FAIL! */ } /* Good - sufficient contrast */ .text { color: #333; /* Dark gray */ background: #fff; /* White */ /* Ratio: 12.6:1 - PASS! */ } ``` **Tools untuk check contrast:** - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - Browser DevTools (Chrome/Firefox built-in) - [Contrast](https://usecontrast.com/) (macOS app) ### 7. Form Accessibility ```html Email Address We'll never share your email

Choose your plan Free Pro

Password Password must be at least 8 characters ``` Best practices: - Setiap input butuh label - Pakai `

` dan `` untuk group inputs - Error messages dengan `role="alert"` - Pakai `aria-invalid="true"` untuk invalid inputs ### 8. ARIA (Accessible Rich Internet Applications) ARIA adalah attributes yang ngasih extra info ke assistive tech. **Golden rule: Jangan pakai ARIA kalau HTML element udah cukup!** ```html

Toggle

Your message was sent!

``` **Common ARIA attributes:** - `aria-label` - Label untuk element - `aria-labelledby` - Reference ke label element - `aria-describedby` - Extra description - `aria-hidden` - Hide from screen readers - `aria-live` - Announce dynamic content - `aria-expanded` - State of collapsible element - `aria-pressed` - Toggle button state ### 9. Screen Reader Only Content ```css /* Visually hidden but accessible to screen readers */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } ``` ```html ``` ### 10. Skip Links Allow keyboard users skip repetitive content: ```html

``` ```css .skip-link { position: absolute; top: -40px; left: 0; background: #000; color: #fff; padding: 8px; text-decoration: none; } .skip-link:focus { top: 0; } ``` ### 11. Responsive & Touch Targets Minimum touch target: **44×44 pixels** (WCAG Level AAA) ```css /* Bad - too small */ .button { padding: 4px 8px; /* Likely < 44px */ } /* Good - adequate size */ .button { padding: 12px 24px; min-height: 44px; min-width: 44px; } ``` ### 12. Video & Audio Accessibility ```html

View transcript

Full text transcript here...

``` **Requirements:** - Captions untuk video (deaf users) - Transcripts untuk audio - Audio descriptions untuk visual-only content ## Testing Accessibility ### 1. Keyboard Navigation Manual test: 1. Cabut mouse kamu 2. Coba navigate website pakai keyboard aja 3. Bisa access semua features? Bisa liat focus indicator? ### 2. Screen Reader Testing **Free screen readers:** - **NVDA** (Windows) - Free & popular - **VoiceOver** (macOS/iOS) - Built-in - **TalkBack** (Android) - Built-in - **JAWS** (Windows) - Industry standard (paid) **Basic VoiceOver commands (Mac):** - `Cmd + F5` - Toggle VoiceOver - `VO + Right Arrow` - Next item - `VO + Left Arrow` - Previous item - `VO + Space` - Activate ### 3. Automated Testing Tools ```bash # Install axe DevTools (Chrome/Firefox extension) # Or use in CI/CD: npm install --save-dev @axe-core/cli # Run audit npx axe https://yourwebsite.com ``` **Popular tools:** - **axe DevTools** - Browser extension (best!) - **Lighthouse** - Built into Chrome DevTools - **WAVE** - Web Accessibility Evaluation Tool - **Pa11y** - Automated testing in CI/CD **Example Lighthouse:** ```bash # Chrome DevTools → Lighthouse tab # Check "Accessibility" → Run audit ``` ### 4. Manual Code Review Check: - [ ] All images punya alt text - [ ] Heading hierarchy logical - [ ] Forms punya proper labels - [ ] Color contrast sufficient - [ ] Keyboard navigation works - [ ] Focus indicators visible - [ ] ARIA used correctly (or not overused) ## Quick Wins: Implementasi Cepat untuk Accessibility Ini fixes yang bisa kamu implement dalam hitungan menit dan significant impact: ### 1. Add Alt Text to All Images (15 menit) **Impact: CRITICAL** - Blind users can't see images **Before:** ```html

``` **After:** ```html Blue Nike running shoes with white sole

``` **How to write good alt text:** - Describe content & function, bukan "image of..." - Spesifik & singkat (< 150 chars) - Decorative images: pakai empty alt (`alt=""`) - Linked images: describe where link goes **Expected result:** Screen readers can describe all images ### 2. Fix Heading Hierarchy (10 menit) **Impact: HIGH** - Screen readers use headings to navigate **Before:** ```html

Page Title

Section

Subsection

``` **After:** ```html

Page Title

Section

Subsection

``` **Rules:** - Satu H1 per page - Jangan skip levels (H1 → H2 → H3) - Pakai headings untuk struktur, bukan styling **Expected result:** Logical page structure for navigation ### 3. Add Labels to Form Inputs (10 menit) **Impact: CRITICAL** - Forms unusable without labels **Before:** ```html ``` **After:** ```html Email Address ``` **Apply to all:** - Text inputs - Checkboxes - Radio buttons - Selects - Textareas **Expected result:** Screen readers can identify form fields ### 4. Improve Color Contrast (15 menit) **Impact: HIGH** - Low vision users can't read low contrast text **Check:** - Normal text: 4.5:1 minimum - Large text (≥24px): 3:1 minimum **Tools:** - WebAIM Contrast Checker - Chrome DevTools (inspect element → Contrast info) **Common fixes:** ```css /* Bad - 2.8:1 contrast */ color: #999; background: #fff; /* Good - 12.6:1 contrast */ color: #333; background: #fff; ``` **Expected result:** Text readable for low vision users ### 5. Make All Functionality Keyboard Accessible (20 menit) **Impact: CRITICAL** - Motor disability users can't use mouse **Test:** 1. Cabut mouse 2. Coba navigating dengan Tab, Enter, Space, Arrows 3. Bisa access semuanya? **Common issues:** ```html

Submit

``` **Expected result:** Complete keyboard navigation ### 6. Add Focus Indicators (5 menit) **Impact: HIGH** - Keyboard users need to see where they are **Never do this:** ```css *:focus { outline: none; /* DON'T! */ } ``` **Do this:** ```css *:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; } button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } ``` **Expected result:** Visible focus indicator for keyboard users ### 7. Add Skip Navigation Link (5 menit) **Impact: MEDIUM** - Keyboard users can skip to main content ```html

``` ```css .skip-link { position: absolute; top: -40px; left: 0; background: #000; color: #fff; padding: 8px; text-decoration: none; z-index: 100; } .skip-link:focus { top: 0; } ``` **Expected result:** Skip repetitive navigation ### 8. Use Semantic HTML Elements (10 menit) **Impact: HIGH** - Assistive tech understands structure **Before:** ```html

Submit

...

``` **After:** ```html

...

``` **Pakai proper elements:** - ` ``` **Form hints:** ```html Password Must be at least 8 characters ``` **Expected result:** Context for icon buttons & complex UI ### Quick Wins Checklist (90 Minutes Total) - [ ] Add alt text to all images - [ ] Fix heading hierarchy (H1 → H2 → H3) - [ ] Add labels to all form inputs - [ ] Check & fix color contrast - [ ] Test keyboard navigation - [ ] Add focus indicators - [ ] Add skip navigation link - [ ] Use semantic HTML - [ ] Ensure touch targets 44×44px - [ ] Add ARIA labels where needed **Expected impact:** - **50-70%** of major accessibility issues fixed - **Pass basic screen reader test** - **Keyboard navigation works** - **Better SEO** (semantic HTML + alt text) ## Kesalahan Umum ### 1. Click div instead button ```html

Click me

``` ### 2. Placeholder as label ```html Email ``` ### 3. Only color to convey meaning ```html Error Success Error Success ``` ### 4. Removing focus outline ```css /* Bad */ *:focus { outline: none; } /* Good */ *:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } ``` ### 5. Low contrast text ```css /* Bad - gray on white (2.8:1) */ color: #999; background: #fff; /* Good - dark gray on white (12.6:1) */ color: #333; background: #fff; ``` ## Accessibility Checklist Quick checklist buat every project: **Semantic HTML** - [ ] Use proper elements (button, a, nav, main, etc.) - [ ] Heading hierarchy logical (h1→h2→h3) - [ ] Landmarks used (header, nav, main, aside, footer) **Images & Media** - [ ] All images have alt text - [ ] Decorative images have empty alt - [ ] Videos have captions - [ ] Audio has transcripts **Forms** - [ ] All inputs have labels - [ ] Related inputs grouped with fieldset - [ ] Error messages associated with inputs - [ ] Required fields indicated **Keyboard** - [ ] All interactive elements focusable - [ ] Focus indicators visible - [ ] Keyboard shortcuts don't conflict - [ ] Skip links provided **Visual** - [ ] Color contrast meets WCAG AA (4.5:1) - [ ] Don't rely on color alone - [ ] Text resizable to 200% - [ ] Touch targets minimum 44×44px **ARIA** - [ ] Only used when needed - [ ] Roles match element behavior - [ ] Dynamic content announced - [ ] State changes communicated **Testing** - [ ] Tested with keyboard only - [ ] Tested with screen reader - [ ] Run automated tools (axe, Lighthouse) - [ ] Real user testing if possible ## Tools & Resources ### Browser Extensions - **axe DevTools** - Best automated testing - **WAVE** - Visual feedback - **Lighthouse** - Built into Chrome - **Accessibility Insights** - Microsoft's tool ### Design Tools - **Stark** - Figma/Sketch plugin for contrast checking - **Color Oracle** - Simulate color blindness - **WhoCanUse** - Contrast checker with context ### Learning Resources - [WebAIM](https://webaim.org/) - Comprehensive guides - [A11y Project](https://www.a11yproject.com/) - Community-driven resource - [MDN Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility) - Technical docs - [W3C WCAG](https://www.w3.org/WAI/WCAG21/quickref/) - Official guidelines ### Testing - **NVDA** (Windows) - Free screen reader - **VoiceOver** (Mac/iOS) - Built-in screen reader - **TalkBack** (Android) - Built-in screen reader ## Real-world Example Mari kita bikin accessible card component: ```html

Blue wireless headphones with noise cancellation

Premium Headphones

Wireless noise-cancelling headphones with 30-hour battery life.

$299 View Details

``` ```css .card { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; } .card img { width: 100%; height: auto; } .button { display: inline-block; padding: 12px 24px; min-height: 44px; background: #0066cc; color: #fff; text-decoration: none; border-radius: 4px; } .button:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; } .sr-only { /* Screen reader only styles */ position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); } ``` **What makes it accessible:** - Semantic HTML (article, h2) - Descriptive alt text - Sufficient color contrast - Adequate touch target size (44px min) - Screen reader context ("of Premium Headphones") - Focus styles - Keyboard accessible ## Kesimpulan Accessibility bukan "nice to have"—it's **essential**. Ini bukan cuma tentang comply dengan regulations, tapi tentang bikin internet yang lebih inclusive untuk semua orang. Good news: Kebanyakan accessibility fixes itu simple. Pakai semantic HTML, add alt text, ensure keyboard navigation, check color contrast. Small efforts, huge impact. Mulai dari yang kecil: 1. Run automated audit (Lighthouse/axe) 2. Fix obvious issues (missing alt, low contrast) 3. Test keyboard navigation 4. Coba screen reader 5. Iterate & improve Remember: **Accessibility benefits everyone**. Better a11y = better UX. Period. Happy building! 🌐♿