Angular'da Erişilebilirlik

Web, görsel veya motor engelleri olanlar dahil olmak üzere çok çeşitli insanlar tarafından kullanılmaktadır. Bu grupların web tabanlı yazılım uygulamalarıyla etkileşimini çok daha kolaylaştıran çeşitli yardımcı teknolojiler mevcuttur. Ayrıca, bir uygulamayı daha erişilebilir olacak şekilde tasarlamak genellikle tüm kullanıcılar için kullanıcı deneyimini iyileştirir.

Erişilebilir uygulamalar tasarlama konularını ve tekniklerini derinlemesine tanımak için Google'ın web.dev Learn Accessibility kursuna bakın.

Bu sayfa, yardımcı teknolojilere güvenenlerin de dahil olduğu tüm kullanıcılar için iyi çalışan Angular uygulamaları tasarlamaya yönelik en iyi uygulamaları tartışmaktadır.

Erişilebilirlik özellikleri

Erişilebilir web deneyimleri oluşturmak genellikle, aksi takdirde eksik olabilecek anlamsal anlam sağlamak için Accessible Rich Internet Applications (ARIA) özelliklerini ayarlamayı içerir. Erişilebilirlikle ilgili özelliklerin değerlerini kontrol etmek için özellik bağlama şablon söz dizimini kullanın.

ARIA özellikleri ve nitelikleri

Angular'da ARIA özelliklerini bağlarken, bunları diğer herhangi bir HTML özelliği gibi doğrudan kullanabilirsiniz.

<button [aria-label]="myActionLabel">…</button>

Statik ARIA özellikleri normal HTML özellikleri olarak çalışır.

<button aria-label="Save document">…</button>

Bazı ARIA kalıpları, yapılandırılmış değerler kabul eden DOM API'leri veya direktif girişleri açığa çıkarır (örneğin, Element referanslarının koleksiyonları). Altta yatan ilişkinin senkronize kalmasını sağlamak için bu durumlarda standart özellik bağlamaları kullanın.

@Component({
  template: `
    <h2 #dialogTitle>Attention</h2>
    <p #dialogDescription>Please review your answers before continuing.</p>

    <section role="dialog" [ariaLabelledByElements]="[dialogTitle, dialogDescription]">
      <ng-content />
    </section>
  `,
})
export class ReviewDialog {}

Burada [ariaLabelledByElements] bir eleman dizisi kabul eder, bu nedenle özellik bağlama, şablon verileri değiştiğinde eleman referanslarını güncel tutar.

ARIA özellik söz diziminin bir özeti için bağlama kılavuzuna bakın.

Angular UI bileşenleri

Angular ekibi tarafından sürdürülen Angular Material kütüphanesi, tamamen erişilebilir olmayı hedefleyen yeniden kullanılabilir UI bileşenleri paketidir. Component Development Kit (CDK), çeşitli erişilebilirlik alanlarını destekleyen araçlar sağlayan a11y paketini içerir. Örneğin:

• LiveAnnouncer, aria-live bölgesi kullanarak ekran okuyucu kullanıcıları için mesajları duyurmak amacıyla kullanılır. aria-live bölgeleri hakkında daha fazla bilgi için W3C belgelerine bakın.

• cdkTrapFocus direktifi, Tab tuşu odağını bir elemanın içinde tutar. Odağın sınırlandırılması gereken modal diyaloglar gibi bileşenler için erişilebilir deneyim oluşturmak amacıyla kullanın.

Bu ve diğer araçların tam ayrıntıları için Angular CDK erişilebilirlik genel bakışı'na bakın.

Yeniden kullanılabilir WAI-ARIA etkileşim kalıplarına ihtiyaç duyan özel biçimlendirilmiş bileşenler için Angular Aria, accordion, combobox, listbox, menu, tabs ve toolbar gibi kalıplar için başsız (headless) yönergeler sağlar. Bu yönergeler klavye etkileşimini, ARIA özniteliklerini, odak yönetimini ve ekran okuyucu desteğini yönetirken, uygulamanız için HTML yapısını ve biçimlendirmeyi sağlamanıza olanak tanır.

Yerel elemanları güçlendirme

Yerel HTML elemanları, erişilebilirlik için önemli olan birçok standart etkileşim kalıbını yakalar. Angular bileşenleri yazarken, iyi desteklenen davranışları yeniden uygulamak yerine mümkün olduğunda bu yerel elemanları doğrudan yeniden kullanmalısınız.

Örneğin, yeni bir düşme çeşidi için özel bir eleman oluşturmak yerine, yerel bir <button> elemanı ile bir özellik seçici kullanan bir bileşen oluşturun. Bu en yaygın olarak <button> ve <a> için geçerlidir, ancak başka birçok eleman türünde de kullanılabilir.

Bu kalıbın örneklerini Angular Material'da görebilirsiniz: MatButton, MatTabNav ve MatTable.

Yerel elemanlar için kapsayıcılar kullanma

Uygun yerel elemanın kullanılması bazen bir kapsayıcı eleman gerektirir. Örneğin, yerel <input> elemanı alt elemanlara sahip olamaz, bu nedenle herhangi bir özel metin girişi bileşeni, <input>'u ekstra elemanlarla sarmallamalıdır. Özel bileşeninizin şablonuna sadece <input> dahil ettiğinizde, bileşeninizin kullanıcıları <input> elemanına rastgele özellikler ve nitelikler ayarlayamaz. Bunun yerine, bileşenin API'sine yerel kontrolü dahil etmek için içerik yansıtma kullanan bir kapsayıcı bileşen oluşturun.

Bu kalıbın bir örneği olarak MatFormField'a bakın.

Örnek çalışma: Özel bir ilerleme çubuğu oluşturma

Aşağıdaki örnek, erişilebilirlikle ilgili özellikleri kontrol etmek için host bağlama kullanarak bir ilerleme çubuğunu nasıl erişilebilir hale getireceğimizi göstermektedir.

• Bileşen, hem standart HTML özelliği role hem de ARIA özellikleri ile erişilebilirlik etkinleştirilmiş bir eleman tanımlar. ARIA özelliği aria-valuenow, kullanıcının girdisine bağlıdır.
• Şablonda, aria-label özelliği kontrolün ekran okuyucuları tarafından erişilebilir olmasını sağlar.

1import {Component, input} from '@angular/core';
2
3/**
4 * Example progressbar component.
5 */
6@Component({
7  selector: 'app-example-progressbar',
8  template: '<div class="bar" [style.width.%]="value()"></div>',
9  styleUrls: ['./progress-bar.component.css'],
10  host: {
11    // Sets the role for this component to "progressbar"
12    role: 'progressbar',
13
14    // Sets the minimum and maximum values for the progressbar role.
15    'aria-valuemin': '0',
16    'aria-valuemax': '100',
17
18    // Binding that updates the current value of the progressbar.
19    '[attr.aria-valuenow]': 'value',
20  },
21})
22export class ExampleProgressbarComponent {
23  /** Current value of the progressbar. */
24  value = input(0);
25}
26
27

1<h1>Accessibility Example</h1>
2<label for="progress-value">
3  Enter an example progress value
4  <input
5    id="progress-value"
6    type="number"
7    min="0"
8    max="100"
9    [value]="progress"
10    (input)="setProgress($event)"
11  />
12</label>
13
14<!-- The user of the progressbar sets an aria-label to communicate what the progress means. -->
15<app-example-progressbar [value]="progress" aria-label="Example of a progress bar" />
16

Yönlendirme

Navigasyon sonrası odak yönetimi

Bir kullanıcı arayüzünde odağı izlemek ve kontrol etmek, erişilebilirlik için tasarımda önemli bir husustur. Angular yönlendirme kullanırken, navigasyon sonrasında sayfa odağının nereye gideceğine karar vermelisiniz.

Yalnızca görsel ipuçlarına güvenmeyi önlemek için, yönlendirme kodunuzun sayfa navigasyonundan sonra odağı güncellemesini sağlamalısınız. Odağı ne zaman güncelleyeceğinizi bilmek için Router servisinden NavigationEnd olayını kullanın.

Aşağıdaki örnek, navigasyondan sonra DOM'daki ana içerik başlığının nasıl bulunacağını ve odaklanacağını göstermektedir.

router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe(() => {
  const mainHeader = document.querySelector('#main-content-header');
  if (mainHeader) {
    mainHeader.focus();
  }
});

Gerçek bir uygulamada, odak alan eleman, uygulamanızın belirli yapısına ve düzenlenmesine bağlıdır. Odaklanan eleman, kullanıcıları hemen görüntülenen ana içeriğe geçebilecekleri bir konuma yerleştirmelidir. Rota değişikliğinden sonra odağın body elemanına dönmesi durumundan kaçınmalısınız.

Aktif bağlantıların tanımlanması

Aktif RouterLink elemanlarına uygulanan CSS sınıfları, örneğin RouterLinkActive, aktif bağlantının kimliğini belirlemek için görsel bir ipucu sağlar. Ne yazık ki, görsel bir ipucu gör veya görme engelli kullanıcılar için yardımcı olmaz. aria-current özelliğini elemana uygulamak aktif bağlantının kimliğini belirlemeye yardımcı olabilir. Daha fazla bilgi için Mozilla Developer Network (MDN) aria-current) sayfasına bakın.

RouterLinkActive direktifi, bağlantı aktif olduğunda aria-current'i belirli bir değere ayarlayan ariaCurrentWhenActive girdisini sağlar.

Aşağıdaki örnek, aktif bağlantılara active-page sınıfının nasıl uygulanacağını ve aktif olduklarında aria-current özelliğinin "page" olarak nasıl ayarlanacağını göstermektedir:

<nav>
  <a routerLink="home" routerLinkActive="active-page" ariaCurrentWhenActive="page"> Home </a>
  <a routerLink="about" routerLinkActive="active-page" ariaCurrentWhenActive="page"> About </a>
  <a routerLink="shop" routerLinkActive="active-page" ariaCurrentWhenActive="page"> Shop </a>
</nav>

Ertelenmiş Yükleme

Angular'ın tembel yükleme içeriği için @defer bloklarını kullanırken, yardımcı teknolojilere sahip kullanıcılar için erişilebilirlik sonuçlarını dikkate alın. Ertelenmiş bileşenler yüklendiğinde ekran okuyucuları içerik değişikliklerini otomatik olarak duyurmayabilir, bu da kullanıcıların yeni içerikten habersiz kalmasına neden olabilir.

Ertelenmiş içerik değişikliklerinin düzgün şekilde duyurulmasını sağlamak için @defer bloklarınızı uygun ARIA canlı bölgeleri içeren elemanlarla sarın. Ayrıntılı rehberlik ve örnekler için defer kılavuzundaki erişilebilirlik bölümüne bakın.

Daha fazla bilgi

• Accessibility - Google Web Fundamentals
• ARIA specification and authoring practices
• Material Design - Accessibility
• Smashing Magazine
• Inclusive Components
• Accessibility Resources and Code Examples
• W3C - Web Accessibility Initiative
• Rob Dodson A11ycasts
• Angular ESLint, kodunuzun erişilebilirlik standartlarını karşıladığından emin olmanıza yardımcı olabilecek linting kuralları sağlar.

Kitaplar

• "A Web for Everyone: Designing Accessible User Experiences," Sarah Horton and Whitney Quesenbery
• "Inclusive Design Patterns," Heydon Pickering