Daha erişilebilir Angular uygulamaları geliştirme

1. Başlamadan önce

Erişilebilirlik, web geliştirmenin oldukça önemli bir parçasıdır ve kullanıcıların uygulamaları algılayabilmesini, anlayabilmesini, gezebilmesini ve uygulamalarla etkileşimde bulunabilmesini sağlar. ABD'deki her 4 yetişkinden 1'i yaşamlarındaki faaliyetlerin büyük kısmını etkileyen bir engele sahip. Dünya nüfusunun yaklaşık yüzde 15'i (1 milyardan fazla kişi) bir çeşit engele sahip. Bu insanların da yaklaşık yüzde 2 ila 4'ü ciddi zorluklar çekiyor.

Kişinin web kullanımını etkileyen yaygın durumlar arasında görme engeli veya az görme, işitme engeli ya da işitme bozukluğu, kısıtlı motor beceriler, zihinsel engel ve renk körlüğü yer alıyor. Bu sayılan durumlar ise bu engellerden yalnızca birkaçı.

Bu kurstaki a11y ifadesi, erişilebilirliğin (accessibility) kısaltmasıdır. Dikkat ederseniz a harfinin arkasından 11 karakter ve bir y harfi geliyor.

Erişilebilir uygulamalar tasarlamayla ilgili sorunlara ve tekniklere dair ayrıntılı bir giriş için Erişilebilirlik başlıklı makaleyi inceleyin.

Oluşturacaklarınız

• Demo Dumpling Shop Angular uygulamasında yaygın web erişilebilirliği sorunlarını gidermek için en iyi uygulamaları ve yerleşik teknikleri kullanma
• WCAG 2.0 ve ARIA 1.2 olmak üzere tüm erişilebilirlik yönergelerini karşılamanız, ayrıca axe ve Lighthouse erişilebilirlik denetimlerini geçmeniz gerekir.

Neler öğreneceksiniz?

Angular uygulamalarında kullanıcıları etkileyen sekiz yaygın erişilebilirlik sorunu hakkında bilgi edinecek, bunları nasıl tespit edip düzelteceğinizi öğreneceksiniz. Daha net ifade etmek gerekirse:

• Uygulamanızın erişilebilirliğini denetlemek için Google Chrome Geliştirici Araçları, Lighthouse ve axe'ı kullanma
• Benzersiz sayfa başlıkları kullanarak tek sayfalık uygulama (SPA) sorunlarını çözün
• Az gören kullanıcılar için düşük renk kontrastı sorunlarını düzeltme
• Ekran okuyucuların sayfada doğru bir şekilde gezinmesini sağlamak için semantik HTML kullanın
• Ekran okuyucuların tüm denetimlere erişebilmesi için Angular Material'ı kullanın ve denetimleri birbirinden ayırın
• Ekran okuyucular için ARIA desteği ekleme
• Angular CDK a11y paketini içe aktarma ve kullanma
• Özel bileşenlerde ekran okuyucu gezinme için FocusTrap'i kullanma
• CDK LiveAnnouncer ile bildirimleri duyurma
• HighContrast modunu kullanan kullanıcıları algılama ve yüksek kontrastlı tema uygulama

Gerekenler

• Angular, SCSS, Typescript, git ve Chrome Geliştirici Araçları hakkında bilgi

2. Hazırlanın

Kodu alın

Bu proje için ihtiyacınız olan her şeyi bir GitHub deposunda bulabilirsiniz. Başlamak için kodu klonlayın ve favori geliştirme ortamınızda açın.

Depoyu klonlama ve uygulamayı yayınlama

Bu kod laboratuvarını tamamlamak için önerilen yöntem VSCode veya yerel bir IDE'dir.

1. Yeni bir tarayıcı sekmesi açın ve https://github.com/googlecodelabs/angular-accessibility adresine gidin.
2. Depoyu çatallayın ve klonlayın, ardından cd angular-accessibility/'yi depoya ekleyin.
3. Başlangıç kodu şubesine git checkout get-started göz atın.
4. Kodu VSCode'ta veya tercih ettiğiniz IDE'de açın.
5. Sunucuyu çalıştırmak için gereken bağımlılıkları yüklemek üzere npm install komutunu çalıştırın.
6. Sunucuyu çalıştırmak için ng serve komutunu çalıştırın.
7. http://localhost:4200 adresine gidecek bir tarayıcı sekmesi açın.

3. Referans değer belirleme

Başlangıç noktanız neresi?

Başlangıç noktanız, bu codelab için tasarlanmış temel bir restoran uygulamasıdır. Kod, bu kod laboratuvarındaki kavramları göstermek için basitleştirilmiştir ve çok az işlevi vardır.

Demoyu inceleyin

Başlamak için uygulamanızın üç işlevini inceleyin:

1. Gezinme çubuğunu kullanarak Mağazamız, Hikayemiz ve Bizi Bul rotalarını görüntüleyin ve mantı şirketiyle ilgili ayrıntıları inceleyin.
2. Açık ve koyu modu değiştirmek için temaları değiştirin.
3. Siparişinize ait mantı dolgularını, miktarını ve rengini özelleştirin.
4. Özelleştirilmiş siparişinizi konsola kaydetmek için Satın al'ı seçin.

Sık karşılaşılan web erişilebilirliği sorunlarını çözmek için Angular'ı kullanma

Bu codelab'de, bu uygulamanın mevcut özelliklerinin erişilebilirliğine odaklanacaksınız. İlk olarak uygulamanızdaki a11y sorunlarını tespit edeceksiniz, ardından bir çözüm uygulayarak 🛑'yı ✅'ya dönüştüreceksiniz.

Neyi düzeltmeniz gerektiğini nasıl anlarsınız?

Her bir örneği, manuel ve otomatik testin bir karışımını kullanarak erişilebilirlik sorununu tespit ederek başlatın.

Web'in mevcut durumunda erişilebilirliği manuel olarak test etmek zorunludur.

Erişilebilirlik sorunlarını tespit edebilecek araçlara sahipsiniz ancak hiçbir araç uygulamanın tamamen erişilebilir olduğunu onaylayamaz. Manuel testler, mantıksal içerik sırası ve özellik denkliği gibi çeşitli kavramları test etmenizi sağlar.

Manuel test

Bu kursta erişilebilirliği manuel olarak test etmek için bilgisayarınızın yerleşik ekran okuyucusunu açar ve klavye gezinmeyle uygulamanızda gezinirsiniz. Daha fazla bilgi için Anlam ve ekran okuyucular başlıklı makaleyi inceleyin.

Ekran okuyucuyu açıp ekranda gezinerek alıştırma yapabilirsiniz.

MacOS'te yerleşik VoiceOver'ı kullanabilirsiniz. Sistem Tercihleri > Erişilebilirlik > VoiceOver > VoiceOver'ı etkinleştirmek için VoiceOver'ı etkinleştir'i tıklayın. VoiceOver'ı açmak/kapatmak için Command tuşunu basılı tutarken TouchID'ye üç kez hızlıca basın.

Bu kursta, sorunları öncelikle manuel olarak test eder ve belirli otomatikleştirilebilir özellikleri kontrol etmeye yardımcı olmak için otomatik araçları kullanırsınız.

Otomatik test

Ayrıca, uygulamanızı otomatikleştirmek ve denetlemek için birkaç geliştirme aracı kullanıyorsunuz. Bu araçlar, bir resimdeki alternatif metin veya metin renginin kontrast oranı gibi bilgileri kontrol etmenize olanak tanır. Bu araçları, alt metnin mevcut olduğunu algılayan linterler olarak düşünebilirsiniz. Ancak içeriğin mantıklı olup olmadığını ve değer sağlayıp sağlamadığını manuel olarak kontrol etmeniz gerekir.

Lighthouse ve Chrome Geliştirici Araçları

1. Chrome Geliştirici Araçları'nı açın.
2. Lighthouse sekmesini ve ardından Erişilebilirlik onay kutusunu seçin.
3. Bir a11y Lighthouse denetimi çalıştırmak için Rapor oluştur'u tıklayın.

Balta

1. axe DevTools uzantısını yükleyin. Uzantıyı görmek için tarayıcınızı yeniden başlatmanız gerekebilir.
2. Chrome Geliştirici Araçları'nı açın.
3. axe DevTools sekmesini seçin ve Sayfamın tamamını tara'yı seçerek axe Geliştirici Araçları taraması yapın.

Döşeme

Kodunuzu otomatikleştirilebilir erişilebilirlik özellikleri açısından kontrol etmek için Angular ESLint kurallarını kullanabilirsiniz.

eslint.json alanına erişilebilirlik için geçerli olan aşağıdakileri ekleyin:

"@angular-eslint/template/accessibility-alt-text": 2,
"@angular-eslint/template/accessibility-elements-content": 2,
"@angular-eslint/template/accessibility-label-for": 2,
"@angular-eslint/template/no-positive-tabindex": 2,
"@angular-eslint/template/accessibility-table-scope": 2,
"@angular-eslint/template/accessibility-valid-aria": 2,
"@angular-eslint/template/click-events-have-key-events": 2,
"@angular-eslint/template/mouse-events-have-key-events": 2,
"@angular-eslint/template/no-autofocus": 2,
"@angular-eslint/template/no-distracting-elements": 2

Daha fazla bilgi için GitHub'daki en son ESLint kurallarına bakın.

Başlangıç noktanız

Yeni test yöntemlerinizle Lighthouse ve axe denetimlerini ve manuel VoiceOver'u kullanarak uygulamanızda aşağıdaki sorunları tespit edebilirsiniz:

Erişilebilirlik denetimi:

• 🛑 Tüm sayfaların başlığı aynı
• 🛑 Öğeler arasında yeterli renk kontrastı olmalıdır
• 🛑 HTML'de mantıklı bir sıra, ad ve rol olmalıdır
• 🛑 İç içe yerleştirilmiş onay kutuları ekran okuyucular tarafından seçilemez
• 🛑 Ekran okuyucu, kaydırma çubuğunun değerlerini okumuyor
• 🛑 Ekran okuyucu, renk seçicideki odağını iletişim kutusundan çıkarır
• 🛑 Değişiklikler, hatalar ve bildirimler duyurulmaz
• 🛑 HighContrast modu etkin değil

4. Benzersiz sayfa başlıkları tanımlayın

Benzersiz ve kısa sayfa başlıkları sağlamak, erişilebilirlik hizmetlerini kullanan kullanıcıların bir web sayfasının içeriğini ve amacını hızlı bir şekilde anlamalarına yardımcı olur. Sayfa başlıkları, ekran okuma yazılımının duyurduğu ilk sayfa öğesi olduğundan görme engelli kullanıcılar için son derece önemlidir.

Angular tek sayfalık bir uygulama olduğundan geçişlerin çoğu (ör. yeni bir sayfaya geçme) sayfayı yeniden yüklemeyi gerektirmez. Yakın zamana kadar bu, her sayfanın aynı sayfa başlığına sahip olduğu ve sayfanın içeriğini veya amacını anlama konusunda hiçbir değer sağlamadığı anlamına geliyordu.

Angular v14'te Yönlendirici, benzersiz sayfa başlıklarını hemen tanımlamak için yerleşik bir yöntem ekledi. Bu sayede geliştiriciler sayfa başlığıyla ilgili en iyi uygulamaları takip edebilir.

Bu bölümün sonunda uygulamanız aşağıdaki denetimi geçecektir:

• 🛑 Tüm sayfaların başlığı aynı

Bu adımların her birini şu yorumun altında bulabilirsiniz: TODO: #4. Define unique page titles.

Sorunu belirleme

Bu sorunu tespit etmek için ekran okuyucunuzu açın ve sayfa başlıklarını görmek için Mağazamız, Hikayemiz ve Bizi Bul sekmeleri arasında gezinin:

1. VoiceOver'ı açın.
2. Sayfalar arasında gezinmek için Sekme tuşlarını kullanın.
3. Sayfa başlığının her zaman Angular dilinde a11y olduğunu doğrulayın.

Bu, kullanıcıların sayfaya gitmek zorunda kalmadan sayfanın ne hakkında olduğunu hızlıca anlayabilmesi için sayfa başlığınızın benzersiz olması gerektiğinden sorun teşkil etmektedir.

Anlamlı sayfa başlıkları ekleyin

Bir sayfa veya görünüm değişirse sayfa başlığını doğru şekilde yönetmek istersiniz. Bu sorunu düzeltmek için Angular'ın yerleşik Router.title mülkünü kullanarak sayfalarınızın her biri için benzersiz başlıklar tanımlayabilirsiniz.

1. Tanımlanmış üç rotanın her birine benzersiz bir başlık ekleyin:

src/app/app-routing.module.ts

const routes: Routes = [
  { path: 'shop', component: ShopComponent, title: 'Our Shop – a11y in Angular' },
  { path: 'about', component: AboutComponent, title: 'Our Story - a11y in Angular' },
  { path: 'locate', component: LocationComponent, title: 'Find Us - a11y in Angular' },
  { path: '',   redirectTo: '/shop', pathMatch: 'full' },
  { path: '**', component: ShopComponent },
];

Bu işlem, gezinme sırasında sayfa başlığının rotalarımızda tanımlanan başlık mülküyle eşleşecek şekilde değiştirilmesini yönetmek için Router's Title Service'i otomatik olarak içe aktarır ve kullanır. Özel bir TitleStrategy kullanarak daha karmaşık sayfa başlıklarını da yönetebilirsiniz.

Değişiklikleri doğrulama

Ekran okuyucunuzu tekrar açın ve değişikliklerinizi doğrulayın. Sayfaların başlıkları artık benzersiz.

Erişilebilirlik denetimi:

• ✅ Tüm sayfaların benzersiz sayfa başlıkları vardır
• 🛑 Öğeler arasında yeterli renk kontrastı olmalıdır
• 🛑 HTML'de mantıklı bir sıra, ad ve rol olmalıdır
• 🛑 İç içe yerleştirilmiş onay kutuları ekran okuyucular tarafından seçilemez
• 🛑 Ekran okuyucu, kaydırma çubuğunun değerlerini okumuyor
• 🛑 Ekran okuyucu, renk seçicideki odağını iletişim kutusundan çıkarır
• 🛑 Değişiklikler, hatalar ve bildirimler duyurulmaz
• 🛑 HighContrast modu etkin değil

5. Yeterli renk kontrastı sağlanmalıdır.

Tasarımınız havalı görünebilir ancak renk körlüğü gibi görme engelli kullanıcılar içeriğinizi okuyamıyorsa bu durum havalı değildir. Web İçeriği Erişilebilirlik Yönergeleri (WCAG 2.0), içeriğin erişilebilir olmasını sağlayan bir dizi renk kontrastı oranı tanımlar. Angular'da ve web'de, bileşenlerinizin bu standartları karşılamasını ve az gören ve renk körü kullanıcılar tarafından görülebilmesini sağlayan renk paletleri tanımlayabilirsiniz.

Bu bölümün sonunda uygulamanız aşağıdaki denetimi geçecektir:

• 🛑 Öğeler yeterli renk kontrastına sahip olmalıdır

Bu adımların her birini yorumların altında bulabilirsiniz: TODO: #5. Ensure adequate color contrast.

Düşük kontrast sorunlarını belirlemek için Chrome Geliştirici Araçları'nı kullanma

Bu sorunu tespit etmek için Chrome Geliştirici Araçları'nı kullanarak uygulamanızdaki öğeleri inceleyin.

1. Menü simgesi düğmelerini görüntülemek için denetleme aracını kullanın. Kontrastın 1,85 olduğunu, yani WCAG koşullarının çok altında olduğunu görebilirsiniz.

2. Bu kontrast oranı sorunlarını görmek için Lighthouse veya axe taramasında Erişilebilirlik denetimini çalıştırın.

Materyal tema rengini değiştirme

Bileşen renk şemanız, özel Material temanızda tanımlanır. Tema değerinizi, renk kontrastı oranı yönergelerine uyacak şekilde güncellersiniz.

Simgelerinizin kontrast oranını artırarak daha koyu bir metin rengi kullanacak şekilde Materyal temanızı güncelleyin:

src/styles.scss

$light-primary: mat.define-palette(mat.$pink-palette, $default: A100, $lighter: 100, $text: 900);

Standartları karşılayan bir renk bulmak veya Sass'ta renk değerlerini tek tek güncellemek için Chrome Geliştirici Araçları'nın yerleşik erişilebilirlik araçlarını da kullanabilirsiniz.

Değişiklikleri doğrulama

Öğelerinizi tekrar inceleyin ve değişikliklerinizi doğrulayın. Temamızda artık yeterli renk kontrastı oranları olmalıdır.

Erişilebilirlik Denetimi

• ✅ Tüm sayfaların benzersiz sayfa başlıkları var
• ✅ Renklerin kontrast oranı yeterli
• 🛑 HTML'de mantıklı bir sıra, ad ve rol olmalıdır
• 🛑 İç içe yerleştirilmiş onay kutuları ekran okuyucular tarafından seçilemez
• 🛑 Ekran okuyucu, kaydırma çubuğunun değerlerini okumuyor
• 🛑 Ekran okuyucu, renk seçicideki odağını iletişim kutusundan çıkarır
• 🛑 Değişiklikler, hatalar ve bildirimler duyurulmaz
• 🛑 Yüksek kontrast modu etkin değil

6. Semantik HTML kullanın

Yerleşik HTML öğeleri, erişilebilirlik açısından önemli olan çeşitli standart etkileşim kalıplarını yakalar. Bir paragrafa span stili, bir div'e ise düğme stili verilebilir. Ancak anlamsal HTML öğesi, ekran okuyucuların ve klavye gezinmesinin HTML'nizin etkileşimlerini ve kontrollerini anlamasını sağlar.

Angular bileşenleri yazarken, iyi desteklenen davranışları yeniden uygulamak yerine mümkün olduğunda bu yerel öğeleri doğrudan yeniden kullanmalısınız. Bu sayede sayfanın iyi bir içerik yapısına ve doğal bir içerik akışına sahip olması sağlanır. Ayrıca, sekme, kullanıcıların klavyeyi etkili bir şekilde kullanarak web sitesinde gezinmesine yardımcı olacak şekilde mantıklı bir sırada olur.

Bu bölümün sonunda uygulamanız aşağıdaki denetimi geçecektir:

• 🛑 HTML'nin mantıksal sırası, adı ve rolü olmalıdır

Bu adımların her birini yorumların altında bulabilirsiniz: TODO: #6. Use Semantic HTML.

Sorunu belirleme

1. VoiceOver'ı açın.
2. Sekme tuşlarını kullanarak Hikayemiz sekmesine gidin.
3. Sekme sırasının sıralı olmadığını unutmayın.
4. Satın al'ı tıklayın.
5. Düğmenin düğme olarak tanınmadığına dikkat edin.

<div> öğesini <button> öğesine dönüştürme

Özel <div> öğesini bir Material düğmesiyle değiştirin:

src/app/shop/shop.component.html

<button mat-flat-button 
  color="primary" 
  class="purchase-button"
  (click)="fauxPurchase()">
  Purchase
</button>

Başlık öğelerini sırayla kullanma

Metni, semantik HTML kullanacak şekilde yeniden sıralayın ve Açısal Materyal tipografisi kullanarak stil uygulayın:

src/app/about/about.component.html

<h2>Who are we?</h2>
<p class="mat-subheading-2">Have you ever thought, "wow, I love dumplings"?</p>
<p class="right mat-subheading-1">Who hasn't.</p>
<p class="center mat-subheading-1">We took it one step further and created Dumpling Dumpling,</p> 
<p class="center mat-subheading-1">double the dumpling, double the fun.</p>
<div class="spacer"></div>
<h2>How are we different?</h2>
<p class="mat-subheading-2">Handmade in San Francisco, California, we craft fully customizable dumplings. Glitter? Rainbows? Vegan? We do it all.</p>
<p class="right mat-subheading-2">This shop is concept only.</p>

Değişiklikleri doğrulama

Ekran okuyucunuzu tekrar açın ve değişikliklerinizi doğrulayın. VoiceOver artık düğmeyi tanıyor ve metin mantıksal bir sırayla okunuyor.

Erişilebilirlik denetimi:

• ✅ Tüm sayfaların benzersiz sayfa başlıkları var
• ✅ Renkler yeterli kontrast oranına sahip
• ✅ Semantik HTML mantıksal etkileşim sağlar
• 🛑 İç içe yerleştirilmiş onay kutuları, ekran okuyucular tarafından seçilemez
• 🛑 Ekran okuyucu, kaydırma çubuğunun değerlerini okumuyor
• 🛑 Ekran okuyucu, renk seçicideki odağını iletişim kutusundan çıkarır
• 🛑 Değişiklikler, hatalar ve bildirimler duyurulmaz
• 🛑 Yüksek kontrast modu etkin değil

7. Angular Material ile seçilebilir kontroller oluşturma

Erişilebilirlik hizmetleri için karmaşık bir etkileşim kalıbı iç içe yerleştirilmiş kontrollerdir. Menü alt öğelerini veya iç içe yerleştirilmiş onay kutularını düşünün. Bir kullanıcıya seçenek alt grubu seçebileceğinizi veya üst menü öğesine gidebileceğinizi nasıl belirtirsiniz?

Angular'da, kontrolleri mümkün olduğunca basitleştirerek gezinme bileşenleri oluşturmak için menüleri ve kontrolleri basitleştirin. Bu örnekte, bu etkileşim kalıbına bir örnek oluşturmak için Angular Material'ın liste kutusunu kullanıyorsunuz.

Bu bölümün sonunda uygulamanız aşağıdaki denetimden geçmiş olur:

• 🛑 İç içe yerleştirilmiş onay kutuları, ekran okuyucular tarafından seçilemez

Bu adımların her birini yorumların altında bulabilirsiniz: TODO: #7. Create selectable controls with Angular Material.

Sorunu belirleme

Bu sorunu tespit etmek için ekran okuyucumuzu açıp iç içe yerleştirilmiş bir onay kutusunu seçmeyi deneyeceğiz.

1. VoiceOver'ı açın.
2. Farklı dolgu aromaları seçin.
3. VoiceOver tarafından okunduğunda ebeveyn onay kutularının çocuklar için belirtilmediğini unutmayın. Bok Choy onay kutusunun işaretini kaldırdığınızda Vegan onay kutusunun işaretinin kaldırıldığını nasıl anlarsınız?

Açısal Materyalde A11y

Anlamsal onay kutusunu, bu etkileşim kalıbıyla ilgili yerleşik bilgi içeren Angular Material onay kutusunu kullanarak değiştirirsiniz. Bileşenlerin Material ile değiştirilmesinin erişilebilirliği garanti etmediğini unutmayın. Materyal'i erişilemez şekilde uygulamanın birçok yolu olduğundan diğer tüm bileşenler gibi manuel olarak test etmeniz gerekir.

Onay kutularını, Materyal onay kutularıyla değiştirme

1. Öncelikle, yeni dolgu listenizi ve seçtiğiniz dolgu aromalarını saklayacak bir değişken ekleyin:

src/app/shop/shop.component.ts

@Component(...)
export class ShopComponent implements OnInit {
  fillings: string[] = ['Bok Choy & Chili Crunch', 'Tofu & Mushroom', 'Chicken & Ginger', 'Impossible Meat & Spinach'];
  selectedFillings: string[] = [];

  fauxPurchase(): void {
    let flavor = '';
    this.selectedFillings.forEach(filling => {
      flavor = flavor + " " + filling
    })
  }
}

2. Bu dağınık HTML onay kutusu grubunu değiştirmek için bir <mat-selection-list> ekleyin:

src/app/shop/shop.component.html

<mat-selection-list [(ngModel)]="selectedFillings" 
  aria-label="Dumpling fillings">
  <mat-list-option *ngFor="let flavor of fillings" 
    [value]="flavor" 
    color="primary">
    {{ flavor }}
  </mat-list-option>
</mat-selection-list>

TODO yorumlarınızda, stilinizi temizlemek için src/app/shop/shop.component.scss'da kullanılmayan bazı Sass öğelerini nereden kaldırabileceğiniz de gösterilir.

Değişiklikleri doğrulama

Ekran okuyucunuzu tekrar açın ve değişikliklerinizi doğrulayın. Onay kutuları artık seçilebilir ve ekran okuyucu sayesinde daha kolay gezinilebilir.

Erişilebilirlik denetimi:

• ✅ Tüm sayfaların benzersiz sayfa başlıkları var
• ✅ Renkler yeterli kontrast oranına sahip
• ✅ Semantik HTML mantıksal etkileşim sağlar
• ✅ Tüm kontrollere ekran okuyucular tarafından erişilebilir
• 🛑 Ekran okuyucu, kaydırma çubuğunun değerlerini okumuyor
• 🛑 Ekran okuyucu, renk seçicideki odağını iletişim kutusundan çıkarır
• 🛑 Değişiklikler, hatalar ve bildirimler duyurulmaz
• 🛑 HighContrast modu etkin değil

8. ARIA ile kontrol etiketleri sağlama

Angular uygulamanızın anlamsal HTML ve Materyal bileşenlerini değiştirdiniz, ancak bazı bileşenlerde, ekran okuyucular tarafından tam olarak gezinmesi gereken belirli özellikler gerekiyor.

Web Accessibility Initiative'in Erişilebilir Zengin İnternet Uygulamaları spesifikasyonu (WAI-ARIA veya ARIA), yerel HTML ile yönetilemeyen sorunların kapatılmasına yardımcı olur. Bir öğenin erişilebilirlik ağacına dönüştürülme şeklini değiştiren özellikleri belirtmenizi sağlar.

Bu bölümün sonunda uygulamanız aşağıdaki denetimi geçecektir:

• 🛑 Ekran okuyucu, kaydırma çubuğu değerlerini okumuyor

Bu adımların her birini yorumların altında bulabilirsiniz: TODO: #8. Provide control labels with ARIA.

Sorunu belirleme

Bu sorunu tespit etmek için ekran okuyucunuzu açın ve kaydırma çubuğunuzu hareket ettirin:

1. VoiceOver'ı açın.
2. Miktar kaydırma çubuğunu bulun ve değeri değiştirin.
3. Değer etiketinin eksik olduğuna dikkat edin.

ARIA özelliklerini kullanma

aria-label ile <mat-slider> arasında etiket kontrolü:

src/app/shop/shop.component.html

<mat-slider
  aria-label="Dumpling order quantity slider"
  id="quantity"
  name="quantity"
  color="primary"
  class="quantity-slider"
  [max]="13"
  [min]="1"
  [step]="1"
  [tickInterval]="1"
  thumbLabel
  [(ngModel)]="quantity">
</mat-slider>

Değişiklikleri doğrulama

Ekran okuyucunuzu tekrar açın ve değişikliklerinizi doğrulayın. Artık kaydırma çubuğunu hareket ettirebilirsiniz.

Erişilebilirlik denetimi:

• ✅ Tüm sayfaların benzersiz sayfa başlıkları var
• ✅ Renkler yeterli kontrast oranına sahip
• ✅ Semantik HTML mantıksal etkileşim sağlar
• ✅ Tüm kontrollere ekran okuyucular tarafından erişilebilir
• ✅ Kaydırma çubuğu, etiket sağlamak için ARIA özelliklerini kullanır
• 🛑 Ekran okuyucu, renk seçicideki odağını iletişim kutusundan çıkarır
• 🛑 Değişiklikler, hatalar ve bildirimler duyurulmaz
• 🛑 HighContrast modu etkin değil

9. @angular/cdk/a11y gücünü ekleme

Şimdiye kadar, sık karşılaşılan a11y sorunlarını çözmek için yerleşik Angular araçlarından yararlanıyordunuz. Şimdi CDK'nın a11y modülüne ve bu modülün daha karmaşık ve Angular'a özgü sorunları çözmemize nasıl yardımcı olabileceğine bakalım.

Bu bölümün sonunda, Angular a11y modülü araçlarıyla bu kursa devam edeceksiniz.

Bu adımları yorumun altında bulabilirsiniz: TODO: #9. Add the power of @angular/cdk/a11y.

Modülü içe aktarma

Modülü uygulamanıza ekleyin:

src/app/app.module.ts

import { A11yModule } from '@angular/cdk/a11y';

@NgModule({
  declarations: [...],
  imports: [
    A11yModule
  ],
  providers: [...],
  bootstrap: [...]
})

'@angular/cdk/a11y' ne yapar?

a11y modülü, erişilebilirliği iyileştirmek için birçok araç sunar ve özellikle bileşen yazarları için yararlıdır.

Aşağıdaki bölümlerde üç yaygın hizmet ekleyeceksiniz: FocusTrap, LiveAnnouncer ve HighContrast.

@angular/cdk/a11y tarafından sunulan diğer tüm hizmetler hakkında daha fazla bilgi edinmek için Erişilebilirlik başlıklı makaleyi inceleyin.

10. FocusTrap ile odağı kontrol etme

Bir iletişim kutusu veya kalıcı iletişim kutusu açıkken kullanıcı yalnızca onun içinde etkileşimde bulunur. Odak noktasının iletişim kutusunun dışına çıkmasına izin vermek bağlamları karıştırır ve kullanıcının sayfanın neresinde olduğunu bilmediği bir durum oluşturur.

Angular'da cdkTrapFocus yönü, tab- anahtar odağını bir öğe içinde yakalar. Bu yöntem, odağın kısıtlanması gereken modal iletişim kutuları gibi bileşenler için erişilebilir bir deneyim oluşturmak amacıyla kullanılmalıdır.

Bu bölümün sonunda uygulamanız aşağıdaki denetimi geçecektir:

• 🛑 Ekran okuyucu, renk seçicideki odağını iletişim kutusundan çıkarır

Aşağıdaki adımları yorumların altında bulabilirsiniz: TODO: #10. Control focus with FocusTrap.

Sorunu belirleme

Bu sorunu tespit etmek için ekran okuyucunuzu açın ve renk seçici iletişim kutusunu açın.

1. VoiceOver'ı açın.
2. Rengi değiştirmek için sekmeyle gezinmeyi kullanın.
3. Renk seçicide sezgisel odaklanma sırasını ve odaklanmayı sabitlemeyi kontrol edin.

FocusTrap ekleme

cdkFocusTrap, özel bileşenlerde odaklanma sırasını yakalamak ve kontrol etmek için kullanılabilir. Odak noktasını bir iletişim kutusunda kilitleyerek çoğu sorunu çözmek için mat-dialog-content'ü kullanmak yeterlidir. Renk seçici iletişim kutusundaki mantı sarmalayıcı renginde <mat-selection-list> ilk odak bölgesini tanımlamak için cdkFocusInitial özelliğini ekleyin.

src/app/shop/color-picker/color-picker-dialog/color-picker-dialog.component.html

<mat-selection-list #colors aria-label="Dumpling wrapper color" multiple="false" cdkFocusInitial>
  ...
</mat-selection-list>

Değişiklikleri doğrulama

Ekran okuyucunuzu tekrar açın ve değişikliklerinizi doğrulayın. Odak artık iletişim kutusunda başlangıçta Rengi Değiştir'e ayarlanmıştır.

Erişilebilirlik denetimi:

• ✅ Tüm sayfaların benzersiz sayfa başlıkları var
• ✅ Renkler yeterli kontrast oranına sahip
• ✅ Semantik HTML mantıksal etkileşim sağlar
• ✅ Tüm kontrollere ekran okuyucular tarafından erişilebilir
• ✅ Kaydırma çubuğu, etiket sağlamak için ARIA özelliklerini kullanır
• ✅ Renk seçicide doğru odaklama özelliği bulunuyor
• 🛑 Değişiklikler, hatalar ve bildirimler duyurulmaz
• 🛑 HighContrast modu etkin değil

11. LiveAnnouncer ile değişiklikleri duyurma

Sayfada bir şey değiştiğinde ekran okuyucuların bilgilendirilmesi gerekir. Bir formu göndermeye veya satın alma işlemini tamamlamaya çalışırken, formun gönderilmesini engelleyen bir hatanın ortaya çıktığını bilmediğinizi hayal edin. Bu can sıkıcı bir durum.

LiveAnnouncer, ekran okuyucu kullanıcılarına yönelik bildirimleri duyurmak için kullanılır. Bu sayede ekran okuyucu kullanıcıları, bildirimler ve canlı sayfa değişiklikleri hakkında bilgilendirilir. aria-live bölgeleri hakkında daha fazla bilgi için W3C'nin WAI-ARIA sayfasına bakın. Angular'da LiveAnnouncer'ı hizmet olarak çağırmak, aria-live özelliklerinden daha test edilebilir bir çözümdür.

Bu bölümün sonunda uygulamanız aşağıdaki denetimi geçecektir:

• 🛑 Değişiklikler, hatalar ve bildirimler duyurulmaz

Bu adımları yorumların altında bulabilirsiniz: TODO: #11. Announce changes with LiveAnnouncer.

Sorunu belirleme

Bu sorunu tespit etmek için ekran okuyucunuzu açın ve form alanlarını doldurmadan Satın Al'ı seçin:

1. VoiceOver'ı açın.
2. Rengi değiştirmek ve sahte satın alma işlemi yapmak için Sekme tuşlarını kullanın.
3. İletişim kutusundan çıkarken hangi rengin seçildiğine dair herhangi bir bilgi olmadığına ve satın alma işleminin okunmadığına dikkat edin.

LiveAnnouncer'ı kodunuza ekleme

LiveAnnouncer'ı ekleyip hem renk seçimini hem de sahte satın alma işlemini dize olarak duyurun. Gerçek bir uygulamada bu, üçüncü taraf ödeme sistemine gittiğinizde veya form hataları için okunabilir.

1. Bir renk seçildiğinde duyuru ekleme:

src/app/shop/color-picker/color-picker-dialog/color-picker-dialog.component.ts

import { LiveAnnouncer } from '@angular/cdk/a11y';

@Component(...)
export class ColorPickerDialogComponent implements OnInit {
  constructor(
    public dialogRef: MatDialogRef<ColorPickerDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: ColorDialogData,
    private liveAnnouncer: LiveAnnouncer) { }

  public changeColor(color: string): void {
    this.liveAnnouncer.announce(`Select color: ${color}`);
    this.dialogRef.close();
  }
}

2. Sahte satın alma işlemi yapıldığında duyuru ekleme:

src/app/shop/shop.component.ts

import { LiveAnnouncer } from '@angular/cdk/a11y';

@Component(...)
export class ShopComponent implements OnInit {

  constructor(private liveAnnouncer: LiveAnnouncer) { }

  fauxPurchase(): void {
    let flavor = '...';
    const fakePurchase = `Purchase ${this.quantity} ${flavor}dumplings in the color ${this.color}!`;

    this.liveAnnouncer.announce(fakePurchase);
  }
}

Değişiklikleri doğrulama

Ekran okuyucunuzu tekrar açın ve değişikliklerinizi doğrulayın. Artık hatalarınızdan haberdar oluyorsunuz.

Erişilebilirlik denetimi:

• ✅ Tüm sayfaların benzersiz sayfa başlıkları var
• ✅ Renkler yeterli kontrast oranına sahip
• ✅ Semantik HTML mantıksal etkileşim sağlar
• ✅ Tüm kontrollere ekran okuyucular tarafından erişilebilir
• ✅ Kaydırma çubuğu, etiket sağlamak için ARIA özelliklerini kullanır
• ✅ Renk seçicide doğru odak yakalama var
• ✅ Değişiklikler, hatalar ve bildirimler duyurulur
• 🛑 HighContrast modu etkin değil

12. Yüksek Kontrast modunu etkinleştirme

Microsoft Windows, Yüksek Kontrast Modu adlı bir erişilebilirlik özelliğini destekler. Bu mod, kontrastı önemli ölçüde artırmak için web uygulamaları da dahil olmak üzere tüm uygulamaların görünümünü değiştirir. Angular'da, uygulamanızda kullanıcı tercihlerine saygı göstermek istersiniz.

HighContrastModeDetector, tarayıcının şu anda yüksek kontrast modu ortamında olup olmadığını belirlemenize olanak tanır.

Internet Explorer, Microsoft Edge ve Firefox bu modu destekler. Google Chrome, Windows Yüksek Kontrast Modu'nu desteklemez. Bu hizmet, Chrome Yüksek Kontrast tarayıcı uzantısı tarafından eklenen yüksek kontrast modunu algılamaz.

Bu bölümün sonunda uygulamanız aşağıdaki denetimi geçecektir:

• 🛑 HighContrast modu etkin değil

Aşağıdaki adımları yorumların altında bulabilirsiniz: TODO: #12. Enable HighContrast mode.

Sorunu belirleme

Bu sorunu belirlemek için uygulamanızı Internet Explorer, Microsoft Edge veya Firefox'ta açın, Yüksek Kontrast Modu'nu açın ve değişiklik olup olmadığını gözlemleyin:

1. Uygulamanızı Internet Explorer, Microsoft Edge veya Firefox'ta açın.
2. Yüksek Kontrast Modu'nu açın.
3. Uygulamanın değişmediğine dikkat edin.

Yüksek kontrast modu desteği ekleme

styles.scss dosyasında, Yüksek Kontrast modunda düğmelerinize bir dış çizgi eklemek için @angular/cdk/a11y dosyasında sağlanan cdk-high-contrast mixin'ini kullanın:

src/app/shop/shop.component.scss

@use '@angular/cdk';

.purchase-button {
    border-radius: 5px;
    background-color: mat.get-color-from-palette(mat.$pink-palette, A100);

    @include cdk-high-contrast {
      outline: solid 1px;
      background-color: mat.get-color-from-palette(mat.$pink-palette, 50);
    }
}

:host-context(.dark-theme) {
  .purchase-button {
    background-color: mat.get-color-from-palette(mat.$light-green-palette, A100);

    @include cdk-high-contrast {
      outline: solid 1px;
      background-color: mat.get-color-from-palette(mat.$light-green-palette, 50);
    }
  }
}

Değişiklikleri doğrulama

Uygulamanızı yenileyin ve değişikliklerinizi doğrulayın. Yüksek kontrast modunda düğmeye bir dış çizgi eklediniz.

Erişilebilirlik denetimi:

• ✅ Tüm sayfaların benzersiz sayfa başlıkları var
• ✅ Renkler yeterli kontrast oranına sahip
• ✅ Semantik HTML mantıksal etkileşim sağlar
• ✅ Tüm kontrollere ekran okuyucular tarafından erişilebilir
• ✅ Kaydırma çubuğu, etiket sağlamak için ARIA özelliklerini kullanır
• ✅ Renk seçicide doğru odak yakalama var
• ✅ Değişiklikler, hatalar ve bildirimler duyurulur
• ✅ Yüksek kontrast modu etkin

13. Tebrikler!

Tebrikler, Angular uygulamanızda yaygın web erişilebilirliği sorunlarını giderdiniz. 🎉

Tüm çözümleri görmek için main dalına göz atın.

Artık Angular uygulamanızdaki yaygın erişilebilirlik sorunlarından sekiz tanesini çözmek için gereken temel adımları biliyorsunuz.

Daha fazla bilgi

Şu codelab'lere göz atın:

• Angular ve Firebase ile web uygulaması oluşturma
• Chrome Geliştirici Araçları ile düşük kontrastlı metinleri bulma ve düzeltme

Şu materyalleri okuyun:

• Angular.io
• Açısal Malzeme a11y
• Erişilebilirlik Temel Bilgileri
• https://web.dev/accessible/