{"id":39523,"date":"2026-02-23T11:30:43","date_gmt":"2026-02-23T08:30:43","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari\/"},"modified":"2026-02-23T11:30:43","modified_gmt":"2026-02-23T08:30:43","slug":"vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari\/","title":{"rendered":"Vue Uygulamalar\u0131nda Eri\u015filebilirlik: Kapsay\u0131c\u0131 Uygulamalar Geli\u015ftirmek \u0130\u00e7in H\u0131zl\u0131 \u0130pu\u00e7lar\u0131"},"content":{"rendered":"<h2>Vue Uygulamalar\u0131nda Eri\u015filebilirlik: Kapsay\u0131c\u0131 Uygulamalar Geli\u015ftirmek \u0130\u00e7in H\u0131zl\u0131 \u0130pu\u00e7lar\u0131<\/h2>\n<p>Modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biri olan eri\u015filebilirlik, uygulamalar\u0131m\u0131z\u0131 herkesin kullanabilmesini sa\u011flamak anlam\u0131na gelir. Vue.js ile geli\u015ftirme yaparken, eri\u015filebilirli\u011fi ba\u015ftan sona d\u00fc\u015f\u00fcnmek, sadece yasal bir zorunluluk de\u011fil, ayn\u0131 zamanda daha geni\u015f bir kitleye ula\u015fman\u0131n ve daha iyi bir kullan\u0131c\u0131 deneyimi sunman\u0131n anahtar\u0131d\u0131r. Bu makalede, Vue uygulamalar\u0131n\u0131z\u0131 daha kapsay\u0131c\u0131 hale getirmek i\u00e7in pratik ipu\u00e7lar\u0131 ve en iyi uygulamalar\u0131 ke\u015ffedece\u011fiz.<\/p>\n<h3>Eri\u015filebilirli\u011fin Temel Ta\u015flar\u0131 ve Vue \u0130\u00e7in \u00d6nemi<\/h3>\n<p>Web eri\u015filebilirli\u011fi, engelli bireylerin (g\u00f6rme, i\u015fitme, bili\u015fsel, motor vb. engelleri olanlar) web sitelerini ve uygulamalar\u0131n\u0131 alg\u0131layabilmesini, anlayabilmesini, gezinebilmesini ve bunlarla etkile\u015fim kurabilmesini sa\u011flamakt\u0131r. Vue geli\u015ftiricileri olarak, bile\u015fen tabanl\u0131 yap\u0131n\u0131n getirdi\u011fi esnekli\u011fi, eri\u015filebilirlik standartlar\u0131na uygun uygulamalar in\u015fa etmek i\u00e7in kullanabiliriz.<\/p>\n<h4>Neden Eri\u015filebilir Uygulamalar Geli\u015ftirmeliyiz?<\/h4>\n<p>Eri\u015filebilir uygulamalar geli\u015ftirmek, etik bir sorumlulu\u011fun yan\u0131 s\u0131ra, yasal uyumluluk (\u00f6rne\u011fin, WCAG standartlar\u0131), daha geni\u015f bir kullan\u0131c\u0131 kitlesine ula\u015fma, daha iyi SEO performans\u0131 ve genel olarak daha sa\u011flam, kullan\u0131c\u0131 dostu bir \u00fcr\u00fcn sunma gibi bir\u00e7ok avantaj\u0131 beraberinde getirir. Engelli bireylerin yan\u0131 s\u0131ra, ge\u00e7ici engelleri olanlar (kolu k\u0131r\u0131k olanlar) veya belirli durumlarda (parlak g\u00fcne\u015f \u0131\u015f\u0131\u011f\u0131 alt\u0131nda telefon kullananlar) herkesin uygulaman\u0131z\u0131 rahat\u00e7a kullanabilmesini sa\u011flar.<\/p>\n<h4>WCAG Prensipleri: Alg\u0131lanabilirlik, \u00c7al\u0131\u015fabilirlik, Anla\u015f\u0131labilirlik, Sa\u011flaml\u0131k<\/h4>\n<p>Web \u0130\u00e7eri\u011fi Eri\u015filebilirlik Y\u00f6nergeleri (WCAG), eri\u015filebilir web i\u00e7eri\u011fi olu\u015fturmak i\u00e7in uluslararas\u0131 bir standartt\u0131r. Bu y\u00f6nergeler d\u00f6rt temel prensibe dayan\u0131r:<\/p>\n<ul>\n<li><strong>Alg\u0131lanabilirlik:<\/strong> Bilgi ve kullan\u0131c\u0131 aray\u00fcz\u00fc bile\u015fenleri, kullan\u0131c\u0131lar taraf\u0131ndan alg\u0131lanabilir bir \u015fekilde sunulmal\u0131d\u0131r (\u00f6rne\u011fin, metin alternatifleri, renk kontrast\u0131).<\/li>\n<li><strong>\u00c7al\u0131\u015fabilirlik:<\/strong> Kullan\u0131c\u0131 aray\u00fcz\u00fc bile\u015fenleri ve navigasyon \u00e7al\u0131\u015ft\u0131r\u0131labilir olmal\u0131d\u0131r (\u00f6rne\u011fin, klavye eri\u015fimi).<\/li>\n<li><strong>Anla\u015f\u0131labilirlik:<\/strong> Bilgi ve kullan\u0131c\u0131 aray\u00fcz\u00fc i\u015flemlerinin anla\u015f\u0131labilir olmas\u0131 gerekir (\u00f6rne\u011fin, okunabilir metin, tutarl\u0131 navigasyon).<\/li>\n<li><strong>Sa\u011flaml\u0131k:<\/strong> \u0130\u00e7erik, \u00e7e\u015fitli kullan\u0131c\u0131 arac\u0131lar\u0131 (taray\u0131c\u0131lar, yard\u0131mc\u0131 teknolojiler) taraf\u0131ndan yorumlanabilecek kadar sa\u011flam olmal\u0131d\u0131r.<\/li>\n<\/ul>\n<h4>Vue Geli\u015ftiricileri \u0130\u00e7in Eri\u015filebilirlik Yakla\u015f\u0131m\u0131<\/h4>\n<p>Vue.js, bile\u015fen tabanl\u0131 mimarisi sayesinde eri\u015filebilirli\u011fi kolayla\u015ft\u0131ran bir\u00e7ok \u00f6zelli\u011fe sahiptir. \u00d6nemli olan, geli\u015ftirme s\u00fcrecinin ba\u015f\u0131ndan itibaren eri\u015filebilirli\u011fi bir gereklilik olarak ele almakt\u0131r. Bile\u015fenler tasarlan\u0131rken, sadece g\u00f6rsel de\u011fil, ayn\u0131 zamanda anlamsal ve etkile\u015fimsel eri\u015filebilirlik de g\u00f6z \u00f6n\u00fcnde bulundurulmal\u0131d\u0131r.<\/p>\n<h3>Anlamsal HTML ile Sa\u011flam Temeller Olu\u015fturmak<\/h3>\n<p>Eri\u015filebilir bir web uygulamas\u0131n\u0131n temeli, do\u011fru ve anlamsal HTML kullan\u0131m\u0131d\u0131r. HTML etiketleri, i\u00e7eri\u011fin amac\u0131n\u0131 ve yap\u0131s\u0131n\u0131 yard\u0131mc\u0131 teknolojilere (ekran okuyucular gibi) iletmek i\u00e7in tasarlanm\u0131\u015ft\u0131r.<\/p>\n<h4>Do\u011fru HTML Etiketlerini Se\u00e7mek<\/h4>\n<p>Her zaman m\u00fcmk\u00fcn oldu\u011funca do\u011fru HTML etiketlerini kullanmaya \u00f6zen g\u00f6sterin. \u00d6rne\u011fin, bir d\u00fc\u011fme i\u00e7in <code><button><\/code> etiketi yerine <code><\/p>\n<div><\/code> kullanmak, hem klavye eri\u015filebilirli\u011fini hem de ekran okuyucular\u0131n \u00f6\u011feyi tan\u0131mas\u0131n\u0131 zorla\u015ft\u0131r\u0131r. Benzer \u015fekilde, ba\u011flant\u0131lar i\u00e7in <code><a><\/code>, listeler i\u00e7in <code><\/p>\n<ul><\/code>\/<code><\/p>\n<ol><\/code> ve form kontrolleri i\u00e7in <code><input><\/code>, <code><select><\/code>, <code><textarea><\/code> gibi etiketler kullan\u0131lmal\u0131d\u0131r.<\/p>\n<pre><code class=\"language-html\"><!-- Yanl\u0131\u015f Kullan\u0131m -->\n<div @click=\"doSomething\">T\u0131kla<\/div>\n\n<!-- Do\u011fru Kullan\u0131m -->\n<button @click=\"doSomething\">T\u0131kla<\/button><\/pre>\n<p><\/code><\/p>\n<h4>Vue Bile\u015fenlerinde Anlamsal Yap\u0131<\/h4>\n<p>Vue bile\u015fenlerinizi tasarlarken, her bir bile\u015fenin kendi i\u00e7inde anlamsal bir b\u00fct\u00fcnl\u00fc\u011fe sahip olmas\u0131na dikkat edin. \u00d6rne\u011fin, bir kart bile\u015feni olu\u015fturuyorsan\u0131z, bunun bir <code><\/p>\n<article><\/code> veya <code><\/p>\n<section><\/code> etiketi i\u00e7inde yer almas\u0131 daha uygun olabilir. Bile\u015fenin k\u00f6k elementi olarak anlams\u0131z bir <code><\/p>\n<div><\/code> yerine, bile\u015fenin amac\u0131n\u0131 yans\u0131tan bir etiket kullanmaya \u00e7al\u0131\u015f\u0131n.<\/p>\n<pre><code class=\"language-html\"><!-- MyCard.vue -->\n<template>\n  <article class=\"my-card\">\n    <h3>{{ title }}<\/h3>\n    <p>{{ description }}<\/p>\n    <button @click=\"viewDetails\">Detaylar\u0131 G\u00f6r<\/button>\n  <\/article>\n<\/template><\/pre>\n<p><\/code><\/p>\n<h4><code>v-for<\/code> ile Listelerin Eri\u015filebilirli\u011fi<\/h4>\n<p>Vue'da <code>v-for<\/code> direktifiyle listeler olu\u015ftururken, her zaman <code><\/p>\n<ul><\/code>, <code><\/p>\n<ol><\/code> veya <code><\/p>\n<dl><\/code> gibi uygun liste etiketlerini ve i\u00e7lerinde <code><\/p>\n<li><\/code> etiketlerini kullan\u0131n. Ayr\u0131ca, <code>key<\/code> niteli\u011fini do\u011fru bir \u015fekilde kullanmak, Vue'nun DOM'u verimli bir \u015fekilde g\u00fcncellemesine yard\u0131mc\u0131 olurken, ekran okuyucular i\u00e7in de tutarl\u0131 bir deneyim sa\u011flar.<\/p>\n<pre><code class=\"language-html\"><ul>\n  <li v-for=\"item in items\" :key=\"item.id\">\n    {{ item.name }}\n  <\/li>\n<\/ul><\/pre>\n<p><\/code><\/p>\n<h3>ARIA Niteliklerini Ak\u0131ll\u0131ca Kullanmak<\/h3>\n<p>Anlamsal HTML, \u00e7o\u011fu senaryo i\u00e7in yeterli olsa da, bazen \u00f6zel kullan\u0131c\u0131 aray\u00fcz\u00fc bile\u015fenleri veya dinamik i\u00e7erikler i\u00e7in ek bilgilere ihtiya\u00e7 duyulur. \u0130\u015fte bu noktada WAI-ARIA (Web Eri\u015filebilirlik Giri\u015fimi - Eri\u015filebilir Zengin \u0130nternet Uygulamalar\u0131) nitelikleri devreye girer.<\/p>\n<h4>ARIA Nedir ve Ne Zaman Gerekli?<\/h4>\n<p>ARIA, HTML'e ekleyebilece\u011finiz bir dizi niteliktir ve yard\u0131mc\u0131 teknolojilere, web i\u00e7eri\u011finin rol\u00fcn\u00fc, durumunu ve \u00f6zelliklerini daha iyi anlamalar\u0131 i\u00e7in ek bilgi sa\u011flar. ARIA, HTML'in anlamsal yeteneklerini geni\u015fletir, ancak onun yerine ge\u00e7mez. Kural \u015fudur: E\u011fer anlamsal bir HTML etiketi i\u015finizi g\u00f6r\u00fcyorsa, ARIA kullanmaktan ka\u00e7\u0131n\u0131n. ARIA'y\u0131 sadece HTML'in yetersiz kald\u0131\u011f\u0131 durumlarda kullan\u0131n.<\/p>\n<h4>S\u0131k Kullan\u0131lan ARIA Nitelikleri<\/h4>\n<ul>\n<li><code>aria-label<\/code>: Bir \u00f6\u011feye g\u00f6r\u00fcnen bir metin etiketi yoksa a\u00e7\u0131klay\u0131c\u0131 bir etiket sa\u011flar.<\/li>\n<li><code>aria-describedby<\/code>: Bir \u00f6\u011feyi a\u00e7\u0131klayan bir veya daha fazla \u00f6\u011fenin kimli\u011fini belirtir.<\/li>\n<li><code>aria-hidden=\"true\"<\/code>: Bir \u00f6\u011fenin ve t\u00fcm alt \u00f6\u011felerinin yard\u0131mc\u0131 teknolojilerden gizlenmesi gerekti\u011fini belirtir.<\/li>\n<li><code>aria-live<\/code>: Bir b\u00f6lgenin dinamik olarak g\u00fcncellendi\u011fini ve bu g\u00fcncellemelerin kullan\u0131c\u0131ya bildirilmesi gerekti\u011fini belirtir (\u00f6rne\u011fin, hata mesajlar\u0131).<\/li>\n<li><code>role<\/code>: Bir \u00f6\u011fenin amac\u0131n\u0131 tan\u0131mlar (\u00f6rne\u011fin, <code>role=\"dialog\"<\/code>, <code>role=\"tablist\"<\/code>).<\/li>\n<\/ul>\n<pre><code class=\"language-html\"><!-- G\u00f6rsel olarak sadece bir ikon olan bir d\u00fc\u011fme i\u00e7in -->\n<button aria-label=\"Sepete Ekle\">\n  <i class=\"icon-cart\"><\/i>\n<\/button>\n\n<!-- \u00d6zel bir modal penceresi i\u00e7in -->\n<div role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"modal-title\">\n  <h2 id=\"modal-title\">Modal Ba\u015fl\u0131\u011f\u0131<\/h2>\n  <!-- ... i\u00e7erik ... -->\n<\/div><\/pre>\n<p><\/code><\/p>\n<h4>ARIA'y\u0131 K\u00f6t\u00fcye Kullanmaktan Ka\u00e7\u0131nma<\/h4>\n<p>ARIA'y\u0131 yanl\u0131\u015f veya gereksiz kullanmak, eri\u015filebilirli\u011fi iyile\u015ftirmek yerine k\u00f6t\u00fcle\u015ftirebilir. \u00d6rne\u011fin, bir <code><button><\/code> etiketine <code>role=\"button\"<\/code> eklemek gereksizdir, \u00e7\u00fcnk\u00fc <code><button><\/code> zaten bu role sahiptir. Her zaman \"ARIA'n\u0131n ilk kural\u0131\"n\u0131 hat\u0131rlay\u0131n: \"Bir yerel HTML \u00f6\u011fesi veya \u00f6zelli\u011fi (anlamsal olarak) istenen anlama veya davran\u0131\u015fa sahipse, ARIA kullanmay\u0131n.\"<\/p>\n<h3>Klavye Navigasyonu ve Odak Y\u00f6netiminde Ustala\u015fmak<\/h3>\n<p>Bir\u00e7ok kullan\u0131c\u0131, fare yerine klavye ile gezinir. Bu, \u00f6zellikle motor engelli veya g\u00f6rme engelli kullan\u0131c\u0131lar i\u00e7in hayati \u00f6neme sahiptir. Uygulaman\u0131z\u0131n klavye ile tamamen kullan\u0131labilir oldu\u011fundan emin olun.<\/p>\n<h4>Sekme S\u0131ras\u0131 ve Do\u011fal Ak\u0131\u015f<\/h4>\n<p>Web sayfas\u0131ndaki \u00f6\u011feler aras\u0131nda <code>Tab<\/code> tu\u015fuyla gezinirken, odak s\u0131ras\u0131 mant\u0131kl\u0131 ve \u00f6ng\u00f6r\u00fclebilir olmal\u0131d\u0131r. Taray\u0131c\u0131lar, anlamsal HTML \u00f6\u011feleri i\u00e7in do\u011fal bir sekme s\u0131ras\u0131 (DOM'daki g\u00f6r\u00fcn\u00fcmlerine g\u00f6re) sa\u011flar. <code>tabindex<\/code> niteli\u011fini yaln\u0131zca do\u011fal s\u0131ray\u0131 bozman\u0131z gerekti\u011finde (veya bir \u00f6\u011feyi odaklanabilir yapman\u0131z gerekti\u011finde) kullan\u0131n. Negatif <code>tabindex=\"-1\"<\/code>, \u00f6\u011feyi programatik olarak odaklanabilir yapar ancak sekme s\u0131ras\u0131ndan \u00e7\u0131kar\u0131r. Pozitif <code>tabindex<\/code> de\u011ferlerinden (<code>tabindex=\"1\"<\/code>, <code>tabindex=\"2\"<\/code> vb.) m\u00fcmk\u00fcn oldu\u011funca ka\u00e7\u0131n\u0131n, \u00e7\u00fcnk\u00fc bunlar bak\u0131m\u0131 zor ve sorunlu olabilir.<\/p>\n<h4>Odak Y\u00f6netimi \u0130\u00e7in Vue Y\u00f6ntemleri<\/h4>\n<p>Vue'da dinamik i\u00e7erik y\u00fcklendi\u011finde veya bir bile\u015fen etkile\u015fimde bulundu\u011funda oda\u011f\u0131 y\u00f6netmek \u00f6nemlidir. \u00d6rne\u011fin, bir modal a\u00e7\u0131ld\u0131\u011f\u0131nda oda\u011f\u0131n modal\u0131n i\u00e7ine ta\u015f\u0131nmas\u0131 ve modal kapat\u0131ld\u0131\u011f\u0131nda oda\u011f\u0131n modal\u0131 a\u00e7an \u00f6\u011feye geri d\u00f6nmesi gerekir. Bunu Vue'da <code>ref<\/code> kullanarak ve JavaScript'in <code>.focus()<\/code> metodunu \u00e7a\u011f\u0131rarak yapabiliriz.<\/p>\n<pre><code class=\"language-html\"><template>\n  <button @click=\"openModal\" ref=\"openButton\">Modali A\u00e7<\/button>\n\n  <div v-if=\"isModalOpen\" role=\"dialog\" aria-modal=\"true\">\n    <h3>Modal \u0130\u00e7eri\u011fi<\/h3>\n    <input type=\"text\" ref=\"modalInput\">\n    <button @click=\"closeModal\">Kapat<\/button>\n  <\/div>\n<\/template>\n\n<script>\nexport default {\n  data() {\n    return {\n      isModalOpen: false\n    };\n  },\n  methods: {\n    openModal() {\n      this.isModalOpen = true;\n      this.$nextTick(() => {\n        this.$refs.modalInput.focus(); \/\/ Modal\u0131 a\u00e7\u0131nca inputa odaklan\n      });\n    },\n    closeModal() {\n      this.isModalOpen = false;\n      this.$nextTick(() => {\n        this.$refs.openButton.focus(); \/\/ Modal\u0131 kapat\u0131nca a\u00e7an d\u00fc\u011fmeye geri odaklan\n      });\n    }\n  }\n};\n<\/script><\/pre>\n<p><\/code><\/p>\n<h4>Modallar ve Kapan\u0131\u015fta Odak Geri D\u00f6n\u00fc\u015f\u00fc<\/h4>\n<p>Modallar, a\u00e7\u0131l\u0131r pencereler ve benzeri ge\u00e7ici aray\u00fcz \u00f6\u011feleri, odak y\u00f6netiminin en kritik oldu\u011fu yerlerdir. Kullan\u0131c\u0131 bir modal\u0131 a\u00e7t\u0131\u011f\u0131nda, odak modal\u0131n i\u00e7ine ta\u015f\u0131nmal\u0131 ve modal\u0131n d\u0131\u015f\u0131ndaki \u00f6\u011felere klavye ile eri\u015fim engellenmelidir (odak tuza\u011f\u0131). Modal kapat\u0131ld\u0131\u011f\u0131nda ise odak, modal\u0131 a\u00e7an \u00f6\u011feye geri d\u00f6nmelidir. Bu, kullan\u0131c\u0131 deneyimi ve eri\u015filebilirlik a\u00e7\u0131s\u0131ndan \u00e7ok \u00f6nemlidir.<\/p>\n<h3>Form Eri\u015filebilirli\u011fi: Herkes \u0130\u00e7in Kullan\u0131labilir Formlar<\/h3>\n<p>Formlar, kullan\u0131c\u0131lar\u0131n uygulamalarla etkile\u015fim kurdu\u011fu en yayg\u0131n yerlerden biridir. Eri\u015filebilir formlar olu\u015fturmak, herkesin bilgi giri\u015fi yapabilmesini ve geri bildirim alabilmesini sa\u011flar.<\/p>\n<h4><code>label<\/code> Etiketlerinin \u00d6nemi<\/h4>\n<p>Her form kontrol\u00fcn\u00fcn (<code><input><\/code>, <code><textarea><\/code>, <code><select><\/code>) ili\u015fkili bir <code><label><\/code> etiketi olmal\u0131d\u0131r. <code><label><\/code> etiketi, <code>for<\/code> niteli\u011fi ile form kontrol\u00fcn\u00fcn <code>id<\/code>'sine ba\u011flanmal\u0131d\u0131r. Bu, ekran okuyucular\u0131n form kontrol\u00fcn\u00fcn amac\u0131n\u0131 kullan\u0131c\u0131ya bildirmesini sa\u011flar ve ayr\u0131ca etikete t\u0131klayarak kontrol\u00fc odaklamay\u0131 m\u00fcmk\u00fcn k\u0131lar.<\/p>\n<pre><code class=\"language-html\"><!-- Yanl\u0131\u015f Kullan\u0131m -->\n<p>Ad\u0131n\u0131z<\/p>\n<input type=\"text\" id=\"name\">\n\n<!-- Do\u011fru Kullan\u0131m -->\n<label for=\"name\">Ad\u0131n\u0131z<\/label>\n<input type=\"text\" id=\"name\"><\/pre>\n<p><\/code><\/p>\n<h4>Hata Mesajlar\u0131 ve Geri Bildirimler<\/h4>\n<p>Kullan\u0131c\u0131lar bir formu yanl\u0131\u015f doldurdu\u011funda, hata mesajlar\u0131n\u0131n a\u00e7\u0131k, anla\u015f\u0131l\u0131r ve eri\u015filebilir olmas\u0131 gerekir. Hata mesajlar\u0131, ilgili form kontrol\u00fcyle <code>aria-describedby<\/code> niteli\u011fi kullan\u0131larak ili\u015fkilendirilmeli ve <code>aria-live=\"assertive\"<\/code> gibi bir nitelikle ekran okuyuculara an\u0131nda bildirilmelidir.<\/p>\n<pre><code class=\"language-html\"><label for=\"email\">E-posta<\/label>\n<input type=\"email\" id=\"email\" :aria-invalid=\"emailError ? 'true' : 'false'\" aria-describedby=\"email-error\">\n<div v-if=\"emailError\" id=\"email-error\" class=\"error-message\" aria-live=\"assertive\">\n  L\u00fctfen ge\u00e7erli bir e-posta adresi girin.\n<\/div><\/pre>\n<p><\/code><\/p>\n<h4>Do\u011fru Giri\u015f Tipleri<\/h4>\n<p>HTML5'in sundu\u011fu farkl\u0131 <code>input type<\/code>'lar\u0131n\u0131 (<code>type=\"email\"<\/code>, <code>type=\"number\"<\/code>, <code>type=\"tel\"<\/code> vb.) kullanmak, hem kullan\u0131c\u0131 deneyimini iyile\u015ftirir (\u00f6rne\u011fin mobil cihazlarda uygun klavye a\u00e7\u0131l\u0131r) hem de taray\u0131c\u0131ya ve yard\u0131mc\u0131 teknolojilere giri\u015f alan\u0131n\u0131n beklenen veri t\u00fcr\u00fc hakk\u0131nda bilgi verir.<\/p>\n<h3>G\u00f6rsel Tasar\u0131m ve Test Ara\u00e7lar\u0131yla Eri\u015filebilirli\u011fi Tamamlamak<\/h3>\n<p>Eri\u015filebilirlik sadece kodla ilgili de\u011fildir; tasar\u0131m kararlar\u0131 da b\u00fcy\u00fck rol oynar. Ayr\u0131ca, uygulaman\u0131z\u0131n eri\u015filebilirli\u011fini d\u00fczenli olarak test etmek de \u00f6nemlidir.<\/p>\n<h4>Renk Kontrast\u0131 ve Okunabilirlik<\/h4>\n<p>Metin ve arka plan aras\u0131ndaki renk kontrast\u0131, \u00f6zellikle g\u00f6rme engelli veya renk k\u00f6r\u00fc kullan\u0131c\u0131lar i\u00e7in kritik \u00f6neme sahiptir. WCAG 2.1 y\u00f6nergeleri, belirli kontrast oranlar\u0131n\u0131 (genellikle AA seviyesi i\u00e7in 4.5:1, AAA seviyesi i\u00e7in 7:1) zorunlu k\u0131lar. Tasar\u0131mc\u0131lar\u0131n\u0131zla bu standartlara uymak i\u00e7in i\u015fbirli\u011fi yap\u0131n.<\/p>\n<p><strong>\u00d6rnek Tablo: WCAG Kontrast Oranlar\u0131<\/strong><\/p>\n<table>\n<thead>\n<tr>\n<th>WCAG Seviyesi<\/th>\n<th>Normal Metin<\/th>\n<th>B\u00fcy\u00fck Metin (18pt veya 14pt kal\u0131n)<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>AA<\/td>\n<td>4.5:1<\/td>\n<td>3:1<\/td>\n<\/tr>\n<tr>\n<td>AAA<\/td>\n<td>7:1<\/td>\n<td>4.5:1<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Yaz\u0131 Tipi Boyutu ve Sat\u0131r Aral\u0131\u011f\u0131<\/h4>\n<p>Yaz\u0131 tiplerinin okunabilirli\u011fini sa\u011flamak i\u00e7in yeterli boyutta ve sat\u0131r aral\u0131\u011f\u0131nda olmalar\u0131 gerekir. Kullan\u0131c\u0131lar\u0131n taray\u0131c\u0131 ayarlar\u0131 arac\u0131l\u0131\u011f\u0131yla metin boyutunu b\u00fcy\u00fctmesine izin vermek de \u00f6nemlidir. Sabit piksel boyutlar\u0131 yerine <code>rem<\/code> veya <code>em<\/code> birimleri kullanmak, bu esnekli\u011fi sa\u011flar.<\/p>\n<h4>Alternatif Metinler (Alt Text) ve \u0130konlar<\/h4>\n<p>G\u00f6rsel i\u00e7erikler (resimler, grafikler, ikonlar) i\u00e7in her zaman a\u00e7\u0131klay\u0131c\u0131 <code>alt<\/code> metinleri sa\u011flay\u0131n. Bu metinler, g\u00f6rseli g\u00f6remeyen kullan\u0131c\u0131lara i\u00e7eri\u011fin anlam\u0131n\u0131 iletir. Dekoratif g\u00f6rseller i\u00e7in <code>alt=\"\"<\/code> bo\u015f b\u0131rak\u0131labilir. \u0130konlar i\u00e7in, e\u011fer bir eylemi temsil ediyorlarsa <code>aria-label<\/code> ile a\u00e7\u0131klama ekleyin.<\/p>\n<pre><code class=\"language-html\"><!-- Anlaml\u0131 g\u00f6rsel -->\n<img decoding=\"async\" src=\"manzara.jpg\" alt=\"Ye\u015fil tepelerin \u00fczerindeki g\u00fcne\u015f bat\u0131m\u0131\">\n\n<!-- Dekoratif g\u00f6rsel -->\n<img decoding=\"async\" src=\"ayra\u00e7.svg\" alt=\"\"><\/pre>\n<p><\/code><\/p>\n<h4>Eri\u015filebilirlik Test Ara\u00e7lar\u0131<\/h4>\n<p>Uygulaman\u0131z\u0131n eri\u015filebilirli\u011fini d\u00fczenli olarak test etmek \u00e7ok \u00f6nemlidir. Kullanabilece\u011finiz baz\u0131 ara\u00e7lar:<\/p>\n<ul>\n<li><strong>Lighthouse (Chrome Geli\u015ftirici Ara\u00e7lar\u0131):<\/strong> Otomatik denetimler sunar ve eri\u015filebilirlik sorunlar\u0131n\u0131 belirler.<\/li>\n<li><strong>Axe DevTools:<\/strong> Taray\u0131c\u0131 eklentisi olarak kullan\u0131labilen g\u00fc\u00e7l\u00fc bir otomatik test arac\u0131d\u0131r.<\/li>\n<li><strong>Manuel Klavye Testi:<\/strong> Uygulaman\u0131zda sadece klavye kullanarak gezinin ve t\u00fcm i\u015flevlerin eri\u015filebilir oldu\u011fundan emin olun.<\/li>\n<li><strong>Ekran Okuyucu Testi:<\/strong> JAWS, NVDA (Windows) veya VoiceOver (macOS) gibi ekran okuyucularla uygulaman\u0131z\u0131 deneyimleyin.<\/li>\n<\/ul>\n<h3>Sonu\u00e7<\/h3>\n<p>Vue uygulamalar\u0131nda eri\u015filebilirlik, sadece bir eklenti de\u011fil, geli\u015ftirme s\u00fcrecinin ayr\u0131lmaz bir par\u00e7as\u0131 olmal\u0131d\u0131r. Anlamsal HTML kullan\u0131m\u0131, ARIA niteliklerinin ak\u0131ll\u0131ca uygulanmas\u0131, klavye navigasyonunun sa\u011flanmas\u0131, formlar\u0131n eri\u015filebilirli\u011fi ve do\u011fru g\u00f6rsel tasar\u0131m prensipleriyle, herkesin kullanabilece\u011fi kapsay\u0131c\u0131 uygulamalar in\u015fa edebiliriz. Unutmay\u0131n, eri\u015filebilir bir web, daha iyi bir web'dir ve bu \u00e7aba, hem kullan\u0131c\u0131lar\u0131n\u0131z hem de uygulaman\u0131z i\u00e7in uzun vadeli faydalar sa\u011flayacakt\u0131r.<\/p>\n<h3>SSS (S\u0131k Sorulan Sorular)<\/h3>\n<h4>Vue'da eri\u015filebilirli\u011fi test etmek i\u00e7in en iyi yol nedir?<\/h4>\n<p>En iyi yol, otomatik test ara\u00e7lar\u0131n\u0131 (Lighthouse, Axe DevTools) manuel testlerle (klavye navigasyonu, ekran okuyucu kullan\u0131m\u0131) birle\u015ftirmektir. Otomatik ara\u00e7lar yayg\u0131n sorunlar\u0131 h\u0131zla tespit ederken, manuel testler ger\u00e7ek kullan\u0131c\u0131 deneyimini anlaman\u0131z\u0131 sa\u011flar.<\/p>\n<h4><code>v-if<\/code> ve <code>v-show<\/code> eri\u015filebilirlik a\u00e7\u0131s\u0131ndan farkl\u0131l\u0131k g\u00f6sterir mi?<\/h4>\n<p>Evet, farkl\u0131l\u0131k g\u00f6sterir. <code>v-if<\/code>, ko\u015ful yanl\u0131\u015f oldu\u011funda elementi DOM'dan tamamen kald\u0131r\u0131r, bu da ekran okuyucular\u0131n bu i\u00e7eri\u011fi alg\u0131lamas\u0131n\u0131 engeller. <code>v-show<\/code> ise elementi DOM'da tutar ancak CSS ile g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc de\u011fi\u015ftirir (<code>display: none<\/code>). Bu durumda, element hala DOM'da oldu\u011fu i\u00e7in ekran okuyucular taraf\u0131ndan alg\u0131lanabilir, ancak genellikle gizli oldu\u011fu i\u00e7in okunmaz. Dinamik olarak g\u00f6r\u00fcnen\/gizlenen i\u00e7eri\u011fin yard\u0131mc\u0131 teknolojilere uygun \u015fekilde bildirilmesi i\u00e7in <code>aria-hidden<\/code> veya <code>aria-live<\/code> gibi ARIA nitelikleri gerekebilir.<\/p>\n<h4>SPA'larda rota de\u011fi\u015fikliklerinde eri\u015filebilirlik nas\u0131l sa\u011flan\u0131r?<\/h4>\n<p>Tek Sayfal\u0131 Uygulamalarda (SPA), rota de\u011fi\u015fiklikleri genellikle sayfa yenilemesi yapmaz. Bu durumda, yeni sayfa y\u00fcklendi\u011finde ekran okuyucular\u0131n bunu fark etmesi i\u00e7in sayfan\u0131n ana i\u00e7eri\u011fine programatik olarak odaklanmak ve sayfa ba\u015fl\u0131\u011f\u0131n\u0131 g\u00fcncellemek \u00f6nemlidir. \u00d6rne\u011fin, her rota de\u011fi\u015fiminde ana i\u00e7erik alan\u0131na <code>tabindex=\"-1\"<\/code> verip <code>.focus()<\/code> \u00e7a\u011f\u0131rabilirsiniz.<\/p>\n<h4>Eri\u015filebilirlik i\u00e7in Vue'da \u00f6zel bir k\u00fct\u00fcphane var m\u0131?<\/h4>\n<p>Vue'nun kendisi eri\u015filebilirlik i\u00e7in do\u011frudan \u00f6zel bir k\u00fct\u00fcphane sunmaz, ancak temel Vue \u00f6zellikleri (bile\u015fenler, direktifler) eri\u015filebilir uygulamalar geli\u015ftirmek i\u00e7in yeterli esnekli\u011fi sa\u011flar. Bununla birlikte, baz\u0131 \u00fc\u00e7\u00fcnc\u00fc taraf bile\u015fen k\u00fct\u00fcphaneleri (\u00f6rne\u011fin, Vuetify, Element UI) kendi eri\u015filebilirlik standartlar\u0131n\u0131 ve ARIA uyumlulu\u011funu sa\u011flamaya \u00e7al\u0131\u015f\u0131r. Her zaman se\u00e7ti\u011finiz k\u00fct\u00fcphanenin eri\u015filebilirlik belgelerini kontrol edin.<\/p>\n<h4>ARIA niteliklerini kullan\u0131rken nelere dikkat etmeliyim?<\/h4>\n<p>ARIA kullan\u0131rken en \u00f6nemli kural \"ARIA'n\u0131n ilk kural\u0131\"d\u0131r: E\u011fer anlamsal bir HTML etiketiyle ayn\u0131 i\u015flevi yerine getirebiliyorsan\u0131z, ARIA kullanmaktan ka\u00e7\u0131n\u0131n. ARIA'y\u0131 yaln\u0131zca HTML'in yetersiz kald\u0131\u011f\u0131 durumlarda kullan\u0131n. Ayr\u0131ca, ARIA niteliklerini do\u011fru bir \u015fekilde uygulad\u0131\u011f\u0131n\u0131zdan ve yard\u0131mc\u0131 teknolojilerle test etti\u011finizden emin olun, \u00e7\u00fcnk\u00fc yanl\u0131\u015f kullan\u0131m eri\u015filebilirli\u011fi k\u00f6t\u00fcle\u015ftirebilir.<\/p>\n","protected":false},"excerpt":{"rendered":"Eri\u015filebilir uygulamalar geli\u015ftirmek, etik bir sorumlulu\u011fun yan\u0131 s\u0131ra, yasal uyumluluk (\u00f6rne\u011fin, WCAG standartlar\u0131), daha geni\u015f bir kullan\u0131c\u0131 kitl&#8230;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1402],"tags":[],"class_list":{"0":"post-39523","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-vue","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Vue Uygulamalar\u0131nda Eri\u015filebilirlik: Kapsay\u0131c\u0131 Uygulamalar Geli\u015ftirmek \u0130\u00e7in H\u0131zl\u0131 \u0130pu\u00e7lar\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vue Uygulamalar\u0131nda Eri\u015filebilirlik: Kapsay\u0131c\u0131 Uygulamalar Geli\u015ftirmek \u0130\u00e7in H\u0131zl\u0131 \u0130pu\u00e7lar\u0131\" \/>\n<meta property=\"og:description\" content=\"Eri\u015filebilir uygulamalar geli\u015ftirmek, etik bir sorumlulu\u011fun yan\u0131 s\u0131ra, yasal uyumluluk (\u00f6rne\u011fin, WCAG standartlar\u0131), daha geni\u015f bir kullan\u0131c\u0131 kitl...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-23T08:30:43+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Vue Uygulamalar\u0131nda Eri\u015filebilirlik: Kapsay\u0131c\u0131 Uygulamalar Geli\u015ftirmek \u0130\u00e7in H\u0131zl\u0131 \u0130pu\u00e7lar\u0131\",\"datePublished\":\"2026-02-23T08:30:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari\/\"},\"wordCount\":2284,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Vue\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari\/\",\"name\":\"Vue Uygulamalar\u0131nda Eri\u015filebilirlik: Kapsay\u0131c\u0131 Uygulamalar Geli\u015ftirmek \u0130\u00e7in H\u0131zl\u0131 \u0130pu\u00e7lar\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-02-23T08:30:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vue Uygulamalar\u0131nda Eri\u015filebilirlik: Kapsay\u0131c\u0131 Uygulamalar Geli\u015ftirmek \u0130\u00e7in H\u0131zl\u0131 \u0130pu\u00e7lar\u0131\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Vue Uygulamalar\u0131nda Eri\u015filebilirlik: Kapsay\u0131c\u0131 Uygulamalar Geli\u015ftirmek \u0130\u00e7in H\u0131zl\u0131 \u0130pu\u00e7lar\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari\/","og_locale":"tr_TR","og_type":"article","og_title":"Vue Uygulamalar\u0131nda Eri\u015filebilirlik: Kapsay\u0131c\u0131 Uygulamalar Geli\u015ftirmek \u0130\u00e7in H\u0131zl\u0131 \u0130pu\u00e7lar\u0131","og_description":"Eri\u015filebilir uygulamalar geli\u015ftirmek, etik bir sorumlulu\u011fun yan\u0131 s\u0131ra, yasal uyumluluk (\u00f6rne\u011fin, WCAG standartlar\u0131), daha geni\u015f bir kullan\u0131c\u0131 kitl...","og_url":"https:\/\/fatihsoysal.com\/blog\/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-02-23T08:30:43+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"12 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Vue Uygulamalar\u0131nda Eri\u015filebilirlik: Kapsay\u0131c\u0131 Uygulamalar Geli\u015ftirmek \u0130\u00e7in H\u0131zl\u0131 \u0130pu\u00e7lar\u0131","datePublished":"2026-02-23T08:30:43+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari\/"},"wordCount":2284,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Vue"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari\/","url":"https:\/\/fatihsoysal.com\/blog\/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari\/","name":"Vue Uygulamalar\u0131nda Eri\u015filebilirlik: Kapsay\u0131c\u0131 Uygulamalar Geli\u015ftirmek \u0130\u00e7in H\u0131zl\u0131 \u0130pu\u00e7lar\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-02-23T08:30:43+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Vue Uygulamalar\u0131nda Eri\u015filebilirlik: Kapsay\u0131c\u0131 Uygulamalar Geli\u015ftirmek \u0130\u00e7in H\u0131zl\u0131 \u0130pu\u00e7lar\u0131"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/39523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=39523"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/39523\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=39523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=39523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=39523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}