Vue Uygulamalarında Erişilebilirlik: Kapsayıcı Uygulamalar Geliştirmek İçin Hızlı İpuçları

Vue Uygulamalarında Erişilebilirlik: Kapsayıcı Uygulamalar Geliştirmek İçin Hızlı İpuçları

Modern web geliştirmenin temel taşlarından biri olan erişilebilirlik, uygulamalarımızı herkesin kullanabilmesini sağlamak anlamına gelir. Vue.js ile geliştirme yaparken, erişilebilirliği baştan sona düşünmek, sadece yasal bir zorunluluk değil, aynı zamanda daha geniş bir kitleye ulaşmanın ve daha iyi bir kullanıcı deneyimi sunmanın anahtarıdır. Bu makalede, Vue uygulamalarınızı daha kapsayıcı hale getirmek için pratik ipuçları ve en iyi uygulamaları keşfedeceğiz.

Erişilebilirliğin Temel Taşları ve Vue İçin Önemi

Web erişilebilirliği, engelli bireylerin (görme, işitme, bilişsel, motor vb. engelleri olanlar) web sitelerini ve uygulamalarını algılayabilmesini, anlayabilmesini, gezinebilmesini ve bunlarla etkileşim kurabilmesini sağlamaktır. Vue geliştiricileri olarak, bileşen tabanlı yapının getirdiği esnekliği, erişilebilirlik standartlarına uygun uygulamalar inşa etmek için kullanabiliriz.

Neden Erişilebilir Uygulamalar Geliştirmeliyiz?

Erişilebilir uygulamalar geliştirmek, etik bir sorumluluğun yanı sıra, yasal uyumluluk (örneğin, WCAG standartları), daha geniş bir kullanıcı kitlesine ulaşma, daha iyi SEO performansı ve genel olarak daha sağlam, kullanıcı dostu bir ürün sunma gibi birçok avantajı beraberinde getirir. Engelli bireylerin yanı sıra, geçici engelleri olanlar (kolu kırık olanlar) veya belirli durumlarda (parlak güneş ışığı altında telefon kullananlar) herkesin uygulamanızı rahatça kullanabilmesini sağlar.

WCAG Prensipleri: Algılanabilirlik, Çalışabilirlik, Anlaşılabilirlik, Sağlamlık

Web İçeriği Erişilebilirlik Yönergeleri (WCAG), erişilebilir web içeriği oluşturmak için uluslararası bir standarttır. Bu yönergeler dört temel prensibe dayanır:

• Algılanabilirlik: Bilgi ve kullanıcı arayüzü bileşenleri, kullanıcılar tarafından algılanabilir bir şekilde sunulmalıdır (örneğin, metin alternatifleri, renk kontrastı).
• Çalışabilirlik: Kullanıcı arayüzü bileşenleri ve navigasyon çalıştırılabilir olmalıdır (örneğin, klavye erişimi).
• Anlaşılabilirlik: Bilgi ve kullanıcı arayüzü işlemlerinin anlaşılabilir olması gerekir (örneğin, okunabilir metin, tutarlı navigasyon).
• Sağlamlık: İçerik, çeşitli kullanıcı aracıları (tarayıcılar, yardımcı teknolojiler) tarafından yorumlanabilecek kadar sağlam olmalıdır.

Vue Geliştiricileri İçin Erişilebilirlik Yaklaşımı

Vue.js, bileşen tabanlı mimarisi sayesinde erişilebilirliği kolaylaştıran birçok özelliğe sahiptir. Önemli olan, geliştirme sürecinin başından itibaren erişilebilirliği bir gereklilik olarak ele almaktır. Bileşenler tasarlanırken, sadece görsel değil, aynı zamanda anlamsal ve etkileşimsel erişilebilirlik de göz önünde bulundurulmalıdır.

Anlamsal HTML ile Sağlam Temeller Oluşturmak

Erişilebilir bir web uygulamasının temeli, doğru ve anlamsal HTML kullanımıdır. HTML etiketleri, içeriğin amacını ve yapısını yardımcı teknolojilere (ekran okuyucular gibi) iletmek için tasarlanmıştır.

Doğru HTML Etiketlerini Seçmek

Her zaman mümkün olduğunca doğru HTML etiketlerini kullanmaya özen gösterin. Örneğin, bir düğme için etiketi yerine

kullanmak, hem klavye erişilebilirliğini hem de ekran okuyucuların öğeyi tanımasını zorlaştırır. Benzer şekilde, bağlantılar için , listeler için

/
ve form kontrolleri için , , </code> gibi etiketler kullanılmalıdır.</p> <pre><code class="language-html"><!-- Yanlış Kullanım --> <div @click="doSomething">Tıkla</div> <!-- Doğru Kullanım --> <button @click="doSomething">Tıkla</button></pre> <p></code></p> <h4>Vue Bileşenlerinde Anlamsal Yapı</h4> <p>Vue bileşenlerinizi tasarlarken, her bir bileşenin kendi içinde anlamsal bir bütünlüğe sahip olmasına dikkat edin. Örneğin, bir kart bileşeni oluşturuyorsanız, bunun bir <code></p> <article></code> veya <code></p> <section></code> etiketi içinde yer alması daha uygun olabilir. Bileşenin kök elementi olarak anlamsız bir <code></p> <div></code> yerine, bileşenin amacını yansıtan bir etiket kullanmaya çalışın.</p> <pre><code class="language-html"><!-- MyCard.vue --> <template> <article class="my-card"> <h3>{{ title }}</h3> <p>{{ description }}</p> <button @click="viewDetails">Detayları Gör</button> </article> </template></pre> <p></code></p> <h4><code>v-for</code> ile Listelerin Erişilebilirliği</h4> <p>Vue'da <code>v-for</code> direktifiyle listeler oluştururken, her zaman <code></p> <ul></code>, <code></p> <ol></code> veya <code></p> <dl></code> gibi uygun liste etiketlerini ve içlerinde <code></p> <li></code> etiketlerini kullanın. Ayrıca, <code>key</code> niteliğini doğru bir şekilde kullanmak, Vue'nun DOM'u verimli bir şekilde güncellemesine yardımcı olurken, ekran okuyucular için de tutarlı bir deneyim sağlar.</p> <pre><code class="language-html"><ul> <li v-for="item in items" :key="item.id"> {{ item.name }} </li> </ul></pre> <p></code></p> <h3>ARIA Niteliklerini Akıllıca Kullanmak</h3> <p>Anlamsal HTML, çoğu senaryo için yeterli olsa da, bazen özel kullanıcı arayüzü bileşenleri veya dinamik içerikler için ek bilgilere ihtiyaç duyulur. İşte bu noktada WAI-ARIA (Web Erişilebilirlik Girişimi - Erişilebilir Zengin İnternet Uygulamaları) nitelikleri devreye girer.</p> <h4>ARIA Nedir ve Ne Zaman Gerekli?</h4> <p>ARIA, HTML'e ekleyebileceğiniz bir dizi niteliktir ve yardımcı teknolojilere, web içeriğinin rolünü, durumunu ve özelliklerini daha iyi anlamaları için ek bilgi sağlar. ARIA, HTML'in anlamsal yeteneklerini genişletir, ancak onun yerine geçmez. Kural şudur: Eğer anlamsal bir HTML etiketi işinizi görüyorsa, ARIA kullanmaktan kaçının. ARIA'yı sadece HTML'in yetersiz kaldığı durumlarda kullanın.</p> <h4>Sık Kullanılan ARIA Nitelikleri</h4> <ul> <li><code>aria-label</code>: Bir öğeye görünen bir metin etiketi yoksa açıklayıcı bir etiket sağlar.</li> <li><code>aria-describedby</code>: Bir öğeyi açıklayan bir veya daha fazla öğenin kimliğini belirtir.</li> <li><code>aria-hidden="true"</code>: Bir öğenin ve tüm alt öğelerinin yardımcı teknolojilerden gizlenmesi gerektiğini belirtir.</li> <li><code>aria-live</code>: Bir bölgenin dinamik olarak güncellendiğini ve bu güncellemelerin kullanıcıya bildirilmesi gerektiğini belirtir (örneğin, hata mesajları).</li> <li><code>role</code>: Bir öğenin amacını tanımlar (örneğin, <code>role="dialog"</code>, <code>role="tablist"</code>).</li> </ul> <pre><code class="language-html"><!-- Görsel olarak sadece bir ikon olan bir düğme için --> <button aria-label="Sepete Ekle"> <i class="icon-cart"></i> </button> <!-- Özel bir modal penceresi için --> <div role="dialog" aria-modal="true" aria-labelledby="modal-title"> <h2 id="modal-title">Modal Başlığı</h2> <!-- ... içerik ... --> </div></pre> <p></code></p> <h4>ARIA'yı Kötüye Kullanmaktan Kaçınma</h4> <p>ARIA'yı yanlış veya gereksiz kullanmak, erişilebilirliği iyileştirmek yerine kötüleştirebilir. Örneğin, bir <code><button></code> etiketine <code>role="button"</code> eklemek gereksizdir, çünkü <code><button></code> zaten bu role sahiptir. Her zaman "ARIA'nın ilk kuralı"nı hatırlayın: "Bir yerel HTML öğesi veya özelliği (anlamsal olarak) istenen anlama veya davranışa sahipse, ARIA kullanmayın."</p> <h3>Klavye Navigasyonu ve Odak Yönetiminde Ustalaşmak</h3> <p>Birçok kullanıcı, fare yerine klavye ile gezinir. Bu, özellikle motor engelli veya görme engelli kullanıcılar için hayati öneme sahiptir. Uygulamanızın klavye ile tamamen kullanılabilir olduğundan emin olun.</p> <h4>Sekme Sırası ve Doğal Akış</h4> <p>Web sayfasındaki öğeler arasında <code>Tab</code> tuşuyla gezinirken, odak sırası mantıklı ve öngörülebilir olmalıdır. Tarayıcılar, anlamsal HTML öğeleri için doğal bir sekme sırası (DOM'daki görünümlerine göre) sağlar. <code>tabindex</code> niteliğini yalnızca doğal sırayı bozmanız gerektiğinde (veya bir öğeyi odaklanabilir yapmanız gerektiğinde) kullanın. Negatif <code>tabindex="-1"</code>, öğeyi programatik olarak odaklanabilir yapar ancak sekme sırasından çıkarır. Pozitif <code>tabindex</code> değerlerinden (<code>tabindex="1"</code>, <code>tabindex="2"</code> vb.) mümkün olduğunca kaçının, çünkü bunlar bakımı zor ve sorunlu olabilir.</p> <h4>Odak Yönetimi İçin Vue Yöntemleri</h4> <p>Vue'da dinamik içerik yüklendiğinde veya bir bileşen etkileşimde bulunduğunda odağı yönetmek önemlidir. Örneğin, bir modal açıldığında odağın modalın içine taşınması ve modal kapatıldığında odağın modalı açan öğeye geri dönmesi gerekir. Bunu Vue'da <code>ref</code> kullanarak ve JavaScript'in <code>.focus()</code> metodunu çağırarak yapabiliriz.</p> <pre><code class="language-html"><template> <button @click="openModal" ref="openButton">Modali Aç</button> <div v-if="isModalOpen" role="dialog" aria-modal="true"> <h3>Modal İçeriği</h3> <input type="text" ref="modalInput"> <button @click="closeModal">Kapat</button> </div> </template> <script> export default { data() { return { isModalOpen: false }; }, methods: { openModal() { this.isModalOpen = true; this.$nextTick(() => { this.$refs.modalInput.focus(); // Modalı açınca inputa odaklan }); }, closeModal() { this.isModalOpen = false; this.$nextTick(() => { this.$refs.openButton.focus(); // Modalı kapatınca açan düğmeye geri odaklan }); } } }; </script></pre> <p></code></p> <h4>Modallar ve Kapanışta Odak Geri Dönüşü</h4> <p>Modallar, açılır pencereler ve benzeri geçici arayüz öğeleri, odak yönetiminin en kritik olduğu yerlerdir. Kullanıcı bir modalı açtığında, odak modalın içine taşınmalı ve modalın dışındaki öğelere klavye ile erişim engellenmelidir (odak tuzağı). Modal kapatıldığında ise odak, modalı açan öğeye geri dönmelidir. Bu, kullanıcı deneyimi ve erişilebilirlik açısından çok önemlidir.</p> <h3>Form Erişilebilirliği: Herkes İçin Kullanılabilir Formlar</h3> <p>Formlar, kullanıcıların uygulamalarla etkileşim kurduğu en yaygın yerlerden biridir. Erişilebilir formlar oluşturmak, herkesin bilgi girişi yapabilmesini ve geri bildirim alabilmesini sağlar.</p> <h4><code>label</code> Etiketlerinin Önemi</h4> <p>Her form kontrolünün (<code><input></code>, <code><textarea></code>, <code><select></code>) ilişkili bir <code><label></code> etiketi olmalıdır. <code><label></code> etiketi, <code>for</code> niteliği ile form kontrolünün <code>id</code>'sine bağlanmalıdır. Bu, ekran okuyucuların form kontrolünün amacını kullanıcıya bildirmesini sağlar ve ayrıca etikete tıklayarak kontrolü odaklamayı mümkün kılar.</p> <pre><code class="language-html"><!-- Yanlış Kullanım --> <p>Adınız</p> <input type="text" id="name"> <!-- Doğru Kullanım --> <label for="name">Adınız</label> <input type="text" id="name"></pre> <p></code></p> <h4>Hata Mesajları ve Geri Bildirimler</h4> <p>Kullanıcılar bir formu yanlış doldurduğunda, hata mesajlarının açık, anlaşılır ve erişilebilir olması gerekir. Hata mesajları, ilgili form kontrolüyle <code>aria-describedby</code> niteliği kullanılarak ilişkilendirilmeli ve <code>aria-live="assertive"</code> gibi bir nitelikle ekran okuyuculara anında bildirilmelidir.</p> <pre><code class="language-html"><label for="email">E-posta</label> <input type="email" id="email" :aria-invalid="emailError ? 'true' : 'false'" aria-describedby="email-error"> <div v-if="emailError" id="email-error" class="error-message" aria-live="assertive"> Lütfen geçerli bir e-posta adresi girin. </div></pre> <p></code></p> <h4>Doğru Giriş Tipleri</h4> <p>HTML5'in sunduğu farklı <code>input type</code>'larını (<code>type="email"</code>, <code>type="number"</code>, <code>type="tel"</code> vb.) kullanmak, hem kullanıcı deneyimini iyileştirir (örneğin mobil cihazlarda uygun klavye açılır) hem de tarayıcıya ve yardımcı teknolojilere giriş alanının beklenen veri türü hakkında bilgi verir.</p> <h3>Görsel Tasarım ve Test Araçlarıyla Erişilebilirliği Tamamlamak</h3> <p>Erişilebilirlik sadece kodla ilgili değildir; tasarım kararları da büyük rol oynar. Ayrıca, uygulamanızın erişilebilirliğini düzenli olarak test etmek de önemlidir.</p> <h4>Renk Kontrastı ve Okunabilirlik</h4> <p>Metin ve arka plan arasındaki renk kontrastı, özellikle görme engelli veya renk körü kullanıcılar için kritik öneme sahiptir. WCAG 2.1 yönergeleri, belirli kontrast oranlarını (genellikle AA seviyesi için 4.5:1, AAA seviyesi için 7:1) zorunlu kılar. Tasarımcılarınızla bu standartlara uymak için işbirliği yapın.</p> <p><strong>Örnek Tablo: WCAG Kontrast Oranları</strong></p> <table> <thead> <tr> <th>WCAG Seviyesi</th> <th>Normal Metin</th> <th>Büyük Metin (18pt veya 14pt kalın)</th> </tr> </thead> <tbody> <tr> <td>AA</td> <td>4.5:1</td> <td>3:1</td> </tr> <tr> <td>AAA</td> <td>7:1</td> <td>4.5:1</td> </tr> </tbody> </table> <h4>Yazı Tipi Boyutu ve Satır Aralığı</h4> <p>Yazı tiplerinin okunabilirliğini sağlamak için yeterli boyutta ve satır aralığında olmaları gerekir. Kullanıcıların tarayıcı ayarları aracılığıyla metin boyutunu büyütmesine izin vermek de önemlidir. Sabit piksel boyutları yerine <code>rem</code> veya <code>em</code> birimleri kullanmak, bu esnekliği sağlar.</p> <h4>Alternatif Metinler (Alt Text) ve İkonlar</h4> <p>Görsel içerikler (resimler, grafikler, ikonlar) için her zaman açıklayıcı <code>alt</code> metinleri sağlayın. Bu metinler, görseli göremeyen kullanıcılara içeriğin anlamını iletir. Dekoratif görseller için <code>alt=""</code> boş bırakılabilir. İkonlar için, eğer bir eylemi temsil ediyorlarsa <code>aria-label</code> ile açıklama ekleyin.</p> <pre><code class="language-html"><!-- Anlamlı görsel --> <img decoding="async" src="manzara.jpg" alt="Yeşil tepelerin üzerindeki güneş batımı"> <!-- Dekoratif görsel --> <img decoding="async" src="ayraç.svg" alt=""></pre> <p></code></p> <h4>Erişilebilirlik Test Araçları</h4> <p>Uygulamanızın erişilebilirliğini düzenli olarak test etmek çok önemlidir. Kullanabileceğiniz bazı araçlar:</p> <ul> <li><strong>Lighthouse (Chrome Geliştirici Araçları):</strong> Otomatik denetimler sunar ve erişilebilirlik sorunlarını belirler.</li> <li><strong>Axe DevTools:</strong> Tarayıcı eklentisi olarak kullanılabilen güçlü bir otomatik test aracıdır.</li> <li><strong>Manuel Klavye Testi:</strong> Uygulamanızda sadece klavye kullanarak gezinin ve tüm işlevlerin erişilebilir olduğundan emin olun.</li> <li><strong>Ekran Okuyucu Testi:</strong> JAWS, NVDA (Windows) veya VoiceOver (macOS) gibi ekran okuyucularla uygulamanızı deneyimleyin.</li> </ul> <h3>Sonuç</h3> <p>Vue uygulamalarında erişilebilirlik, sadece bir eklenti değil, geliştirme sürecinin ayrılmaz bir parçası olmalıdır. Anlamsal HTML kullanımı, ARIA niteliklerinin akıllıca uygulanması, klavye navigasyonunun sağlanması, formların erişilebilirliği ve doğru görsel tasarım prensipleriyle, herkesin kullanabileceği kapsayıcı uygulamalar inşa edebiliriz. Unutmayın, erişilebilir bir web, daha iyi bir web'dir ve bu çaba, hem kullanıcılarınız hem de uygulamanız için uzun vadeli faydalar sağlayacaktır.</p> <h3>SSS (Sık Sorulan Sorular)</h3> <h4>Vue'da erişilebilirliği test etmek için en iyi yol nedir?</h4> <p>En iyi yol, otomatik test araçlarını (Lighthouse, Axe DevTools) manuel testlerle (klavye navigasyonu, ekran okuyucu kullanımı) birleştirmektir. Otomatik araçlar yaygın sorunları hızla tespit ederken, manuel testler gerçek kullanıcı deneyimini anlamanızı sağlar.</p> <h4><code>v-if</code> ve <code>v-show</code> erişilebilirlik açısından farklılık gösterir mi?</h4> <p>Evet, farklılık gösterir. <code>v-if</code>, koşul yanlış olduğunda elementi DOM'dan tamamen kaldırır, bu da ekran okuyucuların bu içeriği algılamasını engeller. <code>v-show</code> ise elementi DOM'da tutar ancak CSS ile görünürlüğünü değiştirir (<code>display: none</code>). Bu durumda, element hala DOM'da olduğu için ekran okuyucular tarafından algılanabilir, ancak genellikle gizli olduğu için okunmaz. Dinamik olarak görünen/gizlenen içeriğin yardımcı teknolojilere uygun şekilde bildirilmesi için <code>aria-hidden</code> veya <code>aria-live</code> gibi ARIA nitelikleri gerekebilir.</p> <h4>SPA'larda rota değişikliklerinde erişilebilirlik nasıl sağlanır?</h4> <p>Tek Sayfalı Uygulamalarda (SPA), rota değişiklikleri genellikle sayfa yenilemesi yapmaz. Bu durumda, yeni sayfa yüklendiğinde ekran okuyucuların bunu fark etmesi için sayfanın ana içeriğine programatik olarak odaklanmak ve sayfa başlığını güncellemek önemlidir. Örneğin, her rota değişiminde ana içerik alanına <code>tabindex="-1"</code> verip <code>.focus()</code> çağırabilirsiniz.</p> <h4>Erişilebilirlik için Vue'da özel bir kütüphane var mı?</h4> <p>Vue'nun kendisi erişilebilirlik için doğrudan özel bir kütüphane sunmaz, ancak temel Vue özellikleri (bileşenler, direktifler) erişilebilir uygulamalar geliştirmek için yeterli esnekliği sağlar. Bununla birlikte, bazı üçüncü taraf bileşen kütüphaneleri (örneğin, Vuetify, Element UI) kendi erişilebilirlik standartlarını ve ARIA uyumluluğunu sağlamaya çalışır. Her zaman seçtiğiniz kütüphanenin erişilebilirlik belgelerini kontrol edin.</p> <h4>ARIA niteliklerini kullanırken nelere dikkat etmeliyim?</h4> <p>ARIA kullanırken en önemli kural "ARIA'nın ilk kuralı"dır: Eğer anlamsal bir HTML etiketiyle aynı işlevi yerine getirebiliyorsanız, ARIA kullanmaktan kaçının. ARIA'yı yalnızca HTML'in yetersiz kaldığı durumlarda kullanın. Ayrıca, ARIA niteliklerini doğru bir şekilde uyguladığınızdan ve yardımcı teknolojilerle test ettiğinizden emin olun, çünkü yanlış kullanım erişilebilirliği kötüleştirebilir.</p> </div> <div class="cs-entry__footer"> <div class="cs-entry__footer-left"> <div class="cs-entry__post-meta" ><div class="cs-meta-author"><a class="cs-meta-author-link url fn n" href="https://fatihsoysal.com/blog/author/fatihsoysal/"><span class="cs-meta-author-by">by</span><span class="cs-meta-author-name">Fatih Soysal</span></a></div><div class="cs-meta-comments"><a href="https://fatihsoysal.com/blog/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari/#respond" class="comments-link" >0</a></div></div> </div> <div class="cs-entry__footer-right"> <div class="cs-share"> <a class="cs-share__link" target="_blank" href="https://www.facebook.com/sharer.php?text=Vue%20Uygulamalar%C4%B1nda%20Eri%C5%9Filebilirlik%3A%20Kapsay%C4%B1c%C4%B1%20Uygulamalar%20Geli%C5%9Ftirmek%20%C4%B0%C3%A7in%20H%C4%B1zl%C4%B1%20%C4%B0pu%C3%A7lar%C4%B1&u=https://fatihsoysal.com/blog/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari/"> <i class="cs-icon cs-icon-facebook"></i> </a> <a class="cs-share__link" target="_blank" href="https://twitter.com/share?t=Vue%20Uygulamalar%C4%B1nda%20Eri%C5%9Filebilirlik%3A%20Kapsay%C4%B1c%C4%B1%20Uygulamalar%20Geli%C5%9Ftirmek%20%C4%B0%C3%A7in%20H%C4%B1zl%C4%B1%20%C4%B0pu%C3%A7lar%C4%B1&url=https://fatihsoysal.com/blog/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari/"> <i class="cs-icon cs-icon-twitter-x"></i> </a> <a class="cs-share__link" target="_blank" href="https://t.me/share/url?url=%5BURL%5D&text=https://fatihsoysal.com/blog/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari/"> <i class="cs-icon cs-icon-telegram"></i> </a> <a class="cs-share__link cs-share__copy-link" target="_blank" href="https://fatihsoysal.com/blog/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari/"> <i class="cs-icon cs-icon-link"></i> </a> </div> </div> </div> <div class="cs-entry__comments" id="comments"> <div class="cs-entry__comments-header"> <div class="cs-entry__comments-left"> <div class="cs-entry__comments-heading">Yorumlar</div> <div class="cs-entry__comments-description h2">İçeriği beğendiniz mi? Bir tartışma başlatın veya görüşlerinizi paylaşın.</div> </div> <div class="cs-entry__comments-right"> <div class="cs-entry__comments-toggle"> <span class="cs-button" role="button" aria-label="Yorumlar"> <span>Yorum Yaz</span> </span> </div> </div> </div> <div class="cs-entry__comments-inner"> <div id="respond" class="comment-respond"> <h2 id="reply-title" class="comment-reply-title">Bir yanıt yazın <small><a rel="nofollow" id="cancel-comment-reply-link" href="/blog/vue-uygulamalarinda-erisilebilirlik-kapsayici-uygulamalar-gelistirmek-icin-hizli-ipuclari/#respond" style="display:none;">Yanıtı iptal et</a></small></h2><form action="https://fatihsoysal.com/blog/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">E-posta adresiniz yayınlanmayacak.</span> <span class="required-field-message">Gerekli alanlar <span class="required">*</span> ile işaretlenmişlerdir</span></p><p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required" aria-required="true" placeholder="Your Comment *">

Save my name and email in this browser for the next time I comment.

Gönder

Δ