Erişilebilirlik

Web erişilebilirliği (a11y olarak da bilinir), engelli bir kişi, yavaş bir bağlantı, eski veya bozuk donanım veya sadece olumsuz bir ortamda bulunan biri gibi herkes tarafından kullanılabilir web siteleri oluşturma pratiğini ifade eder. Örneğin, bir videoya altyazı eklemek, hem işitme engelli kullanıcılarınıza hem de gürültülü bir ortamda bulunan kullanıcılarınıza telefonlarını duyamayacak kadar yardım eder. Benzer şekilde, metninizin çok düşük kontrastta olmamasını sağlamak, hem düşük görme yetisine sahip kullanıcılarınıza hem de parlak güneşte telefonlarını kullanmaya çalışan kullanıcılarınıza yardımcı olacaktır.

ipucu

Başlamak için hazır mısınız ama nereden başlayacağınızı bilmiyor musunuz?

Web Erişilebilirliği Planlama ve Yönetim Rehberini inceleyin. Dünya Çapında Web Konsorsiyumu (W3C) tarafından sağlanmıştır.

Her sayfanın üst kısmına, kullanıcıların birden fazla web sayfasında tekrar eden içeriği atlayabilmesi için doğrudan ana içerik alanına giden bir bağlantı eklemelisiniz.

Bu genellikle App.vue dosyasının üst kısmında yapılır çünkü tüm sayfalarınızda ilk odaklanabilir öğe olacaktır:

<ul class="skip-links">
  <li>
    <a href="#main" ref="skipLink" class="skip-link">Ana içeriğe atla</a>
  </li>
</ul>

Bağlantıyı yalnızca odaklandığında gizlemek için, aşağıdaki stili ekleyebilirsiniz:

.skip-link {
  white-space: nowrap;
  margin: 1em auto;
  top: 0;
  position: fixed;
  left: 50%;
  margin-left: -72px;
  opacity: 0;
}
.skip-link:focus {
  opacity: 1;
  background-color: white;
  padding: 0.5em;
  border: 1px solid black;
}

Bir kullanıcı rota değiştirdiğinde, odakı atla bağlantısına geri getirin. Bu, atla bağlantısının şablon referansına odaklanmayı çağırarak başarılabilir (varsayılan olarak vue-router kullanıldığını varsayıyoruz):

Composition API Örneği

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const skipLink = ref()

watch(
  () => route.path,
  () => {
    skipLink.value.focus()
  }
)
</script>

Options API Örneği

<script>
export default {
  watch: {
    $route() {
      this.$refs.skipLink.focus()
    }
  }
}
</script>

Ana içeriğe atla bağlantısı ile ilgili dökümana bakın

İçerik Yapısı

Erişilebilirliğin en önemli unsurlarından biri, tasarımın erişilebilir uygulamayı destekleyebileceğinden emin olmaktır. Tasarım, sadece renk kontrastı, yazı tipi seçimi, metin boyutu ve dil değil, aynı zamanda içeriğin uygulamadaki yapısını da göz önünde bulundurmalıdır.

Başlıklar

Kullanıcılar bir uygulamayı başlıklar aracılığıyla gezinebilirler. Uygulamanızın her bölümüne açıklayıcı başlıklar koymak, kullanıcıların her bölümün içeriğini tahmin etmesini kolaylaştırır. Başlıklar söz konusu olduğunda, birkaç önerilen erişilebilirlik uygulaması vardır:

Başlıkları sıralama düzeninde iç içe yerleştirin: -
Bir bölüm içinde başlık atlamayın
Görsel başlık görünümünü vermek için metin stilini kullanacağına gerçek başlık etiketlerini kullanın

Daha fazla başlık bilgisi için tıklayın

<main role="main" aria-labelledby="main-title">
  <h1 id="main-title">Ana başlık</h1>
  <section aria-labelledby="section-title-1">
    <h2 id="section-title-1">Bölüm Başlığı</h2>
    <h3>Bölüm Alt Başlığı</h3>
    <!-- İçerik -->
  </section>
  <section aria-labelledby="section-title-2">
    <h2 id="section-title-2">Bölüm Başlığı</h2>
    <h3>Bölüm Alt Başlığı</h3>
    <!-- İçerik -->
    <h3>Bölüm Alt Başlığı</h3>
    <!-- İçerik -->
  </section>
</main>

Yer İşaretleri

Yer işaretleri, bir uygulamadaki bölümlere programlı erişim sağlar. Yardımcı teknolojilere bağımlı kullanıcılar, uygulamanın her bölümüne gidebilir ve içeriği atlayabilirler. Bunu başarmak için ARIA rollerini kullanabilirsiniz.

HTML	ARIA Rolü	Yer İşareti Amacı
header	role="banner"	Ana başlık: sayfanın başlığı
nav	role="navigation"	Belge veya ilgili belgelerde gezinirken kullanıma uygun bağlantılar koleksiyonu
main	role="main"	Belgenin ana veya merkezi içeriği.
footer	role="contentinfo"	Ebeveyn belgesi hakkında bilgi: dipnotlar/telif hakları/gizlilik beyanına bağlantılar
aside	role="complementary"	Ana içeriği destekler, ancak kendi başına ayrı ve anlamlı bir içeriğe sahiptir
search	role="search"	Bu bölüm, uygulama için arama işlevini içerir.
form	role="form"	Form ile ilişkilendirilmiş öğelerin koleksiyonu
section	role="region"	İlgili içerik ve kullanıcıların muhtemelen gezinmek isteyeceği içerik. Bu öğe için bir etiket sağlanmalıdır.

Daha fazla yer işareti bilgisi için tıklayın

Anlamlı Formlar

Bir form oluştururken, şu öğeleri kullanabilirsiniz: , , , ve ``

Etiketler genellikle form alanlarının üstünde veya solunda yer alır:

<form action="/dataCollectionLocation" method="post" autocomplete="on">
  <div v-for="item in formItems" :key="item.id" class="form-item">
    <label :for="item.id">{{ item.label }}: </label>
    <input
      :type="item.type"
      :id="item.id"
      :name="item.id"
      v-model="item.value"
    />
  </div>
  <button type="submit">Gönder</button>
</form>

Form öğesi üzerine autocomplete='on' dahil edebileceğinizi ve bunun formunuzdaki tüm girdi öğelerine uygulanacağını unutmayın. Ayrıca her bir girdi için farklı otomatik tamamlama özelliği değerleri ayarlayabilirsiniz.

Etiketler

Tüm form kontrolünün amacını açıklamak için etiketler sağlayın; for ve id bağlayarak:

<label for="name">İsim: </label>
<input type="text" name="name" id="name" v-model="name" />

Bu öğeyi Chrome Geliştirici Araçları'nda denetlerseniz ve Elemanlar sekmesi içindeki Erişilebilirlik sekmesini açarsanız, girdinin adını etiketin nasıl aldığını göreceksiniz:

Chrome Geliştirici Araçları etiketten gelen erişilebilir girdi adını gösteriyor

Uyarı:

Girdi alanlarının etiketleri bu şekilde sarılı halde gördüğünüzde:

<label>
  İsim:
  <input type="text" name="name" id="name" v-model="name" />
</label>

Eşleşen bir kimlik ile etiketlerin açıkça ayarlanması, yardımcı teknoloji tarafından daha iyi desteklenmektedir.

`aria-label`

Girdiye bir erişilebilir isim vermek için aria-label özelliğini de kullanabilirsiniz.

<label for="name">İsim: </label>
<input
  type="text"
  name="name"
  id="name"
  v-model="name"
  :aria-label="nameLabel"
/>

Erişilebilir ismin nasıl değiştiğini görmek için bu öğeyi Chrome Geliştirici Araçları'nda incelerken çekinmeyin:

Chrome Geliştirici Araçları aria-labelden gelen girdi erişilebilir ismini gösteriyor

`aria-labelledby`

aria-labelledby kullanmak, etiket metni ekranda görünür olduğunda aria-label ile benzerdir. Diğer öğelerle id’lerine göre eşleştirilir ve birden fazla id bağlayabilirsiniz:

<form
  class="demo"
  action="/dataCollectionLocation"
  method="post"
  autocomplete="on"
>
  <h1 id="billing">Fatura</h1>
  <div class="form-item">
    <label for="name">İsim: </label>
    <input
      type="text"
      name="name"
      id="name"
      v-model="name"
      aria-labelledby="billing name"
    />
  </div>
  <button type="submit">Gönder</button>
</form>

Chrome Geliştirici Araçları aria-labelledby'den gelen girdi erişilebilir ismini gösteriyor

`aria-describedby`

aria-describedby, aria-labelledby ile aynı şekilde kullanılır fakat kullanıcıların ihtiyaç duyabileceği ek bilgiler içeren bir açıklama sağlar. Bu, herhangi bir girdi için kriterleri açıklamak için kullanılabilir:

<form
  class="demo"
  action="/dataCollectionLocation"
  method="post"
  autocomplete="on"
>
  <h1 id="billing">Fatura</h1>
  <div class="form-item">
    <label for="name">Tam İsim: </label>
    <input
      type="text"
      name="name"
      id="name"
      v-model="name"
      aria-labelledby="billing name"
      aria-describedby="nameDescription"
    />
    <p id="nameDescription">Lütfen adınızı ve soyadınızı belirtin.</p>
  </div>
  <button type="submit">Gönder</button>
</form>

Açıklamayı Chrome Geliştirici Araçları'nda inceleyerek görebilirsiniz:

Chrome Geliştirici Araçları aria-labelledby ve aria-describedby ile girdi erişilebilir ismini gösteriyor

Yer Tutucu

Yer tutucuları kullanmaktan kaçının, çünkü birçok kullanıcıyı yanıltabilir.

Yer tutucularıyla ilgili sorunlardan biri, varsayılan olarak renk kontrastı kriterlerini karşılamamalarıdır; renk kontrastını düzeltmek, yer tutucunun girdi alanlarındaki önceden doldurulmuş veriler gibi görünmesini sağlar. Aşağıdaki örneğe baktığınızda, renk kontrastı kriterini karşılayan Soyad yer tutucusunun önceden doldurulmuş veri gibi göründüğünü görebilirsiniz:

Erişilebilir yer tutucu

<form
  class="demo"
  action="/dataCollectionLocation"
  method="post"
  autocomplete="on"
>
  <div v-for="item in formItems" :key="item.id" class="form-item">
    <label :for="item.id">{{ item.label }}: </label>
    <input
      type="text"
      :id="item.id"
      :name="item.id"
      v-model="item.value"
      :placeholder="item.placeholder"
    />
  </div>
  <button type="submit">Gönder</button>
</form>

/* https://www.w3schools.com/howto/howto_css_placeholder.asp */

#lastName::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: black;
  opacity: 1; /* Firefox */
}

#lastName:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: black;
}

#lastName::-ms-input-placeholder {
  /* Microsoft Edge */
  color: black;
}

Kullanıcının formu doldurması için ihtiyaç duyduğu tüm bilgilerin, herhangi bir girdi dışındaki alanlarda sağlanması daha iyidir.

Talimatlar

Girdi alanlarınız için talimatlar eklerken, bunları girdi ile doğru bir şekilde bağladığınızdan emin olun. Ek talimatlar sağlayabilir ve birden fazla id'yi aria-labelledby özelliği ile bağlayabilirsiniz. Bu, daha esnek bir tasarım sağlar.

<fieldset>
  <legend>aria-labelledby kullanımı</legend>
  <label id="date-label" for="date">Mevcut Tarih: </label>
  <input
    type="date"
    name="date"
    id="date"
    aria-labelledby="date-label date-instructions"
  />
  <p id="date-instructions">AA/GG/YYYY</p>
</fieldset>

Alternatif olarak, talimatları aria-describedby ile girdiye ekleyebilirsiniz:

<fieldset>
  <legend>aria-describedby kullanımı</legend>
  <label id="dob" for="dob">Doğum Tarihi: </label>
  <input type="date" name="dob" id="dob" aria-describedby="dob-instructions" />
  <p id="dob-instructions">AA/GG/YYYY</p>
</fieldset>

İçeriği Gizleme

Genellikle, etiketleri görsel olarak gizlemek önerilmez, hatta girdi erişilebilir bir adı olsa bile. Ancak, girdinin işlevi çevresindeki içerikle anlaşılabiliyorsa, o zaman görsel etiketi gizleyebiliriz.

Bu arama alanına bakalım:

<form role="search">
  <label for="search" class="hidden-visually">Arama: </label>
  <input type="text" name="search" id="search" v-model="search" />
  <button type="submit">Ara</button>
</form>

Bunu yapabiliriz çünkü arama butonu, görsel kullanıcıların girdi alanının amacını belirlemesine yardımcı olacaktır.

CSS kullanarak öğeleri görsel olarak gizleyebiliriz ancak bunları yardımcı teknoloji için erişilebilir kılabiliriz:

.hidden-visually {
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  height: 1px;
  width: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
}

`aria-hidden="true"`

aria-hidden="true" eklemek, öğeyi yardımcı teknolojiden gizler ancak diğer kullanıcılar için görsel olarak erişilebilir bırakır. Bunu odaklanabilir öğeler üzerinde kullanmayın; yalnızca dekoratif, kopyalanmış veya ekran dışı içerikler için kullanın.

<p>Bu, ekran okuyuculardan gizlenmemiştir.</p>
<p aria-hidden="true">Bu, ekran okuyuculardan gizlenmiştir.</p>

Butonlar

Bir form içinde buton kullanırken, formu göndermemek için türü ayarlamanız gerekir. Butonlar oluşturmak için bir girdi de kullanabilirsiniz:

<form action="/dataCollectionLocation" method="post" autocomplete="on">
  <!-- Butonlar -->
  <button type="button">İptal</button>
  <button type="submit">Gönder</button>

  <!-- Girdi butonları -->
  <input type="button" value="İptal" />
  <input type="submit" value="Gönder" />
</form>

Fonksiyonel Resimler

Fonksiyonel görüntüler oluşturmak için bu tekniği kullanabilirsiniz.

Girdi alanları

Bu resimler, formlarda bir gönderim türü düğmesi olarak işlev görecektir.

<form role="search">
  <label for="search" class="hidden-visually">Arama: </label>
  <input type="text" name="search" id="search" v-model="search" />
  <input
    type="image"
    class="btnImg"
    src="https://img.icons8.com/search"
    alt="Arama"
  />
</form>

İkonlar

<form role="search">
  <label for="searchIcon" class="hidden-visually">Arama: </label>
  <input type="text" name="searchIcon" id="searchIcon" v-model="searchIcon" />
  <button type="submit">
    <i class="fas fa-search" aria-hidden="true"></i>
    <span class="hidden-visually">Arama</span>
  </button>
</form>

Standartlar

Dünya Çapında Web Konsorsiyumu (W3C) Web Erişilebilirliği İnisiyatifi (WAI), farklı bileşenler için web erişilebilirlik standartlarını geliştirmektedir:

Kullanıcı Aracı Erişilebilirlik Rehberi (UAAG)
- web tarayıcıları ve medya oynatıcılar, bazı yardımcı teknolojiler de dahil
Yazar Aracı Erişilebilirlik Rehberi (ATAG)
- yazar araçları
Web İçeriği Erişilebilirlik Rehberi (WCAG)
- web içeriği - geliştiriciler, yazar araçları ve erişilebilirlik değerlendirme araçları tarafından kullanılır

Web İçeriği Erişilebilirlik Rehberi (WCAG)

WCAG 2.1 WCAG 2.0 üzerine eklenir ve webdeki değişiklikleri ele alarak yeni teknolojilerin uygulanmasını sağlar. W3C, web erişilebilirliği politikalarını geliştirirken veya güncellerken en güncel WCAG sürümünün kullanılmasını teşvik etmektedir.

WCAG 2.1 Dört Ana Yönerge İlkesi (kısaca POUR):

Algılanabilir
- Kullanıcılar, sunulan bilgiyi algılayabilmelidir.
İşlevsel
- Arayüz biçimleri, kontrol ve navigasyon işlevsel olmalıdır.
Anlaşılır
- Bilgi ve kullanıcı arayüzünün işleyişi, tüm kullanıcılar için anlaşılır olmalıdır.
Sağlam
- Kullanıcılar, teknolojiler geliştikçe içeriğe erişebilmelidir.

Web Erişilebilirliği İnisiyatifi – Erişilebilir Zengin Internet Uygulamaları (WAI-ARIA)

W3C'nin WAI-ARIA'sı, dinamik içerik ve gelişmiş kullanıcı arayüzü kontrolleri nasıl oluşturulacağı konusunda rehberlik sağlar.

Erişilebilirlik