Erişilebilir bir uygulama oluşturma

Makale
08/05/2024

İnternet kullanıcılarının %20'sinin yukarı doğru 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, bunu 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çerikler söz konusu olduğunda erişilebilirlikle ilgili bazı yaygın noktalar şunlardır:

Web uygulamasını görmekte zorlanan 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 olun.
Renk karşıtlığının renklerin bir araya gelmediğinden ve birbirinden ayırt etmek 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çılır 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ünleri için erişilebilirlik uyumluluğu ayrıntıları için bkz . Erişilebilirlik Uyumluluğu Raporları. Belgeyi Azure Haritalar Web SDK'sına özel olarak bulmak için "Azure Haritalar web" araması yapın.

Haritada gezinme

Haritanın yakınlaştırılma, kaydırılma, döndürülebilir ve eğimli hale getirilebileceği birkaç farklı yol 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üğmeye Shift basılı tutun ve harita üzerinde sol fare düğmesine basılı tutun ve haritayı yakınlaştırmak üzere bir alan çizmek için sürükleyin.
Birkaç çok dokunmatik tuş takımını kullanma, uzaklaştırmak için iki parmağı yukarı sürükleme veya yakınlaştırmak için aşağı sürükleme.

Haritayı kaydırma

Fare kullanarak harita üzerinde 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 pitch 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ı sekme veya enter tuşuyla fareyi, dokunmayı veya 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 program aracılığıyla harita stilini ayarlayabilir ve değiştirebilir.

Yüksek karşıtlık kullanma

Harita denetimi yüklendiğinde yüksek karşıtlık özelliğinin 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ıdır. Geliştiriciler, denetlemek için harita kapsayıcısı div'ine bir css sınıfı ekleyebilir. Eklenecek css sınıfları ve high-contrast-lightşeklindedirhigh-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 en üst düzey eşleme öğ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 perdesi 10 derece artır
`Shift` + aşağı ok	Harita perdesi 10 derece azalt
`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ırma
Eksi işareti, Kısa Çizgi (`-`) veya ^*Alt Çizgi (`_`)	Uzaklaştırma
`Shift` + harita üzerinde fareyi 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 kullanmadığı 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, haritanın merkezinin yakınlaştırma düzeyini ve 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), alt 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, kullanıcının sırasıyla fare ve dokunmatik ekran kullanmasını gerektirir. Klavye kullanırken açılır pencereleri erişilebilir hale getirmek iyi bir uygulamadır. Bu işlev, her veri noktası için bir açılır pencere oluşturup haritaya ekleyerek gerçekleştirilebilir.

Erişilebilir açılır pencere örneği, bir sembol katmanı kullanarak haritaya ilgi çekici noktalar yükler ve her ilgi alanı 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 seçilmesi gibi bir işaretçi için de alınabilir. Haritaya odaklanıldığında, sekme tuşuna basmak kullanıcının haritadaki her açılan pencerede adım adım gezinmesine olanak tanır. 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 okuyucu (ARIA, alt ve başlık öznitelikleri) iletilerinizi 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ı yapmayı göz önünde bulundurun:
- Ekran okuyucuyu güncelleştirmek için haritanın taşınmasını bitirene kadar bekleyin.
- Güncelleştirmeleri birkaç saniyede bir azaltma.
- İletileri mantıksal bir şekilde birleştirin.
Bilgileri aktarmanın tek aracı 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 baloncuğun yarıçapını ölçeklendirmeyi, baloncuğu renklendirmayı veya her ikisini de 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ı, simgeleri çizgi boyunca yer kaplamak için bir çizgiyle birlikte kullanılabilir. Ok simgesi kullanmak, çizginin akışını veya yönünü göstermek için kullanışlıdır.
- Çokgen veriler görüntüleniyorsa, renge alternatif 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 erişemez. 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 geçersizdir" deyişini sağlayın.
Fareyle vurgulama gerektiren işlev 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çerik 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, iki tuşla veya daha az tuşla sınırlamayı deneyin.