Daha erişilebilir Angular uygulamaları geliştirme

1. Başlamadan önce

Erişilebilirlik, web geliştirmenin hayati bir parçasıdır ve kullanıcıların uygulamaları algılayabilmesini, anlayabilmesini, gezebilmesini ve uygulamalarla etkileşimde bulunabilmesini sağlar. Aslında ABD'deki her 4 yetişkinden 1'i yaşamlarındaki temel aktiviteleri etkileyen bir engele sahip. Dünya nüfusunun yaklaşık yüzde 15'i (1 milyardan fazla kişi) bir çeşit engelliliğe sahip. Bu kişilerin yaklaşık yüzde 2 ila 4'ü ciddi zorluklar yaşıyor.

Kişinin web kullanımını etkileyen yaygın durumlar arasında körlük veya az görme, sağırlık ya da işitme bozukluğu, kısıtlı motor beceriler, zihinsel engellilik ve renk körlüğü yer alır. Bu durumların yalnızca küçük bir kısmını kapsamaktadır.

Bu kursta a11y, erişilebilirliğin kısaltmasıdır. a harfinin 11 karakter ve y harfinin geldiğine dikkat edin.

Erişilebilir uygulamalar tasarlamayla ilgili sorunlar ve teknikler hakkında ayrıntılı bilgi için Erişilebilirlik konusuna bakın.

Oluşturacaklarınız

• Demo amaçlı Dumpling Shop Angular uygulamasında sık karşılaşılan web erişilebilirliği sorunlarını gidermek için en iyi uygulamalardan ve yerleşik tekniklerden yararlanın
• 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 ve yaygın olarak görülen sekiz erişilebilirlik sorunu hakkında bilgi edinecek, bunları nasıl tanımlayacağınızı ve nasıl 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'ı ve iç içe yerleştirilmiş denetimleri kullanın
• Ekran okuyucular için ARIA desteği ekleme
• Angular CDK a11y paketini içe aktarma ve kullanma
• Özel bileşen ekran okuyucuda gezinme için FocusTrap'i kullanın
• CDK LiveAnnouncer ile bildirimleri duyurun
• HighContrast moduna sahip kullanıcıları tespit edin ve yüksek kontrast teması uygulayın

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 en sevdiğiniz geliştirme ortamında açın.

Depoyu klonlama ve uygulamayı sunma

Bu codelab'de çalışmak için VSCode veya yerel IDE önerilen yöntemdir.

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/ işlemini depoya yapıştırın.
3. git checkout get-started başlangıç kodu dalına göz atın.
4. Kodu VSCode'da 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. Bir tarayıcı sekmesi açarak http://localhost:4200 adresine gidin.

3. Bütçe temel çizgisi oluşturun

Başlangıç noktanız nedir?

Başlangıç noktanız, bu codelab için tasarlanmış temel bir restoran uygulamasıdır. Kod, bu codelab'deki kavramları gösterecek şekilde basitleştirilmiştir ve fazla işlevi yoktur.

Demoyu inceleyin

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

1. Gezinme çubuğunu kullanarak Mağazamız, Hikayemiz ve Bize Ulaşın rotalarını görüntüleyin ve mantı şirketiyle ilgili ayrıntıları görün.
2. Açık ve koyu modu açıp kapatmak 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. Öncelikle uygulamanızdaki a11y sorunlarını belirleyin, ardından bir çözüm uygulayarak 🛑'yı ✅'ya dönüştürün.

Neyi düzelteceğinizi nasıl bilebilirsiniz?

Her örneğe, manuel ve otomatik testleri bir arada kullanarak erişilebilirlik sorununu tanımlayarak başlayı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ımızın yerleşik ekran okuyucusunu açıp klavyeyle gezinmeyi kullanarak uygulamanızda gezineceksiniz. Daha fazla bilgi için Anlamsal bilgi ve ekran okuyucular başlıklı makaleyi inceleyin.

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

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

Bu kursta, öncelikli olarak sorunları manuel olarak test edeceksiniz ve belirli otomatikleştirilebilir özellikleri kontrol etmenize yardımcı olması için otomatik araçlar kullanacaksınız.

Otomatik test

Ayrıca, uygulamanızı otomatikleştirmek ve denetlemek için birkaç geliştirme aracı kullanırsınız. Bu araçlar, resimlerde alternatif metin olup olmadığını veya metin renginin kontrast oranı gibi bilgileri kontrol etmenize olanak tanır. Bu araçları linç aracı olarak düşünebilirsiniz: alternatif metnin olduğunu algılayabilirler, ancak içeriğin mantıksal olduğunu ve değer sağladığı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

Otomatikleştirilebilir a11y özellikleri için kodunuzda hata analizi yapmak amacıyla Angular ESLint kurallarını kullanabilirsiniz.

eslint.json öğesinde, erişilebilirlik için geçerli olan şunları 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 yeni ESLint kurallarına bakın.

Başlangıç noktanız

Yeni test yöntemlerinizi kullanarak Lighthouse ve axe denetimlerinin yanı sıra manuel VoiceOver ile uygulamanızda aşağıdaki sorunları belirleyebilirsiniz:

Erişilebilirlik denetimi:

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

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

Benzersiz, kısa ve öz sayfa başlıkları sunmak, a11y 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 uygulamadır ve sonuç olarak, yeni bir sayfaya geçme gibi geçişlerin çoğunda sayfanın yeniden yüklenmesi gerekmez. Yakın zamana kadar bu durum, her sayfanın aynı sayfa başlığına sahip olduğu ve sayfanın içeriğini veya amacını anlamak için herhangi bir değer sağlayamadığı anlamına geliyordu.

Angular v14'te Yönlendirici, benzersiz sayfa başlıklarını anında tanımlamak için yerleşik bir yöntem ekledi. Bu, geliştiricilerin sayfa başlığı en iyi uygulamalarını takip etmelerini sağlayan basit bir yaklaşım sağlar.

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

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

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

Sorunu belirleme

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

1. VoiceOver'ı açın.
2. Sayfalar arasında gezinmek için sekmeyle gezinme özelliğini kullanın.
3. Sayfa başlığının her zaman Angular dilinde a11y olduğunu doğrulayın.

Bu bir sorundur çünkü sayfa başlığınızın benzersiz olması gerekir. Böylece, kullanıcılar sayfada gezinmek zorunda kalmadan sayfanın neyle ilgili olduğunu hızlı bir şekilde anlayabilirler.

Anlamlı sayfa başlıkları ekleyin

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

1. Tanımlanan üç 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 otomatik olarak içe aktarılır ve arka planda Router's Title Service kullanılarak gezinmedeki sayfa başlığının, rotalarımızda tanımlanan başlık özelliğiyle eşleşecek şekilde değiştirilmesini sağlar. Ö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 artık benzersiz başlıkları olmalı!

Erişilebilirlik denetimi:

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

5. Yeterli renk kontrastı sağlayın

Tasarımınız havalı görünebilir ancak renk körlüğü gibi görme bozukluğu olan kişilerin içeriğinizi okuyamaması doğru değildir. Web İçeriği Erişilebilirlik Yönergeleri'nde (WCAG 2.0), içeriğin erişilebilir olmasını sağlamak için bir dizi renk kontrastı oranı tanımlanır. Angular'da ve web'de, bileşenlerinizin bu standartları karşılamasını, görme engelli ve renk körlüğü olan kullanıcılar tarafından görülmesini sağlayan renk paletleri tanımlayabilirsiniz.

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

• 🛑 Öğ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 Materyal temanızda tanımlanır. Tema değerinizi, renk kontrastı oranı yönergelerine uyacak şekilde güncellersiniz.

Materyal temanızı güncelleyerek daha koyu bir metin rengi kullanın ve simgelerinizin kontrast oranını artırın:

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'deki ayrı renk değerlerini güncellemek için Chrome Geliştirici Araçları 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ı oranı sağlanmış olmalıdır.

Erişilebilirlik Denetimi

• ✅ Tüm sayfaların benzersiz sayfa başlıkları vardır
• ✅ Renkler yeterli kontrast oranına sahip
• 🛑 HTML'nin mantıksal sırası, adı ve rolü olmalıdır
• 🛑 İç içe yerleştirilmiş onay kutuları, ekran okuyucular tarafından seçilemez
• 🛑 Ekran okuyucu, kaydırma çubuğu değerlerini okumuyor
• 🛑 Renk seçicideki ekran okuyucu odağı iletişim kutusundan çıkar
• 🛑 Değişiklikler, hatalar ve bildirimler duyurulmaz
• 🛑 HighContrast modu etkin değil

6. Semantik HTML kullanma

Yerel HTML öğeleri, erişilebilirlik için önemli olan birkaç standart etkileşim kalıbını yakalar. Bir paragrafın stili span olarak ve div öğesi de düğme olarak biçimlendirilebilir. Anlamsal HTML öğesi, ekran okuyucuların ve klavyede gezinmenin HTML'nizin etkileşimlerini ve denetimlerini anlamasını sağlar.

Angular bileşenlerini oluştururken, iyi desteklenen davranışları yeniden uygulamak yerine mümkün olduğunda bu yerel öğeleri doğrudan yeniden kullanmanız gerekir. Bu, sayfanın iyi bir içerik yapısına ve doğal içerik akışına sahip olmasını ve sekmenin, klavyeyi etkili bir şekilde kullanarak web sitesinde gezinen kullanıcılara yardımcı olmak için mantıklı bir sırada olmasını sağlar.

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

• 🛑 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. Sekmeyle gezinme özelliğini kullanarak Hikayemiz sekmesine gidin.
3. Sekme sırasının sıralı olmadığına dikkat edin.
4. Satın alma işlemleri'ni tıklayın.
5. Düğmenin düğme olarak tanınmadığına dikkat edin.

<div> bir <button>

Özel <div> Malzeme düğmesiyle:

src/app/shop/shop.component.html

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

Başlık öğelerini sıralı olarak 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ı vardır
• ✅ 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ğu değerlerini okumuyor
• 🛑 Renk seçicideki ekran okuyucu odağı iletişim kutusundan çıkar
• 🛑 Değişiklikler, hatalar ve bildirimler duyurulmaz
• 🛑 HighContrast modu etkin değil

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

Erişilebilirlik hizmetleri için karmaşık etkileşim kalıplarından biri, iç içe yerleştirilmiş kontrollerdir. Menü alt öğelerini veya iç içe yerleştirilmiş onay kutularını düşünün. Kullanıcıya bir alt seçenek grubunu belirleyebileceğini veya bir üst menü öğesine gidebileceğini 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 belirlemek için ekran okuyucumuzu açıp iç içe yerleştirilmiş bir onay kutusunu seçmeye çalışacağız.

1. VoiceOver'ı açın.
2. Farklı dolgu aromaları seçin.
3. VoiceOver tarafından okunurken üst onay kutularının alt öğeleri belirtmediğine dikkat edin. Bok Choy onay kutusunun seçimini kaldırdığınızda Vegan onay kutusunun işaretinin kaldırılmış olduğunu nasıl anlarsınız?

Açısal Materyalde A11y

Anlamsal onay kutusunu, bu etkileşim kalıbıyla ilgili yerleşik bilgileri içeren Açısal Materyal onay kutusuyla değiştirirsiniz. Bileşenleri Materyal ile değiştirmenin erişilebilirliği garanti etmediğini unutmayın. Material'ı erişilemez şekilde uygulamanın birçok yolu olduğundan, diğer bileşenlerde olduğu gibi manuel test yapmanız gerekir.

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

1. İlk olarak, yeni iç malzeme listenizi ve seçtiğiniz iç malzemeyi saklamak için 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 kutuları grubunun yerine 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ız, stilinizi temizlemek için src/app/shop/shop.component.scss ürününde kullanılmayan bazı Sass'ları nereden kaldırabileceğinizi de gösterir.

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ı vardır
• ✅ Renkler yeterli kontrast oranına sahip
• ✅ Semantik HTML mantıksal etkileşim sağlar
• ✅ Tüm kontrollere ekran okuyucularla erişilebilir
• 🛑 Ekran okuyucu, kaydırma çubuğu değerlerini okumuyor
• 🛑 Renk seçicideki ekran okuyucu odağı iletişim kutusundan çıkar
• 🛑 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 çözülmesine 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 denetimden geçmiş olur:

• 🛑 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 belirlemek için ekran okuyucunuzu açın ve kaydırma çubuğunu hareket ettirin:

1. VoiceOver'ı açın.
2. Miktar kaydırma çubuğuna gidin 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ı vardır
• ✅ Renkler yeterli kontrast oranına sahip
• ✅ Semantik HTML mantıksal etkileşim sağlar
• ✅ Tüm kontrollere ekran okuyucularla erişilebilir
• ✅ Kaydırma çubuğu, etiket sağlamak için ARIA özelliklerini kullanır
• 🛑 Renk seçicideki ekran okuyucu odağı iletişim kutusundan çıkar
• 🛑 Değişiklikler, hatalar ve bildirimler duyurulmaz
• 🛑 HighContrast modu etkin değil

9. @angle/cdk/a11y ifadesinin kuvvetini ekleyin

Şimdiye kadar, sık karşılaşılan a11y sorunlarını çözmek için yerleşik Angular araçlarından yararlanıyordunuz. Şimdi, CDK'nin 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 bu kursa Angular a11y modülü araçlarıyla 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 eklediniz: 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. Odağın iletişim kutusu 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önergesi, tab-anahtar odağını bir öğe içinde yakalar. Bunun amacı, odağın kısıtlanması gereken kalıcı iletişim kutuları gibi bileşenler için erişilebilir deneyim oluşturmaktır.

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

• 🛑 Renk seçicideki ekran okuyucu odağı iletişim kutusundan çıkar

Bu adımları yorumların altında bulabilirsiniz: TODO: #10. Control focus with FocusTrap.

Sorunu belirleme

Bu sorunu belirlemek için ekran okuyucunuzu açıp 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 odak sırasını ve odaklamayı görmek için işaretleyin.

Odaklanma Tuzağı Ekle

cdkFocusTrap, özel bileşenlerde odak sırasını yakalamak ve kontrol etmek için kullanılabilir. mat-dialog-content kullanmak, odağı iletişim kutusuna hapsederek çoğu sorunu çözmek için yeterlidir. Renk seçici iletişim kutusundaki mantı sarmalayıcı renginde <mat-selection-list> ilk odaklama 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 kutusundaki Rengi Değiştir seçeneğinde ayarlanır.

Erişilebilirlik denetimi:

• ✅ Tüm sayfaların benzersiz sayfa başlıkları vardır
• ✅ Renkler yeterli kontrast oranına sahip
• ✅ Semantik HTML mantıksal etkileşim sağlar
• ✅ Tüm kontrollere ekran okuyucularla 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. Değişiklikleri LiveAnnouncer ile duyurun

Sayfada bir değişiklik olduğunda ekran okuyucuların bilgilendirilmesi gerekir. Bir form göndermeye veya satın alma işlemini tamamlamaya çalıştığınızı ve formun gönderilmesini engelleyen bir hata oluşup oluşmadığını bilmediğinizi düşünün. Bu çok can sıkıcı!

LiveAnnouncer, ekran okuyucuların bildirimler ve canlı sayfa değişiklikleri hakkında bilgilendirilmesini sağlamak için aria-live bölgesi kullanan ekran okuyucu kullanıcılarına mesajları duyurmak için kullanılır. Aria-live bölgeleri hakkında daha fazla bilgi için W3C'nin WAI-ARIA'sı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 denetimden geçmiş olur:

• 🛑 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 belirlemek 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 bir satın alma işlemi gerçekleştirmek için sekmede gezinmeyi 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 uygulamada ise, bir üçüncü taraf ödeme sistemine gittiğinizde veya form hataları olduğunda bu mesaj 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 bir 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ızla ilgili bildirim aldınız.

Erişilebilirlik denetimi:

• ✅ Tüm sayfaların benzersiz sayfa başlıkları vardır
• ✅ Renkler yeterli kontrast oranına sahip
• ✅ Semantik HTML mantıksal etkileşim sağlar
• ✅ Tüm kontrollere ekran okuyucularla 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 duyurulur
• 🛑 HighContrast modu etkin değil

12. Yüksek Kontrast modunu etkinleştir

Microsoft Windows, Yüksek Kontrast Modu adı verilen 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, kullanıcıların uygulamanızdaki tercihlerine saygı duymak istersiniz.

HighContrastModeDetector, tarayıcının o anda yüksek kontrast modunda 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 denetimden geçmiş olur:

• 🛑 HighContrast modu etkin değil

Bu 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 için destek ekleme

styles.scss ürününde, Yüksek Kontrast modundaki düğmelerinize dış çizgi eklemek için @angular/cdk/a11y içinde sağlanan cdk-high-contrast mix'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 yaptığınız değişiklikleri doğrulayın. Yüksek Kontrast modunda düğmeye dış çizgi eklediniz.

Erişilebilirlik denetimi:

• ✅ Tüm sayfaların benzersiz sayfa başlıkları vardır
• ✅ Renkler yeterli kontrast oranına sahip
• ✅ Semantik HTML mantıksal etkileşim sağlar
• ✅ Tüm kontrollere ekran okuyucularla 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 duyurulur
• ✅ Yüksek kontrast modu etkinleştirildi

13. Tebrikler!

Tebrikler, Angular uygulamanızda sık karşılaşılan 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ızda sekiz yaygın a11y hatasını çözmek için gereken temel adımları biliyorsunuz.

Daha fazla bilgi

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

• Angular ve Firebase ile web uygulaması derleme
• Chrome Geliştirici Araçları ile düşük kontrastlı metinleri keşfetme ve düzeltme

Şu materyalleri okuyun:

• Angular.io
• Açısal Malzeme a11y
• Erişilebilirlikle İlgili Temel Bilgiler
• https://web.dev/accessible/