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 genelinde, dünya nüfusunun yaklaşık yüzde 15'i (1 milyardan fazla kişi) bir çeşit engelliliğe 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 engellilik 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 y harfi geliyor.

Erişilebilir uygulamalar tasarlamayla ilgili sorunlar ve teknikler hakkında ayrıntılı bilgi için Erişilebilirlik başlıklı makaleyi inceleyin.

Ne oluşturacaksınız?

• Bir 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
• Tüm erişilebilirlik yönergelerini (WCAG 2.0 ve ARIA 1.2) karşılayın, axe ve Lighthouse erişilebilirlik denetimlerini geçin.

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 açık şekilde belirtmek 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ıyla tek sayfalık uygulama (SPA) tuzaklarını çözme
• Az gören kullanıcılar için düşük renk kontrastı sorunlarını düzeltme
• Ekran okuyucuların sayfada doğru şekilde gezinmesini sağlamak için semantik HTML kullanma
• Ekran okuyucuların tüm kontrollere erişebilmesini sağlamak için Angular Material'ı kullanın ve kontrolleri iç içe yerleştirmeyin.
• Ekran okuyucular için ARIA desteği ekleme
• Angular CDK a11y paketini içe aktarma ve kullanma
• Özel bileşen ekran okuyucu gezinmesi için FocusTrap'i kullanma
• CDK LiveAnnouncer ile bildirimleri duyurma
• Yüksek kontrast modu kullanan kullanıcıları algılama ve yüksek kontrast teması uygulama

Gerekenler

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

2. Hazırlanın

Kodu alın.

Bu proje için ihtiyacınız olan her şey bir GitHub deposunda yer alır. Başlamak için kodu klonlayın ve en sevdiğiniz geliştirme ortamında açın.

Depoyu klonlama ve uygulamayı sunma

Bu codelab'i tamamlamak için VSCode veya yerel bir IDE kullanmanız önerilir.

1. Yeni bir tarayıcı sekmesi açın ve https://github.com/googlecodelabs/angular-accessibility adresine gidin.
2. Depoyu çatallayıp klonlayın ve cd angular-accessibility/ komutunu kullanarak depoya gidin.
3. Başlangıç kodu dalına git checkout get-started 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. http://localhost:4200 adresine gitmek için bir tarayıcı sekmesi açın.

3. Temel bir 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 codelab'deki 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 Bize Ulaşın rotalarını görüntüleyebilir, mantı şirketiyle ilgili ayrıntıları inceleyebilirsiniz.
2. Temaları değiştirerek açık ve koyu mod arasında geçiş yapabilirsiniz.
3. Siparişinizdeki mantıların içini, 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ı gidermek için Angular'ı kullanma

Bu codelab'de, bu uygulamanın mevcut özelliklerinin erişilebilirliğine odaklanacaksınız. Öncelikle uygulamanızdaki a11y sorunlarını belirleyecek, ardından bir çözüm uygulayarak 🛑 işaretini ✅ işaretine dönüştüreceksiniz.

Neyi düzelteceğinizi nasıl anlarsınız?

Her örneğe, manuel ve otomatik testlerin bir karışımını kullanarak erişilebilirlik sorununu tespit ederek başlayın.

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

Erişilebilirlik sorunlarını belirleyebilen araçlarınız olsa da hiçbir araç, bir uygulamanın tamamen erişilebilir olduğunu onaylayamaz. Manuel test, mantıksal içerik sırası ve özellik eşliği gibi çeşitli erişilebilirlik kavramlarını 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çıp klavye ile gezinme özelliğini kullanarak uygulamanızda gezinin. Daha fazla bilgi için Semantik ve ekran okuyucular başlıklı makaleyi inceleyin.

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

MacOS'un yerleşik VoiceOver özelliğini kullanabilirsiniz. Sistem Tercihleri > Erişilebilirlik > VoiceOver > VoiceOver'ı etkinleştirerek açın'ı tıklayın. VoiceOver'ı açıp kapatmak için Command tuşunu basılı tutarken Touch ID'ye üç kez hızlıca basın.

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

Otomatik test

Uygulamanızı otomatikleştirmek ve denetlemek için de birkaç geliştirme aracı kullanırsınız. Bu araçlar, bir resimde alternatif metnin bulunup bulunmadığı veya metin renginin kontrast oranı gibi şeyleri kontrol etmenize olanak tanır. Bu araçları linter olarak düşünebilirsiniz. Alternatif metnin mevcut olduğunu algılayabilirler ancak içeriğin mantıklı 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 Erişilebilirlik onay kutusunu seçin.
3. Erişilebilirlik Lighthouse denetimi çalıştırmak için Rapor oluştur'u tıklayın.

Axe

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 ve Sayfamın tamamını tara'yı seçerek axe DevTools taraması çalıştırın.

Linting

Kodunuzda otomatikleştirilebilir erişilebilirlik özellikleri için lint işlemi yapmak üzere Angular ESLint kurallarını kullanabilirsiniz.

eslint.json içinde erişilebilirlik için geçerli olan aşağıdaki öğeleri 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öntemlerinizi kullanarak Lighthouse ve axe denetimlerinin yanı sıra manuel VoiceOver ile uygulamanızdaki aşağıdaki sorunları belirleyebilirsiniz:

Erişilebilirlik denetimi:

• 🛑 Tüm sayfaların sayfa başlığı aynı
• 🛑 Öğeler yeterli renk kontrastına sahip olmalıdır
• 🛑 HTML'nin mantıksal bir sırası, adı ve rolü olmalıdır
• 🛑 İç içe 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 çıkıyor
• 🛑 Değişiklikler, hatalar ve bildirimler duyurulmaz
• 🛑 Yüksek kontrast 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 anlamasına yardımcı olur. Sayfa başlıkları, ekran okuma yazılımı tarafından duyurulan ilk sayfa öğesi olduğundan görme engelli kullanıcılar için çok önemlidir.

Angular, tek sayfalık bir uygulamadır. Bu nedenle, yeni bir sayfaya geçme gibi geçişlerin çoğu sayfanın yeniden yüklenmesini gerektirmez. 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ğlamadığı anlamına geliyordu.

Angular v14'te Router, benzersiz sayfa başlıklarını kullanıma hazır olarak tanımlamak için yerleşik bir yöntem ekledi. Bu, geliştiricilerin sayfa başlığıyla ilgili en iyi uygulamaları takip etmesini sağlamak için kolaylaştırılmış bir yaklaşım sunar.

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

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

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

Sorunu belirleme

Bu sorunu belirlemek için ekran okuyucunuzu açın ve sayfa başlıklarını görmek üzere Mağazamız, Hikayemiz ve Bize Ulaşın sekmeleri arasında gezinin:

1. VoiceOver'ı açın.
2. Sayfalar arasında gezinmek için sekme gezinmesini kullanın.
3. Sayfa başlığının Angular'da her zaman erişilebilirlik (a11y) ile uyumlu olduğunu doğrulayın.

Bu bir sorundur. Çünkü kullanıcının sayfada gezinmek zorunda kalmadan sayfanın ne hakkında olduğunu hızlıca anlayabilmesi için sayfa başlığınızın benzersiz olması gerekir.

Anlamlı sayfa başlıkları ekleme

Bir sayfa veya görünüm değiştiğinde 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 sayfalarınızın her biri için benzersiz başlıklar tanımlarsınız.

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, rotalarımızda tanımlanan başlık özelliğiyle eşleşmesi için gezinmede sayfa başlığını değiştirmeyi yönetmek üzere otomatik olarak Router's Title Service içe aktarır ve kullanır. Daha karmaşık sayfa başlıklarını özel bir TitleStrategy kullanarak 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ıdır.

Erişilebilirlik denetimi:

• ✅ Tüm sayfaların benzersiz sayfa başlıkları var
• 🛑 Öğeler yeterli renk kontrastına sahip olmalıdır
• 🛑 HTML'nin mantıksal bir sırası, adı ve rolü olmalıdır
• 🛑 İç içe 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 çıkıyor
• 🛑 Değişiklikler, hatalar ve bildirimler duyurulmaz
• 🛑 Yüksek kontrast modu etkin değil

5. Yeterli renk kontrastı sağlama

Tasarımınız harika görünebilir ancak renk körlüğü gibi görme sorunları olan kişiler içeriğinizi okuyamıyorsa tasarımınızın bir anlamı yoktur. Web İçeriği Erişilebilirlik Kuralları (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 ile renk körü olan 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çmiş olacak:

• 🛑 Öğ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 belirlemek için Chrome Geliştirici Araçları'nı kullanarak uygulamanızdaki öğeleri inceleyin.

1. Menü simgesi düğmelerini görüntülemek için inceleme aracını kullanın. Kontrastın 1,85 olduğunu görebilirsiniz.Bu değer, WCAG şartlarının çok altındadır.

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

Material tema rengini değiştirme

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

Material temanızı, daha koyu bir metin rengi kullanacak şekilde güncelleyerek simgelerinizin kontrast oranını artırın:

src/styles.scss

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

Standartlara uygun bir renk bulmak veya Sass'taki tek tek renk değerlerini 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. Temanız artık yeterli renk kontrastı oranlarına sahip olmalıdır.

Erişilebilirlik Denetimi

• ✅ Tüm sayfaların benzersiz sayfa başlıkları var
• ✅ Renkler yeterli kontrast oranına sahip
• 🛑 HTML'nin mantıksal bir sırası, adı ve rolü olmalıdır
• 🛑 İç içe 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 çıkıyor
• 🛑 Değişiklikler, hatalar ve bildirimler duyurulmaz
• 🛑 Yüksek kontrast modu etkin değil

6. Semantik HTML kullanma

Yerel HTML öğeleri, erişilebilirlik açısından önemli olan bir dizi standart etkileşim kalıbını yakalar. Paragraflar span olarak, div'ler ise düğme olarak stillendirilebilir. Ancak semantik HTML öğesi, ekran okuyucuların ve klavye ile gezinmenin HTML'nizdeki etkileşimleri ve kontrolleri anlamasını sağlar.

Angular bileşenleri oluştururken, 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 içerik akışına sahip olması sağlanır. Ayrıca, sekmenin, klavyeyi etkili bir şekilde kullanarak web sitesinde gezinmek isteyen kullanıcılara yardımcı olacak mantıksal bir sırada olması sağlanır.

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

• 🛑 HTML'nin mantıksal bir 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 navigasyonunu kullanarak Hikayemiz sekmesine tıklayın.
3. Sekme sırasının ardışık olmadığını fark edin.
4. Purchas'ı tıklayın.
5. Düğmenin, düğme olarak tanınmadığını fark 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

Semantik HTML kullanmak için metni yeniden sıralayın ve Angular Material tipografisini 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 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 çıkıyor
• 🛑 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 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 seçenek alt grubu belirleyebileceğini veya üst menü öğesine gidebileceğini nasıl belirtirsiniz?

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

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

• 🛑 İç içe 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. Üst öğe onay kutularının VoiceOver tarafından okunduğunda alt öğeleri belirtmediğini unutmayın. Bok Choy onay kutusunun işaretini kaldırdıktan sonra Vegan onay kutusunun işaretinin kaldırıldığını nasıl anlarsınız?

Angular Material'da erişilebilirlik

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

Onay kutularını Material 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. HTML onay kutularının bu karmaşık gruplandırmasını değiştirmek için <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 içinde kullanılmayan bazı Sass'ları kaldırabileceğiniz yerleri de gösterir.

Değişiklikleri doğrulama

Ekran okuyucunuzu tekrar açın ve değişikliklerinizi doğrulayın. Artık onay kutularınızı seçebilir ve ekran okuyucuyla daha kolay gezinebilirsiniz.

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 denetimlere ekran okuyucularla erişilebilir.
• 🛑 Ekran okuyucu, kaydırma çubuğu değerlerini okumuyor
• 🛑 Renk seçicideki ekran okuyucu odağı iletişim kutusundan çıkıyor
• 🛑 Değişiklikler, hatalar ve bildirimler duyurulmaz
• 🛑 Yüksek kontrast modu etkin değil

8. ARIA ile kontrol etiketleri sağlama

Angular uygulamanızın semantik HTML'sini ve Material bileşenlerini değiştirdiniz ancak bazı bileşenlerin ekran okuyucular tarafından tam olarak gezilebilmesi için belirli özellikler gerekir.

Web Accessibility Initiative'in Accessible Rich Internet Applications spesifikasyonu (WAI-ARIA veya ARIA), yerel HTML ile yönetilemeyen sorunların giderilmesine yardımcı olur. Bir öğenin erişilebilirlik ağacına çevrilme şeklini değiştiren özellikleri belirtmenize olanak tanır.

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

• 🛑 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ğunuzu hareket ettirin:

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

ARIA özelliklerini kullanma

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

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 denetimlere ekran okuyucularla erişilebilir.
• ✅ Kaydırma çubuğu, etiket sağlamak için ARIA özelliklerini kullanıyor
• 🛑 Renk seçicideki ekran okuyucu odağı iletişim kutusundan çıkıyor
• 🛑 Değişiklikler, hatalar ve bildirimler duyurulmaz
• 🛑 Yüksek kontrast modu etkin değil

9. @angular/cdk/a11y'nin gücünü ekleyin

Şimdiye kadar, sık karşılaşılan erişilebilirlik sorunlarını düzeltmek için yerleşik Angular araçlarını kullanıyordunuz. Şimdi de 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 işe yarar?

Erişilebilirlik modülü, erişilebilirliği iyileştirmek için çeşitli araçlar sunar ve özellikle bileşen yazarları için faydalıdır.

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

@angular/cdk/a11y'nın sunduğu diğer tüm hizmetler hakkında daha fazla bilgi için Erişilebilirlik başlıklı makaleyi inceleyin.

10. FocusTrap ile odağı kontrol etme

Bir iletişim kutusu veya kalıcı öğe açıkken kullanıcı yalnızca bu pencerenin içinde etkileşimde bulunur. Odaklanmanın iletişim kutusunun dışına çıkmasına izin vermek bağlamları karıştırır ve kullanıcının sayfada nerede olduğunu bilmediği bir durum oluşturur.

Angular'da cdkTrapFocus yönergesi, tab- öğesindeki tuş odağını yakalar. Bu, odağın kısıtlanması gereken modal iletişim kutuları gibi bileşenler için erişilebilir deneyimler oluşturmak amacıyla kullanılmak üzere tasarlanmıştır.

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

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

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

Sorunu belirleme

Bu sorunu belirlemek 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 sekme gezinmesini kullanın.
3. Renk seçicide sezgisel odak sırası ve odak yakalama olup olmadığını kontrol edin.

Add FocusTrap

cdkFocusTrap, özel bileşenlerde odak sırasını yakalamak ve kontrol etmek için kullanılabilir. Odaklanmayı bir iletişim kutusunda tutarak çoğu sorunu çözmek için mat-dialog-content tuşunu kullanmak yeterlidir. Renk seçici iletişim kutusunda <mat-selection-list> mantı rengi üzerindeki 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 ilk olarak Rengi Değiştir'e ayarlanıyor.

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 denetimlere ekran okuyucularla erişilebilir.
• ✅ Kaydırma çubuğu, etiket sağlamak için ARIA özelliklerini kullanıyor
• ✅ Renk seçicide doğru odak yakalama var
• 🛑 Değişiklikler, hatalar ve bildirimler duyurulmaz
• 🛑 Yüksek kontrast modu etkin değil

11. LiveAnnouncer ile değişiklikleri duyurma

Sayfada bir şey değiştiğinde ekran okuyuculara bildirim gönderilmesi gerekir. Bir formu göndermeye veya satın alma işlemini tamamlamaya çalıştığınızı ve formun gönderilmesini engelleyen bir hata çıktığını bilmediğinizi düşünün. Bu durum can sıkıcı olmalı.

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 sayfasını inceleyin. Angular'da LiveAnnouncer'ı hizmet olarak çağırmak, aria-live özelliklerine kıyasla daha kolay test edilebilir bir çözümdür.

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

• 🛑 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 satın alma işlemi yapmak için sekme gezinmesini kullanın.
3. İletişim kutusundan çıkıldığında hangi rengin seçildiğine dair bir gösterge olmadığını ve satın alma işleminin okunmadığını unutmayın.

LiveAnnouncer'ı kodunuza ekleme

LiveAnnouncer'ı ekleyin ve hem renk seçimini hem de sahte satın alma işlemini dize olarak duyurun. Gerçek bir uygulamada, üçüncü taraf ödeme sistemine gittiğinizde veya form hataları için bu 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 olacaksınız.

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 denetimlere ekran okuyucularla erişilebilir.
• ✅ Kaydırma çubuğu, etiket sağlamak için ARIA özelliklerini kullanıyor
• ✅ Renk seçicide doğru odak yakalama var
• ✅ Değişiklikler, hatalar ve bildirimler duyurulur.
• 🛑 Yüksek kontrast modu etkin değil

12. Yüksek kontrast modunu etkinleştirme

Microsoft Windows, yüksek kontrast modu adı verilen bir erişilebilirlik özelliğini destekler. Bu mod, web uygulamaları da dahil olmak üzere tüm uygulamaların görünümünü değiştirerek kontrastı önemli ölçüde artırır. Angular'da, uygulamanızda kullanıcının tercihlerine saygı duymak istiyorsunuz.

HighContrastModeDetector, tarayıcının şu 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 modunu 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çmiş olacak:

• 🛑 Yüksek kontrast 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 modunu etkinleştirin ve değişiklik olmadığını gözlemleyin:

1. Uygulamanızı Internet Explorer, Microsoft Edge veya Firefox'ta açın.
2. Yüksek kontrast modunu etkinleştirin.
3. Uygulamanın değişmediğini fark edeceksiniz.

Yüksek kontrast modu desteği ekleme

styles.scss içinde, Yüksek Kontrast modunda düğmelerinize anahat eklemek için @angular/cdk/a11y içinde 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 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 denetimlere ekran okuyucularla erişilebilir.
• ✅ Kaydırma çubuğu, etiket sağlamak için ARIA özelliklerini kullanıyor
• ✅ Renk seçicide doğru odak yakalama var
• ✅ Değişiklikler, hatalar ve bildirimler duyurulur.
• ✅ Yüksek kontrast modu etkinleştirilmiş olmalıdır.

13. Tebrikler!

Tebrikler, Angular uygulamanızdaki 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 sekiz yaygın erişilebilirlik 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ı oluşturma
• Chrome Geliştirici Araçları ile düşük kontrastlı metinleri keşfedip düzeltme

Aşağıdaki materyalleri okuyun:

• Angular.io
• Angular Material a11y
• Erişilebilirlik Temelleri
• https://web.dev/accessible/