<!-- ❌ Kötü - Görsel bilgi alt text yok -->
<img src="chart.png" />

<!-- ✅ İyi - Descriptive alt text -->
<img
  src="chart.png"
  alt="Satış grafiği: 2024'te %35 artış gösteriyor, Q1'de $50k'dan Q4'te $67k'ya yükseliş"
/>

<!-- ❌ Kötü - Renk ile convey edilen info -->
<p style="color: red;">Hata oluştu</p>

<!-- ✅ İyi - Renk + icon + text -->
<p role="alert">
  <span aria-hidden="true">⚠️</span>
  <strong>Hata:</strong> Form gönderilemedi
</p>

<!-- ❌ Kötü - Sadece mouse ile çalışır -->
<div onclick="submit()">Gönder</div>

<!-- ✅ İyi - Keyboard accessible -->
<button type="submit">Gönder</button>

<!-- ❌ Kötü - Timeout with no control -->
<div>Session 60 saniyede sona erecek</div>

<!-- ✅ İyi - Uzatma seçeneği -->
<div role="alert">
  Session 60 saniyede sona erecek.
  <button onclick="extendSession()">Uzat</button>
</div>

<!-- ❌ Kötü - Belirsiz link text -->
<a href="/products">Buraya tıklayın</a>

<!-- ✅ İyi - Descriptive link text -->
<a href="/products">Ürün kataloğunu görüntüle</a>

<!-- ❌ Kötü - Error without explanation -->
<input type="email" required />
<span>Geçersiz</span>

<!-- ✅ İyi - Clear error message -->
<label for="email">Email:</label>
<input
  type="email"
  id="email"
  required
  aria-describedby="email-error"
/>
<span id="email-error" role="alert">
  Lütfen geçerli bir email adresi girin (örnek: ali@example.com)
</span>

<!-- ❌ Kötü - Custom div button -->
<div class="button" onclick="submit()">Gönder</div>

<!-- ✅ İyi - Proper semantic element -->
<button type="submit">Gönder</button>

<!-- ❌ Kötü - Invalid ARIA -->
<div role="button" aria-label="Gönder" aria-pressed="maybe">
  Gönder
</div>

<!-- ✅ İyi - Valid ARIA usage -->
<button type="button" aria-pressed="false">
  Toggle
</button>

<!-- ❌ Kötü - Heading order broken -->
<h1>Ana Başlık</h1>
<h3>Alt Başlık</h3> <!-- h2 atlandı! -->

<!-- ✅ İyi - Proper hierarchy -->
<h1>Ana Başlık</h1>
<h2>Alt Başlık</h2>
<h3>Detay Başlık</h3>

<!-- ✅ Semantic HTML landmarks -->
<header>
  <nav aria-label="Ana navigasyon">
    <ul>
      <li><a href="/">Ana Sayfa</a></li>
      <li><a href="/about">Hakkında</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h1>Blog Yazısı</h1>
    <p>İçerik...</p>
  </article>

  <aside aria-label="İlgili yazılar">
    <h2>İlgili İçerikler</h2>
  </aside>
</main>

<footer>
  <p>&copy; 2025 Company</p>
</footer>

<!-- ✅ Proper list semantics -->
<ul>
  <li>Öğe 1</li>
  <li>Öğe 2</li>
</ul>

<!-- ✅ Table with headers -->
<table>
  <caption>2024 Satış Raporu</caption>
  <thead>
    <tr>
      <th scope="col">Ay</th>
      <th scope="col">Satış</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Ocak</th>
      <td>$50,000</td>
    </tr>
  </tbody>
</table>

<!-- ❌ Gereksiz ARIA -->
<button role="button" aria-label="Gönder">Gönder</button>
<!-- Button zaten button, label zaten var -->

<!-- ✅ Semantic HTML yeterli -->
<button>Gönder</button>

<!-- ✅ ARIA gerekli - Custom widget -->
<div
  role="tablist"
  aria-label="Account settings"
>
  <button
    role="tab"
    aria-selected="true"
    aria-controls="profile-panel"
    id="profile-tab"
  >
    Profil
  </button>
  <button
    role="tab"
    aria-selected="false"
    aria-controls="security-panel"
    id="security-tab"
  >
    Güvenlik
  </button>
</div>

<div
  role="tabpanel"
  id="profile-panel"
  aria-labelledby="profile-tab"
>
  Profil içeriği
</div>

<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="dialog-title"
  aria-describedby="dialog-desc"
>
  <h2 id="dialog-title">Silme Onayı</h2>
  <p id="dialog-desc">Bu işlem geri alınamaz.</p>

  <button onclick="confirmDelete()">Sil</button>
  <button onclick="closeDialog()">İptal</button>
</div>

<!-- Anında announce edilir -->
<div role="alert">
  Form başarıyla gönderildi!
</div>

<!-- Live region - Updates announce edilir -->
<div aria-live="polite" aria-atomic="true">
  <p>Sepetinizde <span id="cart-count">3</span> ürün var</p>
</div>

<label for="search">Arama:</label>
<input
  type="text"
  id="search"
  role="combobox"
  aria-expanded="false"
  aria-controls="suggestions"
  aria-autocomplete="list"
/>

<ul id="suggestions" role="listbox">
  <li role="option" aria-selected="false">Sonuç 1</li>
  <li role="option" aria-selected="false">Sonuç 2</li>
</ul>

/* ❌ Kötü - Focus outline kaldırılmış */
*:focus {
  outline: none;
}

/* ✅ İyi - Visible focus indicator */
:focus {
  outline: 3px solid #4A90E2;
  outline-offset: 2px;
}

/* ✅ Daha iyi - Mouse click için outline yok, keyboard için var */
:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 3px solid #4A90E2;
  outline-offset: 2px;
}

<!-- ✅ Natural tab order -->
<form>
  <input type="text" name="name" />
  <input type="email" name="email" />
  <button type="submit">Gönder</button>
</form>

<!-- ❌ Kötü - Positive tabindex (avoid!) -->
<button tabindex="3">Three</button>
<button tabindex="1">One</button>
<button tabindex="2">Two</button>

<!-- ✅ İyi - tabindex -1 for programmatic focus -->
<div tabindex="-1" id="error-summary">
  Formda 3 hata var
</div>

<script>
  // Focus error summary programmatically
  document.getElementById('error-summary').focus()
</script>

// ✅ Proper keyboard interaction
const button = document.querySelector('[role="button"]')

button.addEventListener('click', handleAction)
button.addEventListener('keydown', (e) => {
  // Space ve Enter support
  if (e.key === ' ' || e.key === 'Enter') {
    e.preventDefault()
    handleAction()
  }
})

// ✅ Arrow key navigation
const items = document.querySelectorAll('[role="menuitem"]')
let currentIndex = 0

document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowDown') {
    e.preventDefault()
    currentIndex = (currentIndex + 1) % items.length
    items[currentIndex].focus()
  } else if (e.key === 'ArrowUp') {
    e.preventDefault()
    currentIndex = (currentIndex - 1 + items.length) % items.length
    items[currentIndex].focus()
  }
})

<body>
  <!-- Skip link - klavye kullanıcıları için -->
  <a href="#main-content" class="skip-link">
    Skip to main content
  </a>

  <header>
    <!-- Uzun navigation -->
  </header>

  <main id="main-content">
    <!-- İçerik -->
  </main>
</body>

<style>
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}
</style>

<!-- ❌ Kötü -->
<a href="/report.pdf">Buraya tıklayın</a>
<a href="/more">Devamı</a>

<!-- ✅ İyi -->
<a href="/report.pdf">
  2024 Yıllık Raporu İndir (PDF, 2.3 MB)
</a>
<a href="/more">
  Accessibility hakkında daha fazla bilgi
</a>

<!-- Icon'ları screen reader'dan gizle -->
<button>
  <span aria-hidden="true">🗑️</span>
  Sil
</button>

<!-- Görsel olarak gizle ama screen reader'da oku -->
<style>
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
</style>

<button>
  <span aria-hidden="true">📧</span>
  <span class="sr-only">Email Gönder</span>
</button>

// ✅ Screen reader announcement helper
function announce(message, priority = 'polite') {
  const announcement = document.createElement('div')
  announcement.setAttribute('role', 'status')
  announcement.setAttribute('aria-live', priority)
  announcement.setAttribute('aria-atomic', 'true')
  announcement.classList.add('sr-only')
  announcement.textContent = message

  document.body.appendChild(announcement)

  // Clean up after announcement
  setTimeout(() => {
    document.body.removeChild(announcement)
  }, 1000)
}

// Usage
announce('Form başarıyla gönderildi')
announce('Hata oluştu: Email geçersiz', 'assertive')

/* ❌ Kötü - Yetersiz contrast */
.button {
  background: #4A90E2; /* Blue */
  color: #87CEEB; /* Light blue - 2.1:1 ratio */
}

/* ✅ İyi - Yeterli contrast */
.button {
  background: #4A90E2;
  color: #FFFFFF; /* White - 4.8:1 ratio */
}

/* WCAG 2.4.11 - Focus Appearance (Enhanced) */
:focus-visible {
  outline: 2px solid #4A90E2;
  outline-offset: 2px;
  /* Minimum 2px thickness, 3:1 contrast with adjacent colors */
}

/* Minimum 24x24 CSS pixels (AA) */
button, a {
  min-width: 24px;
  min-height: 24px;
  padding: 8px 16px; /* Genellikle bunu sağlar */
}

/* Best practice: 44x44 (AAA ve mobile) */
.touch-target {
  min-width: 44px;
  min-height: 44px;
}

<!-- ✅ Explicit label -->
<label for="username">Kullanıcı Adı:</label>
<input type="text" id="username" name="username" />

<!-- ✅ Implicit label -->
<label>
  Email:
  <input type="email" name="email" />
</label>

<!-- ✅ aria-label (son çare) -->
<input
  type="search"
  aria-label="Sitede ara"
  placeholder="Ara..."
/>

<form>
  <label for="email">Email:</label>
  <input
    type="email"
    id="email"
    required
    aria-required="true"
    aria-invalid="false"
    aria-describedby="email-error email-hint"
  />
  <span id="email-hint">Örnek: ali@example.com</span>
  <span id="email-error" role="alert" hidden>
    Lütfen geçerli bir email girin
  </span>
</form>

<script>
function validateEmail(input) {
  const errorEl = document.getElementById('email-error')

  if (!input.validity.valid) {
    input.setAttribute('aria-invalid', 'true')
    errorEl.hidden = false
    errorEl.textContent = 'Lütfen geçerli bir email girin'
  } else {
    input.setAttribute('aria-invalid', 'false')
    errorEl.hidden = true
  }
}
</script>

<!-- ✅ Multiple indicators -->
<label for="name">
  İsim
  <span aria-hidden="true">*</span>
  <span class="sr-only">(zorunlu)</span>
</label>
<input
  type="text"
  id="name"
  required
  aria-required="true"
/>

# axe-core - En comprehensive tool
npm install -D @axe-core/cli

# Run audit
axe https://yoursite.com

# Pa11y - CI/CD friendly
npm install -D pa11y

# Test
pa11y https://yoursite.com

// cypress/e2e/accessibility.cy.js
import 'cypress-axe'

describe('Accessibility Tests', () => {
  beforeEach(() => {
    cy.visit('/')
    cy.injectAxe()
  })

  it('Has no accessibility violations', () => {
    cy.checkA11y()
  })

  it('Homepage accessible', () => {
    cy.checkA11y('#main-content')
  })
})