Microsoft Inclusive Design'ın Visual Studio Koduna Etkisi

Evrensel, veya kapsayıcı tasarım yeni bir tasarım felsefesidir Microsoft son zamanlarda yazılım geliştirmede oldukça ciddiye alıyor gibi görünüyor. Kapsayıcı tasarım erişilebilirliği çok daha geniş bir perspektiften gördüğü için erişilebilir tasarımı bir sonraki seviyeye taşıyor. Microsoft’un yeni kaynak kod editörü Visual Studio Code’u test ederken teoriyi pratikte nasıl uyguladılar? doğal olarak aklımda ortaya çıktı.

Bu yazı yalnızca Visual Studio Code’un erişilebilirlik özelliklerinin bir açıklaması olmayı amaçlamıyor, resmi belgelerde bunlardan büyük bir özet bulabildiğiniz gibi, fakat ne zaman dikkat etmek istediğinizde nelere dikkat etmeniz gerektiğine dair bir vaka incelemesi olmayı hedefliyor kapsayıcı bir uygulama tasarla gelecekte.

Çünkü kapsayıcılığın yakında hem yazılım hem de web tasarımında bir gereklilik olacağından emin olabiliriz, elbette sadece özgecil sebeplerle değil, aynı zamanda masaya birçok yeni kullanıcı getireceği için.

Microsoft'un 4 Kapsayıcı Tasarım İlkeleri

Windows Dev Center erişilebilir yazılım tasarımını koyar Kullanılabilirlik kategorisinde, ayrıca konuyla ilgili birçok harika makale yayınladılar. Microsoft'un kapsayıcı tasarımın dört ilkesi (aşağıda kısaca listelenmiştir) bu makalede ele alınmıştır..

1. düşünmek evrensel.
2. Bunu yapmak kişiye özel.
3. Devam et basit.
4. yaratmak zevk.

Orijinal makaleyi okuduysanız, ilkelerin açıklamayı her zaman kolay olmayan bir şekilde açıklandığını göreceksiniz. "duygusal bağ", "merak uyandırmak", ve "büyülü". Dolayısıyla, yeryüzünde kalmayı, bu öznel çağrışımları kaldırmayı ve ilkeleri nesnel ölçütlere dönüştürmeyi tercih ederim..

Visual Studio Kodunda nasıl uygulandıklarını analiz ettiğimde, onları şu anlamda kullanıyorum:

1. düşünmek evrensel: Ulaşılabilirlik
2. Bunu yapmak kişiye özel: Özelleştirilebilirlik, genişletilebilirlik
3. Devam et basit: Dikkat dağıtmasız, mantıksal kullanıcı arayüzü
4. yaratmak zevk: Özellik keşfedilebilirliği

Tabii ki, bu sadece olası bir kategorizasyondur ve birçok örtüşen, örneğin özelleştirilebilirlik aynı zamanda “Zevk oluşturmak” İlke, ancak somut bir şeye ihtiyacımız olduğu için, şu an için bu yoruma devam edelim.

Windows Dev Center, bu kapsayıcı tasarım ilkelerinin Windows 10 uygulamaları için uygulanmasını önerirken, Microsoft ayrıca Microsoft Tasarım sitesini kapsayıcı tasarıma adamıştır..

Her ne kadar Visual Studio Code, yalnızca Windows 10 için değil, aynı zamanda platformlar arası yazılım, Microsoft, gelecekte de takip etmek istedikleri yazılım tasarım yolu olarak kapsayıcı tasarıma açıkça davrandığından, özelliklerini yukarıda belirtilen ilkelere göre hala güvenle test edebiliriz..

Evrensel düşünün

Altında “Evrensel düşünün” ilke olarak, Visual Studio Kodunun ne kadar erişilebilir olduğunu inceleyeceğiz. çeşitli kullanıcı grupları için, yardımcı teknolojilerin kullanıcıları (bunları engelli mi yoksa tercihli mi kullandıkları gibi), sınırlı teknolojiye sahip kişiler, ana dili İngilizce olmayan kişiler, vb..

1. Yakınlaştırma

Ctrl + = / Cmd + = 'ya basarak yakınlaştırma kolayca gerçekleştirilebilir (Mac) klavye kısayolu Yakınlaştır, ve Ctrl + - / Cmd + - (Mac) için kısayol Uzaklaştırmak, Ayrıca Zoom özelliğine üst menü çubuğundan da erişebiliriz..

Unutmayın, 1.1.1 sürümünden itibaren, Windows klavyelerinde + ve - işaretlerinin sağdaki sayısal tuş takımında, yalnızca yazım (alfasayısal) tuş takımında - çalışmaz..

Kaldıraç Yakınlaştırma Düzeyi özelliği, kolayca yapılandırmamıza olanak verdiği için bunu biraz telafi eder. Kalıcı Yakınlaştırma seviyesi Kullanıcı Ayarları’ndaki (bunun nasıl yapılacağı konusundaki geçirgenliğimi oku).

2. Yüksek Kontrast Tema

Yüksek kontrastlı temalar görsel bilgilerin işlenmesi Görme engelli kullanıcılar için ve bu nedenle de erişilebilirliğin önemli bir unsurudur..

Orada bir varsayılan Yüksek Karşıtlık teması Visual Studio Code’da, Dosya> Tercihler> Renk Teması ancak Visual Studio Code Marketplace'ten başkalarını da indirebilirsiniz..

Microsoft, Windows 7'de Yüksek Karşıtlık temalarını sundu, bu özelliği takip ettiklerini görmek güzel.

3. Klavye Gezintisi

Klavyeyle gezinmeyi sağlamak, fareyi görsel veya mobilite engelli olmaları nedeniyle kullanamayan insanlar için çok önemlidir. Etkili klavyeyle gezinme, kullanıcıların Her işlevselliği kontrol edebilir bir yazılımın sadece klavyeyi kullanarak.

Visual Studio Code, bu özelliği güzel bir şekilde uygular ve önceden ayarlanmış tuş ciltleri (tam listeye bakın), kullanıcılar bir JSON formatındaki yapılandırma dosyası yardımıyla klavye kısayollarını da özelleştirebilir.

4. Sekme Gezintisi

Sekme gezinti mümkün kılar farklı alanların her yerine atla Visual Studio Kodunun Açıklaması.

Şu anda, 1.1.1 sürümünden itibaren VS Code, tüm alanlar için sekme gezintisini desteklememektedir; örneğin, üst menü çubuğu bu şekilde kullanılamaz. İyi haber, Microsoft'un bu özelliğin dokümanlardaki Bilinen Sorunlar'daki eksikliğini kabul etmesi..

Test sırasında, buldum ki Editör, Yan çubuk, Görünüm Çubuğu (bkz. VS Kodunun alanlarının isimlendirilmesi) ve tüm eylem ve öğelerine Tab tuşuyla erişilebilir. Tab kullanıcıları, üst menü çubuğunun fonksiyonelliğine klavyeleri ile erişemezler. Komut Paleti F1 bunun yerine geçebilir, çünkü üst menüde bulunan tüm komutlara buradan da erişilebilir..

Sekme gezintisinin önemli bir erişilebilirlik özelliği, kullanıcıların Sekme tuşunun iki işlevi arasında geçiş yapmalarını sağlayan sekme yakalama özelliğidir. Kapana kısılmış Sekme tuşu mümkün kılar VS Kodunun farklı kısımları arasında dolaşın, normalde Sekme tuşunu metin dosyasına bir Sekme karakteri ekler Editör alanında açın. Kullanıcılar, Ctrl + M tuşu cildine basarak iki özellik arasında geçiş yapabilirler..

5. Ekran Okuyucular

Tabii ki, erişilebilir bir yazılımın ekran okuyucu kullanıcıları için de tamamen erişilebilir olması gerekir. Dokümanlar VS Code dev ekibinin NVDA ekran okuyucusu ile ekran okuyucunun kullanılabilirliğini test ettiğini belirtiyor.

Test için, diğer iki ekran okuyucuyu, en çok kullanılan ekran okuma uygulamalarından biri olan JAWS'yi ve Windows 10'un yerleşik ekran okuyucusu olan Microsoft Narrator'ı kullandım..

JAWS Tüm alanları, komutları ve menüleri özenle okuyun, ancak Anlatıcı'nın görevle ilgili daha küçük sorunları vardı. Örneğin, yalnızca üst menü öğelerini yalnızca fareyle yanlarına getirdiğimde okuyor, ancak klavyemdeki Aşağı okunu kullandığımda okuyordum. Ancak bu, Visual Studio Kodundan ziyade Anlatıcı'nın bir eksikliğinden kaynaklanmaktadır, bu nedenle, görme engelli kullanıcıların daha gelişmiş bir ekran okuyucu uygulaması kullanarak tüm VS Kod işlevlerine erişebildiklerini güvenle söyleyebiliriz..

6. Hata Ayıklayıcı Erişilebilirliği

Bir uygulamayı tamamen erişilebilir ve kapsayıcı hale getirmek için, aklımıza ilk başta gelmeyen parçalara da dikkat etmemiz gerekir. Visual Studio Kodunda, Hata Ayıklayıcı bunun için iyi bir örnektir. Geliştirme ekibi de kapsayıcı olmasına dikkat etti, bu nedenle Tab ve klavye navigasyonunu da destekliyor ve ekran okuyucu tarafından erişilebilir.

7. Yerelleştirme

Şimdi dokümanlardaki VS Code listelerinin erişilebilirlik özelliklerini tartışmaya hazırız, ancak konu hakkında konuştuğumuzda da belirtmemiz gereken başka önemli şeyler var. “Evrensel düşünün” kapsayıcı tasarım ilkesi. Bunlardan biri yerelleştirme veya başka bir deyişle yabancı dil desteği Ekran dili olarak, dünyadaki birçok insan anadili İngilizce değildir.

Visual Studio Code şu anda için yerelleştirilmiş 10 farklı ekran dili (İngilizce, Basitleştirilmiş Çince, Geleneksel Çince, Fransızca, Almanca, İtalyanca, Japonca, Korece, Rusça, İspanyolca).

Bu dillerden gelen kullanıcıların ekran dillerini VS Kodu olarak yapılandırmaları gerekmez. İşletim sisteminin ekran dilini varsayılan olarak alır. Başka bir dili ekran dili olarak ayarlamak istiyorlarsa, locale.json dosya.

Muhtemelen 10 ekran dili o kadar fazla değildir, ancak VS Kodunun yeni bir yazılım olduğunu dikkate alırsak, Microsoft'un gelecekte daha fazla destek vereceğini göz önüne alırsak da fena değildir. Şimdilik, dili desteklenenler arasında olmayan kullanıcılar VS Kodlarını İngilizce olarak yüklüyorlar.

8. Erişilebilir Boyut

Modern kaynak kodu düzenleyicileri çok büyük değildir ve Microsoft, Visual Studio Code’un olduğu gibi bu eğilime de katılmıştır. 100 MB'den daha az indirmek, ve disk ayak izi 200 MB daha az.

9. Çapraz Platform Geliştirme

Kapsayıcı bir yazılım istiyorsak, elbette farklı platformlarda çalışması gerektiği anlamına gelen çapraz platform olması gerekir. VS Kodu desteklediği için bu gereksinimi karşılar Windows, OS X ve Linux yanı sıra.

Kişisel yap

“Kişisel yap” Microsoft'un kapsayıcı tasarımın ikinci prensibi olduğunu ve bir bakacağız. customizability ve uzayabilirlik Bu kriter altında, daha önce söz verdiğim gibi. Visual Studio Code, her iki gereksinimi o kadar iyi karşılamaktadır ki, her ikisine de, burada özelleştirilebilirliğe ve genişletilebilirliğe ilişkin ayrı yazılar bile yazdım..

Kısacası, özelleştirilebilirlik ile uygulanır. özel temalar ve modülerleştirilmiş JSON formatı yapılandırma ayarları, genişletilebilirlik özel uzantılar kullanıcıların Visual Studio Code Marketplace’ten indirebileceği veya TypeScript veya JavaScript’te kendi oluşturabilecekleri.

Visual Studio Code'un genişletilebilirlik yaklaşımının teknik geçmişi hakkında daha fazla bilgiyi burada bulabilirsiniz..

Özelleştirilebilirlik, kaynak kod editörlerinin tipik kullanıcıları olan teknolojiye meraklı insanlar için ideal olan bir yolla çözülür. modülerleştirilmiş JSON formatlı konfigürasyon dosyaları.

Yapılandırma seçenekleri, görülmesi zor olan büyük bir menü hiyerarşisinin arkasına gizlenmemiş olduğundan, bu harika bir çözümdür. Kullanıcılar, kodlama uzmanı olmasalar bile, Özellerini kolayca düzenleyin .json Dosyalar, Visual Studio Code, varsayılanı ve özel ayarları hemen yan yana iki düzenleyici bölmesinde açarak kullanıcıların bunları kolayca deneyebilmelerini sağlar.

Yapılandırma dosyaları modülerleştirilir, mantıksal olarak yapılandırılmış bir hiyerarşi olarak gelirler. .json dosyalar, işte en önemlilerinden bir listesi:

1. settings.json için Özel Kullanıcı Ayarları, üzerinden erişilebilir Dosya> Tercihler> Kullanıcı Ayarları Menü
2. .vscode / settings.json için Özel Çalışma Alanı Ayarları, üzerinden erişilebilir Dosya> Tercihler> Çalışma Grupları Ayarları Menü
3. keybindings.json için özel Anahtar Bağlantıları, üzerinden erişilebilir Dosya> Tercihler> Klavye Kısayolları Menü
4. javascript.json, php.json, css.json, c.json, ve diğer bir demet .json farklı programlama dilleri için dosyalar Özel Kullanıcı Parçacıkları, üzerinden erişilebilir Dosya> Tercihler> Kullanıcı Parçacıkları Menü
5. launch.json için özel Hata Ayıklayıcı Ayarları, Debug View'ın üst çubuğundaki (editörün solundaki) dişli simgesine tıklayarak erişilebilir
6. .vscode / locale.json için Özel Ekran Dili ayarları, yazarak erişilebilir Dili Yapılandır Komuta Paletine (F1) komut
7. .vscode / tasks.json için Özel Görev Koşucu Ayarları, yazarak erişilebilir Görev Çalıştırıcısını Yapılandırma Komuta Paletine (F1) komut

VS Kod kullanıcıları, kişiselleştirilebilirlikten neredeyse hiç şikayet edemezler, zira seçenekleri listelemek bile zahmetli bir iştir..

Yapılandırma seçenekleri modüler hale getirildiğinden, kullanıcıların yalnızca bunlara dikkat etmesi gerekir gerçekten ihtiyaçları var, Bu da gerçekleştirmek istedikleri görevlere odaklanmalarını sağlıyor. Böylece daha sezgisel bir iş akışıyla bırakılacaklar.

Basit tutun

Microsoft’la buluşabiliriz Basit tutun programlama ve tasarımda başka birçok yerde kapsayıcı tasarım ilkesi, sadece KISS (Basit Tutun, Aptal) tasarım ilkesi ve DRY (Kendinizi Tekrar Etmeyin) yazılım geliştirme ilkesi hakkında düşünün. Bu çalışan bağlam için, odağımıza odaklanacağız. kullanıcı arayüzünün basitliği.

Erişilebilirlik açısından, bilişsel ve zihinsel engelli kullanıcılar nedeniyle genellikle kullanımı kolay, basit bir kullanıcı arayüzü önerilmektedir. Visual Studio Code bir kaynak kod editörü olduğundan, muhtemelen bu tür bir bozukluğu olan insanlar tarafından sıkça kullanılan bir yazılım değildir, ancak bazı gri alanlar da olabilir..

Basitlik sadece onlar için önemli değil, çünkü iyi tasarlanmış, mantıklı bir arayüz öğrenme eğrisini düşür, ve işin hızını artırmak, bir yazılımı genel nüfusa daha çekici kılmak.

Visual Studio Kodu da iyi bilinen psikolojik fenomenden yararlanır, sadece maruz kalma etkisi (veya aşinalık fenomeni), örneğin Atom gibi iyi bilinen diğer kaynak kod editörlerinin düzenine benzer bir temel düzeni benimsediğinden,.

Dokümanlardan, Microsoft'un aşağıdakiler üzerinde büyük bir etki bıraktığı bir çaba olduğunu öğrenebiliriz:

VS Kodu ayrıca diğer kaynak kod editörlerinde de bulunabilen Yan Yana Düzenleme özelliğini sunar ve aynı zamanda bir tesadüf değildir. kodlama işlemini çok daha basit hale getirir, ve tabii ki “Basit tutun” Kapsayıcı tasarım ilkesi de.

Temel Kullanıcı Arabiriminin yanı sıra, Visual Studio Code, aşağıdakiler gibi kapsayıcı tasarım hakkında bir makalede bahsedilmeye değer harika özelliklere sahiptir:

• IntelliSense içeriğe dayalı öneriler sunan kullanıcılara (yapay zekayı kullanan arka uç kısmı da güzel bir çözümdür)
• Dikizlemek (Shift + F12) bir satır içi pencerede tüm işlev tanımlarını görüntüleyen
• Komuta Paleti (F1) bu, tüm komutları aynı yerde erişilebilir kılar.

Lokum Oluştur

İncelemek için kullanabileceğimiz somut kriterleri bulmak özellikle kolay değil. “Lokum Oluştur” kapsayıcı tasarım ilkesi, bu yüzden nihayet kriteri için yerleşmiş özellik keşfedilebilirliği, Microsoft’un bu prensibi şu şekilde tanımladığı gibi:

Bu kelime öbekleri, Google’ın en büyük şeylerinden biri olan birçok mikro anı size hatırlatabilir ve bu nedenle, öncü teknoloji şirketlerinin, endüstriyi nasıl ilerleteceklerini düşündüklerinde nasıl benzer sonuçlara varabileceklerini gösterebilir..

Kapsayıcı tasarımda, çok önemlidir kullanıcıları meşgul, ve meraklarını uyandırmak, eğer en iyisini başarabilirsek, ilerlemelerine yardımcı olun kullanıcı yolculuklarında belli bir noktaya geldiklerinde. Sadece doğru anda, önce değil, sonra değil.

Konuştuğumuzda özellik keşfedilebilirliği, zevk yaratmanın dünyadaki tezahürü, iyi tasarlanmış yardımcı program navigasyonu, akıllı belgeler ve yalnızca doğru zamanda açılan destekleyici bilgiler gibi şeylerle arttırılabilir..

Tüm bu özelliklerin örneklerini Visual Studio Kodunda bulabiliriz, sadece bahsettiğimiz konuyu düşünün. IntelliSense ve Komuta Paleti, fakat sözdizimi vurgulama ve özel kod parçacıkları kullanıcıların yazılımdan en iyi şekilde yararlanmasına da yardımcı olabilir. Visual Studio Kodunu kullanmanın sizi memnun edici bir his bırakıp bırakmadığını kendiniz için yargılamanız gerekir..

Kendim için, az ya da çok bu deneyimi sevdim: iyi yapılandırılmış çevrimiçi belgeler, gezinmesi kolay Visual Studio Code Marketplace, ve özel renk temaları Bir açılır liste kaydırılırken bu, gerçek zamanlı olarak önizlenebilir Dosya> Tercihler> Renk Teması Menü).

Son sözler

Kapsayıcı tasarım yeni bir alan olduğu için, teknoloji endüstrisi hala deneme aşamasındadır. Microsoft tarafından önemli bir dönüm noktası yaptığını düşünüyorum. Kapsayıcı tasarımın dört ilkesini tanımlama.

Görebildiğimiz gibi, teoriyi pratikte yeni kaynak kod editörü Visual Studio Code'da başarıyla uygulamayı başardılar, ancak hala tam Tab desteği ve global bir Ara ve Değiştir özelliği sağlama gibi geliştirilecek bazı alanlar var.

Hem erişilebilirlik hem de kapsayıcılık olduğu gibi kullanıcı deneyiminin parçaları, En yeni endüstri trendlerine ayak uydurmak istiyorsanız, onlar hakkında daha fazla bilgi edinmek iyi bir fikir olabilir. İşte yardımcı olabilecek kaynaklar:

• Windows Dev Center'ın erişilebilirlik makaleleri
• Microsoft Design'ın Kapsayıcı Tasarım Araç El Kitabı (PDF) (indirilebilir)
• Hongkiat.com erişilebilirlik etiketi