Ölçeklenebilir Vektör Grafikleriyle Erişilebilir Bir Logo Oluşturma

Bir svg veya Scalable Vector Graphics, web üzerinde kolay, çözünürlükten bağımsız grafiklere izin veren bir dosya biçimidir. Doğrudan Photoshop'ta bir svg oluşturamazsanız da, resminizi Photoshop'tan bir svg olarak dışa aktarabilirsiniz.
Bir svg'yi logo olarak kullanmak söz konusu olduğunda, erişilebilirlik çok önemlidir. Yetenek veya engele bakmaksızın logonuzun herkes tarafından kolayca görülüp anlaşılabileceğinden emin olmak istiyorsunuz.
Bir svg'yi logo olarak kullanırken akılda tutulması gereken birkaç şey vardır. Öncelikle, svg'nize alternatif metin eklemeyi unutmayın. Bu, logonuzun ekran okuyucular ve diğer yardımcı teknolojiler tarafından okunabilmesini sağlayacaktır.
Ardından, logonuzu basit tutun. Logonuz ne kadar karmaşıksa, bilişsel engelli kişilerin anlaması o kadar zor olacaktır.
Son olarak, logonuzun okunaklı olduğundan emin olun. Bu, okunması kolay net bir yazı tipi kullanmak anlamına gelir.
Bu ipuçlarını izleyerek herkesin erişebileceği bir logo oluşturabilirsiniz.

1999'dan beri Ölçeklenebilir Vektör Grafiklerinin (SVG'ler) kullanımı arttı. Dekoratif ve bilgilendirici görseller arasındaki ayrım yapılmalıdır. Görüntünün dekoratif olması amaçlanıyorsa, boş/null alternatif bir metin özelliğine sahip olmalıdır. Açıklayıcı ve anlamlı alternatif içerik 250 karakterden, 800 karakterden fazla olmamalıdır. Basit, temel veya dekoratif bir resim kullanıyorsanız, onu <img> etiketini kullanarak bir dosya olarak kaydedebilirsiniz. Daha karmaşık veya temel SVG'ler için, HTML onlar için işaretleme içermelidir. Sonuç olarak, JavaScript ve CSS, görüntülerin stillerini ve animasyonlarını görüntülemek için daha geniş bir seçenek yelpazesine sahip olacaktır.

Temel alternatif içerikler anlatılırken best in show durumunda kimin öne çıkacağı belli değildi. Kalıpların birçoğu alternatif içerik oluşturabildiğinden, tasarımcılar ve geliştiriciler aralarından seçim yapabilecekleri daha geniş bir kalıp yelpazesine sahiptir. SVG'ler için daha açıklayıcı alternatif içerik sağlamaya gelince, kalıp 11, çeşitli tarayıcı ve ekran okuyucular için en güvenilir seçimdir.

Kullanımları çok basit olduğu için, vektör grafikleri hat sanatlarında, logolarda, animasyonlu resimlerde ve grafiklerde kullanılabilir. En yaygın iki logo türü, kullanıcılar tarafından kolayca tanınan logolar ve kullanıcılar onlarla etkileşime geçtiğinde renk değiştirebilen veya canlandırılabilen simgelerdir.

Vektör tabanlı olduğu için fotoğraflarda olduğu gibi çok sayıda ince ayrıntı ve dokuya sahip görüntülerde iyi çalışmaz. Daha basit renklere ve şekillere sahip logo, simge ve diğer düz grafikler biçime en uygun olanlardır. Ayrıca, modern tarayıcıların çoğu SVG'yi desteklerken eski tarayıcılar desteklemeyebilir.

JPEG'ler, PNG'ler ve GIF'ler ise ölçeklenebilir HTML5 işlevine sahip değildir ve hiçbir çözünürlükte mükemmel piksel olmayacaktır. Bir vektör görüntüsündeki dosyalar vektör olduğundan, dosya boyutu genellikle bitmap görüntülerden çok daha küçüktür. Gömülü SVG'ler oluşturmak için CSS stili kullanılabilir.

Svg Dosyalarına Erişilebilir mi?

Evet, SVG dosyalarına erişilebilir. Bunlar, ekran okuyucular ve diğer erişilebilirlik araçları tarafından okunabilen XML dosyalarıdır.

Equivalent Design'dan Akıllı SVG'ler, herhangi bir kullanıcının ihtiyaçlarını ve tercihlerini karşılamak için boyut, düzen ve renk bakımından değişebilen ölçeklenebilir vektör grafikleridir. Tüm dosyalar farklı ekran boyutlarına duyarlıdır ve karanlık mod da dahil olmak üzere çeşitli erişilebilirlik ayarlarıyla özelleştirilebilir. Renk körü insanlar için tasarım yaparken, ADA uyumlu renk kontrastına ek olarak, renk körü dostu bir palet, okunaklı yazı tipleri, anlaşılır mesajlar ve diğer erişilebilirlik hususları kullanırız. Piksel tabanlı görüntüler, genellikle görüntünün çözünürlüğü ile belirlenen çeşitli renkli kareler kullanılarak oluşturulur. XML, vektör tabanlı sanat eserlerinde bulunan tüm geometri ve matematik bilgilerini üreten bir bilgisayar programıdır. Kodun boyutu nedeniyle, görüntü artık yalnızca az miktarda kod içerdiğinden hızlı yüklenecek şekilde optimize edilebilir. Bu, erişilebilir bir Akıllı dosya türüdür.

Yükleme sürelerini kontrol altında tutmak için oluşturulmuştur. Herhangi bir büyük tarayıcıyı kullanabilmeniz gerekir. İşitsel açıklamalar büyütüldükçe ekran okuyucu deneyimi çok daha güzel hale geliyor. Animasyonlar oluşturabilirsiniz. Bir logo, bir simge, bir illüstrasyon veya bir infografik kullanabilirsiniz. Bu akıllı SVG'ler, ADA ve WCAP Düzeyi AA uyumlu olacak ve bu engelli erişilebilirlik hedeflerinin her ikisini de karşılamalarını sağlayacaktır.

Basit grafikler, basit SVG dosyalarıyla oluşturulabilir ve bunların değiştirilmesi ve özelleştirilmesi kolaydır. SVG dosyalarını bir metin düzenleyicide veya CorelDRAW gibi bir grafik düzenleyicide düzenlemek kolaydır. Ayrıca, en popüler web tarayıcıları SVG dosyalarının kullanımını destekler, böylece çalışmanızı başkalarıyla kolayca paylaşabilirsiniz.

Svg Metnine Erişilebilir

Metni svega formatında alabilirsiniz. Bu yöntem, daha fazla bilginin doğrudan SVG'ye eklenmesini sağlayarak, ekran okuyucu gibi erişilebilir bir teknoloji kullanan kişilerin daha net görmesini sağlar.

Svg Metnine Erişilebilir mi?

svg metninin türü, kullanıldığı bağlam ve nasıl uygulandığı gibi çeşitli faktörlere bağlı olabileceğinden, bu sorunun tek bir yanıtı yoktur. Bununla birlikte, genel olarak svg metnine, doğru öğeleri ve öznitelikleri kullanmak, alternatif metin sağlamak ve metnin ekran okuyucular tarafından görünür olmasını sağlamak gibi bazı temel yönergeler izlenerek erişilebilir hale getirilebilir.

Ölçeklenebilir Vektör Grafiklerine (SVG) dayalı XML tabanlı bir vektör grafik formatıdır. Bu teknoloji, etkileşimli, uyarlanabilir, duyarlı ve programlanabilir olduğu için modern web tasarımında yaygın olarak kullanılmaktadır. Bu öğretici, SVG dosyanızı ekran okuyucular için nasıl erişilebilir hale getireceğinizi göstermeyi amaçlamaktadır. Başlık ve açıklama etiketleriniz, metinden konuşmaya tarayıcılarda her zaman görünmeyebilir. Aria-labelledby ve ariadescriptionby öznitelikleri, değerlerinin doğru olduğundan emin olmak için >svg> öğesine eklenebilir. Bu öğelerin eklenmesi, ekran okuyucunun bunları ziyaretçiye okumasını sağlar. Grafiklerinizde canlı metin veya oluşturduğunuz bir başlık göstermek her zaman gerekli değildir.

Bu bilgiler birkaç basit adımla kaldırılabilir. Aşağıdaki kodu bulup metin etiketinize girerek sınıf konuşmasıyla birlikte SVG dosyanıza dahil edebilirsiniz. Bu kod, ekran okuyucuya bu metnin yalnızca sunum yoluyla görüntülenmeye yönelik olduğunu söyler.

Svg Erişilebilirliği: Simgenizi Nasıl Erişilebilir Hale Getirirsiniz?

Erişilebilirlik SVG'leri doğrudan görüntüye eklenebilir ve görüntüye daha fazla bilginin eklenmesine olanak tanır - bu da ekran okuyucular gibi engelli kişilere yardımcı olur. Bir SVG simgesine erişmenin en iyi yolu nedir? Kodunuzu oluştururken *başlığı eklediğinizden emin olun. Başlık her zaman svg'nin başında ve yoldan önce görünmelidir. aria-descriptionby eklemek için svg> olarak ayarlanmalıdır. Anastoyevski'nin açıklamasını açıklayan sayfada bu arya özelliği hakkında bilgi edinebilirsiniz. Bir web sayfası bağlamında, bir metin düzenleyicide düzenlenebilen, aranabilen ve sıkıştırılabilen, otomatik olarak oluşturulabilen ve değiştirilebilen, (X)HTML'ye dahil edilebilen ve insanlar tarafından okunabilen bir formattır. animasyonlu da olabilir.

Erişilebilirlik Svg Simgeleri

SVG simgelerini daha erişilebilir hale getirmenin çeşitli yolları vardır. Bunlardan biri, simgenin açıklamasını sağlamak için aria-labelledby kullanmaktır. Bir diğeri, simgeye ekran okuyucular tarafından okunabilecek bir ad vermek için role=”img” kullanmaktır. bir diğeri de metni sağlamaktır.

Satır İçi Svg Erişilebilirliği

Satır içi svg erişilebilirliği, svg içeriğini engelli kişiler için erişilebilir hale getirme sürecidir. Bu, svg öğelerinde uygun roller, durumlar ve özellikler kullanılarak ve svg içeriği için alternatif metin sağlanarak yapılabilir.

Web'de Ölçeklenebilir Vektör Grafiklerinin (SVG) kullanımı giderek daha popüler hale geliyor. Bir grafiğin tamamen dekoratif olması için metnin farklı olmaması gerekir. Tüm > etiketleri alt özniteliğine sahip olmalıdır, ancak gerekli değildir (boşluk gerekmez). Artık SVG'yi doğrudan içine ekleyerek HTML'yi doğrudan kullanabilirsiniz. Rolleri kullanıyorsanız, eski Safari veya WebKit sürümlerinde role=”img” öğesini role=”group” ile değiştirmeniz gerekebilir. Başlığı veya açıklamayı değiştirerek görüntüyü daha net hale getirebilirsiniz. Sekme dizini 20 olacaktır.

Seçtiğiniz bir yöntemi kullanarak tabIndex değerini katıştırmak istediğiniz SVG'ye ekleyin. Bir grafiği gömmek için nesneler veya iframe'ler kullanılabilir. Belgenin başlığı (NVDA için) belgenin gövdesine dahil edilmelidir. Metni görsel olarak gizlemek ancak ekran okuyucular tarafından okunmasına izin vermek için bir sınıf eklemek iyi bir fikirdir. Bu, hem JAWS hem de NVDA için yazı tipi boyutunu 0,2 olarak ayarlayarak gerçekleştirilebilir. Bir SVG kullanarak daha erişilebilir bir simge yazı tipi uygulamak mümkün müdür? Ancak, daha önce belirtildiği gibi, bu derste size bunu simgenin kendisini kullanarak nasıl yapacağınızı göstereceğiz.

Simgeler tipik olarak bir simge oluşturucudan bu şekilde kodlanır. Temel Görüntü Değiştirme, Satır İçi Komut Dosyası örneği, bu yöntemin nasıl kullanılacağını gösterir. Ekran okuyucu, arya işaretli olmadığı sürece bağlantı etiketi içindeki metni görüntülemez. Alt özelliğinde çok fazla ayrıntı olduğu için bunun yerine alternatif metin kullanabiliriz. Adobe Illustrator'da katman dışa aktarma işlemleri, katmanlar SVG'ye eklenerek aşağıdan yukarıya doğru yapılabilir. SVG'me bir şey olursa diye, biri Illustrator'da düzenleme için, diğeri kod düzenleme için olmak üzere her iki sürümü de CA'da tutuyorum. Git tabanlı bir kaynak denetimi varyasyonu kullanıyorsanız (git, SourceTree, vb.) dosyayı teslim etmelisiniz.

Bir SVG'yi elle düzenlemeden önce, eksiksiz bir tasarım olduğundan %100 emin olana kadar beklemek en iyisidir. Bu durumda, başlık ve açıklamayı karşılık gelen metin öğelerine bağlayalım, böylece başlık ve açıklama gibi görünürler. Anlamsal roller oluşturma – Çubukları, etiketleri ve anahtarları içeren gruplara anlamsal roller ekleyin. Bir çubuk grafik eklemek istiyorsanız, listeyi içeren gruba bir etiket ekleyin. Hataları kontrol edin – Test etmek için bir ekran okuyucu kullanacağız. SVG'nin tüm tarayıcılarda görüntülenebilmesini sağlamak için HTML koduna role=”group” ekleyin. Bir zaman çizelgesi veya zaman dilimi, onu içeren gruplardaki belirli anlamsal rollere anlamsal olarak atanabilir.

Lütfen bir etiket ekleyin: zaman çizelgesi. Tabindex [[0]] öğesinin odakta olduğundan emin olmanın en iyi yolu onu tüm tarayıcılara eklemektir. Bağlantının anlamı düzeltilmelidir. Tamamen kendi sorumluluğunuzdadır. Başka bir siteye yönlendirme yapmayan ve ekran okuyucuların kafasının karışmasına neden olabilecek bir web sayfasında bu URL'nin bulunması semantik bir bağlantı değildir. SVG'leri kullanırken, öğenin görüntü alanında olduğundan emin olmak için her zaman pencereyi kaydırmanız gerekmez. Bazı tarayıcılar, ekran dışındaki alt öğelere bakmadan HTML öğesinin tamamını kaydırıyor gibi görünür. Az gören kişiler, az görmeleri nedeniyle Windows ve Yüksek Mod Kontrastı'ndaki bu özellikten yararlanır.

Svg Erişilebilirliği: Başlık ve Aria Ekleme-tarafından açıklanan

Svg'nize bir başlık ve arya açıklaması eklediğinizde, engelli kişiler bunu daha kolay kullanabilir. Svg'nin ne hakkında olduğu veya neyi temsil etmesi gerektiği hakkında daha fazla bilgi edinmek istiyorsanız, etiketleri okuyun. Ek olarak, satır içi SVG dosyalarının gömülü svg dosyalarına göre birçok avantajı vardır. Ayrıca, svg'ler belgenizdeki diğer öğelere benzer şekilde ele alınabileceğinden, CSS etkileşimi çok daha kolaydır. Bu, vurgulu efektler gibi etkileşimler açısından önemli bir avantajdır.

Svg> Etiket Erişilebilirliği

svg> etiketi grafik oluşturmak için kullanıldığından, bu etiketi kullanırken erişilebilirliği göz önünde bulundurmak önemlidir. svg> içeriğini daha erişilebilir hale getirmenin birkaç yolu vardır. İlk olarak, grafiğin açıklamasını sağlamak için başlık özniteliğini kullanın. Bu, ekran okuyucular tarafından okunacaktır. İkinci olarak, grafiğe belirli bir rol vermek için role niteliğini kullanın. Bu, ekran okuyucular tarafından da okunacaktır. Son olarak, grafik için bir etiket sağlamak üzere aria-label niteliğini kullanın.

Bir Başlık Ekleyerek Svg'lerinizi Erişilebilir Hale Getirin

Bir *başlık ekleyerek svg dosyanızın erişilebilirliğini artırabilirsiniz. Svg'nin ne olduğunu belirlemek için, onun tarafından açıklanan aria'yı ekleyin. Svg'ler ekran okumaya izin verecek şekilde kodlandığı sürece okunabilir. svg'nin dekoratif bir nesne olması amaçlanıyorsa, aria-hidden=true kullanmaktan kaçının.

Dekoratif Svg Erişilebilirliği

Dekoratif svg'nizin erişilebilir olduğundan emin olmanın birçok yolu vardır. Alternatif metin eklemek, dosyanın düzgün biçimlendirildiğinden emin olmak ve ekran okuyucular tarafından okunabilmesi için fazladan kod eklemek için çeşitli yöntemler kullanabilirsiniz. Svg'nizin erişilebilir olduğundan emin olmak için Inkscape gibi araçları da kullanabilirsiniz.

Svg Başlık Erişilebilirliği

Bir SVG grafiğine başlık eklemek, onu daha erişilebilir hale getirmenin bir yoludur. Başlık öğesi, bir adı bir SVG grafiğiyle ilişkilendirmek için kullanılır. svg öğesi içinde başlık öğesi kullanıldığında, grafik için bir açıklama sağlar. Başlık öğesi, grafik için daha uzun bir açıklama sağlamak üzere kullanılabilir ve bu, özellikle ekran okuyucu kullanan kişiler için yararlı olabilir.

Svg Erişilebilirlik Alternatif Metni

Bir HTML belgesinde, uygulandığı öğe işlenemezse işlenecek alternatif metni (alt metin) belirtmek için bir "alt" özniteliği kullanılır. Bir HTML belgesinde, alternatif metin resimlere alt özniteliği aracılığıyla uygulanır. Özniteliğin değeri, ekran okuyucular tarafından okunabilen, görüntüyü tanımlayan metindir. svg erişilebilirlik alt metni, göremeyenler için görüntünün erişilebilir bir açıklamasını sağlamak için kullanılır. Metin kısa ve açıklayıcı olmalı ve img öğesinin alt özelliğinde yer almalıdır.

Aria-descriptionby'yi Svgs'ye Ekleme

Çoğu durumda, svg> tarafından açıklanan aria, tarayıcılara bu svg>'nin genellikle içerik türü olan simge hakkında bilgi içerdiğini söyler. Bir kullanıcının bir ekran okuyucusu varsa, özniteliğe göre açıklanan aryayı dinleyebilir ve bulduklarına göre simge hakkında eğitimli kararlar verebilir.

Erişilebilir Svg

Erişilebilir bir SVG, engelli kişiler tarafından anlaşılabilen ve kullanılabilen bir SVG'dir. Bu, metin açıklamaları eklemeyi, resimler için alternatif metin sağlamayı ve bir klavye veya başka bir yardımcı cihaz kullanılarak SVG'de gezinilebilmesini sağlamayı içerebilir.

Svgs Alternatif Metni Destekleyebilir

svgs, alternatif metni destekleyebilmesinin yanı sıra ayrıca desteklenir. Alt niteliği seçilirse, resim tıklandığında veya tıklandığında resmin yanında bu görünecektir.