Merhaba!

Bir şey yazmayalı uzun zaman oldu ve aslında yeni bir şey yazmadım çünkü bu, birkaç yıldan daha uzun bir süre önce web ve önyüz geliştirmeyi yeni öğrenmeye başladığımda oluşturduğum ve kullandığım eski bir kontrol listesi.

Buradaki bazı şeyler eski olabilir veya bazı bağlantılar artık çalışmıyor olabilir, bu durumda lütfen yorum yapın, ben de onları buna göre güncelleyeceğim.

Daha fazla uzatmadan, işte web erişilebilirlik kontrol listem. Umarım yardımcı olur!

Gelişim

Anlamsal Yapı

1. Sayfamın ana bölgeleri ya <header>, <nav>, <main>, gibi semantik öğelerle sarılır <article>ve veya bir ARIA yer işareti rolüyle<footer> tanımlanır .
2. My <header>, <main>ve <footer>öğeleri, öğenin doğrudan çocuklarıdır <body>.
3. Öğem <nav>genellikle yalnızca web sitesinin ana gezinmesine uygulanır, ancak tüm bağlantılara veya bağlantı listelerine uygulanmaz. Web sitemin yoğun bir içeriği varsa, <nav>bu içerik için gezinme veya içerik tablosu işlevi görebilecek başka bir öğe ekliyorum.
4. Web sitemde iki veya daha fazla öğe varsa <nav>bunlar bir ARIA etiketiyle farklılaştırılır.
5. <h1>Genelde , sayfa içeriğini bir bütün olarak tanımlayan ve sayfaya benzeyen her sayfada yalnızca bir başlığım olur <title>.
6. <h2>Başlıkları gerektiği gibi alt başlıklar veya alt konular olarak kullanırım <h6>, ancak başlık seviyelerini atlamam (örneğin <h2>düzden <h4>.
7. <b>Yalnızca kalın veya vurgulu ( , <strong>, veya kullanılarak <em>) veya yalnızca büyük metinlerin sayfa başlığı olarak işlev görmediğini ve bu şekilde yorumlanmayacağını biliyorum .
8. <ul>Sırasız listeler , sıralı listeler <ol>ve açıklama listeleri gibi liste yapılarını <dl>yalnızca mantıksal bir liste oluşturan içerik için kullanıyorum .

1. Öğem , belgede kullanılan dili belirten htmlbir özniteliğe sahip .lang
2. langBir paragrafın içine serpiştirilmiş yabancı kelime öbekleri , yabancı kelime öbeğinin dilini belirten bir niteliğe sahip bir yayılma etiketi ile çevrilidir .

1. Bağlantıma tıklandığında yeni bir sekme veya pencere açılacağına dair bir gösterge var (eğer öyleyse).
2. Bağlantıma tıklamanın bir dosya indireceğine dair bir gösterge var (eğer öyleyse). Ek olarak, ne tür bir dosya olduğunu ve dosyanın ne kadar büyük olduğunu da belirtmelidir.
3. Bağlantı metinlerim (veya bağlantı metinlerim) açıklayıcıdır ve kullanıcılar tüm paragrafı veya kelime öbeğini okumasa bile kullanıcılara içeriklerinde ne olduğunu kendi başlarına söyler.
4. mailto:E-posta adresleri ve telefon numaraları, bir veya tel:bağlantı bağlantım olsa bile bağlantı metni olarak yazdırılıyor , yani <a href="[email protected]">[email protected]</a>bunun yerine bunu yapıyorum<a href="[email protected]">E-mail us</a>
5. Büyük bir metin parçasına (paragraf gibi) gömülü bağlantılar açıktır: altı çizili veya farklı bir renkte veya her ikisinde birden bulunur.
6. Linklerim mobilde tıklanabilir büyüklükte ve birbirine çok yakın değil.
7. Bağlantılarım fare ile gezilebilir ve klavye ile odaklanabilir. Bu, bağlantımın üzerine gelmenin veya odaklanmanın, bu bağlantının stilinde veya imlecin stilinde, üzerine geldiğimi veya odaklandığımı belirtmek için bir değişikliğe neden olacağı anlamına gelir.
8. Tüm bağlantılarım öğe kullanılarak bağlanır <a>, böylece tüm cihazlar bağlantıyı nasıl çalıştıracaklarını bilir.
9. Yalnızca simgeler içeren bağlantıların, simgenin ne olduğunu belirten alternatif bir metni vardır (örneğin, bir Twitter simgesinin alternatif metni “Twitter” olacaktır) veya niteliğine sahiptir aria-label.
10. Web sitemde, kullanıcıların yoğun metinleri veya içeriği atlamasına yardımcı olabilecek dahili veya sayfa içi bağlantılar var. Bu dahili veya sayfa içi bağlantılar, bağlantı verdiği bir öğenin ad niteliği yerine kimlik niteliğine işaret eder.

1. Tüm my buttons, kullanıcıları yeni bir sayfaya götüren bir bağlantı görevi görmez, bunun yerine bir eylemi etkinleştirir.

1. Tüm resimlerimin bir altözelliği var.
2. altTüm resimlerimde, resmin neyi gösterdiğini açıklayan alternatif metinler var; bu, bir öznitelik veya resmin içeriğini açıklayan resmi çevreleyen başka bir HTML öğesi biçiminde olabilir . Resmim tamamen dekoratifse ve siteyi anlamak için önemsizse, boş bir altniteliğe sahiptir ve alternatif metin yoktur.
3. Bağlantı bağlantılarının içindeki resimlerin ya boş bir altözniteliği vardır ya da altbağlantı yerine görüntüyü açıklayan bir özniteliği vardır. (Bunun dışında, bağlantımı erişilebilir kılmak için, bağlantının kullanıcılarımı nereye götürdüğünü gösteren alternatif bir metin veya bağlantı metnim de var.)
4. Görüntü biçimindeki form düğmeleri, altdüğmenin işlevini açıklayan 'Gönder', 'Kaydol' veya 'Giriş' gibi bir özniteliğe sahiptir.
5. Web sitemde görüntü haritaları varsa, görüntünün kendi altiçeriğini açıklayan bir özniteliği vardır - veya altiçeriği iletmiyorsa yalnızca alanlar için bir kapsayıcı işlevi görüyorsa boş bir öznitelik - buna karşılık görüntü haritası için her alan öğesinin, içeriği altaçıklayan bir özniteliği vardır. etkin noktanın işlevi.
6. Web sitem tek bir büyük resmin dilimleri olan birden fazla resim içeriyorsa, o zaman sadece bir resim (genellikle en büyüğü) altresmi açıklayan bir özniteliğe sahipken, diğer tüm dilimler boş altniteliklere sahiptir.
7. Tüm arka plan resimlerime bir öznitelik sağlanamadığı için alt, bunlar ya tamamen dekoratiftir ya da resme alternatif metin görevi gören bir HTML öğesi vardır.
8. altWeb sitemdeki tüm karmaşık görüntülerin (çizelgeler, grafikler veya haritalar), ekran okuyucular tarafından kullanılabilen, ancak yine de görüntünün genel içeriğini açıklayan bir özniteliği olan, genellikle bir veri tablosu biçiminde olan alternatif bir metni vardır. (İpucu: Tüm alternatif metin biçimleri görünümün dışına yerleştirilebilir, böylece görme özelliği etkinleştirilmiş kullanıcılar bunları görmez, ancak ekran okuyucular görür.)

Otomatik Erişilebilirlik Testi

İnternette, web sitenizi erişilebilirlik açısından test etmenize yardımcı olacak, bazıları ücretsiz, bazıları da ücretli bazı araçlar vardır. İşte en yaygın olanlardan bazıları:

1. deque tarafından balta (Ücretsiz ve Ücretli)https://www.deque.com/axe/
2. Chrome Deniz Feneri (Ücretsiz)https://developers.google.com/web/tools/lighthouse/
3. WebAIM'den WAVE (Ücretsiz ve Ücretli)https://wave.webaim.org/
4. Düzey Erişime Göre Web Erişilebilirliği (Ücretsiz ve Ücretli)https://www.webaccessibility.com/

Klavye Etkileşim Testi

Burada , bir web sitesindeki en yaygın etkileşimleri, bu etkileşimle ilişkili standart tuş vuruşlarını ve dikkate alınması gereken diğer bazı ek bilgileri sıraladıkları WebAIM'in Klavye Testine bir bağlantı bulunmaktadır . Klavye etkileşimi testi hakkında daha fazla bilgi için, Blanca Mendizábal Perelló'nun yazdığı Manuel Erişilebilirlik Testi: Klavye ve Ekran Okuyucu Gezintisi'ne bakın .

Ekran Okuyucu Testi

WebAIM'in Ekran Okuyucu Uyumluluğu için Tasarım web sitenizi ekran okuyucu erişilebilirliği için tasarlarken bilmeniz gereken en yaygın tekniklerden bazılarını listeler.

Web sitenizin veya uygulamanızın ekran okuyucularla nasıl performans gösterdiğini test etmek isterseniz, işletim sisteminiz için en iyi ekran okuyucu uygulamalarından ve yazılımlarından bazılarını burada bulabilirsiniz.

pencereler

Windows geliştiricileri için, sisteminizde en iyi Microsoft Edge ile kullanılan yerleşik bir Anlatıcı uygulaması vardır, ancak NV Access tarafından sağlanan NVDA Screen Reader ve Freedom Scientific tarafından geliştirilen JAWS gibi başka yazılımlar da mevcuttur (bu ücretsiz değildir).

Chrome işletim sistemi

Chromebook veya Chrome OS geliştiricileri için sisteminizde ChromeVox adlı yerleşik bir ekran okuyucu vardır . ChromeVox ayrıca bir Chrome tarayıcı eklentisi olarak da mevcuttur .

macOS ve iOS

macOS veya iOS geliştiricileri için, sisteminizde yerleşik bir Apple VoiceOver özelliği vardır .

Android

Android geliştiricileri için, sisteminizde yerleşik bir TalkBack özelliği vardır .

Diğer Yararlı Kaynaklar

WebAIM Color Contrast Checker
Chrome için Erişilebilir Renk Seçici

Referanslar

Rian Rietveld'in Mükemmel Bağlantısı. https://a11y-collective.com/blog/the-perfect-link/

Yalnızca Kendiniz İçin Geliştirmeyin: Bir Geliştiricinin Erişilebilirlik Kontrol Listesi. https://dev.to/eevajonnapanula/don-t-develop-just-for-yourself-a-developer-s-checklist-to-accessibility-545k

WebAIM: Alternatif Metin. https://webaim.org/techniques/alttext/

Nasıl anladın? https://www.scottohara.me/blog/2019/01/21/how-do-you-figure.html

Görme Engelliler İçin En İyi Ekran Okuyucular. https://www.maketecheasier.com/best-screen-readers-for-visually-impaired/

En İyi 7 Ekran Okuyucu Uygulaması ve Yazılımı https://www.techuntold.com/best-screen-readers/

Bir geliştiricinin bakış açısı: ekran okuyucu testiyle ilgili sorun https://jaketracey.com/a-developers-perspective-the-problem-with-screen-reader-testing/

Sitenizi Test Etmek İçin En İyi 25 Ücretsiz Erişilebilirlik Aracıhttps://www.accessiblemetrics.com/blog/7-web-accessibility-testing-tools-for-every-need/

Semantik Yapı: Bölgeler, Başlıklar ve Listeler (WebAIM)https://webaim.org/techniques/semanticstructure/

Ekran Okuyucularla Test Etme https://webaim.org/articles/screenreader_testing/