{"id":4431,"date":"2019-08-05T14:26:28","date_gmt":"2019-08-05T11:26:28","guid":{"rendered":"https:\/\/sitecenneti.com\/wordpress\/?p=4431"},"modified":"2019-09-05T01:01:51","modified_gmt":"2019-09-04T22:01:51","slug":"4-19-erisilebilirlik-ulasilabilirlik-accessibility","status":"publish","type":"post","link":"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/4-19-erisilebilirlik-ulasilabilirlik-accessibility\/","title":{"rendered":"4.19 Eri\u015filebilirlik-Ula\u015f\u0131labilirlik (Accessibility)"},"content":{"rendered":"<div id=\"toc_container\" class=\"toc_transparent no_bullets\"><p class=\"toc_title\">BU DERS\u0130N BA\u015eLIKLARI<\/p><ul class=\"toc_list\"><li><a href=\"#Erisilebilirligin_Temel_Prensipleri\"><span class=\"toc_number toc_depth_1\">1<\/span> Eri\u015filebilirli\u011fin Temel Prensipleri<\/a><ul><li><a href=\"#1_Farkedilebilirlik_Percievable\"><span class=\"toc_number toc_depth_2\">1.1<\/span> 1. Farkedilebilirlik (Percievable)<\/a><\/li><li><a href=\"#2_Kullanilabilirlik_Operable\"><span class=\"toc_number toc_depth_2\">1.2<\/span> 2. Kullan\u0131labilirlik (Operable)<\/a><\/li><li><a href=\"#3_Anlasilabilirlik_Understandable\"><span class=\"toc_number toc_depth_2\">1.3<\/span> 3. Anla\u015f\u0131labilirlik (Understandable)<\/a><\/li><li><a href=\"#4_Istikrar_Robust\"><span class=\"toc_number toc_depth_2\">1.4<\/span> 4. \u0130stikrar (Robust)<\/a><\/li><\/ul><\/li><li><a href=\"#Erisilebilir_Bir_Kodlama_Icin_Nelere_Dikkat_Edilmelidir\"><span class=\"toc_number toc_depth_1\">2<\/span> Eri\u015filebilir Bir Kodlama \u0130\u00e7in Nelere Dikkat Edilmelidir?<\/a><ul><li><a href=\"#1_Basliklar_Headings\"><span class=\"toc_number toc_depth_2\">2.1<\/span> 1. Ba\u015fl\u0131klar (Headings)<\/a><ul><li><a href=\"#8216aria-labelledby8217_Ozelligi\"><span class=\"toc_number toc_depth_3\">2.1.1<\/span>  &#8216;aria-labelledby&#8217; \u00d6zelli\u011fi<\/a><\/li><li><a href=\"#WordPress_Temalarinda_Basliklar_Nasil_Kullanilmalidir\"><span class=\"toc_number toc_depth_3\">2.1.2<\/span> WordPress Temalar\u0131nda Ba\u015fl\u0131klar Nas\u0131l Kullan\u0131lmal\u0131d\u0131r?<\/a><\/li><li><a href=\"#Gizli_Basliklar\"><span class=\"toc_number toc_depth_3\">2.1.3<\/span> Gizli Ba\u015fl\u0131klar<\/a><\/li><li><a href=\"#Sayfanin_Baslik_Yapisini_Gorme\"><span class=\"toc_number toc_depth_3\">2.1.4<\/span> Sayfan\u0131n Ba\u015fl\u0131k Yap\u0131s\u0131n\u0131 G\u00f6rme<\/a><\/li><\/ul><\/li><li><a href=\"#2_Resimler\"><span class=\"toc_number toc_depth_2\">2.2<\/span> 2. Resimler<\/a><ul><li><a href=\"#I_8211_Bilgi_Veren_Resimler_Informative_Images\"><span class=\"toc_number toc_depth_3\">2.2.1<\/span> I &#8211; Bilgi Veren Resimler (Informative Images)<\/a><\/li><li><a href=\"#II_8211_Dekoratif_Resimler_Decorative_Images\"><span class=\"toc_number toc_depth_3\">2.2.2<\/span> II &#8211; Dekoratif Resimler (Decorative Images)<\/a><\/li><li><a href=\"#III_8211_Fonksiyonel_Resimler_Fonctional_Images\"><span class=\"toc_number toc_depth_3\">2.2.3<\/span> III &#8211; Fonksiyonel Resimler (Fonctional Images)<\/a><\/li><li><a href=\"#IV_8211_Yazilarin_Resimleri_Images_of_Text\"><span class=\"toc_number toc_depth_3\">2.2.4<\/span> IV &#8211; Yaz\u0131lar\u0131n Resimleri (Images of Text)<\/a><\/li><li><a href=\"#V_8211_Karmasik_Resimler_Complex_Images\"><span class=\"toc_number toc_depth_3\">2.2.5<\/span> V &#8211; Karma\u015f\u0131k Resimler (Complex Images)<\/a><\/li><li><a href=\"#VI_8211_Resim_Gruplari\"><span class=\"toc_number toc_depth_3\">2.2.6<\/span> VI &#8211; Resim Gruplar\u0131<\/a><\/li><li><a href=\"#VII_8211_Resim_Haritalari_Image_Maps\"><span class=\"toc_number toc_depth_3\">2.2.7<\/span> VII &#8211; Resim Haritalar\u0131 (Image Maps)<\/a><\/li><\/ul><\/li><li><a href=\"#3_Sekme_Linkleri_Skip_Links\"><span class=\"toc_number toc_depth_2\">2.3<\/span> 3. Sekme Linkleri (Skip Links)<\/a><\/li><li><a href=\"#4_Linkler\"><span class=\"toc_number toc_depth_2\">2.4<\/span> 4. Linkler<\/a><ul><li><a href=\"#I_8211_Link_Textleri\"><span class=\"toc_number toc_depth_3\">2.4.1<\/span> I &#8211; Link Textleri<\/a><\/li><li><a href=\"#II_8211_Linki_Vurgulama\"><span class=\"toc_number toc_depth_3\">2.4.2<\/span> II &#8211; Linki Vurgulama<\/a><\/li><li><a href=\"#III_8211_Linklerin_Altini_Cizmek\"><span class=\"toc_number toc_depth_3\">2.4.3<\/span> III &#8211; Linklerin Alt\u0131n\u0131 \u00c7izmek<\/a><\/li><\/ul><\/li><li><a href=\"#5_Formlar\"><span class=\"toc_number toc_depth_2\">2.5<\/span> 5. Formlar<\/a><ul><li><a href=\"#I_8211_Label_Elemani\"><span class=\"toc_number toc_depth_3\">2.5.1<\/span> I &#8211; Label Eleman\u0131<\/a><\/li><li><a href=\"#Label_Textini_Saklama\"><span class=\"toc_number toc_depth_3\">2.5.2<\/span> Label Textini Saklama<\/a><\/li><li><a href=\"#Label_Elemani_ile_Sarma\"><span class=\"toc_number toc_depth_3\">2.5.3<\/span> Label Eleman\u0131 ile Sarma<\/a><\/li><li><a href=\"#Butonlar\"><span class=\"toc_number toc_depth_3\">2.5.4<\/span> Butonlar<\/a><\/li><li><a href=\"#Label_Textinin_Yerlesimi\"><span class=\"toc_number toc_depth_3\">2.5.5<\/span> Label Textinin Yerle\u015fimi<\/a><\/li><li><a href=\"#II_8211_Form_Elemanlarini_Gruplama\"><span class=\"toc_number toc_depth_3\">2.5.6<\/span> II &#8211; Form Elemanlar\u0131n\u0131 Gruplama<\/a><\/li><li><a href=\"#III_8211_Form_Alanini_Orneklendirme\"><span class=\"toc_number toc_depth_3\">2.5.7<\/span> III &#8211; Form Alan\u0131n\u0131 \u00d6rneklendirme<\/a><\/li><li><a href=\"#Placeholder_Yer_tutucu_Textler\"><span class=\"toc_number toc_depth_3\">2.5.8<\/span> Placeholder (Yer tutucu) Textler<\/a><\/li><li><a href=\"#Yer_Tutuculari_Placeholder_Stillendirme\"><span class=\"toc_number toc_depth_3\">2.5.9<\/span> Yer Tutucular\u0131 (Placeholder) Stillendirme<\/a><\/li><li><a href=\"#IV_8211_Verileri_Onaylamak\"><span class=\"toc_number toc_depth_3\">2.5.10<\/span> IV &#8211; Verileri Onaylamak<\/a><\/li><li><a href=\"#V_8211_Kullaniciyi_Bilgilendirme\"><span class=\"toc_number toc_depth_3\">2.5.11<\/span> V &#8211; Kullan\u0131c\u0131y\u0131 Bilgilendirme<\/a><\/li><li><a href=\"#VI_8211_Cok_Sayfali_Formlar\"><span class=\"toc_number toc_depth_3\">2.5.12<\/span> VI &#8211; \u00c7ok Sayfal\u0131 Formlar<\/a><\/li><li><a href=\"#VII_8211_Ozel_Formlar\"><span class=\"toc_number toc_depth_3\">2.5.13<\/span> VII &#8211; \u00d6zel Formlar<\/a><\/li><\/ul><\/li><li><a href=\"#6_Renkler\"><span class=\"toc_number toc_depth_2\">2.6<\/span> 6. Renkler<\/a><\/li><li><a href=\"#7_Renkler_Arasindaki_Kontrast_Orani\"><span class=\"toc_number toc_depth_2\">2.7<\/span> 7. Renkler Aras\u0131ndaki Kontrast Oran\u0131<\/a><\/li><li><a href=\"#8_jQuery_ve_JavaScript_Kullanmak\"><span class=\"toc_number toc_depth_2\">2.8<\/span> 8. jQuery ve JavaScript Kullanmak<\/a><\/li><li><a href=\"#9_Temanizi_Test_Edin\"><span class=\"toc_number toc_depth_2\">2.9<\/span> 9. Teman\u0131z\u0131 Test Edin<\/a><\/li><li><a href=\"#10_Uzak_Durmaniz_Gerekenler\"><span class=\"toc_number toc_depth_2\">2.10<\/span> 10. Uzak Durman\u0131z Gerekenler<\/a><ul><li><a href=\"#I_8211_Yeni_Pencere_ve_Sekmeler\"><span class=\"toc_number toc_depth_3\">2.10.1<\/span> I &#8211; Yeni Pencere ve Sekmeler<\/a><\/li><li><a href=\"#II_8211_Autoplay_ve_Animasyonlar\"><span class=\"toc_number toc_depth_3\">2.10.2<\/span> II &#8211; Autoplay ve Animasyonlar<\/a><\/li><li><a href=\"#III_8211_Tabindex\"><span class=\"toc_number toc_depth_3\">2.10.3<\/span> III &#8211; Tabindex<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/div>\n\n<p>Bir teman\u0131n eri\u015filebilir olmas\u0131 demek, normal ki\u015filerin yan\u0131 s\u0131ra, g\u00f6rme s\u0131k\u0131nt\u0131s\u0131 ya\u015fayan, hi\u00e7 g\u00f6remeyen, fare kullanmayan, g\u00fcncelli\u011fini yitirmi\u015f teknolojiler kullanan veya k\u0131s\u0131tl\u0131 ki\u015filere \u00f6zg\u00fc teknolojiler kullanan ki\u015filerin de teman\u0131n sayfalar\u0131nda kaybolmadan dola\u015fabilmesi demektir, temam\u0131z\u0131 rahat\u00e7a kullanabilmesi demektir.<\/p>\n\n\n\n<p>WordPress&#8217;in varsay\u0131lan temalar\u0131, eri\u015filebilir \u00f6zellikte yap\u0131lm\u0131\u015ft\u0131r. Bizim de, bir WordPress tema yazar\u0131 olarak, temalar\u0131m\u0131z\u0131n eri\u015filebilir olmas\u0131na dikkat etmemiz gerekmektedir.<\/p>\n\n\n\n<p>Eri\u015filebilirlik, \u0130ngiltere&#8217;de, \u00f6z\u00fcrl\u00fc bir vatanda\u015f\u0131n, bir bilet sat\u0131n alma sitesinden bilet sat\u0131n alamamas\u0131 sonucu, bu siteyi dava etmesi ve davay\u0131 kazanmas\u0131 ile \u00f6nem kazanm\u0131\u015ft\u0131r. Bu dava, web tasar\u0131m\u0131 yapan herkes i\u00e7in \u00f6nemli bir milatt\u0131r. Bu davay\u0131 bir tarafa koysak bile, sadece \u0130ngiltere&#8217;de, \u00f6z\u00fcrl\u00fclerin yaratt\u0131\u011f\u0131 ekonomik de\u011ferin, y\u0131ll\u0131k olarak milyarlarca Pound oldu\u011fu ger\u00e7e\u011fini g\u00f6z ard\u0131 etmemiz do\u011fru olmaz.<\/p>\n\n\n\n<p>Eri\u015filebilir bir tema yapmak, sitemizin engelli veya k\u0131s\u0131tl\u0131 kullan\u0131c\u0131lara da ula\u015fmas\u0131n\u0131, dolay\u0131s\u0131yla, k\u0131s\u0131tl\u0131 bireylerin olu\u015fturdu\u011fu pazardan veya kitleden pay almam\u0131z\u0131 sa\u011flayacakt\u0131r.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Erisilebilirligin_Temel_Prensipleri\">Eri\u015filebilirli\u011fin Temel Prensipleri<\/span><\/h2>\n\n\n\n<p>Eri\u015filebilir bir site yapma konusu, olduk\u00e7a kapsaml\u0131 bir konudur ve b\u00fct\u00fcn detaylar\u0131 ile a\u00e7\u0131klamak tek bir dersin s\u0131n\u0131rlar\u0131n\u0131 a\u015fmaktad\u0131r.<\/p>\n\n\n\n<p>Eri\u015filebilir bir tema tasarlarken d\u00f6rt temel prensibe g\u00f6re hareket edilmelidir. Bu prensipler \u015funlard\u0131r:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"1_Farkedilebilirlik_Percievable\">1. Farkedilebilirlik (Percievable)<\/span><\/h3>\n\n\n\n<p>Sayfam\u0131zdaki i\u00e7erikler, kullan\u0131c\u0131n\u0131n imkan\u0131 ya da cihaz\u0131 ne olursa olsun, g\u00f6r\u00fcnt\u00fclenebilmeli ya da alg\u0131lanabilmelidir. Baz\u0131 kullan\u0131c\u0131lar\u0131m\u0131z\u0131n, g\u00fcncelli\u011fini yitirmi\u015f cihazlar kullan\u0131yor alabilece\u011fini, baz\u0131 kullan\u0131c\u0131lar\u0131m\u0131z\u0131n fareden yoksun olabilece\u011fini dikkate almal\u0131y\u0131z. Temam\u0131z, bahsetti\u011fimiz ve bahsetmeyi unuttu\u011fumuz b\u00fct\u00fcn k\u0131s\u0131tl\u0131 \u015fartlarda, sunmak istedi\u011fi i\u00e7eri\u011fi ba\u015far\u0131yla sunabilmelidir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"2_Kullanilabilirlik_Operable\">2. Kullan\u0131labilirlik (Operable)<\/span><\/h3>\n\n\n\n<p>Kullan\u0131c\u0131m\u0131z, faresi olsun ya da olmas\u0131n, g\u00f6zleri g\u00f6rs\u00fcn ya da g\u00f6rmesin, sitemizden istedi\u011fini alabilmeli veya sitemizde kaybolmadan gezinebilmelidir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"3_Anlasilabilirlik_Understandable\">3. Anla\u015f\u0131labilirlik (Understandable)<\/span><\/h3>\n\n\n\n<p>Sitede sunulan i\u00e7erikler, normal bir kullan\u0131c\u0131 i\u00e7in oldu\u011fu kadar, ekran okuyucular\u0131 i\u00e7in de, kolayca anla\u015f\u0131labilir bir mant\u0131k dahilinde sunulmal\u0131d\u0131r. Siteyi \u015fekillendiren ve y\u00f6neten men\u00fcler, linkler, formlar, i\u00e7erik&#8230; anla\u015f\u0131labilir olmal\u0131d\u0131r. \u00d6rne\u011fin, linklerin alt\u0131n\u0131 \u00e7izmek veya ba\u015fl\u0131k atarken ana ba\u015fl\u0131kta <code>h1<\/code> tag\u0131n\u0131, alt ba\u015fl\u0131klarda <code>h2<\/code> tag\u0131n\u0131 kullanmak gibi, yayg\u0131n olarak kullan\u0131lan ve anla\u015f\u0131lan \u00f6zellikleri kullanmak, bu amaca hizmet edecektir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"4_Istikrar_Robust\">4. \u0130stikrar (Robust)<\/span><\/h3>\n\n\n\n<p>\u0130\u00e7eri\u011fimiz, her cihazda kullan\u0131labilir olmal\u0131d\u0131r. Engelli ya da k\u0131s\u0131tl\u0131 kullan\u0131c\u0131lar, \u00e7ok farkl\u0131 yaz\u0131l\u0131m veya donan\u0131mlar kullanabilmektedir. K\u0131s\u0131tl\u0131 kullan\u0131c\u0131lara yard\u0131mc\u0131 olan bu teknolojilere, &#8220;<strong>yard\u0131mc\u0131 teknolojiler<\/strong>&#8221; (<strong>Assistive Technology &#8211; AT<\/strong>) denir. Yard\u0131mc\u0131 teknolojiler; ekran okuyan ve ses tan\u0131yan yaz\u0131l\u0131mlar, braille okuyucular\u0131 ve donan\u0131mlar\u0131 gibi teknolojilerdir.<\/p>\n\n\n\n<p>Bir teman\u0131n, yukar\u0131da bahsedilen 4 temel \u00f6zelli\u011fi kazanmas\u0131 ve eri\u015filebilir olmas\u0131 i\u00e7in, temay\u0131 kodlarken dikkat etmemiz gereken baz\u0131 hususlar vard\u0131r. A\u015fa\u011f\u0131da bu hususlardan bahsedilmi\u015ftir.<\/p>\n\n\n\n\t<br \/>\n\t<div class=\"stcnnt-yazi-ici-reklam\">\n\t<span aria-hidden=\"true\" class=\"sc-reklam-basligi text-muted\" style=\"display:block;text-align:center;\">bu bir reklamd\u0131r:<\/span>\n\t<p aria-hidden=\"true\" class=\"shadow-lg m-0 p-0\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:block; text-align:center;\"\n\t\t\t data-ad-layout=\"in-article\"\n\t\t\t data-ad-format=\"fluid\"\n\t\t\t data-ad-client=\"ca-pub-6366953309324763\"\n\t\t\t data-ad-slot=\"2001829037\"><\/ins>\n\t\t<script>\n\t\t\t (adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/p>\n\t<\/div>\n\t\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Erisilebilir_Bir_Kodlama_Icin_Nelere_Dikkat_Edilmelidir\">Eri\u015filebilir Bir Kodlama \u0130\u00e7in Nelere Dikkat Edilmelidir?<\/span><\/h2>\n\n\n\n<p>Bir tema kodlarken, olu\u015fturdu\u011funuz, ba\u015fl\u0131klar, resimler, men\u00fcler, linkler, HTML yap\u0131s\u0131n\u0131n kendisi&#8230; eri\u015filebilir olmal\u0131d\u0131r. Eri\u015filebilir bir HTML kodu olu\u015fturmak, teman\u0131z\u0131 sadece eri\u015filebilir yapmayacak, SEO uyumlulu\u011fu i\u00e7in de katk\u0131 sa\u011flayacakt\u0131r.<\/p>\n\n\n\n<p>Eri\u015filebilir HTML kodlar\u0131 olu\u015fturmak i\u00e7in nelere dikkat edilmelidir? A\u015fa\u011f\u0131da bu zor sorunun cevab\u0131n\u0131 vermeye \u00e7al\u0131\u015ft\u0131k. Umar\u0131m verebilmi\u015fizdir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"1_Basliklar_Headings\">1. Ba\u015fl\u0131klar (Headings)<\/span><\/h3>\n\n\n\n<p>Ba\u015fl\u0131klar, HTML dilinde, b\u00fcy\u00fckten k\u00fc\u00e7\u00fc\u011fe do\u011fru s\u0131ras\u0131yla, <code>h1, h2, h3, h4, h5<\/code> ve <code>h6<\/code> taglar\u0131 ile ifade edilir. Ba\u015fl\u0131klar, sadece b\u00fcy\u00fck ve kal\u0131n yaz\u0131lar olu\u015fturmak i\u00e7in kullan\u0131lan birer HTML eleman\u0131 de\u011fildir, bir nevi yaz\u0131m\u0131z\u0131n iskeletidir, b\u00f6l\u00fcmleridir, ekran okuyucusu kullanan ki\u015filerin yaz\u0131m\u0131z\u0131 sa\u011fl\u0131kl\u0131 bir \u015fekilde okumas\u0131n\u0131 sa\u011flayan k\u00f6\u015fe ta\u015flar\u0131d\u0131r. Ba\u015fl\u0131klar\u0131n ne kadar \u00f6nemli oldu\u011funu, hi\u00e7 ba\u015fl\u0131k i\u00e7ermeyen bir yaz\u0131y\u0131 okumaya \u00e7al\u0131\u015ft\u0131\u011f\u0131m\u0131zda daha iyi anlayabiliriz.<\/p>\n\n\n\n<p>Ba\u015fl\u0131klar, i\u00e7eri\u011fimizi belirli bir mant\u0131k \u00e7er\u00e7evesinde b\u00f6l\u00fcmlere ay\u0131r\u0131r. Sadece ba\u015fl\u0131klar\u0131na bakt\u0131\u011f\u0131m\u0131zda, bir yaz\u0131n\u0131n neyi anlatmak istedi\u011fini, o yaz\u0131y\u0131 okuyunca neleri \u00f6\u011frenmi\u015f olaca\u011f\u0131m\u0131z anlam\u0131\u015f oluruz.<\/p>\n\n\n\n<p>Ekran okuyucular (JAWS gibi), i\u00e7eri\u011fimizdeki ba\u015fl\u0131klar\u0131ndan bir liste haz\u0131rlar ve kullan\u0131c\u0131n\u0131n bu \u015fekilde i\u00e7eri\u011fimizin ne anlatmaya \u00e7al\u0131\u015ft\u0131\u011f\u0131 hakk\u0131nda bir fikir sahibi olmas\u0131n\u0131 ve i\u00e7eri\u011fimizde rahat\u00e7a dola\u015fmas\u0131n\u0131 sa\u011flar.<\/p>\n\n\n\n<p>Ba\u015fl\u0131klar\u0131m\u0131z\u0131n b\u00fcy\u00fckl\u00fckleri ve mant\u0131k yap\u0131s\u0131 \u00e7ok \u00f6nemlidir. En \u00f6nemli ba\u015fl\u0131k en b\u00fcy\u00fck at\u0131lmal\u0131d\u0131r, alt ba\u015fl\u0131klar, \u00fcst ba\u015fl\u0131ktan bir k\u00fc\u00e7\u00fck olacak \u015fekilde olu\u015fturulmal\u0131d\u0131r. Bir yaz\u0131n\u0131n ana ba\u015fl\u0131\u011f\u0131 bir tane olmal\u0131d\u0131r ve <code>&lt;h1&gt;<\/code> tag\u0131 ile olu\u015fturulmal\u0131d\u0131r. Birden \u00e7ok <code>&lt;h1&gt;<\/code> tag\u0131, ekran okuyucu kullananlar\u0131n sayfada kaybolmas\u0131na sebep olabilmektedir. Olu\u015fturulan alt ve \u00fcst ba\u015fl\u0131klar\u0131n konuyu mant\u0131ksal b\u00f6l\u00fcmlere ay\u0131rmas\u0131 her bir ba\u015fl\u0131\u011f\u0131n bir b\u00f6l\u00fcme a\u00e7\u0131kl\u0131k getirmesi \u00f6nemlidir. Yani, ana ba\u015fl\u0131k yaz\u0131n\u0131n hangi konuyu anlataca\u011f\u0131n\u0131 belirtmelidir, ana ba\u015fl\u0131k alt\u0131nda olu\u015fturulan her bir alt ba\u015fl\u0131k konunun ayr\u0131 bir y\u00f6n\u00fcn\u00fc anlatmal\u0131, her bir alt ba\u015fl\u0131\u011f\u0131n alt\u0131ndaki ba\u015fl\u0131k ise o y\u00f6n\u00fcn ayr\u0131 bir \u00f6zelli\u011fini anlatmal\u0131d\u0131r. Ne demeye \u00e7al\u0131\u015ft\u0131\u011f\u0131m\u0131z\u0131 anlamak i\u00e7in a\u015fa\u011f\u0131daki \u00f6rne\u011fe dikkat edelim:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1>ANA BA\u015eLIK&lt;\/h1>\n   &lt;h2>Alt Ba\u015fl\u0131k Bir&lt;\/h2>\n       &lt;h3>Alt Ba\u015fl\u0131k Birin Alt Ba\u015fl\u0131\u011f\u0131 Bir&lt;\/h3>\n       &lt;h3>Alt Ba\u015fl\u0131k Birin Alt Ba\u015fl\u0131\u011f\u0131 \u0130ki&lt;\/h3>\n       &lt;h3>Alt Ba\u015fl\u0131k Birin Alt Ba\u015fl\u0131\u011f\u0131 \u00dc\u00e7&lt;\/h3>\n   &lt;h2>Alt Ba\u015fl\u0131k \u0130ki&lt;\/h2>\n       &lt;h3>Alt Ba\u015fl\u0131k \u0130kinin Alt Ba\u015fl\u0131\u011f\u0131 Bir&lt;\/h3>\n       &lt;h3>Alt Ba\u015fl\u0131k \u0130kinin Alt Ba\u015fl\u0131\u011f\u0131 \u0130ki&lt;\/h3>\n       &lt;h3>Alt Ba\u015fl\u0131k \u0130kinin Alt Ba\u015fl\u0131\u011f\u0131 \u00dc\u00e7&lt;\/h3>\n   &lt;h2>Alt Ba\u015fl\u0131k \u00dc\u00e7&lt;\/h2>\n      &lt;h3>Alt Ba\u015fl\u0131k \u00dc\u00e7\u00fcn Alt Ba\u015fl\u0131\u011f\u0131 Bir&lt;\/h3>\n      &lt;h3>Alt Ba\u015fl\u0131k \u00dc\u00e7\u00fcn Alt Ba\u015fl\u0131\u011f\u0131 \u0130ki&lt;\/h3>\n      &lt;h3>Alt Ba\u015fl\u0131k \u00dc\u00e7\u00fcn Alt Ba\u015fl\u0131\u011f\u0131 \u00dc\u00e7&lt;\/h3><\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki \u00f6rnekte de g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, bir <code>&lt;h1&gt;<\/code> ba\u015fl\u0131\u011f\u0131n\u0131 her zaman bir <code>&lt;h2&gt;<\/code> ba\u015fl\u0131\u011f\u0131 takip etmelidir, <code>&lt;h2&gt;<\/code> ba\u015fl\u0131\u011f\u0131n\u0131 da <code>&lt;h3&gt;<\/code> takip etmelidir. Yani ba\u015fl\u0131k taglar\u0131n\u0131n numaralar\u0131 birer birer eksilmelidir. <code>&lt;h2&gt;<\/code> ba\u015fl\u0131\u011f\u0131n\u0131n do\u011frudan alt ba\u015fl\u0131\u011f\u0131 <code>&lt;h4&gt;<\/code> olmamal\u0131d\u0131r.<\/p>\n\n\n\n<p>Yaz\u0131m\u0131zdaki ba\u015fl\u0131klar\u0131n hiyerar\u015fi ve anlam kalitesi, SEO \u00f6zelli\u011finin ya da endi\u015fesinin \u00f6tesindedir ve do\u011frudan yaz\u0131m\u0131z\u0131n kalitesini, i\u00e7eri\u011fimizin eri\u015filebilirli\u011fini artt\u0131ran bir fakt\u00f6rd\u00fcr.<\/p>\n\n\n\n<p>\u0130\u00e7eri\u011finizin ba\u015fl\u0131k yap\u0131s\u0131 hakk\u0131nda bir fikir sahibi olmak i\u00e7in, i\u00e7eri\u011finizdeki b\u00fct\u00fcn ba\u015fl\u0131klar\u0131 bir liste halinde g\u00f6r\u00fcn ve bu listeye bakarak, i\u00e7eri\u011fin ne anlatt\u0131\u011f\u0131 ve nas\u0131l anlatt\u0131\u011f\u0131 hakk\u0131nda kesin bir kanaate varabiliyor musunuz, d\u00fc\u015f\u00fcn\u00fcn. E\u011fer, olu\u015fturdu\u011funuz ba\u015fl\u0131klar, yaz\u0131y\u0131 okuyunca o konuyu iyi \u00f6\u011frenece\u011finizi hissettiriyorsa, ba\u015fl\u0131k yap\u0131n\u0131z ba\u015far\u0131l\u0131 demektir.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"8216aria-labelledby8217_Ozelligi\"> &#8216;aria-labelledby&#8217; \u00d6zelli\u011fi<\/span><\/h4>\n\n\n\n<p>Ba\u015fl\u0131klara verilen <code>id=\"baslik\"<\/code> de\u011feri ve ba\u015fl\u0131\u011f\u0131n ba\u015flad\u0131\u011f\u0131 ve bitti\u011fi b\u00f6l\u00fcm\u00fc saran HTML eleman\u0131nda, <code>aria-labelledby=\"baslik\"<\/code> \u00f6zelli\u011fini kullanarak, ba\u015fl\u0131\u011f\u0131n, i\u00e7erikteki b\u00f6lgesini ya da s\u0131n\u0131rlar\u0131n\u0131 belirtebilirsiniz. Bu yap\u0131, i\u00e7eri\u011finizin eri\u015filebilirlik \u00f6zelli\u011fini artt\u0131racakt\u0131r. A\u015fa\u011f\u0131da, bahsetti\u011fimiz bu yap\u0131ya g\u00f6re olu\u015fturulmu\u015f \u00f6rnek bir i\u00e7erik g\u00f6r\u00fcyorsunuz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body>\n  &lt;header>\n    &lt;h1>Uzay Ara\u015ft\u0131rmalar\u0131&lt;\/h1>\n  &lt;\/header>\n  &lt;nav aria-labelledby=\"anabolge\">\n    &lt;h2 id=\"anabolge\">Dola\u015f\u0131m Men\u00fcs\u00fc&lt;\/h2>\n    \u2026\n  &lt;\/nav>\n  &lt;main>\n    &lt;article>\n      &lt;h2>Uzay Ara\u015ft\u0131rmalar\u0131nda Son Durum&lt;\/h2>\n      &lt;nav aria-labelledby=\"ozettablo\">\n        &lt;h3 id=\"ozettablo\">Konu Hakk\u0131nda Bir Tablo&lt;\/h3>\n        \u2026\n      &lt;\/nav>\n      &lt;p>\u2026&lt;\/p>\n      &lt;p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;\/p>\n      &lt;p>\u2026&lt;\/p>\n      &lt;ul>\n        &lt;li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;\/li>\n        &lt;li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;\/li>\n        &lt;li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.&lt;\/li>\n      &lt;\/ul>\n      &lt;h3>Cotton Fur&lt;\/h3>\n      &lt;p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;\/p>\n      &lt;p>\u2026&lt;\/p>\n      &lt;aside aria-labelledby=\"ilgiliyazilar\">\n        &lt;h3 id=\"ilgiliyazilar\">Konu \u0130le \u0130lgili Yaz\u0131lar&lt;\/h3>\n        &lt;ul>\n          &lt;li>&lt;a href=\"#\">\u0130lgili Yaz\u0131 Ba\u015fl\u0131\u011f\u0131 1&lt;\/a>&lt;\/li>\n          &lt;li>&lt;a href=\"#\">\u0130lgili Yaz\u0131 Ba\u015fl\u0131\u011f\u0131 2&lt;\/a>&lt;\/li>\n          &lt;li>&lt;a href=\"#\">\u0130lgili Yaz\u0131 Ba\u015fl\u0131\u011f\u0131 3&lt;\/a>&lt;\/li>\n        &lt;\/ul>\n      &lt;\/aside>\n    &lt;\/article>\n    &lt;aside aria-labelledby=\"guncelyazilar\">\n      &lt;h3 id=\"guncelyazilar\">Konu Hakk\u0131nda En G\u00fcncel Yaz\u0131lar&lt;\/h3>\n      &lt;ul>\n        &lt;li>&lt;a href=\"#\">G\u00fcncel Yaz\u0131 1&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">G\u00fcncel Yaz\u0131 1&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">G\u00fcncel Yaz\u0131 1&lt;\/a>&lt;\/li>\n      &lt;\/ul>\n    &lt;\/aside>\n  &lt;\/main>\n  &lt;footer>\n    &lt;p>\u00a9 Benim \u015eirketim.&lt;\/p>\n  &lt;\/footer>\n&lt;\/body><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"WordPress_Temalarinda_Basliklar_Nasil_Kullanilmalidir\">WordPress Temalar\u0131nda Ba\u015fl\u0131klar Nas\u0131l Kullan\u0131lmal\u0131d\u0131r?<\/span><\/h4>\n\n\n\n<p>Bir WordPress temas\u0131nda <code>&lt;h1&gt;<\/code> tag\u0131 \u015fu ama\u00e7lar ile kullan\u0131labilir:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Her bir sayfada, yaz\u0131da ya da ar\u015fivde bir adet <code>&lt;h1&gt;<\/code> tag\u0131 kullan\u0131lmal\u0131d\u0131r.<\/li><li>Sadece ana sayfada iken <code>&lt;h1&gt;<\/code> tag\u0131, site ba\u015fl\u0131\u011f\u0131n\u0131 ya da logosunu i\u00e7erebilir.<\/li><li>Sayfalarda, <code>&lt;h1&gt;<\/code> tag\u0131, sadece sayfa ba\u015fl\u0131klar\u0131 i\u00e7in kullan\u0131labilir.<\/li><li>Yaz\u0131larda, <code>&lt;h1&gt;<\/code> tag\u0131, sadece yaz\u0131 ba\u015fl\u0131klar\u0131 i\u00e7in kullan\u0131labilir.<\/li><li>Ar\u015fiv sayfalar\u0131nda, <code>&lt;h1&gt;<\/code> tag\u0131, sadece ar\u015fiv ba\u015fl\u0131\u011f\u0131 i\u00e7in kullan\u0131labilir.<\/li><\/ul>\n\n\n\n<p>WordPress temalar\u0131nda, logo veya site ba\u015fl\u0131\u011f\u0131 (banner) olu\u015ftururken \u015funlara dikkat edilmelidir:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Logo ya da site ba\u015fl\u0131\u011f\u0131, ana sayfada iken <code>&lt;h1&gt;<\/code> tag\u0131 i\u00e7inde kullan\u0131lmal\u0131d\u0131r ve link halinde olmamal\u0131d\u0131r. \u00c7\u00fcnk\u00fc, ana sayfada bu elemanlara link vermek demek, ayn\u0131 sayfaya link vermek demektir.<\/li><li>Dilerseniz, ana sayfada ve i\u00e7eriklerinizin \u00fcst\u00fcnde, <code>&lt;h1&gt;<\/code> tag\u0131 ile uygun g\u00f6rd\u00fc\u011f\u00fcn\u00fcz bir sayfa ba\u015fl\u0131\u011f\u0131 kullanabilirsiniz.<\/li><li>Ana sayfa d\u0131\u015f\u0131ndaki sayfalarda, site logosu veya ba\u015fl\u0131\u011f\u0131, ana sayfaya g\u00f6t\u00fcren bir link \u015fekilde olmal\u0131d\u0131r ve <code>&lt;h1&gt;<\/code> tag\u0131 i\u00e7inde olmamal\u0131d\u0131r.<\/li><\/ul>\n\n\n\n<p>WordPress temalar\u0131nda, site a\u00e7\u0131klamas\u0131 (site description) k\u0131sm\u0131 olu\u015fturulurken \u015funlara dikkat edilmelidir:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Site a\u00e7\u0131klamas\u0131 k\u0131sm\u0131, <code>&lt;h2&gt;<\/code> tag\u0131 ile olu\u015fturulmamal\u0131d\u0131r. \u00c7\u00fcnk\u00fc, site logosu i\u00e7in <code>&lt;h1&gt;<\/code> veya <code>&lt;h2&gt;<\/code> ba\u015fl\u0131klar\u0131 kullan\u0131lm\u0131\u015ft\u0131r ve bir ba\u015fl\u0131\u011f\u0131 her zaman bir i\u00e7erik eleman\u0131 (<code>&lt;p&gt;<\/code>, <code>&lt;li&gt;<\/code>, <code>&lt;nav&gt;<\/code>&#8230;) takip etmelidir.<\/li><\/ul>\n\n\n\n<p>Sidebar (sayfa kenar\u0131) k\u0131s\u0131mlar\u0131nda, ba\u015fl\u0131klar\u0131n durumu \u015f\u00f6yledir:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Sidebar ba\u015fl\u0131\u011f\u0131 i\u00e7in, (gizli de olsa) anlaml\u0131 bir <code>&lt;h2&gt;<\/code> tag\u0131 kullan\u0131n.<\/li><li>Sidebar i\u00e7inde kulland\u0131\u011f\u0131n\u0131z bile\u015fenlere (Widgets) ba\u015fl\u0131k atarken <code>&lt;h3&gt;<\/code> tag\u0131 kullan\u0131n.<\/li><li>Bir bile\u015fenin i\u00e7inde <code>&lt;h1&gt;<\/code>, <code>&lt;h2&gt;<\/code> ve <code>&lt;h3&gt;<\/code> taglar\u0131n\u0131 kullanmay\u0131n.<\/li><\/ul>\n\n\n\n<p>WordPress temalar\u0131nda, footer (sayfa alt\u0131) k\u0131sm\u0131 olu\u015fturulurken \u015funlara dikkat edilmelidir:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Footer ba\u015fl\u0131\u011f\u0131 i\u00e7in, (gizli de olsa) anlaml\u0131 bir <code>&lt;h2&gt;<\/code> tag\u0131 kullan\u0131n.<\/li><li>Footer i\u00e7inde kulland\u0131\u011f\u0131n\u0131z bile\u015fenlere (Widgets) ba\u015fl\u0131k atarken <code>&lt;h3&gt;<\/code> tag\u0131 kullan\u0131n.<\/li><li>Footer k\u0131sm\u0131nda kulland\u0131\u011f\u0131n\u0131z bir bile\u015fenin i\u00e7inde <code>&lt;h1&gt;<\/code>, <code>&lt;h2&gt;<\/code> ve <code>&lt;h3&gt;<\/code> taglar\u0131n\u0131 kullanmay\u0131n.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Gizli_Basliklar\">Gizli Ba\u015fl\u0131klar<\/span><\/h4>\n\n\n\n<p>Bazen, tasar\u0131mlar\u0131m\u0131zda, g\u00f6rsel endi\u015feler ile, baz\u0131 sayfalar i\u00e7in ba\u015fl\u0131k kullanmak istemeyiz. B\u00f6yle durumlarda, ekran okuyucusu kullanan ziyaret\u00e7ilerimizi d\u00fc\u015f\u00fcnmek ve temam\u0131z\u0131n eri\u015filebilirli\u011fini artt\u0131rmak i\u00e7in, yine de ba\u015fl\u0131k kullanmal\u0131 fakat ba\u015fl\u0131klar\u0131m\u0131z\u0131 uygun CSS kodlar\u0131 ile, sadece ekran okuyucular\u0131n g\u00f6rebilece\u011fi \u015fekilde gizleyebiliriz. Ba\u015fl\u0131klar\u0131 gizlemek i\u00e7in kullanabilece\u011fimiz CSS kodlar\u0131n\u0131 merak ediyorsan\u0131z a\u015fa\u011f\u0131da bunun \u00f6rnekleri verilecektir.<\/p>\n\n\n\n<p>Unutulmamal\u0131d\u0131r ki, tepesinde bir ba\u015fl\u0131\u011f\u0131 olmayan bir sayfa ya da yaz\u0131, ekran okuyucular i\u00e7in serseri bir i\u00e7eriktir.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Sayfanin_Baslik_Yapisini_Gorme\">Sayfan\u0131n Ba\u015fl\u0131k Yap\u0131s\u0131n\u0131 G\u00f6rme<\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Teman\u0131z\u0131n herhangi bir sayfas\u0131n\u0131n ba\u015fl\u0131k yap\u0131s\u0131n\u0131 g\u00f6rmek i\u00e7in, <a rel=\"noreferrer noopener\" aria-label=\" (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/developer.wordpress.org\/themes\/functionality\/accessibility\/#toolbars\" target=\"_blank\">Firefox\u2019s Web Developer Toolbar<\/a>&nbsp;eklentisini kullanabilirsiniz. Bu eklenti, Firefox taray\u0131c\u0131s\u0131 ile \u00e7al\u0131\u015fan bir eklentidir. Bu eklenti ile, ekrandaki bir web  sayfas\u0131 i\u00e7in, a\u015fa\u011f\u0131daki resimde g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, <strong>Information-&gt;View Document Outline<\/strong> men\u00fcs\u00fcn\u00fc kullanarak, o sayfan\u0131n ba\u015fl\u0131k hiyerar\u015fisini g\u00f6rebilirsiniz.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Firefox\u2019s-Web-Developer-Toolbar.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"806\" height=\"263\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Firefox\u2019s-Web-Developer-Toolbar.jpg\" alt=\"Firefox Web Developer Eklentisi ile Ba\u015fl\u0131k Hiyerar\u015fisini G\u00f6rme\" class=\"wp-image-4449\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Firefox\u2019s-Web-Developer-Toolbar.jpg 806w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Firefox\u2019s-Web-Developer-Toolbar-300x98.jpg 300w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Firefox\u2019s-Web-Developer-Toolbar-768x251.jpg 768w\" sizes=\"auto, (max-width: 806px) 100vw, 806px\" \/><\/a><figcaption>Firefox Web Developer Eklentisi ile Ba\u015fl\u0131k Hiyerar\u015fisini G\u00f6rme<\/figcaption><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>Bunun d\u0131\u015f\u0131nda, WordPress temalar\u0131n\u0131zda, ba\u015fl\u0131k hiyerar\u015fisini g\u00f6rmek ve ziyaret\u00e7ilerinize g\u00f6stermek i\u00e7in, <a rel=\"noreferrer noopener\" aria-label=\"Table of Contents Plus (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/github.com\/zedzedzed\/table-of-contents-plus\/\" target=\"_blank\">Table of Contents Plus<\/a> eklentisini kullanabilirsiniz. Bu eklenti, y\u00f6netim panelindeki edit\u00f6r ile olu\u015fturdu\u011funuz i\u00e7erikler i\u00e7in, ba\u015fl\u0131k hiyerar\u015fisini \u00e7\u0131karan ve bununla da yetinmeyip, bu ba\u015fl\u0131klar\u0131 sayfa i\u00e7i dola\u015f\u0131ma m\u00fcsait birer ba\u011flant\u0131 haline d\u00f6n\u00fc\u015ft\u00fcren bir eklentidir.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"2_Resimler\">2. Resimler<\/span><\/h3>\n\n\n\n<p>Resim olu\u015ftururken, eri\u015filebilirlik a\u00e7\u0131s\u0131ndan dikkat etmemiz gereken husus, resim eleman\u0131na (<code>&lt;img&gt;<\/code>) bir alternatif metin eklemektir. Bunu yapmak, bu resim eleman\u0131na  bir <code>alt=\"Ben bir alternatif metinim\"<\/code> \u00f6zelli\u011fi eklemek kadar kolayd\u0131r.<\/p>\n\n\n\n<p>Bir resim eleman\u0131na, uygun bir alternatif text olu\u015fturmak i\u00e7in \u00f6ncelikle resmin kullan\u0131m amac\u0131n\u0131 belirlemek gerekir. Temalar\u0131m\u0131zda kulland\u0131\u011f\u0131m\u0131z resimler, \u015fu ama\u00e7lar ile kullan\u0131l\u0131r:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"I_8211_Bilgi_Veren_Resimler_Informative_Images\">I &#8211; Bilgi Veren Resimler (Informative Images)<\/span><\/h4>\n\n\n\n<p>Bu resimler, kendilerine ba\u011fl\u0131 olan i\u00e7eri\u011fin daha iyi anla\u015f\u0131labilmesi i\u00e7in konulmu\u015f, i\u00e7eri\u011fin bahsetti\u011fi \u015fey ile ilgili kullan\u0131c\u0131ya g\u00f6rsel destek sa\u011flayan resimlerdir. Telefon numaralar\u0131n\u0131n \u00f6n\u00fcne konulan telefon resmi gibi, bir k\u00f6pek cinsini tan\u0131tan bir metnin \u00f6n\u00fcne, o cinse ait ve \u00f6rnek olarak konulmu\u015f bir k\u00f6pek resmi gibi resimler bu tipten resimlerdir. Bu tip resimlerde, resmin ne anlatmak istedi\u011fi, alternatif metinde belirtilir.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131da bu resimlerin kullan\u0131m\u0131na bir \u00f6rnek verilmi\u015ftir:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"169\" height=\"119\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/accessible-images.jpg\" alt=\"\" class=\"wp-image-4466\"\/><figcaption>Eri\u015filebilir Resimler<\/figcaption><\/figure><\/div>\n\n\n\n<p>Yukar\u0131daki yap\u0131, eri\u015filebilir olarak \u015f\u00f6yle olu\u015fturulabilir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p>\n\t&lt;img src=\"phone.png\" alt=\"Telefon:\"> 0123 456 7890\n&lt;\/p>\n&lt;p>\n\t&lt;img src=\"fax.png\" alt=\"Fax:\"> 0123 456 7891\n&lt;\/p><\/code><\/pre>\n\n\n\n<p>Veya bir k\u00f6pek cinsini tan\u0131tan bir yaz\u0131n\u0131n tepesine konulmu\u015f bir resim, \u015f\u00f6yle olu\u015fturulabilir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p>\n\t&lt;img src=\"dog.jpg\" alt=\"Boyununda bir zil bulunan bir k\u00f6pek.\">\n\tBu cinsten k\u00f6pekler ...\n&lt;\/p><\/code><\/pre>\n\n\n\n<p>Veya, bir ila\u00e7 \u015fi\u015fesinin kapa\u011f\u0131n\u0131n nas\u0131l a\u00e7\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6steren bir g\u00f6rselin HTML yap\u0131s\u0131, eri\u015filebilir olarak \u015f\u00f6yle olabilir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"ilac-sisesi-kapagi-acma.png\" alt=\"Kapa\u011f\u0131 a\u015fa\u011f\u0131 itin ve saat y\u00f6n\u00fcn\u00fcn tersi y\u00f6nde (sa\u011fdan sola do\u011fru) \u00e7evirin.\"><\/code><\/pre>\n\n\n\n\t<br \/>\n\t<div class=\"stcnnt-yazi-ici-reklam\">\n\t<span aria-hidden=\"true\" class=\"sc-reklam-basligi text-muted\" style=\"display:block;text-align:center;\">bu bir reklamd\u0131r:<\/span>\n\t<p aria-hidden=\"true\" class=\"shadow-lg m-0 p-0\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:block; text-align:center;\"\n\t\t\t data-ad-layout=\"in-article\"\n\t\t\t data-ad-format=\"fluid\"\n\t\t\t data-ad-client=\"ca-pub-6366953309324763\"\n\t\t\t data-ad-slot=\"2001829037\"><\/ins>\n\t\t<script>\n\t\t\t (adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/p>\n\t<\/div>\n\t\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"II_8211_Dekoratif_Resimler_Decorative_Images\">II &#8211; Dekoratif Resimler (Decorative Images)<\/span><\/h4>\n\n\n\n<p>Dekoratif ama\u00e7 ile kullan\u0131lan resimler, sayfadaki i\u00e7erik ile herhangi bir ba\u011flant\u0131s\u0131 olmayan, sadece ho\u015f bir g\u00f6r\u00fcnt\u00fc olu\u015fturmak amac\u0131yla kullan\u0131lan resimlerdir. Kenarl\u0131k olarak kullan\u0131lan resimler, dolgu ama\u00e7l\u0131 kullan\u0131lan arka plan resimleri, k\u00f6\u015fe resimleri gibi resimler bu ama\u00e7 ile kullan\u0131lan resimlerdir.<\/p>\n\n\n\n<p>Dekoratif ama\u00e7 ile kullan\u0131lan resimlerde alternatif metin bo\u015f b\u0131rak\u0131l\u0131r, (<code>alt=\"\"<\/code>) b\u00f6ylece ekran okuyucular bu resimleri g\u00f6rmezler.<\/p>\n\n\n\n<p>Asl\u0131na bakarsan\u0131z, bir resmin bilgilendirme amac\u0131 ile mi dekoratif ama\u00e7 ile mi kullan\u0131ld\u0131\u011f\u0131na, sadece i\u00e7eri\u011fin yazar\u0131 karar verebilir. Dekoratif ama\u00e7 ile kullan\u0131lan resimler genellikle \u015fu \u00f6zellikleri ta\u015f\u0131r:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Kenarl\u0131klar\u0131, bo\u015fluklar\u0131 ya da k\u00f6\u015feleri s\u00fcslemek i\u00e7in kullan\u0131l\u0131rlar.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"ustalan_arkaplaninda_kenarlik.png\" alt=\"\"><\/code><\/pre>\n\n\n\n<p>Her ne kadar, bo\u015f bir alternatif metin kadar yayg\u0131n olmasa da, bu tip dekoratif resimler i\u00e7in <code>role=\"presentation\"<\/code> \u00f6zelli\u011fi de kullan\u0131labilir.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"ustalan_arkaplaninda_kenarlik.png\" role=\"presentation\"><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Link textlerinin dikkat \u00e7ekmesi veya t\u0131klanabilir alanlar\u0131n\u0131n artt\u0131r\u0131lmas\u0131 i\u00e7in kullan\u0131l\u0131rlar. Mesela, \u00e7i\u00e7eklere g\u00f6t\u00fcren bir linkin i\u00e7ine, dekoratif ama\u00e7l\u0131 ve rastgele bir \u00e7i\u00e7ek resmi konulabilir. A\u015fa\u011f\u0131da bu tip bir dekoratif resim \u00f6rne\u011fi verilmi\u015ftir:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"lalesayfasi.html\">\n    &lt;img src=\"lale.jpg\" alt=\"\">\n    &lt;strong> Lale so\u011fanlar\u0131&lt;\/strong>\n&lt;\/a><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0130lgili metne bir \u00f6rnek te\u015fkil ederler fakat bilgi vermezler. Mesela, k\u00f6peklerden bahseden bir i\u00e7eri\u011fe, dekoratif ama\u00e7l\u0131 ve rastgele bir k\u00f6pek resmi konulabilir ve kodu da \u015f\u00f6yle olabilir:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p>\n\t&lt;img src=\"kopekler.jpg\" alt=\"\">\n\t&lt;strong>K\u00f6pekler:&lt;\/strong> ...\n&lt;\/p><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Sadece ambiyans olsun, yaz\u0131ya uygun bir ortam olu\u015fsun veya g\u00f6rsel olarak ilgiyi sayfaya \u00e7eksin diye kullan\u0131l\u0131rlar. A\u015fa\u011f\u0131da bu ama\u00e7la kullan\u0131lan bir resim kodu verilmi\u015ftir:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"tropikal.jpg\" alt=\"\"><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"III_8211_Fonksiyonel_Resimler_Fonctional_Images\">III &#8211; Fonksiyonel Resimler (Fonctional Images)<\/span><\/h4>\n\n\n\n<p>Fonksiyonel resimler, bir eylem ba\u015flatmak i\u00e7in kullan\u0131l\u0131rlar. Ama\u00e7lar\u0131, i\u00e7erik ile ilgi bir bilgi vermek ya da dekor olu\u015fturmak de\u011fildir. Butonlarda, linklerde ve di\u011fer interaktif elemanlarda kullan\u0131l\u0131rlar. Bu t\u00fcrdeki resimlerin alternatif textleri, resmin kendisini de\u011fil de g\u00f6revini tarif etmelidir.<\/p>\n\n\n\n<p>\u00d6rnek olarak, bir sayfay\u0131 yazd\u0131rmak i\u00e7in olu\u015fturdu\u011funuz bir linkte, bir yaz\u0131c\u0131 resmi kulland\u0131n\u0131z diyelim. Kulland\u0131\u011f\u0131n\u0131z bu resim i\u00e7in alternatif text olarak, <code>alt=\"yaz\u0131c\u0131\"<\/code> yerine <code>alt=\"sayfay\u0131 yazd\u0131r\"<\/code> kullanmak teman\u0131z\u0131 daha eri\u015filebilir yapacakt\u0131r.<\/p>\n\n\n\n<p>Yine, site i\u00e7i arama yapmak i\u00e7in olu\u015fturdu\u011funuz arama butonunda kulland\u0131\u011f\u0131n\u0131z bir b\u00fcy\u00fcte\u00e7 resmi i\u00e7in, alternatif text olarak, <code>alt=\"buyutec\"<\/code> yerine <code>alt=\"ara\"<\/code>  <\/p>\n\n\n\n<p>Ba\u015fka bir \u00f6rnek olarak, sitenizin logo resmini, ana sayfan\u0131za g\u00f6t\u00fcren bir ba\u011flant\u0131 olarak kodlad\u0131n\u0131z diyelim. Bu durumda, logo resminiz i\u00e7in \u015f\u00f6yle bir kodlama daha eri\u015filebilir olacakt\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/www.sitecenneti.com\/\">\n  &lt;img src=\"logo.png\" alt=\"sitecenneti ana sayfa\">\n&lt;\/a><\/code><\/pre>\n\n\n\n<p>Logo \u00f6rne\u011finden devam edelim. Logomuzu yine ana sayfa ba\u011flant\u0131s\u0131 olarak kullanal\u0131m fakat bu defa bir text ile birlikte kullanal\u0131m. Bu durumda, tekrara d\u00fc\u015fmemek ve gereksiz bilgi vermemek i\u00e7in, logo resmimizde bir alternatif text a\u00e7\u0131klamas\u0131 yapmam\u0131za gerek yoktur. B\u00f6yle durumlarda, logo resmimiz dekoratif bir resim olarak kullan\u0131lm\u0131\u015f olacakt\u0131r. Yani do\u011fru kod \u015f\u00f6yle olmal\u0131d\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/www.sitecenneti.com\/\">\n  &lt;img src=\"logo.png\" alt=\"\"> Sitecenneti Ana Sayfa\n&lt;\/a><\/code><\/pre>\n\n\n\n<p>Yine, bizi yeni bir sayfaya g\u00f6t\u00fcren bir ba\u011flant\u0131 i\u00e7inde kullan\u0131lan bir ikon resmi i\u00e7in \u015fu kod uygun olacakt\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/www.sitecenneti.com\/\" target=\"_blank\">\n  Sitecenneti Ana Sayfa &lt;img src=\"yeni-sayfa.png\" alt=\"yeni bir sayfa\">\n&lt;\/a><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"IV_8211_Yazilarin_Resimleri_Images_of_Text\">IV &#8211; Yaz\u0131lar\u0131n Resimleri (Images of Text)<\/span><\/h4>\n\n\n\n<p>Bazen yaz\u0131lar\u0131n resimlerini kullanmak isteriz. Bunu yapmadan \u00f6nce, g\u00fcn\u00fcm\u00fczdeki CSS teknolojisinin, resmi \u00e7ekilmi\u015f gibi yaz\u0131lar olu\u015fturmakta \u00e7ok maharetli oldu\u011funu hat\u0131rlatmak isteriz. CSS yoluyla, \u015fekillendirilen yaz\u0131lar\u0131n, bir \u00e7ok a\u00e7\u0131dan daha avantajl\u0131 oldu\u011funu da s\u00f6ylemeden ge\u00e7mek istemeyiz.<\/p>\n\n\n\n<p>Resim format\u0131nda bir yaz\u0131 kullan\u0131yorsak, resimde yazan yaz\u0131y\u0131 alternatif text olarak belirtmek daha eri\u015filebilir olacakt\u0131r. \u00d6rne\u011fe dikkat edelim:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"376\" height=\"277\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/accessible-images-2.jpg\" alt=\"Eri\u015filebilir Temalarda Resim Kodlama\" class=\"wp-image-4477\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/accessible-images-2.jpg 376w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/accessible-images-2-300x221.jpg 300w\" sizes=\"auto, (max-width: 376px) 100vw, 376px\" \/><figcaption>Eri\u015filebilir Temalarda Resim Kodlama<\/figcaption><\/figure><\/div>\n\n\n\n<p>Yukar\u0131daki resim i\u00e7in \u015fu kodlama uygun olacakt\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"okunmasi-gereken-kitaplar.png\" alt=\"Her muhasebecinin okumas\u0131 gereken kitaplar\"><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"V_8211_Karmasik_Resimler_Complex_Images\">V &#8211; Karma\u015f\u0131k Resimler (Complex Images)<\/span><\/h4>\n\n\n\n<p>Karma\u015f\u0131k resimler, bir ka\u00e7 kelime ile ifade edilemeyecek kadar \u00e7ok bilgi sunan resimlerdir. Bu resimler genellikle \u015fu tip resimlerdir:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Grafikler, ak\u0131\u015f \u00e7izelgesi resimleridir.<\/li><li>Sayfada yaz\u0131lanlar\u0131 anlamak i\u00e7in, \u00f6nce resmin anla\u015f\u0131lmas\u0131n\u0131n gerekti\u011fi diyagramlar veya canland\u0131rma resimleridir.<\/li><li>\u0130zobar e\u011frileri i\u00e7eren hava durumu resimleri, konum g\u00f6steren haritalar gibi resimlerdir.<\/li><\/ul>\n\n\n\n<p>Bu t\u00fcr resimler i\u00e7in, iki b\u00f6l\u00fcm olu\u015fturmam\u0131z gerekmektedir. Birinci b\u00f6l\u00fcmde resmin k\u0131sa bir a\u00e7\u0131klamas\u0131, ikinci b\u00f6l\u00fcmde ise uzun a\u00e7\u0131klamas\u0131 yer almal\u0131d\u0131r. Bahsetti\u011fimiz bu k\u0131sa ve uzun a\u00e7\u0131klama k\u0131s\u0131mlar\u0131 olu\u015fturman\u0131n farkl\u0131 yollar\u0131 vard\u0131r. Bu yollar \u015fu \u015fekildedir:<\/p>\n\n\n\n<p><strong>Yol 1:<\/strong> Resmin alternatif metninde k\u0131sa a\u00e7\u0131klama yap\u0131l\u0131r, uzun a\u00e7\u0131klama i\u00e7in bir link olu\u015fturulur:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p>\n\t&lt;img\n\t\tsrc=\"garfik.png\"\n\t\talt=\"Bar \u00e7izelgesi, \u015fu y\u0131l\u0131n \u015fu d\u00f6neminde \u015fu sitenin ziyaret\u00e7i say\u0131s\u0131n\u0131n de\u011fi\u015fimini g\u00f6stermektedir.\">\n\t&lt;br>\n\t&lt;a href=\"ziyaretci-sayileri.html\">Sitecenneti.com sitesinin \u015fu y\u0131l\u0131n \u015fu d\u00f6nemindeki ziyaret\u00e7i say\u0131s\u0131n\u0131 g\u00f6steren grafi\u011fin detayl\u0131 a\u00e7\u0131klamas\u0131&lt;\/a>\n&lt;\/p><\/code><\/pre>\n\n\n\n<p><strong>Yol 2:<\/strong> Bu yolda, k\u0131sa a\u00e7\u0131klama alternatif text i\u00e7inde yap\u0131l\u0131r ve k\u0131sa a\u00e7\u0131klama i\u00e7inde uzun a\u00e7\u0131klaman\u0131n hangi ba\u015fl\u0131k alt\u0131nda yap\u0131ld\u0131\u011f\u0131 da belirtilir. Koda dikkat ediniz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p>\n\t&lt;img\n\t\tsrc=\"garfik.png\"\n\t\talt=\"Bar \u00e7izelgesi, \u015fu y\u0131l\u0131n \u015fu d\u00f6neminde \u015fu sitenin ziyaret\u00e7i say\u0131s\u0131n\u0131n de\u011fi\u015fimini g\u00f6stermektedir.\">\n\t&lt;br>\n\t&lt;a href=\"ziyaretci-sayileri.html\">Sitecenneti.com sitesinin \u015fu y\u0131l\u0131n \u015fu d\u00f6nemindeki ziyaret\u00e7i say\u0131s\u0131n\u0131 g\u00f6steren grafi\u011fin detayl\u0131 a\u00e7\u0131klamas\u0131 a\u015fa\u011f\u0131daki Ziyaret\u00e7i Grafi\u011fi ba\u015fl\u0131\u011f\u0131 altnda a\u00e7\u0131klanm\u0131\u015ft\u0131r.&lt;\/a>\n&lt;\/p>\n[...]\n&lt;h2>Ziyaret\u00e7i Grafi\u011fi&lt;\/h2>\n[...]<\/code><\/pre>\n\n\n\n<p><strong>Yol 3<\/strong>: Bu yolda da k\u0131sa a\u00e7\u0131klama alternatif text i\u00e7inde yap\u0131l\u0131r, uzun a\u00e7\u0131klama i\u00e7in bir link olu\u015fturulur. Fakat, b\u00fct\u00fcn bu elemanlar <code>&lt;figure&gt;<\/code> eleman\u0131 ile olu\u015fturulan bir grup (<code>role=\"group\"<\/code>) i\u00e7inde toplan\u0131r, b\u00f6ylelikle birlikte olduklar\u0131, ekran okuyuculara ilan edilmi\u015f olur. Koda dikkat ediniz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;figure role=\"group\">\n    &lt;img\n        src=\"garfik.png\"\n        alt=\"Bar \u00e7izelgesi, \u015fu y\u0131l\u0131n \u015fu d\u00f6neminde \u015fu sitenin ziyaret\u00e7i say\u0131s\u0131n\u0131n de\u011fi\u015fimini g\u00f6stermektedir.\">\n    &lt;figcaption>\n        &lt;a href=\"ziyaretci-sayileri.html\">Sitecenneti.com sitesinin \u015fu y\u0131l\u0131n \u015fu d\u00f6nemindeki ziyaret\u00e7i say\u0131s\u0131n\u0131 g\u00f6steren grafi\u011fin detayl\u0131 a\u00e7\u0131klamas\u0131&lt;\/a>\n    &lt;\/figcaption>\n&lt;\/figure><\/code><\/pre>\n\n\n\n<p><strong>Yol 4<\/strong>: Bu yolda da b\u00fct\u00fcn elemanlar <code>&lt;figure&gt;<\/code> eleman\u0131 ile olu\u015fturulan bir grup (<code>role=\"group\"<\/code>) i\u00e7inde toplan\u0131r. Yukar\u0131daki yoldan farkl\u0131 olarak, uzun a\u00e7\u0131klama <code>&lt;figcaption&gt;<\/code> eleman\u0131 i\u00e7inde yap\u0131l\u0131r. Koda dikkat ediniz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;figure role=\"group\">\n    &lt;img\n        src=\"garfik.png\"\n        alt=\"Bar \u00e7izelgesi, \u015fu y\u0131l\u0131n \u015fu d\u00f6neminde \u015fu sitenin ziyaret\u00e7i say\u0131s\u0131n\u0131n de\u011fi\u015fimini g\u00f6stermektedir.\">\n    &lt;figcaption>\n    \t&lt;h2>Grafi\u011fin A\u00e7\u0131klamas\u0131&lt;\/h2>\n    \t&lt;p>Bu grafik \u015funu \u015funu g\u00f6stermektedir...&lt;\/p>\n    \t&lt;h2>De\u011ferler...&lt;\/h2>\n    \t&lt;table>\n    \t\t&lt;caption>\u015eu y\u0131l\u0131n \u015fu d\u00f6neminde \u015fu sitenin ziyaret\u00e7i say\u0131s\u0131n\u0131n de\u011fi\u015fimini&lt;\/caption>\n    \t\t&lt;tr>\u2026&lt;\/tr>\n    \t&lt;\/table>\n    &lt;\/figcaption\n&lt;\/figure><\/code><\/pre>\n\n\n\n<p><strong>Yol 5:<\/strong> Bu yolda <code>longdesc<\/code> \u00f6zelli\u011fi kullan\u0131l\u0131r ve uzun a\u00e7\u0131klaman\u0131n hangi <code>id<\/code> de\u011ferindeki elemanda bulundu\u011fu bu \u00f6zellik yard\u0131m\u0131 ile belirtilir. Koda dikkat ediniz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img\n   src=\"garfik.png\"\n   alt=\"Bar \u00e7izelgesi, \u015fu y\u0131l\u0131n \u015fu d\u00f6neminde \u015fu sitenin ziyaret\u00e7i say\u0131s\u0131n\u0131n de\u011fi\u015fimini g\u00f6stermektedir.\">\n   longdesc=\"#grafigin-aciklamasi\">\n[\u2026]\n&lt;div id=\"grafigin-aciklamasi\">\n[\u2026]\n&lt;\/div><\/code><\/pre>\n\n\n\n<p><strong>Yol 6:<\/strong> Bu yolda <code>aria-describedby<\/code> \u00f6zelli\u011fi kullan\u0131l\u0131r ve uzun a\u00e7\u0131klaman\u0131n hangi <code>id<\/code> de\u011ferindeki elemanda bulundu\u011fu bu \u00f6zellik yard\u0131m\u0131 ile belirtilir. Bu \u00f6zelli\u011fi kullan\u0131rken uzun a\u00e7\u0131klamay\u0131 i\u00e7eren HTML eleman\u0131 bir paragraf gibi bir d\u00fcz metin eleman\u0131 olmal\u0131d\u0131r. Koda dikkat ediniz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img\n   src=\"garfik.png\"\n   alt=\"Bar \u00e7izelgesi, \u015fu y\u0131l\u0131n \u015fu d\u00f6neminde \u015fu sitenin ziyaret\u00e7i say\u0131s\u0131n\u0131n de\u011fi\u015fimini g\u00f6stermektedir.\">\n   aria-describedby=\"#grafigin-aciklamasi\">\n[\u2026]\n&lt;p id=\"grafigin-aciklamasi\">\n[\u2026]\n&lt;\/p><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"VI_8211_Resim_Gruplari\">VI &#8211; Resim Gruplar\u0131<\/span><\/h4>\n\n\n\n<p>Bazen tek bir bilgi vermek i\u00e7in birden \u00e7ok resim bir arada kullan\u0131l\u0131r. Bunun en bilinen \u00f6rne\u011fi, y\u0131ld\u0131zlard\u0131r. Bir \u00e7ok al\u0131\u015f-veri\u015f sitesinde \u00fcr\u00fcnlere be\u015f adet y\u0131ld\u0131z grubu \u00fczerinden verilen puanlar\u0131 g\u00f6r\u00fcr\u00fcz. Bu \u015fekilde, grup halinde kullan\u0131lan resimlerin eri\u015filebilir olmas\u0131 i\u00e7in, bu resimlerden sadece birinin alternatif textini girmeliyiz, di\u011ferlerini bo\u015f b\u0131rakmal\u0131y\u0131z.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131daki resim, be\u015f y\u0131ld\u0131z \u00fczerinden 3.5 puan alm\u0131\u015f bir i\u00e7erik i\u00e7in olu\u015fturulmu\u015ftur:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"116\" height=\"32\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/accessible-images-3.jpg\" alt=\"\" class=\"wp-image-4485\"\/><figcaption>Eri\u015filebilir Temalarda Resim Kodlama<\/figcaption><\/figure><\/div>\n\n\n\n<p>Bu resimler \u015fu \u015fekilde kodlanmal\u0131d\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"star-full.jpg\"  alt=\"5 y\u0131ld\u0131z \u00fczerinden 3.5 puan\">\n&lt;img src=\"star-full.jpg\"  alt=\"\">\n&lt;img src=\"star-full.jpg\"  alt=\"\">\n&lt;img src=\"star-half.jpg\"  alt=\"\">\n&lt;img src=\"star-empty.jpg\" alt=\"\"><\/code><\/pre>\n\n\n\n<p>Ba\u015fka bir \u00f6rnek olarak, bir binan\u0131n farkl\u0131 tarihlerde \u00e7ekilmi\u015f \u00fc\u00e7 resmini birlikte sundu\u011fumuzu d\u00fc\u015f\u00fcnelim. Bu \u00fc\u00e7 resim i\u00e7in, HTML5 elemanlar\u0131 ve bu elemanlarda kullan\u0131lan, <code>role=\"group\"<\/code> ve <code>aria-labelledby<\/code> \u00f6zellikleri ile a\u015fa\u011f\u0131daki kod uygun olacakt\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;figure role=\"group\" aria-labelledby=\"fig1\">\n\t&lt;figcaption id=\"fig1\">\n\t\tTarihi binan\u0131n 50, 40 ve 30 y\u0131l \u00f6nce \u00e7ekilmi\u015f foto\u011fraflar\u0131n\u0131 g\u00f6r\u00fcyorsunuz.\n\t&lt;\/figcaption>\n\n\n\t&lt;figure role=\"group\" aria-labelledby=\"fig2\">\n\t\t&lt;img src=\"bina-resmi-1.jpg\"\n\t\t\talt=\"Binan\u0131n 50 y\u0131l \u00f6nceki renginin sar\u0131 oldu\u011funu g\u00f6r\u00fcyoruz.\">\n\t\t&lt;figcaption id=\"fig2\">Binan\u0131n 50 y\u0131l \u00f6nceki resimi&lt;\/figcaption>\n\t&lt;\/figure>\n\n\t&lt;figure role=\"group\" aria-labelledby=\"fig3\">\n\t\t&lt;img src=\"bina-resmi-2.jpg\"\n\t\t\talt=\"Binan\u0131n 40 y\u0131l \u00f6nceki renginin ye\u015fil oldu\u011funu g\u00f6r\u00fcyoruz.\">\n\t\t&lt;figcaption id=\"fig3\">Binan\u0131n 40 y\u0131l \u00f6nceki resimi&lt;\/figcaption>\n\t&lt;\/figure>\n\n\t&lt;figure role=\"group\" aria-labelledby=\"fig4\">\n\t\t&lt;img src=\"bina-resmi-3.jpg\"\n\t\t\talt=\"Binan\u0131n 30 y\u0131l \u00f6nceki renginin mavi oldu\u011funu g\u00f6r\u00fcyoruz.\">\n\t\t&lt;figcaption id=\"fig4\">Binan\u0131n 30 y\u0131l \u00f6nceki resimi&lt;\/figcaption>\n\t&lt;\/figure>\n\n&lt;\/figure><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"VII_8211_Resim_Haritalari_Image_Maps\">VII &#8211; Resim Haritalar\u0131 (Image Maps)<\/span><\/h4>\n\n\n\n<p>Haritalanm\u0131\u015f bir resim i\u00e7in kullan\u0131lacak alternatif textler, resimdeki harita hakk\u0131nda bilgi vermelidir.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131da, bir \u015firketin y\u00f6netim a\u011fac\u0131na ait bir resim haritas\u0131 kodu verilmi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"orgchart.png\"\n     alt=\"Y\u00f6netici kadrosu: \"\n     usemap=\"#Harita\">\n\n&lt;map name=\"Harita\" id=\"Harita\">\n\t&lt;area\n\t\tshape=\"rect\"\n\t\tcoords=\"176,14,323,58\"\n\t\thref=\"\u2026\"\n\t\talt=\"Ahmet AHMET: M\u00fcd\u00fcr\"\n\t>\n  \n        &lt;area \n              shape=\"rect\" \n              coords=\"81,75,226,114\" \n              href=\"\u2026\"\n              alt=\"Mehmet MEHMET: Genel Sekreter\"\n       >\n       &lt;area \n             shape=\"rect\" \n             coords=\"6,138,155,182\" \n             href=\"\u2026\"\n             alt=\"Ali AL\u0130: Pazarlama M\u00fcd\u00fcr\u00fc (M\u00fcd\u00fcre kar\u015f\u0131 sorumludur)\"\n      >\n      &lt;area \n            shape=\"rect\"\n            coords=\"175,138,323,182\"\n            href=\"\u2026\"\n            alt=\"Ay\u015fe AY\u015eE: Sat\u0131\u015f M\u00fcd\u00fcr\u00fc (M\u00fcd\u00fcre kar\u015f\u0131 sorumludur)\"\n      >\n      &lt;area\n           shape=\"rect\" \n           coords=\"345,136,496,186\" \n           href=\"\u2026\"\n           alt=\"Fatma FATMA: Finans M\u00fcd\u00fcr\u00fc (M\u00fcd\u00fcre kar\u015f\u0131 sorumludur)\"\n      >\n&lt;\/map><\/code><\/pre>\n\n\n\n<p class=\"sc-dikkat\">Resim haritalar\u0131, sabit koordinatlar kullan\u0131ld\u0131\u011f\u0131nda mobil cihazlarda d\u00fczg\u00fcn \u00e7al\u0131\u015fmayabilir. \u00c7\u00fcnk\u00fc mobil cihazlarda, resimlerin en-boy de\u011ferleri de\u011fi\u015febilmektedir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"3_Sekme_Linkleri_Skip_Links\">3. Sekme Linkleri (Skip Links)<\/span><\/h3>\n\n\n\n<p>Sekme linkleri, sayfa i\u00e7i dola\u015f\u0131m\u0131 kolayla\u015ft\u0131ran ba\u011flant\u0131lard\u0131r. Sekme linkleri ile sayfan\u0131n belli bir b\u00f6l\u00fcm\u00fcne h\u0131zl\u0131 bir \u015fekilde gitmek m\u00fcmk\u00fcnd\u00fcr. Bu linkler genellikle bir web sayfas\u0131n\u0131n \u015fu b\u00f6l\u00fcmlerine gitmek i\u00e7in kullan\u0131l\u0131r:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Ana men\u00fcye gitmek i\u00e7in<\/li><li>\u0130kincil men\u00fcye gitmek i\u00e7in<\/li><li>Ana i\u00e7eri\u011fe gitmek i\u00e7in<\/li><li>Sayfan\u0131n \u00fcst k\u0131sm\u0131na gitmek i\u00e7in<\/li><li>Sayfan\u0131n alt k\u0131sm\u0131na gitmek i\u00e7in<\/li><\/ul>\n\n\n\n\t<br \/>\n\t<div class=\"stcnnt-yazi-ici-reklam\">\n\t<span aria-hidden=\"true\" class=\"sc-reklam-basligi text-muted\" style=\"display:block;text-align:center;\">bu bir reklamd\u0131r:<\/span>\n\t<p aria-hidden=\"true\" class=\"shadow-lg m-0 p-0\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:block; text-align:center;\"\n\t\t\t data-ad-layout=\"in-article\"\n\t\t\t data-ad-format=\"fluid\"\n\t\t\t data-ad-client=\"ca-pub-6366953309324763\"\n\t\t\t data-ad-slot=\"2001829037\"><\/ins>\n\t\t<script>\n\t\t\t (adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/p>\n\t<\/div>\n\t\n\n\n\n<p>A\u015fa\u011f\u0131da, sekme linkleri ile birlikte olu\u015fturulmu\u015f, eri\u015filebilir bir HTML sayfas\u0131 g\u00f6r\u00fcyorsunuz.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u2026\n&lt;body>\n  &lt;ul class=\"skip-linkleri\">\n     &lt;li>&lt;a href=\"#ana-menu\">&lt;\/a>Ana men\u00fcye git&lt;\/li>\n     &lt;li>&lt;a href=\"#ikincil-menu\">&lt;\/a>\u0130kincil men\u00fcye git&lt;\/li>\n     &lt;li>&lt;a href=\"#icerik\">&lt;\/a>\u0130\u00e7eri\u011fe git&lt;\/li>\n     &lt;li>&lt;a href=\"#sayfa-alti\">&lt;\/a>Sayfan\u0131n alt\u0131na git&lt;\/li>\n  &lt;\/ul>\n  &lt;header id=\"sayfa-ustu\">\n    &lt;h1>Bemin \u015eirketim \u015eti.&lt;\/h1>\n  &lt;\/header>\n  &lt;nav id=\"ana-menu\" aria-labelledby=\"anamenuheader\">\n    &lt;h2 id=\"anamenuheader\">Ana Menu&lt;\/h2>\n    \u2026\n  &lt;\/nav>\n  &lt;main id=\"icerik\">\n    &lt;article>\n      &lt;h2>Makalenin Ba\u015fl\u0131\u011f\u0131&lt;\/h2>\n      &lt;nav id=\"ikincil-menu\" aria-labelledby=\"tocheader\">\n        &lt;h3 id=\"tocheader\">\u0130\u00e7erikler Tablosu&lt;\/h3>\n        \u2026\n      &lt;\/nav>\n      &lt;p>\u2026&lt;\/p>\n      &lt;p>\u2026&lt;\/p>\n      &lt;p>\u2026&lt;\/p>\n      &lt;ul>\n        &lt;li>\u2026&lt;\/li>\n        &lt;li>\u2026&lt;\/li>\n        &lt;li>\u2026&lt;\/li>\n      &lt;\/ul>\n      &lt;h3>Alt Ba\u015fl\u0131k&lt;\/h3>\n      &lt;p>\u2026&lt;\/p>\n      &lt;p>\u2026&lt;\/p>\n      &lt;aside aria-labelledby=\"relatedheader\">\n        &lt;h3 id=\"relatedheader\">Bunlar da \u0130lginizi \u00c7ekebilir&lt;\/h3>\n        &lt;ul>\n          &lt;li>&lt;a href=\"#\">\u2026&lt;\/a>&lt;\/li>\n          &lt;li>&lt;a href=\"#\">\u2026&lt;\/a>&lt;\/li>\n          &lt;li>&lt;a href=\"#\">\u2026&lt;\/a>&lt;\/li>\n        &lt;\/ul>\n      &lt;\/aside>\n    &lt;\/article>\n    &lt;aside aria-labelledby=\"latestheader\">\n      &lt;h3 id=\"latestheader\">Son Eklenenlar&lt;\/h3>\n      &lt;ul>\n        &lt;li>&lt;a href=\"#\">\u2026&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">\u2026&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">\u2026&lt;\/a>&lt;\/li>\n      &lt;\/ul>\n    &lt;\/aside>\n  &lt;\/main>\n  &lt;footer id=\"sayfa-alti\">\n    &lt;p>\n      \u00a9 Benim \u015eirketim \u015eti. - \n      &lt;a class=\"sayfa-ustune-git\" href=\"#sayfa-ustu\">Yukar\u0131 git&lt;\/a>\n    &lt;\/p>\n  &lt;\/footer>\n&lt;\/body>\n\u2026<\/code><\/pre>\n\n\n\n<p>Sekme linklerinin, sadece ekran okuyucular veya klavyeler i\u00e7in g\u00f6r\u00fcnmesini istiyorsan\u0131z, CSS kullanarak, bu linkleri sayfan\u0131n normal s\u0131n\u0131rlar\u0131n\u0131n d\u0131\u015f\u0131na itebilirsiniz. Yukar\u0131daki \u00f6rnek sayfada, CSS s\u0131n\u0131f\u0131 <code>class=\"skip-linkleri\"<\/code> olan sekmeleri, sayfa d\u0131\u015f\u0131na itmek ve klavye ile eri\u015filebilir yapmak i\u00e7in \u015fu CSS kodlar\u0131n\u0131 kullanabiliriz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.skip-linkleri {\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n}\n.skip-linkleri a {\n  position: absolute;\n  top: -3em;\n  background-color: #000;\n  color: #fff;\n  font-weight: bold;\n  text-decoration: none;\n}\n.skip-linkleri a:focus {\n  top: 0;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"4_Linkler\">4. Linkler<\/span><\/h3>\n\n\n\n<p>Eri\u015filebilir bir temada, linklerin ta\u015f\u0131mas\u0131 gereken \u00f6zellikler \u015f\u00f6yle s\u0131ralanabilir:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"I_8211_Link_Textleri\">I &#8211; Link Textleri<\/span><\/h4>\n\n\n\n<p>Link textleri g\u00f6t\u00fcrecekleri sayfa hakk\u0131nda bilgi vermelidir. Baz\u0131 yard\u0131mc\u0131 teknolojiler, sayfadaki linkleri tararlar ve bir liste halinde kullan\u0131c\u0131s\u0131na sunarlar. Bu y\u00fczden, k\u0131s\u0131tl\u0131 kullan\u0131c\u0131n\u0131n anlayabilece\u011fi \u015fekilde, linkler i\u00e7in kullan\u0131lan textlerin link ile ilgili anlaml\u0131 bir bilgi vermesi \u00f6nemlidir. A\u015fa\u011f\u0131da, bir yaz\u0131n\u0131n devam\u0131n\u0131 okumak i\u00e7in olu\u015fturulan eri\u015filebilir link \u00f6rnekleri verilmi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php the_content( the_title('', '', false) . __('Okumaya devam et', 'text_domain') ); ?><\/code><\/pre>\n\n\n\n<p>Yukar\u0131da verilen kod, \u015f\u00f6yle bir ba\u011flant\u0131 olu\u015fturacakt\u0131r (Yaz\u0131n\u0131n ad\u0131n\u0131n &#8220;<em>Benim G\u00fczel Yaz\u0131m<\/em>&#8221; oldu\u011funu farzediyoruz):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/sitecenneti.com\/...\" class=\"more-link\">Benim G\u00fczel yaz\u0131m okumaya devam et\u00e7.\u00e7.&lt;\/a><\/code><\/pre>\n\n\n\n<p>Ba\u015fka bir okumaya devam et ba\u011flant\u0131s\u0131 \u00f6rne\u011fi:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\nthe_content( sprintf( __('%1$s%2$s%3$s devam\u0131n\u0131 g\u00f6r', 'text_domain'), '&lt;span>', get_the_title(), '&lt;\/span>') );\n?><\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki kod, a\u015fa\u011f\u0131daki HTML kodunu olu\u015fturacakt\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/sitecenneti.com\/....\" class=\"more-link\">&lt;span>Benim G\u00fczel Yaz\u0131m&lt;\/span> devam\u0131n\u0131 g\u00f6r&lt;\/a><\/code><\/pre>\n\n\n\n<p>Verilen \u00f6rneklerde, devam\u0131n\u0131 okumak i\u00e7in olu\u015fturulan linklerin textleri, yaz\u0131n\u0131n ba\u015fl\u0131\u011f\u0131n\u0131 da i\u00e7ermektedir. Bu y\u00fczden, bir ekran okuyucusu kullan\u0131c\u0131s\u0131, bu linke gitti\u011finde kar\u015f\u0131s\u0131na ne \u00e7\u0131kaca\u011f\u0131n\u0131 bilecektir.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"II_8211_Linki_Vurgulama\">II &#8211; Linki Vurgulama<\/span><\/h4>\n\n\n\n<p>Opera haricindeki di\u011fer web taray\u0131c\u0131lar\u0131n varsay\u0131lan link vurgular\u0131 olduk\u00e7a kullan\u0131\u015fs\u0131zd\u0131r. Bu y\u00fczden, klavye arac\u0131l\u0131\u011f\u0131yla bir sayfadaki linklerin aras\u0131nda gezinirken kaybolma ihtimali y\u00fcksektir. Bunun \u00f6n\u00fcne ge\u00e7mek, linkler i\u00e7in <code>a:focus<\/code> ve <code>a:active<\/code> s\u0131n\u0131flar\u0131 kullanarak belirgin stiller olu\u015fturmak kadar kolayd\u0131r.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"III_8211_Linklerin_Altini_Cizmek\">III &#8211; Linklerin Alt\u0131n\u0131 \u00c7izmek<\/span><\/h4>\n\n\n\n<p>Genel olarak, men\u00fclerde bulunanlar\u0131n haricindeki linklerin alt\u0131n\u0131n \u00e7izilmesi gerekti\u011fi bilinir. Linkler i\u00e7in farkl\u0131 renkler kullanmak, her zaman i\u015fe yarayan bir yol de\u011fildir. \u00c7\u00fcnk\u00fc, kulland\u0131\u011f\u0131m\u0131z renkten ya da ziyaret\u00e7inin k\u0131s\u0131tl\u0131 olmas\u0131ndan dolay\u0131, linklere verdi\u011fimiz renkler farkedilemeyebilir. Bu y\u00fczden alt\u0131 \u00e7izili linkler olu\u015fturmak linklerinizi daha eri\u015filebilir yapacakt\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"5_Formlar\">5. Formlar<\/span><\/h3>\n\n\n\n<p>Ekran okuyucular, ekranda bir HTML <code>&lt;form&gt;<\/code> eleman\u0131 ile kar\u015f\u0131la\u015ft\u0131\u011f\u0131nda, otomatik olarak, okuma modundan etkile\u015fim moduna (interaktif mod) ge\u00e7erler. Bu durumda, <code>&lt;input&gt;<\/code> alanlar\u0131m\u0131z i\u00e7in girdi\u011fimiz a\u00e7\u0131klamalar \u00f6nem kazanmaktad\u0131r. \u00c7\u00fcnk\u00fc ekran okuyucu kullan\u0131c\u0131s\u0131, bu formu bu a\u00e7\u0131klamalara g\u00f6re dolduracakt\u0131r.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"I_8211_Label_Elemani\">I &#8211; Label Eleman\u0131<\/span><\/h4>\n\n\n\n<p>Bir <code>&lt;input&gt;<\/code> al\u0131n\u0131n a\u00e7\u0131klamas\u0131n\u0131, HTML paragraf elaman\u0131 (<code>&lt;p&gt;..&lt;\/p&gt;<\/code>) ile yapt\u0131ysak, ekran okuyucu bu a\u00e7\u0131klaman\u0131n hangi <code>input<\/code> alan\u0131na ait oldu\u011funu anlayamayacak ve g\u00f6rmezden gelecektir.  Bu y\u00fczden, formlar\u0131m\u0131zdaki <code>&lt;input&gt;<\/code> alanlar\u0131m\u0131z hakk\u0131nda bilgi vermek i\u00e7in <code>&lt;label&gt;<\/code> elaman\u0131 kullanmam\u0131z gerekmektedir.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131da <code>label<\/code> etiketi ile birlikte <code>input<\/code> kullan\u0131m\u0131na bir \u00f6rnek verilmi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;label for=\"adiniz\">Ad\u0131n\u0131z\u0131 giriniz:&lt;\/label>\n&lt;input type=\"text\" name=\"adiniz\" id=\"adiniz\">&lt;br>\n\n&lt;input type=\"checkbox\" name=\"uyeol\" id=\"uyeol\">\n&lt;label for=\"uyeol\">Beni haberdar et&lt;\/label><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Label_Textini_Saklama\">Label Textini Saklama<\/span><\/h4>\n\n\n\n<p>Baz\u0131 durumlarda, <code>&lt;input&gt;<\/code> eleman\u0131n\u0131n g\u00f6revi herkes i\u00e7in olduk\u00e7a a\u00e7\u0131kt\u0131r ve ekstra bir a\u00e7\u0131klamaya yani bir <code>&lt;label&gt;<\/code> eleman\u0131na ihtiya\u00e7 kalmaz. Bu durumda, yapmam\u0131z gereken, ekran okuyucu ya da seslendiricisi kullananlar i\u00e7in, <code>&lt;input&gt;<\/code> alan\u0131m\u0131z\u0131 a\u00e7\u0131klamak fakat bunu normal kullan\u0131c\u0131lar\u0131n g\u00f6rmeyece\u011fi \u015fekilde yapmak yani <code>&lt;label&gt;<\/code> etiketini saklamakt\u0131r.<\/p>\n\n\n\n<p>Bir <code>&lt;label&gt;<\/code> eleman\u0131n\u0131 saklaman\u0131n farkl\u0131 y\u00f6ntemleri vard\u0131r. Bu y\u00f6ntemler \u015funlard\u0131r:<\/p>\n\n\n\n<p><strong>Y\u00f6ntem 1<\/strong>:  CSS kullanarak saklayabiliriz. \u00d6rne\u011fe dikkat edelim:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;label for=\"ara\" class=\"sakla\">Ara: &lt;\/label>\n&lt;input type=\"text\" name=\"ara\" id=\"ara\">\n&lt;button type=\"submit\">Ara&lt;\/button><\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki \u00f6rnekte, <code>&lt;label&gt;<\/code> etiketinin sahip oldu\u011fu <code>\"sakla\"<\/code> s\u0131n\u0131f\u0131n\u0131n CSS yap\u0131s\u0131 \u015f\u00f6yledir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.sakla {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}<\/code><\/pre>\n\n\n\n<p class=\"sc-dikkat\">Ekran okuyucu teknolojiler de t\u0131pk\u0131 web taray\u0131c\u0131lar gibi, <code>display: none;<\/code>&nbsp;ve <code>visibility: hidden;<\/code> \u015feklinde saklanm\u0131\u015f HTML elemanlar\u0131n\u0131 g\u00f6rmezden gelirler.<\/p>\n\n\n\n<p><strong>Y\u00f6ntem 2<\/strong>: <strong>aria-label<\/strong> \u00f6zelli\u011fi kullanabiliriz.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input type=\"text\" name=\"ara\" aria-label=\"Ara\">\n&lt;button type=\"submit\">Ara&lt;\/button><\/code><\/pre>\n\n\n\n<p><strong>Y\u00f6ntem <\/strong>3: <strong>aria-labelledby<\/strong> \u00f6zelli\u011fi kullanabiliriz.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input type=\"text\" name=\"ara\" aria-labelledby=\"aramabutonu\">\n&lt;button id=\"aramabutonu\" type=\"submit\">Ara&lt;\/button><\/code><\/pre>\n\n\n\n<p><strong>Y\u00f6ntem  4<\/strong>: <strong>title<\/strong> \u00f6zelli\u011fi kullanabiliriz.<\/p>\n\n\n\n<p>Tavsiye edilen bir yol olmasa da, <code>title<\/code> \u00f6zelli\u011fi, <code>&lt;input&gt;<\/code> alan\u0131n\u0131n ne i\u015fe yarad\u0131\u011f\u0131n\u0131 ifade edebilir.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input title=\"Ara\" type=\"text\" name=\"ara\">\n&lt;button type=\"submit\">Ara&lt;\/button><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Label_Elemani_ile_Sarma\">Label Eleman\u0131 ile Sarma<\/span><\/h4>\n\n\n\n<p>Bazen <code>&lt;input&gt;<\/code> eleman\u0131n <code>id<\/code> de\u011feri belli de\u011fildir. Bu durumlarda, eri\u015filebilirli\u011fi korumak i\u00e7in, <code>&lt;input&gt;<\/code> eleman\u0131n\u0131, <code>&lt;label&gt;<\/code> eleman\u0131 i\u00e7ine alabilirsiniz. A\u015fa\u011f\u0131da bunun \u00f6rne\u011fi verilmi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;label>\n  Ad\u0131n\u0131z:\n  &lt;input type=\"text\" name=\"adi\">\n&lt;\/label>\n&lt;br>\n&lt;label>\n  &lt;input type=\"checkbox\" name=\"aboneol\">\n  Gazetemize abone olun.\n&lt;\/label><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Butonlar\">Butonlar<\/span><\/h4>\n\n\n\n<p>Butonlar veya buton g\u00f6revi g\u00f6ren <code>&lt;input&gt;<\/code> elemanlar\u0131, ne i\u015fe yarad\u0131klar\u0131na dair a\u00e7\u0131klamalar\u0131, zaten kendi i\u00e7lerinde bar\u0131nd\u0131r\u0131rlar. A\u015fa\u011f\u0131da, bu durum g\u00f6sterilmi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;button type=\"submit\">G\u00f6nder&lt;\/button>\n&lt;button type=\"button\">\u0130ptel et&lt;\/button>\n\n&lt;input type=\"submit\" value=\"G\u00f6nder\">\n&lt;input type=\"button\" value=\"\u0130ptal et\"><\/code><\/pre>\n\n\n\n<p>E\u011feri <code>type=\"image\"<\/code> (resim) tipinde bir <code>&lt;input&gt;<\/code> eleman\u0131 kullan\u0131yorsak, bu butonun g\u00f6revini <code>alt<\/code> \u00f6zelli\u011fi ile belirtebiliriz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input type=\"image\" src=\"aramabutonu.png\" alt=\"Ara\"><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Label_Textinin_Yerlesimi\">Label Textinin Yerle\u015fimi<\/span><\/h4>\n\n\n\n<p><code>&lt;radio&gt;<\/code> ve <code>&lt;checkbox&gt;<\/code> tipindeki form elemanlar\u0131na ait <code>&lt;label&gt;<\/code> textlerinin, bu form elemanlar\u0131na g\u00f6re sa\u011fda bulunmas\u0131, bu ikisi d\u0131\u015f\u0131ndaki form elemanlar\u0131n\u0131n <code>&lt;label&gt;<\/code> textlerinin ise \u00fcstlerinde veya sol taraflar\u0131nda bulunmas\u0131 tavsiye edilir. Bu yerle\u015fim, form elemanlar\u0131m\u0131z\u0131n anla\u015f\u0131l\u0131rl\u0131\u011f\u0131n\u0131 artt\u0131racakt\u0131r.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"II_8211_Form_Elemanlarini_Gruplama\">II &#8211; Form Elemanlar\u0131n\u0131 Gruplama<\/span><\/h4>\n\n\n\n<p>Belli bir bilgi i\u00e7in olu\u015fturulmu\u015f form alanlar\u0131n\u0131 gruplamak, kullan\u0131c\u0131n\u0131n formu daha kolay anlamas\u0131n\u0131 sa\u011flar. Form alanlar\u0131n\u0131 gruplamak i\u00e7in, <code>&lt;fieldset&gt;<\/code>, <code>&lt;legend&gt;<\/code>, <code>&lt;optgroup&gt;<\/code> gibi HTML elemanlar\u0131 kullan\u0131l\u0131r. A\u015fa\u011f\u0131da bu elemanlar\u0131n, eri\u015filebilir olarak kullan\u0131m\u0131na \u00f6rnekler verilmi\u015ftir.<\/p>\n\n\n\n<p><strong>\u00d6rnek &#8211; 1:<\/strong> <code>type=\"radio\"<\/code> tipindeki butonlar\u0131n grupland\u0131r\u0131lmas\u0131na bir \u00f6rnektir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;fieldset>\n&lt;legend>Dosya Format\u0131 Se\u00e7iniz&lt;\/legend>\n  &lt;div>\n    &lt;input type=\"radio\" name=\"format\" id=\"txt\" value=\"txt\" checked>\n    &lt;label for=\"txt\">Text dosyas\u0131&lt;\/label>\n  &lt;\/div>\n  &lt;div>\n    &lt;input type=\"radio\" name=\"format\" id=\"csv\" value=\"csv\">\n    &lt;label for=\"csv\">CSV dosyas\u0131&lt;\/label>\n  &lt;\/div>\n  &lt;div>\n    &lt;input type=\"radio\" name=\"format\" id=\"html\" value=\"html\">\n    &lt;label for=\"csv\">HTML dosyas\u0131&lt;\/label>\n  &lt;\/div>\n&lt;\/fieldset><\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki kod, \u015f\u00f6yle bir form alan\u0131 olu\u015fturur:<\/p>\n\n\n\n<fieldset>\n<legend>Dosya Format\u0131 Se\u00e7iniz<\/legend>\n  <div>\n    <input type=\"radio\" name=\"format\" id=\"txt\" value=\"txt\" checked=\"\">\n    <label for=\"txt\">Text dosyas\u0131<\/label>\n  <\/div>\n  <div>\n    <input type=\"radio\" name=\"format\" id=\"csv\" value=\"csv\">\n    <label for=\"csv\">CSV dosyas\u0131<\/label>\n  <\/div>\n  <div>\n    <input type=\"radio\" name=\"format\" id=\"html\" value=\"html\">\n    <label for=\"csv\">HTML dosyas\u0131<\/label>\n  <\/div>\n<\/fieldset>\n\n\n\n<p><strong>\u00d6rnek &#8211; 2:<\/strong> <code>type=\"checkbox\"<\/code> tipindeki alanlar\u0131n\u0131n grupland\u0131r\u0131lmas\u0131na bir \u00f6rnektir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;fieldset>\n   &lt;legend>\u015eunlar\u0131 sat\u0131n almak istiyorum:&lt;\/legend>\n\t&lt;div>\n\t\t&lt;input type=\"checkbox\" name=\"hosting\" id=\"check_1\">\n    &lt;label for=\"check_1\">Hosting&lt;\/label>\n\t&lt;\/div>\n        &lt;div>\n\t\t&lt;input type=\"checkbox\" name=\"domain\" id=\"check_2\">\n    &lt;label for=\"check_1\">Domain&lt;\/label>\n\t&lt;\/div>\n        &lt;div>\n\t\t&lt;input type=\"checkbox\" name=\"ssl\" id=\"check_3\">\n    &lt;label for=\"check_1\">SSL sertifikas\u0131&lt;\/label>\n\t&lt;\/div>\t\n&lt;\/fieldset><\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki kod, \u015f\u00f6yle bir form alan\u0131 olu\u015fturur:<\/p>\n\n\n\n<fieldset>\n   <legend>\u015eunlar\u0131 sat\u0131n almak istiyorum:<\/legend>\n\t<div>\n\t\t<input type=\"checkbox\" name=\"hosting\" id=\"check_1\">\n    <label for=\"check_1\">Hosting<\/label>\n\t<\/div>\n        <div>\n\t\t<input type=\"checkbox\" name=\"domain\" id=\"check_2\">\n    <label for=\"check_1\">Domain<\/label>\n\t<\/div>\n        <div>\n\t\t<input type=\"checkbox\" name=\"ssl\" id=\"check_3\">\n    <label for=\"check_1\">SSL sertifikas\u0131<\/label>\n\t<\/div>\t\n<\/fieldset>\n\n\n\n<p><strong>\u00d6rnek &#8211; 3:<\/strong> Birbiri ile ba\u011flant\u0131l\u0131 alanlar\u0131n\u0131n grupland\u0131r\u0131lmas\u0131na bir \u00f6rnektir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;fieldset style=\"float: left;\">\n\t\t&lt;legend>Kargo Adresi:&lt;\/legend>\n\t\t&lt;div>\n\t\t\t&lt;label for=\"kargo_adi\">&lt;span class=\"sakla\">Kargo &lt;\/span>Ad\u0131:&lt;\/label>&lt;br>\n\t\t\t&lt;input type=\"text\" name=\"kargo_adi\" id=\"kargo_adi\">\n\t\t&lt;\/div>\n\t\t&lt;div>\n\t\t\t&lt;label for=\"cadde\">Cadde:&lt;\/label>&lt;br>\n\t\t\t&lt;input type=\"text\" name=\"cadde\" id=\"cadde\">\n\t\t&lt;\/div>\n\t\t&lt;div>\n\t\t\t&lt;label for=\"no\">Numara:&lt;\/label>&lt;br>\n\t\t\t&lt;input type=\"text\" name=\"no\" id=\"no\">\n\t\t&lt;\/div>\n\t\t&lt;div>\n\t\t\t&lt;label for=\"sehir\">\u015eehir:&lt;\/label>&lt;br>\n\t\t\t&lt;input type=\"text\" name=\"sehir\" id=\"sehir\">\n\t\t&lt;\/div>\n\t\t&lt;div>\n\t\t\t&lt;label for=\"posta_kodu\">Posta kodu:&lt;\/label>&lt;br>\n\t\t\t&lt;input type=\"text\" name=\"posta_kodu\" id=\"posta_kodu\">\n\t\t\t&lt;\/div>\n\t&lt;\/fieldset>\n\t&lt;fieldset style=\"float: left;\">\n\t\t&lt;legend>Fatura Adresi:&lt;\/legend>\n\t\t&lt;div>\n\t\t\t&lt;label for=\"fatura_adi\">&lt;span class=\"sakla\">Fatura &lt;\/span>Ad\u0131:&lt;\/label>&lt;br>\n\t\t\t&lt;input type=\"text\" name=\"fatura_adi\" id=\"fatura_adi\">\n\t\t&lt;\/div>\n\t\t&lt;div>\n\t\t\t&lt;label for=\"fatura_caddesi\">Cadde:&lt;\/label>&lt;br>\n\t\t\t&lt;input type=\"text\" name=\"fatura_caddesi\" id=\"fatura_caddesi\">\n\t\t&lt;\/div>\n\t\t&lt;div>\n\t\t\t&lt;label for=\"fatura_no\">No:&lt;\/label>&lt;br>\n\t\t\t&lt;input type=\"text\" name=\"fatura_no\" id=\"fatura_no\">\n\t\t&lt;\/div>\n\t\t&lt;div>\n\t\t\t&lt;label for=\"fatura_sehir\">\u015eehir:&lt;\/label>&lt;br>\n\t\t\t&lt;input type=\"text\" name=\"fatura_sehir\" id=\"fatura_sehir\">\n\t\t&lt;\/div>\n\t\t&lt;div>\n\t\t\t&lt;label for=\"fatura_posta_kodu\">Posta kodu:&lt;\/label>&lt;br>\n\t\t\t&lt;input type=\"text\" name=\"fatura_posta_kodu\" id=\"fatura_posta_kodu\">\n\t\t&lt;\/div>\n\t&lt;\/fieldset><\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki kod, \u015f\u00f6yle bir form alan\u0131 olu\u015fturur:<\/p>\n\n\n\n<br>\n<fieldset style=\"float:left;display:block;widht:100%;\">\n\t\t<legend>Kargo Adresi:<\/legend>\n\t\t<div>\n\t\t\t<label for=\"kargo_adi\"><span class=\"visuallyhidden\">Kargo <\/span>Ad\u0131:<\/label><br>\n\t\t\t<input type=\"text\" name=\"kargo_adi\" id=\"kargo_adi\">\n\t\t<\/div>\n\t\t<div>\n\t\t\t<label for=\"cadde\">Cadde:<\/label><br>\n\t\t\t<input type=\"text\" name=\"cadde\" id=\"cadde\">\n\t\t<\/div>\n\t\t<div>\n\t\t\t<label for=\"no\">Numara:<\/label><br>\n\t\t\t<input type=\"text\" name=\"no\" id=\"no\">\n\t\t<\/div>\n\t\t<div>\n\t\t\t<label for=\"sehir\">\u015eehir:<\/label><br>\n\t\t\t<input type=\"text\" name=\"sehir\" id=\"sehir\">\n\t\t<\/div>\n\t\t<div>\n\t\t\t<label for=\"posta_kodu\">Posta kodu:<\/label><br>\n\t\t\t<input type=\"text\" name=\"posta_kodu\" id=\"posta_kodu\">\n\t\t\t<\/div>\n\t<\/fieldset>\n\t<fieldset style=\"float: left;\">\n\t\t<legend>Fatura Adresi:<\/legend>\n\t\t<div>\n\t\t\t<label for=\"fatura_adi\"><span class=\"visuallyhidden\">Fatura <\/span>Ad\u0131:<\/label><br>\n\t\t\t<input type=\"text\" name=\"fatura_adi\" id=\"fatura_adi\">\n\t\t<\/div>\n\t\t<div>\n\t\t\t<label for=\"fatura_caddesi\">Cadde:<\/label><br>\n\t\t\t<input type=\"text\" name=\"fatura_caddesi\" id=\"fatura_caddesi\">\n\t\t<\/div>\n\t\t<div>\n\t\t\t<label for=\"fatura_no\">No:<\/label><br>\n\t\t\t<input type=\"text\" name=\"fatura_no\" id=\"fatura_no\">\n\t\t<\/div>\n\t\t<div>\n\t\t\t<label for=\"fatura_sehir\">\u015eehir:<\/label><br>\n\t\t\t<input type=\"text\" name=\"fatura_sehir\" id=\"fatura_sehir\">\n\t\t<\/div>\n\t\t<div>\n\t\t\t<label for=\"fatura_posta_kodu\">Posta kodu:<\/label><br>\n\t\t\t<input type=\"text\" name=\"fatura_posta_kodu\" id=\"fatura_posta_kodu\">\n\t\t<\/div>\n\t<\/fieldset>\n<br style=\"clear: left;\">\n<br>\n\n\n\n<p><strong>\u00d6rnek &#8211; 4:<\/strong> <code>role=\"group\"<\/code> ve <code>aria-labelledby=\"...\"<\/code> \u00f6zellikleri kullan\u0131larak, ba\u011flant\u0131l\u0131 form alanlar\u0131n\u0131n grupland\u0131r\u0131lmas\u0131na bir \u00f6rnektir:<\/p>\n\n\n\n\t<br \/>\n\t<div class=\"stcnnt-yazi-ici-reklam\">\n\t<span aria-hidden=\"true\" class=\"sc-reklam-basligi text-muted\" style=\"display:block;text-align:center;\">bu bir reklamd\u0131r:<\/span>\n\t<p aria-hidden=\"true\" class=\"shadow-lg m-0 p-0\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:block; text-align:center;\"\n\t\t\t data-ad-layout=\"in-article\"\n\t\t\t data-ad-format=\"fluid\"\n\t\t\t data-ad-client=\"ca-pub-6366953309324763\"\n\t\t\t data-ad-slot=\"2001829037\"><\/ins>\n\t\t<script>\n\t\t\t (adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/p>\n\t<\/div>\n\t\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div role=\"group\" aria-labelledby=\"kargo_basligi\" style=\"float: left;\">\n\t\t&lt;div id=\"kargo_basligi\">Kargo Adresi:&lt;\/div>\n\t\t&lt;div>\n\t\t\t&lt;label for=\"kargo_adi\">&lt;span class=\"sakla\">Kargo &lt;\/span>Ad\u0131:&lt;\/label>&lt;br>\n\t\t\t&lt;input type=\"text\" name=\"kargo_adi\" id=\"kargo_adi\">\n\t\t&lt;\/div>\n\t\t&lt;div>\n\t\t\t&lt;label for=\"cadde\">Cadde:&lt;\/label>&lt;br>\n\t\t\t&lt;input type=\"text\" name=\"cadde\" id=\"cadde\">\n\t\t&lt;\/div>\n\t\t&lt;div>\n\t\t\t&lt;label for=\"no\">Numara:&lt;\/label>&lt;br>\n\t\t\t&lt;input type=\"text\" name=\"no\" id=\"no\">\n\t\t&lt;\/div>\n\t\t&lt;div>\n\t\t\t&lt;label for=\"sehir\">\u015eehir:&lt;\/label>&lt;br>\n\t\t\t&lt;input type=\"text\" name=\"sehir\" id=\"sehir\">\n\t\t&lt;\/div>\n\t\t&lt;div>\n\t\t\t&lt;label for=\"posta_kodu\">Posta kodu:&lt;\/label>&lt;br>\n\t\t\t&lt;input type=\"text\" name=\"posta_kodu\" id=\"posta_kodu\">\n\t\t&lt;\/div>\n\t&lt;\/div>\n\t&lt;div role=\"group\" aria-labelledby=\"fatura_basligi\" style=\"float: left;\">\n\t\t&lt;div id=\"fatura_basligi\">Fatura Adresi:&lt;\/div>\n\t\t&lt;div>\n\t\t\t&lt;label for=\"fatura_adi\">&lt;span class=\"sakla\">Fatura &lt;\/span>Ad\u0131:&lt;\/label>&lt;br>\n\t\t\t&lt;input type=\"text\" name=\"fatura_adi\" id=\"fatura_adi\">\n\t\t&lt;\/div>\n\t\t&lt;div>\n\t\t\t&lt;label for=\"fatura_caddesi\">Cadde:&lt;\/label>&lt;br>\n\t\t\t&lt;input type=\"text\" name=\"fatura_caddesi\" id=\"fatura_caddesi\">\n\t\t&lt;\/div>\n\t\t&lt;div>\n\t\t\t&lt;label for=\"fatura_no\">No:&lt;\/label>&lt;br>\n\t\t\t&lt;input type=\"text\" name=\"fatura_no\" id=\"fatura_no\">\n\t\t&lt;\/div>\n\t\t&lt;div>\n\t\t\t&lt;label for=\"fatura_sehir\">\u015eehir:&lt;\/label>&lt;br>\n\t\t\t&lt;input type=\"text\" name=\"fatura_sehir\" id=\"fatura_sehir\">\n\t\t&lt;\/div>\n\t\t&lt;div>\n\t\t\t&lt;label for=\"fatura_posta_kodu\">Posta kodu:&lt;\/label>&lt;br>\n\t\t\t&lt;input type=\"text\" name=\"fatura_posta_kodu\" id=\"fatura_posta_kodu\">\n\t\t&lt;\/div>\n\t&lt;\/div><\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki kod, \u015f\u00f6yle bir form alan\u0131 olu\u015fturur:<\/p>\n\n\n\n<br>\n<div role=\"group\" aria-labelledby=\"kargo_basligi\" style=\"float: left; margin-right:20px;display:block;widht:100%;\">\n\t\t<div id=\"kargo_basligi\">Kargo Adresi<\/div>\n\t\t<div>\n\t\t\t<label for=\"kargo_adi\"><span class=\"sakla\">Kargo <\/span>Ad\u0131:<\/label><br>\n\t\t\t<input type=\"text\" name=\"kargo_adi\" id=\"kargo_adi\">\n\t\t<\/div>\n\t\t<div>\n\t\t\t<label for=\"cadde\">Cadde:<\/label><br>\n\t\t\t<input type=\"text\" name=\"cadde\" id=\"cadde\">\n\t\t<\/div>\n\t\t<div>\n\t\t\t<label for=\"no\">Numara:<\/label><br>\n\t\t\t<input type=\"text\" name=\"no\" id=\"no\">\n\t\t<\/div>\n\t\t<div>\n\t\t\t<label for=\"sehir\">\u015eehir:<\/label><br>\n\t\t\t<input type=\"text\" name=\"sehir\" id=\"sehir\">\n\t\t<\/div>\n\t\t<div>\n\t\t\t<label for=\"posta_kodu\">Posta kodu:<\/label><br>\n\t\t\t<input type=\"text\" name=\"posta_kodu\" id=\"posta_kodu\">\n\t\t<\/div>\n\t<\/div>\n\t<div role=\"group\" aria-labelledby=\"fatura_basligi\" style=\"float: left;\">\n\t\t<div id=\"fatura_basligi\">Fatura Adresi<\/div>\n\t\t<div>\n\t\t\t<label for=\"fatura_adi\"><span class=\"sakla\">Fatura <\/span>Ad\u0131:<\/label><br>\n\t\t\t<input type=\"text\" name=\"fatura_adi\" id=\"fatura_adi\">\n\t\t<\/div>\n\t\t<div>\n\t\t\t<label for=\"fatura_caddesi\">Cadde:<\/label><br>\n\t\t\t<input type=\"text\" name=\"fatura_caddesi\" id=\"fatura_caddesi\">\n\t\t<\/div>\n\t\t<div>\n\t\t\t<label for=\"fatura_no\">No:<\/label><br>\n\t\t\t<input type=\"text\" name=\"fatura_no\" id=\"fatura_no\">\n\t\t<\/div>\n\t\t<div>\n\t\t\t<label for=\"fatura_sehir\">\u015eehir:<\/label><br>\n\t\t\t<input type=\"text\" name=\"fatura_sehir\" id=\"fatura_sehir\">\n\t\t<\/div>\n\t\t<div>\n\t\t\t<label for=\"fatura_posta_kodu\">Posta kodu:<\/label><br>\n\t\t\t<input type=\"text\" name=\"fatura_posta_kodu\" id=\"fatura_posta_kodu\">\n\t\t<\/div>\n\t<\/div>\n<br style=\"clear: left;\">\n<br>\n\n\n\n<p><strong>\u00d6rnek &#8211; 5:<\/strong> <code>&lt;optgroup&gt;<\/code> eleman\u0131 kullan\u0131larak, ba\u011flant\u0131l\u0131 form alanlar\u0131n\u0131n grupland\u0131r\u0131lmas\u0131na bir \u00f6rnektir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;select name=\"elementler\" id=\"elementler\">\n\t&lt;optgroup label=\"Metaller\">\n\t\t&lt;option value=\"alkali\">Alkali metaller&lt;\/option>\n\t\t&lt;option value=\"toprak_alkali\">Toprak alkali metaller&lt;\/option>\n\t\t&lt;option value=\"toprak\">Toprak metalleri&lt;\/option>\n\t&lt;\/optgroup>\n\t&lt;optgroup label=\"Ametaller\">\n\t\t&lt;option value=\"halojen\">Halojenler&lt;\/option>\n\t\t&lt;option value=\"kalkojen\">Kalkojenler&lt;\/option>\n\t\t&lt;option value=\"azot\">Azot grubu&lt;\/option>\n\t&lt;\/optgroup>\n\t&lt;optgroup label=\"Soygazlar\">\n\t\t&lt;option value=\"helyum\">Helyum&lt;\/option>\n\t\t&lt;option value=\"neon\">Neon&lt;\/option>\n\t\t&lt;option value=\"argon\">Argon&lt;\/option>\n\t&lt;\/optgroup>\n&lt;\/select>\n&lt;input type=\"submit\" value=\"Se\u00e7\" \/><\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki kod, \u015f\u00f6yle bir form alan\u0131 olu\u015fturur:<\/p>\n\n\n\n<select name=\"elementler\" id=\"elementler\">\n\t<optgroup label=\"Metaller\">\n\t\t<option value=\"alkali\">Alkali metaller<\/option>\n\t\t<option value=\"toprak_alkali\">Toprak alkali metaller<\/option>\n\t\t<option value=\"toprak\">Toprak metalleri<\/option>\n\t<\/optgroup>\n\t<optgroup label=\"Ametaller\">\n\t\t<option value=\"halojen\">Halojenler<\/option>\n\t\t<option value=\"kalkojen\">Kalkojenler<\/option>\n\t\t<option value=\"azot\">Azot grubu<\/option>\n\t<\/optgroup>\n\t<optgroup label=\"Soygazlar\">\n\t\t<option value=\"helyum\">Helyum<\/option>\n\t\t<option value=\"neon\">Neon<\/option>\n\t\t<option value=\"argon\">Argon<\/option>\n\t<\/optgroup>\n<\/select>\n<input type=\"submit\" value=\"Se\u00e7\">\n<br>\n<br>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"III_8211_Form_Alanini_Orneklendirme\">III &#8211; Form Alan\u0131n\u0131 \u00d6rneklendirme<\/span><\/h4>\n\n\n\n<p>Form alanlar\u0131n\u0131z, belli bir formatta bilgi kabul ediyorsa, kullan\u0131c\u0131lar\u0131n\u0131z\u0131, bu formata uygun olarak veri girebilmeleri i\u00e7in, \u00f6rnekler ya da ipu\u00e7lar\u0131 vererek ayd\u0131nlatman\u0131z gerekir. Aksi taktirde, kullan\u0131c\u0131n\u0131z, istedi\u011finiz bilgiyi anlamayabilir ve formu ba\u015far\u0131 ile dolduramayabilir.<\/p>\n\n\n\n<p>Ekran okuyucular\u0131, sayfada bir <code>&lt;form&gt;<\/code> etiketi ile kar\u015f\u0131la\u015ft\u0131klar\u0131nda, hemen form moduna ge\u00e7erler. Bu modda iken sadece, <code>&lt;input&gt;<\/code>, &nbsp;<code>&lt;select&gt;<\/code>, &nbsp;<code>&lt;textarea&gt;<\/code>, &nbsp;<code>&lt;legend&gt;<\/code> ve <code>&lt;label&gt;<\/code> elemanlar\u0131n\u0131 seslendirirler. Bu y\u00fczden, <code>input<\/code> alanlar\u0131m\u0131z\u0131n do\u011fru doldurulmas\u0131 i\u00e7in verece\u011fimiz \u00f6rneklerin, bu elemanlar ile ili\u015fkili olmas\u0131 gerekmektedir. A\u015fa\u011f\u0131da bunu nas\u0131l ba\u015faraca\u011f\u0131m\u0131za dair farkl\u0131 \u00f6rnekler verilmi\u015ftir:<\/p>\n\n\n\n<p><strong>\u00d6rnek -1<\/strong>: \u0130pu\u00e7lar\u0131n\u0131, <code>label<\/code> elaman\u0131n\u0131n i\u00e7inde verebiliriz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;label for=\"skt\">Son kullan\u0131m tarihi (AA\/YYYY): &lt;\/label> &lt;input type=\"text\" name=\"skt\" id=\"skt\"><\/code><\/pre>\n\n\n\n<p><strong>\u00d6rnek -2<\/strong>: \u0130pu\u00e7lar\u0131n\u0131, <code>&lt;label&gt;<\/code> elaman\u0131n\u0131n d\u0131\u015f\u0131nda verebiliriz. Bunun i\u00e7in <code>aria-labelledby<\/code> \u00f6zelli\u011finden yard\u0131m alabiliriz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;label id=\"sktEtiketi\" for=\"skt\" tabindex=\"-1\">Son kullan\u0131m tarihi:&lt;\/label>\n&lt;span>\n\t&lt;input type=\"text\" name=\"skt\" id=\"skt\" aria-labelledby=\"sktEtiketi sktIpucu\">\n\t&lt;span id=\"sktIpucu\" tabindex=\"-1\">AA\/YYYY&lt;\/span>\n&lt;\/span><\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki form alan\u0131 sayfam\u0131zda \u015f\u00f6yle g\u00f6r\u00fcnecektir:<\/p>\n\n\n\n<label id=\"sktEtiketi\" for=\"skt\" tabindex=\"-1\">Son kullan\u0131m tarihi:<\/label>\n<span>\n\t<input type=\"text\" name=\"skt\" id=\"skt\" aria-labelledby=\"sktEtiketi sktIpucu\">\n\t<span id=\"sktIpucu\" tabindex=\"-1\">AA\/YYYY<\/span>\n<\/span>\n<br>\n\n\n\n<p><strong>\u00d6rnek -3<\/strong>: \u0130pu\u00e7lar\u0131n\u0131, <code>&lt;label&gt;<\/code> elaman\u0131n\u0131n d\u0131\u015f\u0131nda g\u00f6sterip, <code>aria-describedby<\/code> \u00f6zelli\u011finden yard\u0131m alabiliriz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;label id=\"sktEtiketi\" for=\"expire\">Son kullan\u0131m tarihi:&lt;\/label>\n&lt;span>\n\t&lt;input type=\"text\" name=\"skt\" id=\"skt\" aria-labelledby=\"sktEtiketi\" aria-describedby=\"sktIpucu\">\n\t&lt;span id=\"sktIpucu\">AA\/YYYY&lt;\/span>\n&lt;\/span><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Placeholder_Yer_tutucu_Textler\">Placeholder (Yer tutucu) Textler<\/span><\/h4>\n\n\n\n<p>Yer tutucu textler, kullan\u0131c\u0131m\u0131z <code>&lt;input&gt;<\/code> alan\u0131na t\u0131klad\u0131\u011f\u0131nda kaybolan soluk yaz\u0131lard\u0131r. Yer tutucu textler ile de, <code>input<\/code> alan\u0131nda istenen bilginin format\u0131na dair \u00f6rnek verebiliriz. Fakat bu yol, bu i\u015fi bir <code>&lt;label&gt;<\/code> eleman\u0131 ile yapmaktan daha iyi bir yol de\u011fildir. \u00c7\u00fcnk\u00fc kullan\u0131c\u0131m\u0131z, <code>&lt;input&gt;<\/code> alan\u0131na veri girmeye ba\u015flad\u0131\u011f\u0131 anda, \u00f6rnek ortadan kaybolacak ve kullan\u0131c\u0131m\u0131z\u0131n kafas\u0131 kar\u0131\u015fabilecektir.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131da, <code>&lt;input&gt;<\/code> elemanlar\u0131 ile birlikte yer tutucu text kullan\u0131m\u0131na \u00f6rnek verilmi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div>\n\t&lt;label for=\"ara\">Ara:&lt;\/label> &lt;input type=\"text\" name=\"ara\" id=\"ara\" placeholder=\"\u00f6rnek: Muzlu kek\">\n&lt;\/div>\n&lt;div>\n\t&lt;label for=\"email\">Email: &lt;\/label> &lt;input type=\"text\" name=\"email\" id=\"email\" placeholder=\"ali123@ornek.com\">\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki form alan\u0131 sayfam\u0131zda \u015f\u00f6yle g\u00f6r\u00fcnecektir:<\/p>\n\n\n\n<div>\n\t<label for=\"ara\">Ara:<\/label> <input type=\"text\" name=\"ara\" id=\"ara\" placeholder=\"\u00f6rnek: Muzlu kek\">\n<\/div>\n<div>\n\t<label for=\"email\">Email: <\/label> <input type=\"text\" name=\"email\" id=\"email\" placeholder=\"ali123@ornek.com\">\n<\/div>\n<br>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Yer_Tutuculari_Placeholder_Stillendirme\">Yer Tutucular\u0131 (Placeholder) Stillendirme<\/span><\/h4>\n\n\n\n<p>Web taray\u0131c\u0131lar\u0131, genellikle yer tutucu metinleri, olmas\u0131 gereken minimum contrast de\u011ferinin alt\u0131nda g\u00f6stermektedir. Eri\u015filebilir bir tema i\u00e7in, yer tutucu metinlerinin renklerini canland\u0131rmak gerekmektedir. A\u015fa\u011f\u0131da bunun i\u00e7in gerekli CSS kodlar\u0131 verilmi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>::-webkit-input-placeholder {\n\t color: #767676;\n\t opacity: 1;\n}\n\n:-moz-placeholder { \/* Firefox 18- *\/\n\t color: #767676;\n\t opacity: 1;\n}\n\n::-moz-placeholder {  \/* Firefox 19+ *\/\n\t color: #767676;\n\t opacity: 1;\n}\n\n:-ms-input-placeholder {\n\t color: #767676;\n\t opacity: 1;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"IV_8211_Verileri_Onaylamak\">IV &#8211; Verileri Onaylamak<\/span><\/h4>\n\n\n\n<p>Bir form alan\u0131na girilen datalar\u0131n, istenilen nitelikte olup olmad\u0131\u011f\u0131n\u0131 kontrol etmek ve varsa eksiklikler hakk\u0131nda kullan\u0131c\u0131ya geri d\u00f6n\u00fc\u015f yapmak veya form alan\u0131na sadece belli formatta veri girilmesine izin vermek, verileri onaylamak anlam\u0131na gelmektedir.<\/p>\n\n\n\n<p>HTML5; <code>email<\/code>,&nbsp;<code>url<\/code>,&nbsp;<code>number<\/code>,&nbsp;<code>range<\/code>,&nbsp;<code>date<\/code>, ve <code>time<\/code> tipindeki <code>&lt;input&gt;<\/code> elemanlar\u0131 i\u00e7in, varsay\u0131lan olarak onaylama \u00f6zelli\u011fi ta\u015f\u0131maktad\u0131r.<\/p>\n\n\n\n<p>Verileri kontrol edip onaylamak i\u015flemi i\u00e7in geli\u015ftirdi\u011fimiz kodlar, hem istemci (web taray\u0131c\u0131) hem de server tarafl\u0131 olmal\u0131d\u0131r. Unutmay\u0131n\u0131z, istemci tarafl\u0131 g\u00fcvenlik \u00f6nemleri kolayca atlat\u0131labilmektedir.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131da HTML5 ile birlikte gelen, kendinden do\u011frulamal\u0131 form alanlar\u0131 verilmi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div>\n\t&lt;label for=\"email\">Email: &lt;\/label>\n\t&lt;input type=\"email\" name=\"email\" id=\"email\">\n&lt;\/div>\n&lt;div>\n\t&lt;label for=\"url\">Website: &lt;\/label>\n\t&lt;input type=\"url\" name=\"url\" id=\"url\">\n&lt;\/div>\n&lt;div>\n\t&lt;label for=\"numara\">0 ile 100 Aras\u0131 Numara: &lt;\/label>\n\t&lt;input type=\"number\" name=\"numara\" id=\"numara\" min=\"0\" max=\"100\" step=\"10\" value=\"0\">\n&lt;\/div>\n&lt;div>\n\t&lt;label for=\"dilim\">Y\u00fczdelik Dilimi: &lt;\/label>\n\t&lt;input type=\"range\" name=\"dilim\" id=\"dilim\" min=\"0\" max=\"100\" step=\"10\" value=\"0\">\n&lt;\/div>\n&lt;div>\n\t&lt;label for=\"tarih\">Tarih: &lt;\/label>\n\t&lt;input type=\"date\" name=\"tarih\" id=\"tarih\">\n&lt;\/div>\n&lt;div>\n\t&lt;label for=\"zaman\">Zaman: &lt;\/label>\n\t&lt;input type=\"time\" name=\"zaman\" id=\"zaman\">\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki form alanlar\u0131, sayfam\u0131zda \u015f\u00f6yle g\u00f6r\u00fcnecektir:<\/p>\n\n\n\n<div>\n\t<label for=\"email\">Email: <\/label>\n\t<input type=\"email\" name=\"email\" id=\"email\">\n<\/div>\n<div>\n\t<label for=\"url\">Website: <\/label>\n\t<input type=\"url\" name=\"url\" id=\"url\">\n<\/div>\n<div>\n\t<label for=\"numara\">0 ile 100 Aras\u0131 Numara: <\/label>\n\t<input type=\"number\" name=\"numara\" id=\"numara\" min=\"0\" max=\"100\" step=\"10\" value=\"0\">\n<\/div>\n<div>\n\t<label for=\"dilim\">Y\u00fczdelik Dilimi: <\/label>\n\t<input type=\"range\" name=\"dilim\" id=\"dilim\" min=\"0\" max=\"100\" step=\"10\" value=\"0\">\n<\/div>\n<div>\n\t<label for=\"tarih\">Tarih: <\/label>\n\t<input type=\"date\" name=\"tarih\" id=\"tarih\">\n<\/div>\n<div>\n\t<label for=\"zaman\">Zaman: <\/label>\n\t<input type=\"time\" name=\"zaman\" id=\"zaman\">\n<\/div>\n<br>\n\n\n\n<p>A\u015fa\u011f\u0131da, <em>SS HHH SSSS<\/em> (S:say\u0131, H:harf) format\u0131nda plaka giri\u015fi i\u00e7in olu\u015fturulmu\u015f bir alan g\u00f6r\u00fcyorsunuz. Bu form alan\u0131, formata uymayan plakalar\u0131 kabul etmeyecektir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div>\n        &lt;label for=\"plaka\">Plakan\u0131z\u0131 giriniz SS HHH SSSS (S:say\u0131, H:harf)&lt;\/label>\n\t&lt;input type=\"text\" id=\"plaka\"\n\t\tpattern=\"[A-Z]{1,2}( )[A-Z]{2,3}( )[0-9]{1,4}\"\n\t>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>Zorunlu alanlar olu\u015fturmak da, kullan\u0131c\u0131lar\u0131m\u0131z\u0131n eksik  bilgi girmesini engelleyecektir. Zorunlu bir alan olu\u015fturdu\u011fumuzda, bu durumdan kullan\u0131c\u0131m\u0131z\u0131 ve ekran okuyucular haberdar etmemiz gerekir. A\u015fa\u011f\u0131da, ekran okuyucular\u0131n da anlayaca\u011f\u0131 \u015fekilde, zorunlu bir form alan\u0131 \u00f6rne\u011fi vard\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;label for=\"adiniz\">Ad\u0131n\u0131 (zorunlu): &lt;\/label>\n&lt;input type=\"text\" name=\"adiniz\" id=\"adiniz\" required aria-required=\"true\"><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"V_8211_Kullaniciyi_Bilgilendirme\">V &#8211; Kullan\u0131c\u0131y\u0131 Bilgilendirme<\/span><\/h4>\n\n\n\n<p>Kullan\u0131c\u0131 bir form alan\u0131n\u0131 gidi\u011finde veya formu g\u00f6nderdi\u011finde bilgilendirilmelidir.<\/p>\n\n\n\n<p>Form alan\u0131n\u0131 doldururken, bir hata yap\u0131ld\u0131\u011f\u0131nda, kullan\u0131c\u0131 bu hatadan m\u00fcmk\u00fcnse hemen haberdar edilmelidir. Bu yap\u0131lmad\u0131ysa, formu g\u00f6nderdi\u011finde, yap\u0131lan hatalar anla\u015f\u0131l\u0131r bir \u015fekilde tarif edilmelidir.<\/p>\n\n\n\n<p>Formu g\u00f6nderdi\u011finde, kullan\u0131c\u0131 yapt\u0131\u011f\u0131 i\u015flemin ba\u015far\u0131l\u0131 veya eksiksiz olup olmad\u0131\u011f\u0131n\u0131 bilmek isteyecektir. Bu y\u00fczden, kullan\u0131c\u0131ya, form g\u00f6nderme i\u015fleminin sonucu hakk\u0131nda bilgi verilmelidir.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131da bu t\u00fcrden bilgilendirme \u00f6rnekleri verilmi\u015ftir.<\/p>\n\n\n\n<p>Hata mesaj\u0131:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1>Hata \u2013 Fatura adresi hatal\u0131&lt;\/h1>\n &lt;!-- veya -->\n&lt;h2>Hata \u2013 Fatura adresi hatal\u0131&lt;\/h2><\/code><\/pre>\n\n\n\n<p>Ba\u015far\u0131 mesaj\u0131:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1>Sipari\u015finiz ba\u015far\u0131yla verilmi\u015ftir. Bizi tercih etti\u011finiz i\u00e7in te\u015fekk\u00fcrler.&lt;\/h1>\n&lt;!-- veya --> \n&lt;h2>Sipari\u015finiz ba\u015far\u0131yla verilmi\u015ftir. Bizi tercih etti\u011finiz i\u00e7in te\u015fekk\u00fcrler.&lt;\/h2><\/code><\/pre>\n\n\n\n<p>Sayfa ba\u015fl\u0131\u011f\u0131 ile hata mesaj\u0131:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;title>Hata \u2013 Fatura adresi hatal\u0131&lt;\/title><\/code><\/pre>\n\n\n\n<p>Sayfa ba\u015fl\u0131\u011f\u0131 ile ba\u015far\u0131 mesaj\u0131:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;title>Sipari\u015f ba\u015far\u0131l\u0131. Te\u015fekk\u00fcrler.&lt;\/title><\/code><\/pre>\n\n\n\n<p>JS diyalo\u011fu ile ba\u015far\u0131 mesaj\u0131:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>document.getElementById('tiklananbuton')\n\t.addEventListener('click', function() {\n\t\t\/* [\u2026 data kayd\u0131 yap\u0131lan b\u00f6lge \u2026] *\/\n\t\talert('Sipari\u015f ba\u015far\u0131l\u0131. Te\u015fekk\u00fcrler!');\n\t});<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"VI_8211_Cok_Sayfali_Formlar\">VI &#8211; \u00c7ok Sayfal\u0131 Formlar<\/span><\/h4>\n\n\n\n<p>\u00c7ok sayfal\u0131 formlarda \u015fu hususlara dikkat etmek gerekir:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Form alanlar\u0131 ile ilgili gerekli a\u00e7\u0131klamalar, her sayfada ayr\u0131 ay\u0131r yap\u0131lmal\u0131d\u0131r.<\/li><li>Her bir sayfa, mant\u0131kl\u0131 veya birbirine yak\u0131n form alanlar\u0131ndan olu\u015fmal\u0131d\u0131r. Mesela, bir sipari\u015f kabulu yap\u0131yorsak, ilk sayfada kargo bilgileri, di\u011fer sayfada fatura bilgileri olabilir.<\/li><li>Zorunlu olmayan sayfa ya da b\u00f6l\u00fcmleri es ge\u00e7ebilmesi i\u00e7in kullan\u0131c\u0131ya izin verilmelidir.<\/li><li>M\u00fcmk\u00fcnse, sayfalar i\u00e7in bir zaman k\u0131s\u0131tlamas\u0131 konulmamal\u0131d\u0131r, konulursa da kullan\u0131c\u0131n\u0131n, dilerse zaman\u0131 uzatmas\u0131na izin verilmelidir.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"VII_8211_Ozel_Formlar\">VII &#8211; \u00d6zel Formlar<\/span><\/h4>\n\n\n\n<p>Bazen, kullan\u0131c\u0131dan istedi\u011fimiz bilgi, bilinen form elemanlar\u0131 ile elde edilemeyecek t\u00fcrden olabilir. Payla\u015f\u0131m butonlar\u0131, derecelendirme y\u0131ld\u0131zlar\u0131 gibi alanlar bunlara \u00f6rnek olarak verilebilir.<\/p>\n\n\n\n\t<br \/>\n\t<div class=\"stcnnt-yazi-ici-reklam\">\n\t<span aria-hidden=\"true\" class=\"sc-reklam-basligi text-muted\" style=\"display:block;text-align:center;\">bu bir reklamd\u0131r:<\/span>\n\t<p aria-hidden=\"true\" class=\"shadow-lg m-0 p-0\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:block; text-align:center;\"\n\t\t\t data-ad-layout=\"in-article\"\n\t\t\t data-ad-format=\"fluid\"\n\t\t\t data-ad-client=\"ca-pub-6366953309324763\"\n\t\t\t data-ad-slot=\"2001829037\"><\/ins>\n\t\t<script>\n\t\t\t (adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/p>\n\t<\/div>\n\t\n\n\n\n<p>A\u015fa\u011f\u0131da, derecelendirme y\u0131ld\u0131z\u0131 \u00f6rne\u011fi verilmi\u015ftir:<\/p>\n\n\n\n<form action=\"#\" id=\"star_rating\">\n <input value=\"0\" id=\"star0\" checked=\"\" type=\"radio\" name=\"rating\" class=\"visuallyhidden\">\n\t<label for=\"star0\">\n\t\t<span class=\"visuallyhidden\">0 Y\u0131ld\u0131z<\/span>\n\t\t<svg viewBox=\"0 0 512 512\">\n\t\t\t<g stroke-width=\"70\" stroke-linecap=\"square\">\n\t\t\t\t\t\t<path d=\"M91.5,442.5 L409.366489,124.633512\"><\/path>\n\t\t\t\t\t\t<path d=\"M90.9861965,124.986197 L409.184248,443.184248\"><\/path>\n\t\t\t\t<\/g>\n\t\t<\/svg>\n\t<\/label>\n\n\t<input value=\"1\" id=\"star1\" type=\"radio\" name=\"rating\" class=\"visuallyhidden\">\n\t<label for=\"star1\">\n\t\t<span class=\"visuallyhidden\">1 Y\u0131ld\u0131z<\/span>\n\t\t<svg viewBox=\"0 0 512 512\"><path d=\"M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z\"><\/path><\/svg>\n\t<\/label>\n\n\t<input value=\"2\" id=\"star2\" type=\"radio\" name=\"rating\" class=\"visuallyhidden\">\n\t<label for=\"star2\">\n\t\t<span class=\"visuallyhidden\">2 Y\u0131ld\u0131z<\/span>\n\t\t<svg viewBox=\"0 0 512 512\"><path d=\"M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z\"><\/path><\/svg>\n\t\t\n\t<\/label>\n\n\t<input value=\"3\" id=\"star3\" type=\"radio\" name=\"rating\" class=\"visuallyhidden\">\n\t<label for=\"star3\">\n\t\t<span class=\"visuallyhidden\">3 Y\u0131ld\u0131z<\/span> <svg viewBox=\"0 0 512 512\"><path d=\"M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z\"><\/path><\/svg>\n\t<\/label>\n\n\t<input value=\"4\" id=\"star4\" type=\"radio\" name=\"rating\" class=\"visuallyhidden\">\n\t<label for=\"star4\">\n\t\t<span class=\"visuallyhidden\">4 Y\u0131ld\u0131z<\/span> <svg viewBox=\"0 0 512 512\"><path d=\"M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z\"><\/path><\/svg>\n\t<\/label>\n\n\t<input value=\"5\" id=\"star5\" type=\"radio\" name=\"rating\" class=\"visuallyhidden\">\n\t<label for=\"star5\">\n\t\t<span class=\"visuallyhidden\">5 Y\u0131ld\u0131z<\/span> <svg viewBox=\"0 0 512 512\"><path d=\"M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z\"><\/path><\/svg>\n\t<\/label>\n\n\t<button type=\"submit\" class=\"btn-small visuallyhidden focusable\">Oy ver<\/button>\n\n\t<output><\/output>\n<\/form>\n\n<style>\n .visuallyhidden {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\t#star_rating svg {\n\t\twidth: 1em;\n\t\theight: 1em;\n\t\tfill: currentColor;\n\t\tstroke: currentColor;\n\t}\n\t#star_rating label, #star_rating output {\n\t\tdisplay:block;\n\t\tfloat:left;\n\t\tfont-size: 2em;\n\t\theight: 1.2em;\n\t\tcolor: #036;\n\t\tcursor: pointer;\n\t\tborder-bottom: 2px solid transparent;\n\t}\n\t#star_rating output {\n\t\tfont-size: 1.5em;\n\t\tpadding: 0 1em;\n\t}\n\n\t#star_rating input:checked ~ label {\n\t\tcolor: #858585;\n\t}\n\t#star_rating input:checked + label {\n\t\tcolor: #036;\n\t\tborder-bottom-color: #036;\n\t}\n\t#star_rating input:focus + label {\n\t\tborder-bottom-style: dotted;\n\t}\n\t#star_rating:hover input + label {\n\t\tcolor: #036;\n\t}\n\t#star_rating input:hover ~ label,\n\t#star_rating input:focus ~ label,\n\t#star_rating input[id=\"star0\"] + label {\n\t\tcolor: #999;\n\t}\n\t#star_rating input:hover + label,\n\t#star_rating input:focus + label {\n\t\tcolor: #036;\n\t}\n\t#star_rating input[id=\"star0\"]:checked + label {\n\t\tcolor: #ff2d21;\n\t}\n\t#star_rating [type=\"submit\"] {\n\t\tfloat: none;\n\t}\n<\/style>\n\n<script>\nvar radios = document.querySelectorAll('#star_rating input[type=radio]');\nvar btn = document.querySelector('#star_rating button');\nvar output = document.querySelector('#star_rating output');\nvar do_something = function(stars) {\n\t\/\/ An AJAX request could send the data to the server\n\toutput.textContent = stars;\n};\n\nArray.prototype.forEach.call(radios, function(el, i){\n\tvar label = el.nextSibling.nextSibling;\n\tlabel.addEventListener(\"click\", function(event){\n\t\tdo_something(label.querySelector('span').textContent);\n\t});\n});\n\ndocument.querySelector('#star_rating').addEventListener('submit', function(event){\n\tdo_something(document.querySelector('#star_rating :checked ~ label span').textContent);\n\tevent.preventDefault();\n\tevent.stopImmediatePropagation();\n});\n<\/script>\n<br>\n<br>\n\n\n\n<p>Yukar\u0131daki form \u015fu kodlardan olu\u015fur:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;form action=\"#\" id=\"star_rating\">\n &lt;input value=\"0\" id=\"star0\" checked=\"\" type=\"radio\" name=\"rating\" class=\"visuallyhidden\">\n\t&lt;label for=\"star0\">\n\t\t&lt;span class=\"visuallyhidden\">0 Y\u0131ld\u0131z&lt;\/span>\n\t\t&lt;svg viewBox=\"0 0 512 512\">\n\t\t\t&lt;g stroke-width=\"70\" stroke-linecap=\"square\">\n\t\t\t\t\t\t&lt;path d=\"M91.5,442.5 L409.366489,124.633512\">&lt;\/path>\n\t\t\t\t\t\t&lt;path d=\"M90.9861965,124.986197 L409.184248,443.184248\">&lt;\/path>\n\t\t\t\t&lt;\/g>\n\t\t&lt;\/svg>\n\t&lt;\/label>\n\n\t&lt;input value=\"1\" id=\"star1\" type=\"radio\" name=\"rating\" class=\"visuallyhidden\">\n\t&lt;label for=\"star1\">\n\t\t&lt;span class=\"visuallyhidden\">1 Y\u0131ld\u0131z&lt;\/span>\n\t\t&lt;svg viewBox=\"0 0 512 512\">&lt;path d=\"M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z\">&lt;\/path>&lt;\/svg>\n\t&lt;\/label>\n\n\t&lt;input value=\"2\" id=\"star2\" type=\"radio\" name=\"rating\" class=\"visuallyhidden\">\n\t&lt;label for=\"star2\">\n\t\t&lt;span class=\"visuallyhidden\">2 Y\u0131ld\u0131z&lt;\/span>\n\t\t&lt;svg viewBox=\"0 0 512 512\">&lt;path d=\"M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z\">&lt;\/path>&lt;\/svg>\n\t\t\n\t&lt;\/label>\n\n\t&lt;input value=\"3\" id=\"star3\" type=\"radio\" name=\"rating\" class=\"visuallyhidden\">\n\t&lt;label for=\"star3\">\n\t\t&lt;span class=\"visuallyhidden\">3 Y\u0131ld\u0131z&lt;\/span> &lt;svg viewBox=\"0 0 512 512\">&lt;path d=\"M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z\">&lt;\/path>&lt;\/svg>\n\t&lt;\/label>\n\n\t&lt;input value=\"4\" id=\"star4\" type=\"radio\" name=\"rating\" class=\"visuallyhidden\">\n\t&lt;label for=\"star4\">\n\t\t&lt;span class=\"visuallyhidden\">4 Y\u0131ld\u0131z&lt;\/span> &lt;svg viewBox=\"0 0 512 512\">&lt;path d=\"M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z\">&lt;\/path>&lt;\/svg>\n\t&lt;\/label>\n\n\t&lt;input value=\"5\" id=\"star5\" type=\"radio\" name=\"rating\" class=\"visuallyhidden\">\n\t&lt;label for=\"star5\">\n\t\t&lt;span class=\"visuallyhidden\">5 Y\u0131ld\u0131z&lt;\/span> &lt;svg viewBox=\"0 0 512 512\">&lt;path d=\"M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z\">&lt;\/path>&lt;\/svg>\n\t&lt;\/label>\n\n\t&lt;button type=\"submit\" class=\"btn-small visuallyhidden focusable\">Submit rating&lt;\/button>\n\n\t&lt;output>&lt;\/output>\n&lt;\/form>\n\n&lt;style>\n          .visuallyhidden {\n                 border: 0;\n                 clip: rect(0 0 0 0);\n                 height: 1px;\n                 margin: -1px;\n                 overflow: hidden;\n                 padding: 0;\n                 position: absolute;\n                 width: 1px;\n        }\n\t#star_rating svg {\n\t\twidth: 1em;\n\t\theight: 1em;\n\t\tfill: currentColor;\n\t\tstroke: currentColor;\n\t}\n\t#star_rating label, #star_rating output {\n\t\tdisplay:block;\n\t\tfloat:left;\n\t\tfont-size: 2em;\n\t\theight: 1.2em;\n\t\tcolor: #036;\n\t\tcursor: pointer;\n\t\tborder-bottom: 2px solid transparent;\n\t}\n\t#star_rating output {\n\t\tfont-size: 1.5em;\n\t\tpadding: 0 1em;\n\t}\n\n\t#star_rating input:checked ~ label {\n\t\tcolor: #858585;\n\t}\n\t#star_rating input:checked + label {\n\t\tcolor: #036;\n\t\tborder-bottom-color: #036;\n\t}\n\t#star_rating input:focus + label {\n\t\tborder-bottom-style: dotted;\n\t}\n\t#star_rating:hover input + label {\n\t\tcolor: #036;\n\t}\n\t#star_rating input:hover ~ label,\n\t#star_rating input:focus ~ label,\n\t#star_rating input[id=\"star0\"] + label {\n\t\tcolor: #999;\n\t}\n\t#star_rating input:hover + label,\n\t#star_rating input:focus + label {\n\t\tcolor: #036;\n\t}\n\t#star_rating input[id=\"star0\"]:checked + label {\n\t\tcolor: #ff2d21;\n\t}\n\t#star_rating [type=\"submit\"] {\n\t\tfloat: none;\n\t}\n&lt;\/style>\n\n&lt;script>\nvar radios = document.querySelectorAll('#star_rating input[type=radio]');\nvar btn = document.querySelector('#star_rating button');\nvar output = document.querySelector('#star_rating output');\nvar do_something = function(stars) {\n\t\/\/ An AJAX request could send the data to the server\n\toutput.textContent = stars;\n};\n\nArray.prototype.forEach.call(radios, function(el, i){\n\tvar label = el.nextSibling.nextSibling;\n\tlabel.addEventListener(\"click\", function(event){\n\t\tdo_something(label.querySelector('span').textContent);\n\t});\n});\n\ndocument.querySelector('#star_rating').addEventListener('submit', function(event){\n\tdo_something(document.querySelector('#star_rating :checked ~ label span').textContent);\n\tevent.preventDefault();\n\tevent.stopImmediatePropagation();\n});\n&lt;\/script><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"6_Renkler\">6. Renkler<\/span><\/h3>\n\n\n\n<p>\u0130nternet kullan\u0131c\u0131lar\u0131n\u0131n yakla\u015f\u0131k %10&#8217;u ve \u00f6zellikle renk k\u00f6r\u00fc olanlar, renkleri g\u00f6rmekle ilgili sorunlar ya\u015famaktad\u0131r. Renk k\u00f6rleri, \u00f6zellikle k\u0131rm\u0131z\u0131 ve ye\u015fil renkleri birbirinden ay\u0131rmakta zorluk ya\u015famaktad\u0131r.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131da, d\u00f6rt farkl\u0131 renk k\u00f6r\u00fc hastal\u0131\u011f\u0131 (<em>Protanopia, Deuteranopia, Tritanopia ve Monochromatism<\/em>) ve bu hastalar\u0131n, renk spektrumunu nas\u0131l g\u00f6rd\u00fckleri g\u00f6sterilmi\u015ftir:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"801\" height=\"601\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/erisebilirlik-renkler.jpg\" alt=\"Eri\u015filebilirlik - renk k\u00f6rlerinin renkleri g\u00f6rme durumu\" class=\"wp-image-4519\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/erisebilirlik-renkler.jpg 801w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/erisebilirlik-renkler-300x225.jpg 300w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/erisebilirlik-renkler-768x576.jpg 768w\" sizes=\"auto, (max-width: 801px) 100vw, 801px\" \/><figcaption>Renk K\u00f6rlerinin Renkleri G\u00f6rme Durumu<\/figcaption><\/figure><\/div>\n\n\n\n<p>Yukar\u0131da; ortadaki renk spektrumu, sa\u011fl\u0131kl\u0131 bir g\u00f6z\u00fcn renkleri nas\u0131l g\u00f6rd\u00fc\u011f\u00fcn\u00fc g\u00f6sterir, k\u00f6\u015felerdeki renkler ise her bir renk k\u00f6r\u00fc hastas\u0131n\u0131n ortadaki renk spektrumunu nas\u0131l g\u00f6rd\u00fc\u011f\u00fcn\u00fc g\u00f6sterir.<\/p>\n\n\n\n<p>Mesela, <em>Protanopia<\/em> ve <em>Deuteranopia<\/em> hastalar\u0131, neredeyse b\u00fct\u00fcn renkleri sar\u0131 ve mavinin tonlar\u0131 olarak g\u00f6rmektedir. Dolay\u0131s\u0131yla, sar\u0131 ve mavi d\u0131\u015f\u0131ndaki renkler ile olu\u015fturdu\u011fumuz tonlama farklar\u0131, bu t\u00fcr hastalar\u0131n g\u00f6z\u00fcnde ayn\u0131 g\u00f6r\u00fcnecektir.<\/p>\n\n\n\n<p>Web sayfalar\u0131n\u0131z\u0131n, renk k\u00f6r\u00fc hastalar\u0131n\u0131n g\u00f6z\u00fcnde nas\u0131l g\u00f6r\u00fcnd\u00fc\u011f\u00fcn\u00fc merak ediyorsan\u0131z, sayfan\u0131z\u0131n bir ekran g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc al\u0131p, bir <a rel=\"noreferrer noopener\" aria-label=\"renk k\u00f6rl\u00fc\u011f\u00fc sim\u00fclat\u00f6r\u00fcn\u00fc (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/www.color-blindness.com\/coblis-color-blindness-simulator\/\" target=\"_blank\">renk k\u00f6rl\u00fc\u011f\u00fc sim\u00fclat\u00f6r\u00fc<\/a> yard\u0131m\u0131 ile sayfan\u0131za renk k\u00f6rlerinin g\u00f6z\u00fcnden bakabilirsiniz.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"7_Renkler_Arasindaki_Kontrast_Orani\">7. Renkler Aras\u0131ndaki Kontrast Oran\u0131<\/span><\/h3>\n\n\n\n<p>Kontrast kavram\u0131, renkler aras\u0131ndaki z\u0131tl\u0131\u011f\u0131 ifade eder. Konstrast, bir resimdeki en karanl\u0131k renk ile en ayd\u0131nl\u0131k renk aras\u0131ndaki farkt\u0131r.<\/p>\n\n\n\n<p>Teman\u0131z\u0131n arka plan rengi ile yaz\u0131 rengi aras\u0131nda belli bir kontrast oran\u0131 yoksa, g\u00f6rme sorunu ya\u015fayan bir \u00e7ok kullan\u0131c\u0131n\u0131z, yaz\u0131lar\u0131n\u0131z\u0131 okumakta zorluk ya\u015fayacakt\u0131r.<\/p>\n\n\n\n<p>Bir web sayfas\u0131nda, okunakl\u0131 olmas\u0131 i\u00e7in, yaz\u0131 rengi ile arka plan rengi aras\u0131ndaki kontrast oran\u0131 en az 4.5:1 olmal\u0131d\u0131r. 24 pixel yaz\u0131larda veya 19 pixel ve kal\u0131n yaz\u0131lm\u0131\u015f yaz\u0131larda bu oran, 3:1 oran\u0131na kadar d\u00fc\u015febilir.<\/p>\n\n\n\n<p>Sayfalar\u0131n\u0131zda kulland\u0131\u011f\u0131n\u0131z \u00f6n ve arka plan renkleri aras\u0131ndaki kontrast oran\u0131n\u0131 g\u00f6rmek i\u00e7in, <a rel=\"noreferrer noopener\" aria-label=\" renk kontrast testi (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/www.joedolson.com\/tools\/color-contrast.php\" target=\"_blank\">renkler aras\u0131 kontrast oran\u0131 testi<\/a> yapabilirsiniz.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"8_jQuery_ve_JavaScript_Kullanmak\">8. jQuery ve JavaScript Kullanmak<\/span><\/h3>\n\n\n\n<p>Eri\u015filebilir temalarda, jQuery kullanabilirsiniz. Fakat temel \u00f6zelliklerde, jQuery&#8217;e g\u00fcvenmemelisiniz. Nedenini merak ediyorsan\u0131z, taray\u0131c\u0131n\u0131zda JavaScript&#8217;i kapat\u0131p, sitenizin jQuery ile kodlanm\u0131\u015f \u00f6zelliklerini kullanmay\u0131 deneyebilirsiniz.<\/p>\n\n\n\n<p>Teman\u0131zda, jQuery kullanarak slayt \u015fov gibi bir b\u00f6l\u00fcm kodlad\u0131ysan\u0131z, bu b\u00f6l\u00fcm\u00fcn klavye tu\u015flar\u0131 ile de kullan\u0131labildi\u011finden emin olun.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"9_Temanizi_Test_Edin\">9. Teman\u0131z\u0131 Test Edin<\/span><\/h3>\n\n\n\n<p>\u0130nternet&#8217;te, teman\u0131z\u0131n <a rel=\"noreferrer noopener\" aria-label=\"eri\u015filebilirlik durumunu test edebilece\u011finiz ara\u00e7lar (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/www.w3.org\/WAI\/ER\/tools\/\" target=\"_blank\">eri\u015filebilirlik durumunu test edebilece\u011finiz ara\u00e7lar<\/a> vard\u0131r. Bu ara\u00e7lar\u0131 kullanarak, WordPress teman\u0131z\u0131n eri\u015febilirlikte testlerini yapabilirsiniz.<\/p>\n\n\n\n<p>Teman\u0131z\u0131, farkl\u0131 taray\u0131c\u0131lar ile test etmeniz, eri\u015filebilirlik a\u00e7\u0131s\u0131ndan \u00f6nemlidir. \u00c7\u00fcnk\u00fc, teman\u0131zda kulland\u0131\u011f\u0131n\u0131z HTML veya CSS kodlar\u0131, baz\u0131 taray\u0131c\u0131larda farkl\u0131 yorumlanabilir veya bir k\u0131sm\u0131nda tan\u0131n\u0131rken di\u011ferlerinde tan\u0131nmayabilir. Bu durumda, tema sayfalar\u0131n\u0131z, farkl\u0131 taray\u0131c\u0131larda farkl\u0131 veya eksik g\u00f6r\u00fcnebilir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"10_Uzak_Durmaniz_Gerekenler\">10. Uzak Durman\u0131z Gerekenler<\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"I_8211_Yeni_Pencere_ve_Sekmeler\">I &#8211; Yeni Pencere ve Sekmeler<\/span><\/h4>\n\n\n\n<p>Yeni pencereler veya sekmeler, kullan\u0131c\u0131n\u0131n gezinme ge\u00e7mi\u015fini s\u0131f\u0131rlayacak, baz\u0131 klavye gezginlerinin tekrar ayn\u0131 sayfaya d\u00f6nmesini zorla\u015ft\u0131racakt\u0131r. Bu y\u00fczden, ger\u00e7ekten zorunlu de\u011filseniz, kullan\u0131c\u0131lar\u0131n\u0131z\u0131 yeni sayfa ya da sekmelere g\u00f6ndermeyin, g\u00f6ndermek zorunda iseniz de, kullan\u0131c\u0131n\u0131z\u0131 bu durumdan haberdar edin.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"II_8211_Autoplay_ve_Animasyonlar\">II &#8211; Autoplay ve Animasyonlar<\/span><\/h4>\n\n\n\n<p>Autoplay ve animasyonlar ile ilgili uzak durman\u0131z gereken hatalar \u015funlard\u0131r:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Kullan\u0131c\u0131lar\u0131n a\u00e7\u0131k bir izni olmadan, herhangi bir ses dosyas\u0131n\u0131 otomatik olarak ba\u015flatmay\u0131n.<\/li><li>Sesler, ekran okuyucular\u0131n seslendirmeleri ile kar\u0131\u015f\u0131p, ekran okuyucusunun sesinin bo\u011fuk \u00e7\u0131kmas\u0131na sebep olur.<\/li><li><em>Fash<\/em> veya <em>.gif<\/em> gibi animasyonlar, baz\u0131 durumlarda kullan\u0131c\u0131lar\u0131n hastal\u0131k n\u00f6beti (photo-epileptic n\u00f6bet) ge\u00e7irmesine sebep olabilir.<\/li><li>Slayt \u015fovlar, ekran okuyucusu kullananlar i\u00e7in veya klavye gezgini kullananlar i\u00e7in sorun olabilir.<\/li><li>Kar ya\u011fmas\u0131 efekti gibi \u00f6zel efekt animasyonlar\u0131n\u0131n, photo-epileptic n\u00f6betlere sebep oldu\u011fu bilinmektedir.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"III_8211_Tabindex\">III &#8211; Tabindex<\/span><\/h4>\n\n\n\n<p><code>tabindex<\/code> \u00f6zelli\u011fi nesnelerin sekme (tab tu\u015fu) s\u0131ralamas\u0131n\u0131 tan\u0131mlar. &#8220;<strong>TAB<\/strong>&#8221; tu\u015funa bas\u0131ld\u0131\u011f\u0131nda nesneler <code>tabindex<\/code> \u00f6zelli\u011finde belirtilen s\u0131rada g\u00f6sterilir.<\/p>\n\n\n\n<p><code>tabindex<\/code> \u00f6zelli\u011fini, baz\u0131 durumlarda negatif de\u011fer vermek gereklili\u011fi d\u0131\u015f\u0131nda, kullanmaktan ka\u00e7\u0131n\u0131n. \u00c7\u00fcnk\u00fc, men\u00fclerde dola\u015fma d\u00fczenini sizin de\u011fil kullan\u0131c\u0131n\u0131n kendisinin belirlemesi do\u011fru oland\u0131r.<\/p>\n\n\n\n\t<br \/>\n\t<div class=\"stcnnt-yazi-ici-reklam\">\n\t<span aria-hidden=\"true\" class=\"sc-reklam-basligi text-muted\" style=\"display:block;text-align:center;\">bu bir reklamd\u0131r:<\/span>\n\t<p aria-hidden=\"true\" class=\"shadow-lg m-0 p-0\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:block; text-align:center;\"\n\t\t\t data-ad-layout=\"in-article\"\n\t\t\t data-ad-format=\"fluid\"\n\t\t\t data-ad-client=\"ca-pub-6366953309324763\"\n\t\t\t data-ad-slot=\"2001829037\"><\/ins>\n\t\t<script>\n\t\t\t (adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/p>\n\t<\/div>\n\t\n","protected":false},"excerpt":{"rendered":"<p>Bir teman\u0131n \u00f6nemli bir \u00f6zelli\u011fi olan ve orijinal ad\u0131yla accessibility olarak bilinen, eri\u015filebilirlik \u00f6zelli\u011fi, detayl\u0131ca a\u00e7\u0131klanm\u0131\u015ft\u0131r.<\/p>\n","protected":false},"author":1,"featured_media":25,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[215,213,214],"class_list":["post-4431","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-tema-yapimi","tag-accessibility","tag-erisilebilirlik","tag-ulasilabilirlik"],"_links":{"self":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/4431","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/comments?post=4431"}],"version-history":[{"count":0,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/4431\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/media\/25"}],"wp:attachment":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/media?parent=4431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/categories?post=4431"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/tags?post=4431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}