Erişilebilir bir uygulama oluşturma

Makale
06/16/2023

İnternet kullanıcılarının %20'si kadarının erişilebilir web uygulamalarına ihtiyacı vardır. Bu nedenle, uygulamanızın herhangi bir kullanıcının kolayca kullanabileceği şekilde tasarlandığından emin olmak önemlidir. Erişilebilirliği tamamlayacak bir dizi görev olarak düşünmek yerine, genel kullanıcı deneyiminizin bir parçası olarak düşünün. Uygulamanız ne kadar erişilebilir olursa, uygulamayı o kadar çok kişi kullanabilir.

Harita gibi zengin etkileşimli içerik söz konusu olduğunda, erişilebilirlik konusunda dikkat edilmesi gereken bazı yaygın noktalar şunlardır:

Web uygulamasını görme zorluğu çeken kullanıcılar için ekran okuyucuyu destekleyin.
Web uygulamasıyla etkileşim kurmak ve gezinmek için fare, dokunma ve klavye gibi birden çok yönteme sahip olursunuz.
Renk karşıtlığının renklerin bir araya gelmediğinden ve birbirinden ayırt edilmesi zor hale gelecek şekilde olduğundan emin olun.

Azure Haritalar Web SDK'sı aşağıdaki gibi erişilebilirlik özellikleriyle önceden oluşturulmuş olarak gelir:

Harita hareket ettiğinde ve kullanıcı bir denetime veya açılan pencereye odaklandığında ekran okuyucu açıklamaları.
Fare, dokunma ve klavye desteği.
Yol haritası stilinde erişilebilir renk karşıtlığı desteği.
Yüksek karşıtlık desteği.

Tüm Microsoft ürünlerinin erişilebilirlik uyumluluğu ayrıntıları için bkz . Erişilebilirlik Uyumluluğu Raporları. Belgeyi özellikle Azure Haritalar Web SDK'sına yönelik olarak bulmak için "Azure Haritalar web" araması yapın.

Haritada gezinme

Haritayı yakınlaştırmanın, kaydırmanın, döndürmenin ve perdelemenin birkaç farklı yolu vardır. Aşağıda, haritada gezinmenin tüm farklı yolları ayrıntılı olarak yer alır.

Haritayı yakınlaştırma

Fare kullanarak haritaya çift tıklayarak bir düzeyi yakınlaştırın.
Fare kullanarak haritayı yakınlaştırmak için tekerleği kaydırın.
Dokunmatik ekran kullanarak haritaya iki parmağınızla dokunun ve yakınlaştırmak için parmaklarınızı uzaklaştırmak veya uzaklaştırmak için birbirinden ayırmak için sıkıştırın.
Dokunmatik ekran kullanarak haritaya iki kez dokunarak bir düzeyi yakınlaştırın.
Harita odaklanmış durumdaysa, bir düzeyi yakınlaştırmak için Artı işaretini (+) veya Eşittir işaretini (=) kullanın.
Harita odaklanmış durumdaysa, bir düzeyi uzaklaştırmak için Eksi işareti, Kısa Çizgi (-) veya Alt Çizgi (_) kullanın.
Yakınlaştırma denetimini fare, dokunma veya klavye sekmesi/enter tuşlarıyla kullanma.
Düğmeyi Shift basılı tutun ve harita üzerinde sol fare düğmesini aşağı doğru basılı tutun ve haritayı yakınlaştıracak bir alan çizmek için sürükleyin.
Birkaç çok dokunmatik tuş takımı kullanma, uzaklaştırmak için iki parmağı yukarı veya yakınlaştırmak için aşağı sürükleme.

Haritayı kaydırma

Fare kullanarak haritada sol fare düğmesiyle aşağı basın ve herhangi bir yönde sürükleyin.
Dokunmatik ekran kullanarak haritaya dokunun ve istediğiniz yönde sürükleyin.
Harita odaklanmış durumdaysa, haritayı taşımak için ok tuşlarını kullanın.

Haritayı döndürme

Fare kullanarak harita üzerinde sağ fare düğmesiyle aşağı basın ve sola veya sağa sürükleyin.
Dokunmatik ekran kullanarak haritaya iki parmağınızla dokunun ve döndürün.
Harita odaklanmış durumdaysa shift tuşunu ve sol veya sağ ok tuşlarını kullanın.
Döndürme denetimini fare, dokunma veya klavye sekmesi/enter tuşlarıyla kullanma.

Haritayı sunum

Fareyi kullanarak harita üzerinde sağ fare düğmesiyle aşağı basın ve yukarı veya aşağı sürükleyin.
Dokunmatik ekran kullanarak haritaya iki parmağınızla dokunun ve birlikte yukarı veya aşağı sürükleyin.
Harita odaklanmış durumdaysa shift tuşunun yanı sıra yukarı veya aşağı ok tuşlarını kullanın.
Fare, dokunma veya klavye sekmesi/enter tuşlarıyla ses perdesi denetimini kullanma.

Harita Stilini Değiştirme

Tüm geliştiriciler, tüm olası harita stillerinin kendi uygulamalarında kullanılabilir olmasını istemez. Geliştirici haritanın stil seçici denetimini görüntülerse, kullanıcı fareyi, bir dokunuşu veya sekme veya enter tuşuyla klavyeyi kullanarak harita stilini değiştirebilir. Geliştirici, harita stili seçici denetiminde hangi harita stillerini kullanılabilir hale getirmek istediğini belirtebilir. Ayrıca geliştirici, harita stilini program aracılığıyla ayarlayabilir ve değiştirebilir.

Yüksek karşıtlığı kullan

Harita denetimi yüklendiğinde, yüksek karşıtlık etkinleştirilip etkinleştirilmediğini ve tarayıcının bunu destekleyip desteklemediğini denetler.
Harita denetimi, cihazın yüksek karşıtlık modunu izlemez. Cihaz modu değişirse harita değişmez. Bu nedenle, kullanıcının sayfayı yenileyerek haritayı yeniden yüklemesi gerekir.
Yüksek karşıtlık algılandığında harita stili otomatik olarak yüksek karşıtlık düzeyine geçer ve tüm yerleşik denetimler yüksek karşıtlık stili kullanır. Örneğin, ZoomControl, PitchControl, CompassControl, StyleControl ve diğer yerleşik denetimler yüksek karşıtlık stili kullanır.
Açık ve koyu olmak üzere iki tür yüksek karşıtlık vardır. Yüksek karşıtlık türü harita denetimleri tarafından algılanabilirse, haritanın davranışı buna göre ayarlanır. Açıksa, grayscale_light harita stili yüklenir. Tür algılanamazsa veya koyuysa, high_contrast_dark stili yüklenir.
Özel denetimler oluşturuyorsanız, yerleşik denetimlerin yüksek karşıtlık stili kullanıp kullanmadiğini bilmek yararlı olur. Geliştiriciler, denetlemek için harita kapsayıcı div'ine css sınıfı ekleyebilir. Eklenecek css sınıfları ve high-contrast-light'tirhigh-contrast-dark. JavaScript'i kullanmayı denetlemek için şunu kullanın:

map.getMapContainer().classList.contains("high-contrast-dark")

veya şunu kullanın:

map.getMapContainer().classList.contains("high-contrast-light")

Klavye kısayolları

Harita, haritanın kullanımını kolaylaştıran yerleşik klavye kısayollarına sahiptir. Harita odaklandığında bu klavye kısayolları çalışır.

Anahtar	Eylem
`Tab`	Haritadaki denetimler ve açılır pencereler arasında gezinin.
`ESC`	Odağı haritadaki herhangi bir öğeden üst düzey harita öğesine taşıyın.
`Ctrl` + `Shift` + `D`	Ekran okuyucu ayrıntı düzeyini değiştirme.
Sol ok tuşu	Haritayı 100 piksel sola kaydırma
Sağ ok tuşu	Haritayı 100 piksel sağa kaydırma
Aşağı ok tuşu	Haritayı 100 piksel aşağı kaydırma
Yukarı ok tuşu	Haritayı 100 piksel yukarı kaydırma
`Shift` + yukarı ok	Harita sunum oranını 10 derece artırma
`Shift` + aşağı ok	Harita ses düzeyini 10 derece azaltma
`Shift` + sağ ok	Haritayı saat yönünde 15 derece döndürme
`Shift` + sol ok	Haritayı saat yönünün tersine 15 derece döndürme
Artı işareti (`+`) veya ^*Eşittir işareti (`=`)	Yakınlaştır
Eksi işareti, Kısa Çizgi (`-`) veya ^*Alt Çizgi (`_`)	Uzaklaştır
`Shift` + fareyi harita üzerinde sürükleyerek alan çizin	Alanı yakınlaştır

^* Bu tuş kısayolları genellikle klavyede aynı tuşu paylaşır. Bu kısayollar, kullanıcı deneyimini geliştirmek için eklenmiştir. Kullanıcının bu kısayollar için shift tuşunu kullanıp kullanmaması da önemli değildir.

Kullanıcılar klavyeyi kullanarak haritada gezinebilir. Ekran okuyucu çalışıyorsa, harita kullanıcıya durumundaki değişiklikleri bildirir. Örneğin, harita kaydırıldığında veya yakınlaştırıldığında kullanıcılara harita değişiklikleri bildirilir. Varsayılan olarak, harita yakınlaştırma düzeyini ve harita merkezinin koordinatlarını dışlayan basitleştirilmiş açıklamalar sağlar. Kullanıcı, klavye kısayolunu Ctrl + + ShiftDkullanarak bu açıklamaların ayrıntı düzeyini değiştirebilir.

Temel haritaya yerleştirilen tüm ek bilgiler, ekran okuyucu kullanıcıları için karşılık gelen metin bilgilerine sahip olmalıdır. Uygun yerlerde Erişilebilir Zengin İnternet Uygulamaları (ARIA), alternatif ve başlık öznitelikleri eklediğinizden emin olun.

Açılır pencerelerin klavyeyi erişilebilir hale getirme

İşaretçi veya simge genellikle haritadaki bir konumu temsil etmek için kullanılır. Konumla ilgili ek bilgiler genellikle kullanıcı işaretçiyle etkileşime geçtiğinde açılır pencerede görüntülenir. Çoğu uygulamada, kullanıcı bir işaretçiyi seçtiğinde açılır pencereler görüntülenir. Ancak, tıklayıp dokunmak için kullanıcının sırasıyla fare ve dokunmatik ekran kullanması gerekir. Klavye kullanırken açılır pencerelerin erişilebilir olmasını sağlamak iyi bir uygulamadır. Bu işlev, her veri noktası için bir açılır pencere oluşturup haritaya ekleyerek elde edilebilir.

Erişilebilir açılır pencere örneği, bir simge katmanı kullanarak haritadaki ilgi çekici noktaları yükler ve her ilgi alanı noktası için haritaya bir açılır pencere ekler. Her açılan pencereye başvuru, her veri noktasının özelliklerinde depolanır. İşaretçinin ne zaman seçildiği gibi bir işaretçi için de alınabilir. Haritaya odaklandığınızda, sekme tuşuna basmak kullanıcının haritadaki her açılan pencerede adım adım ilerleyebilmesini sağlar. Bu örneğin kaynak kodu için bkz . Erişilebilir açılır pencereler kaynak kodu.

Erişilebilir açılır pencereler içeren bir haritayı gösteren ekran görüntüsü.

Diğer erişilebilirlik ipuçları

Web eşleme uygulamanızı daha erişilebilir hale getirmek için bazı ipuçları aşağıdadır.

Haritada birçok etkileşimli nokta verisi görüntüleniyorsa dağınıklığı azaltmayı ve kümelemesini kullanmayı göz önünde bulundurun.
Metin/simgeler ve arka plan renkleri arasındaki renk karşıtlığı oranının 4,5:1 veya daha fazla olduğundan emin olun.
Ekran okuyucunuzun (ARIA, alt ve başlık öznitelikleri) iletilerini kısa, açıklayıcı ve anlamlı tutun. Gereksiz jargon ve kısaltmalardan kaçının.
Kullanıcının sindirilmesi kolay kısa ve anlamlı bilgiler sağlamak için ekran okuyucuya gönderilen iletileri iyileştirmeyi deneyin. Örneğin, harita hareket ederken olduğu gibi ekran okuyucuyu yüksek sıklıkta güncelleştirmek istiyorsanız aşağıdaki noktaları gerçekleştirmeyi göz önünde bulundurun:
- Ekran okuyucuyu güncelleştirmek için haritanın taşınmasını bitirene kadar bekleyin.
- güncelleştirmelerini birkaç saniyede bir azaltma.
- İletileri mantıksal bir şekilde birleştirin.
Bilgi iletmenin tek yolu olarak renk kullanmaktan kaçının. Rengi desteklemek veya değiştirmek için metin, simge veya desen kullanın. Dikkat edilmesi gereken bazı noktalar:
- Veri noktaları arasındaki göreli değeri göstermek için kabarcık katmanı kullanıyorsanız, her kabarcığın yarıçapını ölçeklendirmeyi, baloncuğu renklendirmayı veya her ikisini birden kullanmayı göz önünde bulundurun.
- Üçgenler, yıldızlar ve kareler gibi farklı ölçüm kategorileri için farklı simgeler içeren bir simge katmanı kullanmayı göz önünde bulundurun. Simge katmanı, simgenin boyutunu ölçeklendirmeyi de destekler. Metin etiketi de görüntülenebilir.
- Çizgi verileri görüntüleniyorsa genişlik, ağırlığı veya boyutu göstermek için kullanılabilir. Çizgi dizisi deseni, farklı çizgi kategorilerini temsil etmek için kullanılabilir. Simge katmanı, çizgi boyunca simgeleri yer paylaşımlı hale getirmek için çizgiyle birlikte kullanılabilir. Ok simgesi kullanmak, çizginin akışını veya yönünü göstermek için kullanışlıdır.
- Çokgen verileri görüntüleniyorsa, renk alternatifi olarak şeritler gibi bir desen kullanılabilir.
Isı haritaları, kutucuk katmanları ve görüntü katmanları gibi bazı görselleştirmelere görme bozukluğu olan kullanıcılar tarafından erişilemez. Dikkat edilmesi gereken bazı noktalar:
- Ekran okuyucunun haritaya eklendiğinde katmanın ne görüntülendiğini açıklamasını sağlayın. Örneğin, bir hava durumu radarı kutucuğu katmanı görüntüleniyorsa, ekran okuyucunun "Hava durumu radar verileri haritada yer paylaşımlı" desin.
Fareyle üzerine gelindiğinde gereken işlevsellik miktarını sınırlayın. Bu işlevler, uygulamanızla etkileşim kurmak için klavye veya dokunmatik cihaz kullanan kullanıcılar tarafından erişilemez. Tıklanabilir simgeler, bağlantılar ve düğmeler gibi etkileşimli içerikler için vurgulama stiline sahip olmak yine de iyi bir uygulamadır.
Klavyeyi kullanarak uygulamanızda gezinmeyi deneyin. Sekme sıralamanın mantıksal olduğundan emin olun.
Klavye kısayolları oluşturuyorsanız, bunu iki veya daha az tuşla sınırlamayı deneyin.