İşaretlemenizin Erişilebilirliğini İyileştirme

Markdown, HTML dönüştürme diline küçük bir metindir. Düz metin düzenleyicide biçimlendirilmiş metin yazmayı kolaylaştırmak amacıyla 2004 yılında John Gruber tarafından oluşturuldu. Markdown'ı internette birçok yerde, özellikle geliştiricilerin bulunduğu yerlerde bulabilirsiniz. İki dikkate değer örnek, GitHub'daki yorumlar ve Smashing Magazine'deki gönderilerin kaynak kodudur!

Markdown Nasıl Çalışır?

Markdown, içeriği biçimlendirmek için özel karakter düzenlemeleri kullanır. Örneğin, bir karakteri, sözcüğü veya tümceyi köşeli parantez içine alarak bir bağlantı oluşturabilirsiniz. Kapanış köşeli parantezinden sonra, bağlantı için bir hedef oluşturmak üzere parantez içine alınmış bir URL eklersiniz.

Yani yazarak:

 [I am a link](https://www.smashingmagazine.com/)

Aşağıdaki HTML işaretlemesini oluşturur:

 <a href="https://www.smashingmagazine.com/">I am a link</a>

Ayrıca HTML'yi Markdown ile karıştırabilirsiniz ve derlendiğinde hepsi HTML'ye dönüşecektir. Aşağıdaki örnek:

 I am a sentence that includes <span class="class-name">HTML</span> and __Markdown__ formatting.

Bunu HTML işaretlemesi olarak oluşturur:

 <p>I am a sentence that includes <span class="class-name">HTML</span> and <strong>Markdown</strong> formatting.</p>

İşaretleme ve Erişilebilirlik

Erişilebilirlik bütünsel bir endişedir, yani dijital deneyimler yaratmanın ve sürdürmenin her yönünü etkiler. Markdown dijital bir araç olduğundan, erişilebilirlikle ilgili dikkat edilmesi gereken noktalar da vardır.

• İyi haber :
  Markdown, basit HTML işaretlemesi oluşturur ve basit HTML işaretlemesi, yardımcı teknoloji ile kolayca okunabilir.
• Daha az iyi haber :
  Markdown her şeyi kapsamaz ve kuralcı da değildir. Ek olarak, erişilebilirlik için yalnızca yardımcı teknolojiden daha fazlası vardır.

Markdown içeriğinizin erişilebilir olmasını sağlamak söz konusu olduğunda, iki büyük resim sorunu vardır:

1. Markdown'ın desteklemediği belirli içerik türleri vardır ve
2. Yazarken size eşlik edecek Clippy benzeri bir deneyim yok, yani erişilemeyen içerik oluşturacak bir şey yaparsanız uyarı almayacaksınız.

Bu iki husus nedeniyle, Markdown içeriğimizin olabildiğince erişilebilir olmasını sağlamak için yapabileceğimiz şeyler var.

Yapabileceğiniz En Önemli Üç Şey

İçeriğinizi erişilebilir kılmak söz konusu olduğunda nereden başlayacağınızı bilmek zor olabilir. Büyük, önemli bir etki yaratmak için şu anda yapabileceğiniz üç şey var.

1. İçeriğinizin Ana Hatlarını Çıkarmak İçin Başlıkları Kullanın

Başlığa göre gezinme, birçok yardımcı teknoloji kullanıcısının, baktıkları sayfanın veya görünümün içeriğini anlamak için kullandığı açık ara en popüler yöntemdir.

Bu nedenle, mantıksal bir başlık yapısı oluşturmak için Markdown'ın başlık biçimlendirme seçeneklerini ( # , ## , ### , #### , ##### ve ###### ) kullanmak istiyorsunuz:

 # The title, a first-level heading Content ## A second-level heading Content ### A third-level heading Content ## Another second-level heading Content

Bu, taranması kolay hiyerarşik bir anahat oluşturur:

 1. The title, a first-level heading a. A second-level heading i. A Third-level heading b. Another second-level heading

Etkili başlık seviyeleri yazmak biraz sanattır, çünkü sayfanın genel kapsamını iletmek için yeterli bilgi istersiniz, ancak aşırı tanımlayarak birini bunaltmazsınız. Örneğin, bir tarif, malzemeleri, talimatları ve arka planı bölümlere ayırmak için yalnızca birkaç h2 öğesine ihtiyaç duyarken, akademik bir makale, nüansları tam olarak iletmek için altı başlık seviyesinin tümüne ihtiyaç duyabilir.

Bir sayfadaki tüm başlıkları hızlı bir şekilde tarayabilmek veya belirli bir başlığı görüntüleyebilmek ve atlayabilmek, sadece ekran okuyucularla sınırlı olmayan bir tekniktir. Bu özellikten yararlanmanıza izin veren başlıklar Haritası gibi uzantılardan zevk alıyorum ve yararlanıyorum.

2. Resimleriniz İçin Anlamlı Alternatif Açıklamalar Yazın

Alternatif açıklamalar, az gören veya kapalı resimlerle göz atan kişilerin, kullandığınız resmin içeriğini anlamalarına yardımcı olur.

Markdown'da, görüntü biçimlendirme kodunun açılış ve kapanış parantezleri arasına alternatif bir açıklama yerleştirilir:

 ![A sinister-looking shoebill staring at the camera.](https://live.staticflickr.com/3439/3259412053_92f822bee2_b.jpg)

Alternatif bir açıklama, görüntünün içeriğini ve neden dahil edildiğinin bağlamını açık ve net bir şekilde açıklamalıdır. Ayrıca noktalama işaretleri eklemeyi de unutmayın!

Markdown girişini kullanan belirli web siteleri ve web uygulamaları da sizin için alternatif açıklama metni eklemeye çalışacaktır. Örneğin GitHub, alt özelliği için yüklediğiniz dosyanın adını kullanır:

Ne yazık ki, bu, resmi göremeyen bir kişi için yeterli bağlam sağlamaz. Bu senaryoda, görüntünün neden dahil edilecek kadar önemli olduğunu iletmek istiyorsunuz.

Buna GitHub'da sıkça göreceğiniz örnekler şunları içerir:

• Bir şeyin olması gerektiği gibi görünmediği görsel bir hata,
• Önerilen yeni bir özellik,
• Geri bildirim sağlayan açıklamalı bir ekran görüntüsü,
• Süreçleri açıklayan grafikler ve akış şemaları ve
• Duyguları iletmek için tepki GIF'leri.

Bu resimler dekoratif değildir. GitHub varsayılan olarak herkese açık olduğundan, deponuza kimin eriştiğini veya koşullarını bilmiyorsunuz. Bunları proaktif olarak dahil etmek daha iyidir.

Alternatif açıklamalar yazmak için yardıma ihtiyacınız varsa, W3C'nin alternatif Karar Ağacı'nı ve Axess Lab'in Alternatif Metinler için Nihai Kılavuzunu heyecanla tavsiye ederim.

3. Düz Dil Kullanın

Basit, doğrudan dil herkesin içeriğinizi anlamasına yardımcı olur. Bu, insanları içerir:

• Bilişsel düşüncelerle,
• İngilizceyi ana dili olarak kullanmayan,
• İletişim kurduğunuz kavramlara aşina olmayan,
• Stresli veya çok görevli ve sınırlı dikkat süresine sahip olanlar,
• Ve bunun gibi.

Birinin yazdıklarınızı okuması ne kadar kolaysa, anlaması ve içselleştirmesi de o kadar kolay olur. Bu, blog gönderileri, Jira biletleri, Notion notları, GitHub yorumları, Trello kartları vb. gibi her türlü yazılı Markdown içeriğine yardımcı olur.

Cümlenizi ve kelime uzunluklarınızı düşünün. Ayrıca, hedef kitlenizin kim olduğunu düşünün ve kullandığınız jargon ve deyimler gibi şeyleri düşünün.

Dilinizi basitleştirmek için yardıma ihtiyacınız varsa, kullanmayı sevdiğim üç araç Hemingway, Datayze'nin Okunabilirlik Çözümleyicisi ve xkcd Simple Writer. Göz atmaya değer başka bir site de düz dil.gov'dur.

Diğer Hususlar

Ekstra mil gitmek ister misiniz? Harika! İşte yapabileceğiniz bazı şeyler:

Görüntüler

Alternatif açıklamalar sağlamanın yanı sıra, Markdown eklenmiş görüntülerinizi erişilebilir kılmak için yapabileceğiniz birkaç şey daha vardır.

SVG Görüntülerini Doğru Şekilde İşaretleyin

SVG, grafikler, simgeler, basit çizimler ve basit şekiller ve net çizgiler kullanan diğer görüntü türleri için harika bir formattır.

Markdown'da SVG oluşturmanın iki yolu vardır. Her iki yaklaşımın da dikkat etmeniz gereken belirli özellikleri vardır:

1. .svg dosya uzantılı bir görüntüye bağlantı verme

Not : Anlatmak üzere olduğum hata düzeltildi, ancak yine de önümüzdeki birkaç yıl için aşağıdaki tavsiyeyi öneriyorum. Bunun nedeni, Safari'nin tarayıcı güncellemelerini sistem güncellemelerine bağlama konusundaki şüpheli taktiğinin yanı sıra yardımcı teknoloji kullanan bazı kişilerin yazılımı güncelleme konusundaki tereddütleridir.

Bir SVG'ye görüntü olarak bağlanıyorsanız, Markdown'ın görüntü biçimlendirme kodunu ( ![]() ) değil, HTML'nin img öğesini kullanmak isteyeceksiniz.

Bunun nedeni, belirli ekran okuyucuların bir SVG dosyasına bağlanan bir img öğesini ayrıştırmaya çalıştıklarında hatalarla karşılaşmasıdır. Beklendiği gibi bir görsel olarak duyurmak yerine, bir grup olarak duyurur veya görselin duyurusunu tamamen atlar. Bunu düzeltmek için görüntü öğesinde role="img" :

 <img role="img" alt="A sylized sunflower." src="flower.svg" />

2. Satır İçi SVG Kodunu Kullanma

Bir görüntüyü img öğesi kullanmak yerine satır içi SVG kodu olarak bildirmenin birkaç nedeni vardır. En sık karşılaşma sebebim karanlık modu desteklemek.

Bir img öğesi kullanmaya çok benzer şekilde, yardımcı teknolojinin onu kod olarak değil bir görüntü olarak yorumlamasını sağlamak için eklemeniz gereken birkaç öznitelik vardır. İki öznitelik bildirimi role="img" ve aria-labelledby :

 <svg aria-labelledby="svg-title" fill="none" height="54" role="img" viewBox="0 0 90 54" width="90" xmlns="https://www.w3.org/2000/svg"> <title>A pelican.</title> <path class="icon-fill" d="M88.563 2.193H56.911a7.84 7.84 0 00-12.674 8.508h-.001l.01.023c.096.251.204.495.324.733l4.532 10.241-1.089 1.09-6.361-6.554a10.18 10.18 0 00-7.305-3.09H0l5.229 4.95h7.738l2.226 2.107H7.454l4.451 4.214h7.741l1.197 1.134c.355.334.713.66 1.081.973h-7.739a30.103 30.103 0 0023.019 7.076L16.891 53.91l22.724-5.263v2.454H37.08v2.81h13.518v-.076a2.734 2.734 0 00-2.734-2.734h-5.441v-3.104l2.642-.612a21.64 21.64 0 0014.91-30.555l-1.954-4.05 1.229-1.22 3.165 3.284a9.891 9.891 0 0013.036 1.066L90 5.061v-1.43c0-.794-.643-1.438-1.437-1.438zM53.859 6.591a1.147 1.147 0 110-2.294 1.147 1.147 0 010 2.294z"/></svg>

Ayrıca, bir img öğesinin alt niteliğine benzer şekilde, resmi tanımlamak için bir title öğesi ( title niteliğiyle karıştırılmamalıdır) kullandığınızdan emin olmak isteyeceksiniz. Bir alt özelliğinden farklı olarak, aria-labelledby kullanarak title öğesinin id üst svg öğesiyle ilişkilendirmeniz gerekir.

SVG'yi erişilebilir bir şekilde işaretleme konusunda daha derine inmek istiyorsanız, Heather Migliorisi'nin Erişilebilir SVG'leri ve Carie Fisher'ın Erişilebilir SVG'leri: Ekran Okuyucu Kullanıcıları İçin Mükemmel Modeller'i öneririm.

Duraklatılmış Animasyonlu Görüntülerle Yükle

Animasyonlu GIF'ler, Markdown içeriğinde bulacağınız başka bir yaygın şeydir - Bir geliştirici tarafından teknik bir konuyu tartışırken memnuniyetlerini ve hayal kırıklıklarını ifade etmek için kullanılmadıklarından daha sık buluyorum.

Mesele şu ki, bu animasyonlar dikkat dağıtıcı olabilir ve içeriğinizi okumaya çalışan birini olumsuz etkileyebilir. DEHB gibi bilişsel düşünceler burada özellikle etkilenir.

İyi haber şu ki, animasyonlu içerik eklemeye devam edebilirsiniz! Birkaç seçenek var:

1. Duraklatılmış durumda yüklenebilen .mp4 ve .webm gibi dosya türlerini kullanarak picture öğesini kullanın veya
2. Bir .gif dosyasına oynat/duraklat işlevi veren Steve Faulkner'ın details / summary kesmesi veya frozenframe.js kitaplığı gibi bir çözüm kullanın.

Bu küçük ayrıntı, kendinizi ifade etmenin bir yolunu bırakmanıza gerek kalmadan insanlara yardım etmenin uzun bir yolunu bulabilir.

Bağlantılar

Çevrimiçi içerik yazarsanız, er ya da geç bağlantıları kullanmak zorunda kalacaksınız. İşte dikkat edilmesi gereken bazı şeyler:

Benzersiz, Açıklayıcı Bağlantı Adları Kullanın

Bazı yardımcı teknoloji biçimleri, bir sayfadaki bağlantılar listesinde gezinebilir veya başlıklar arasında gezindikleri gibi görüntüleyebilir. Bu nedenle, bağlantılarınızın, birinin ziyaret ederse ne bulmayı bekleyebileceğine dair ipucu vermesini istiyorsunuz.

 Learn more about [how to easily poach an egg](https://lifehacker.com/this-is-the-chillest-easiest-way-to-poach-an-egg-1825889759).

Ayrıca, özellikle tekrarlanıyorlarsa, belirsiz ifadelerden kaçınmak isteyeceksiniz. "Buraya tıklayın" ve "daha fazla bilgi edinin" gibi terimler yaygın suçlulardır. Bu terimler, çevreleyen bağlantı olmayan içerik bağlamından ayrıldığında bir anlam ifade etmez. Ayrıca, terimi birden fazla kullanmak aşağıdaki gibi deneyimler yaratabilir:

Bağlantıları Yeni Bir Sekmede Veya Pencerede Açmaktan Kaçının

Markdown'ın Kramdown gibi belirli çeşitleri, bağlantıları yeni bir sekmede veya pencerede açabilen kod yazmanıza izin verir:

 [link name](url){:target="_blank"}

Bunu yapmak bir güvenlik riski oluşturur. Ayrıca, bu deneyim o kadar kafa karıştırıcı ve istenmeyen bir durum ki, bir Web İçeriği Erişilebilirlik Yönergeleri (WCAG) başarı kriteri. Web sitenizi veya web uygulamanızı kullanan herkesin yeni bir sekmede bir bağlantı açmak isteyip istememe konusunda seçim yapmasına izin vermek çok daha iyidir.

Bağlantıları Sağduyulu Kullanın

Bir atlama bağlantısı veya "atla gezinme", büyük içerik bölümlerini atlamanın bir yoludur. Bunlarla genellikle bir web sayfasındaki logoyu ve ana gezinmeyi atlamanın ve birinin ana içeriğe hızlı bir şekilde atlamasını sağlamanın bir yolu olarak karşılaşacaksınız.

Bağlantıları atlama, yalnızca bu kullanım durumuyla sınırlı değildir! Diğer iki örnek, bir e-ticaret sitesinde bir içindekiler tablosu ve sıralama/filtreleme kontrolleri olabilir.

Bağlantıları atlamanın bir başka harika kullanımı, birinin birden çok etkileşimli öğeye sahip gömülü içeriği atlamasına izin vermektir:

Bu aynı zamanda birinin gömülü içerikte yaygın olarak bulunan bir "klavye tuzağı"nı atlamasına izin vermek için harika bir tekniktir.

Klavye tuzakları, fare veya dokunmatik yüzey kullanmayan birinin, inşa edilme şekli nedeniyle etkileşimli bir bileşenden kaçamadığı yerlerdir. Bunları genellikle gömülü iframe widget'ları ile bulacaksınız.

Klavye tuzaklarını test etmenin iyi bir yolu mu? Sekme tuşunu kullanın!

Bir atlama bağlantısı olmadan, yardımcı teknoloji kullanan birinin tuzaktan kaçmak için sayfayı yenilemeye veya görüntülemeye başvurması gerekebilir. Bu harika değil ve özellikle motor kontrol endişeleri karışıma atılırsa rahatsız edici. Ben, çoğu insanın bu senaryoyla karşılaşırlarsa, onu işe almakla boğuşmak yerine sekmeyi kapatacaklarını düşünen okuldanım.

Manuel Matuzovic, Tab tuşuyla test etme konusundaki harika gönderisine ek olarak, atlama bağlantılarının kullanımından ve Embedded CodePens'in klavye erişilebilirliğini iyileştirme konusundaki diğer iyileştirmelerden bahsediyor.

Otomatik Olarak Oluşturulan Başlık Bağlantı Bağlantılarına Dikkat Edin

Bazı Markdown oluşturucular, yazdığınız her başlığa eşlik etmek için otomatik olarak bir bağlantı bağlantısı ekler. Bu, içerik paylaşırken birinin dikkatini bir sayfadaki ilgili bölüme veya görüntülemeye odaklayabilmeniz içindir.

Sorun şu ki, bu bağlantı bağlantısının nasıl oluşturulduğuna bağlı olarak bununla ilgili bazı yardımcı teknoloji sorunları olabilir. Bağlantı bağlantısı yalnızca #, veya § gibi bir glifin etrafına sarılırsa, iki sorunla karşılaşırız:

1. Bağlantının adı, çevresindeki bağlamdan çıkarıldığında bir anlam ifade etmez ve
2. Bağlantının adı tekrarlanır.

Bu konu, Amber Wilson tarafından Çapa Bağlantılarınıza Erişilebilir mi? Gönderisi ayrıca farklı çözümler ve bunların olası dezavantajları hakkında ayrıntılı bilgi veriyor.

İndirilenlerin Varlığını Belirtin

Çoğu zaman bağlantılar sizi başka bir sayfaya veya görünüme götürür. Ancak bazen hedef bir indirmedir. Bu olduğunda, tarayıcı:

1. Görüntülemek için istek dosya türüyle ilişkili bir uygulamayı açar veya
2. İşletim Sisteminin dosya sistemine kaydetmenizi ister.

Bu iki deneyim, özellikle ekranı göremiyorsanız, sarsıcı olabilir. Bu ideal olmayan deneyimi önlemenin iyi bir yolu, bağlantı adında indirmenin varlığını ima etmektir. Örneğin, bir PDF'ye bağlanırken Markdown'da bunu nasıl yapacağınız aşağıda açıklanmıştır:

 Download our [2020 Annual Report (PDF)](https://mycorp.biz/downloads/2020/annual-report.pdf).

Renk

Renk, Markdown ile ilgili değildir, ancak Markdown tarafından oluşturulan birçok içeriği etkiler. Renkle ilgili en büyük endişeler, WordPress, Eleventy, Ghost, Jekyll, Gatsby ve benzeri bir blog hizmeti kullanıyorsanız, genellikle değiştirebileceğiniz şeylerdir.

Karanlık Mod Teması Kullan

Karanlık mod için bir geçiş sağlamak, birinin okumasına yardımcı olacak bir deneyim seçmesine olanak tanır. Bazıları için estetik bir tercih olabilir, diğerleri için migren, göz yorgunluğu ve yorgunluk gibi şeylerden kaçınmanın bir yolu olabilir.

Burada önemli olan kısım seçimdir. Karanlık modu açık olan birinin web siteniz için ışık modunu kullanmasına izin verin ve bunun tersi de geçerlidir (ve bunu yapmak için kullanıcı arayüzünün erişilebilir olduğundan emin olun).

Mesele şu ki, bir kişinin web sitenizi veya web uygulamanızı ziyaret ettiğinde ihtiyaçlarının, isteklerinin veya koşullarının ne olduğunu bilemezsiniz, ancak onlara bu konuda bir şeyler yapma yeteneği verebilirsiniz.

Ayrıca Markdown'ın basit, anlaşılır HTML'yi dışa aktardığını ve bunun CSS içinde çalışması kolay olduğunu hatırlayalım. Bu, karanlık mod temanızı geliştirmeyi daha kolay hale getirmenin uzun bir yoludur.

İyi Renk Kontrastı Desteğiyle Sözdizimi Vurgulamayı Kullanın

Markdown, içeriği üçlü geri tepmelere ( ``` ) sararak kod blokları oluşturabilir. Ayrıca, bir karakteri, sözcüğü veya tümceyi tek geri tepmelerle sararak code öğesine sarılmış satır içi içerik oluşturabilir.

Her iki örnek için de birçok kişi, sağladıkları kod örneğini anlamalarına yardımcı olmak için PrismJS gibi sözdizimi vurgulama kitaplıkları ekler.

Bazı temalar, estetik bir seçim olarak açık-aydınlık veya koyu-karanlık değerleri kullanır. Ne yazık ki bu, kodun bazı kişiler için görülmesinin zor veya imkansız olabileceği anlamına gelir. Buradaki hile, insanların kodun her bir glifini gerçekten görebilecekleri kadar yüksek kontrastlı renk değerlerini kullanan bir sözdizimi vurgulama teması seçmektir.

Yeterince yüksek kontrast olup olmadığını belirlemenin bir yolu, WebAIM'ler gibi bir araç kullanmak ve tema tarafından sağlanan renk değerlerini manuel olarak kontrol etmektir. Daha hızlı bir öneri arıyorsanız ve biraz kendi tanıtımını yapmaktan çekinmiyorsanız, renk kontrastı dostu bir sözdizimi vurgulama teması sürdürüyorum.

Markdown Tarafından Desteklenmeyen İçerik

HTML'yi Markdown'da kullanabildiğiniz için, Markdown'da diğerlerinden daha sık göreceğiniz belirli içerik türleri vardır. İşte bunlardan birkaçı için birkaç düşünce.

iframe İçeriğini Tanımlamak için title Özelliğini Kullanın

HTML'nin title özelliği, bir araç ipucu efekti oluşturmak için yaygın olarak yanlış kullanılır. Ne yazık ki, bu yardımcı teknoloji kullanıcıları için çok fazla baş ağrısına neden oluyor ve bu şekilde kullanılması bir anti-kalıp olarak kabul ediliyor.

title niteliğinin iyi bir kullanımı, iframe ne içerdiğine dair kısa ve anlamlı bir açıklama sağlamaktır. Bu açıklama, yardımcı teknoloji kullanıcılarına, içeriğini kontrol etmek için iframe girerlerse ne bekleyecekleri hakkında bir ipucu sağlar.

Markdown için en yaygın iframe içeriği biçimi, YouTube videoları gibi yerleştirmeler olacaktır:

 <iframe width="560" height="315" src="https://www.youtube.com/embed/SDdsD5AmKYA" title="YouTube: Accessibility is a Hydra | EJ Mason | CascadiaJS 2019." frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Bağlantı metniniz gibi, genel ve tekrar eden title içeriğinden de kaçınmak isteyeceksiniz. YouTube'un yerleştirme kodu varsayılan olarak YouTube video player ve bu çok iyi değildir. Biraz daha iyisini yapabilir ve bunu YouTube: Video title güncelleyebiliriz. Bu, özellikle sayfaya veya görünüme gömülü birden fazla YouTube videosu varsa yardımcı olacaktır.

YouTube'un video başlığı bilgilerini zaten bildiği halde neden bu şekilde yaptığına gelince, tamamen başka bir sorun.

Videolar ve Kaydedilmiş Ses için Altyazılar ve Transkriptler Sağlayın

YouTube'dan bahsetmişken, yapmak isteyeceğiniz başka bir şey de videonuzun ve sesinizin altyazıları ve transkriptleri olmasını sağlamaktır.

Altyazılar

Altyazılar, konuşulurken gerçek zamanlı olarak video içeriğinin metin sürümünü görüntüleyerek biyolojik veya tesadüfi olarak sesi duyamayan birinin videonun içeriğini anlamasına olanak tanır. Altyazılar ayrıca ses efektlerini, müziği ve anlamı iletmek için önemli olan diğer ipuçlarını da içerebilir.

Çoğu popüler video barındırma sağlayıcısı, alt yazıları gömülü bir bağlamda görüntüleme dahil olmak üzere destekleyen özelliklere sahiptir. Buradaki önemli kısım, saçma sapan yazılardan kaçınmaktır; bir insan için anlamlı olduklarından emin olmak için otomatik olarak oluşturulan altyazıları manuel olarak gözden geçirin.

transkript

Transkriptler, altyazının kardeşidir. Tüm konuşulan diyalogları, ilgili ses efektlerini ve müziği ve diğer önemli ayrıntıları alır ve bunları gömülü video veya sesin dışında listeler. Birinin şunları yapmasına izin vermek dahil, bunu yapmanın birçok faydası vardır:

• Video ve ses içeriğini kendi hızlarında okuyun;
• İçeriğin boyutunu ve sunumunu değiştirin;
• İçeriği yazdırın veya sindirilmesi daha kolay bir biçime dönüştürün;
• İçeriği arama motorları aracılığıyla daha kolay keşfedin;
• İçeriği daha kolay tercüme edin.

Okuyucu Modu

Diğer Markdown ile ilgili endişeler gibi, Okuyucu Modu da erişilebilirlik açısından birçok fayda sağlayabilir.

Tanıdık değilseniz, Okuyucu Modu, ana içerik dışındaki her şeyi ortadan kaldıran birçok tarayıcı tarafından sunulan bir özelliktir. Çoğu okuyucu modu ayrıca metin boyutunu, yazı tipini, satır yüksekliğini, ön plan ve arka plan rengini, sütun genişliğini ayarlamak için kontroller sağlar, hatta cihazınızın içeriği sizin için yüksek sesle okumasını sağlar!

Markdown'ı kullanarak Reader Modunu doğrudan tetikleyemezsiniz. Bununla birlikte, Uzun Biçimli İşaretleme içeriği, genellikle onları Okuyucu Moduna uygun hale getirmek için ayarlanabilen şablonlarda işlenir.

Mandy Michael, Safari Okuyucu Modu ve diğer okuma uygulamaları için web siteleri oluşturma başlıklı yazısında bize bunu nasıl yapacağımızı öğretiyor. Bu harika özelliğin kilidini açmak için semantik HTML, bölümleme öğeleri ve bir dizi yapılandırılmış mikro veri kombinasyonu yeterlidir.

Her Şeyi Aynı Anda Yapmanıza Gerek Yok

Bu, Markdown'ın farklı yönlerini ve diğer teknolojilerle nasıl etkileşime girdiğini kapsayan uzun bir gönderidir. Birkaç farklı konu alanını kapsayacak çok fazla içerik olduğu için göz korkutucu görünebilir.

Erişilebilirlik çalışmasıyla ilgili olan şey, her küçük parçanın yardımcı olmasıdır. Bu yazıda sahip olduğum her düşünceyi büyük, kapsamlı bir değişiklikle ele almak zorunda değilsiniz. Bunun yerine, odaklanmak için bir şey seçmeyi deneyin ve oradan inşa edin.

Her ince ayar ve güncellemenin, web'i kullanırken birinin yaşam kalitesi üzerinde doğrudan bir etkisi olacağını bilin ve bu çok büyük.

Smashing Magazine'de Okumaya Devam Et

• CommonMark: Markdown İçin Resmi Bir Spesifikasyon
• Markdown'ı HTML'ye Dönüştürmek İçin Bir Node.js Express API Oluşturma
• Markdown'da Shadow DOM ile Model Kitaplıkları Oluşturma