Erişilebilirlik

Niçin Erişilebilirlik?

(a11y) olarak da anılan web erişilebilirliği, herkes tarafından kullanılabilir web sitelerinin tasarımı ve oluşturulmasıdır. Erişilebilirlik desteği, yardımcı teknolojinin web sayfalarını yorumlamasına izin vermek için gereklidir.

React, sıklıkla standart HTML tekniklerini kullanarak, tamamen erişilebilir web siteleri oluşturmayı destekler.

Standartlar ve Yönergeler

WCAG

Web İçeriği Erişilebilirlik Yönergeleri, erişilebilir web siteleri oluşturmak için yönergeler sağlar.

Aşağıdaki WCAG kontrol listeleri genel bir bakış sağlar:

WAI-ARIA

Web Erişilebilirlik Girişimi - Erişilebilir Zengin İnternet Uygulamaları belgesi, tamamen erişilebilir JavaScript widgetleri oluşturmak için teknikler içerir.

Tüm aria- * HTML özelliklerinin, JSX’te tam olarak desteklendiğini unutmayın. React’teki çoğu DOM özellikleri ve nitelikleri camelCased iken, bu nitelikler düz HTML’de olduğu gibi hyphen-cased şeklinde olmalıdır (kebab-case, lisp-case, ve benzeri olarak da bilinir):

<input
  type="text"
  aria-label={labelText}  aria-required="true"  onChange={onchangeHandler}
  value={inputValue}
  name="name"
/>

Anlamsal HTML

Anlamsal HTML, bir web uygulamasında erişilebilirliğin temelidir. Web sitelerimizdeki bilginin anlamını pekiştirmek için, çeşitli HTML öğelerini kullanmak sıklıkla bize ücretsiz olarak erişilebilirlik sağlayacaktır.

MDN HTML öğeleri referansı

Bazen, React kodumuzun çalışması için JSX’imize <div> öğeleri eklediğimizde, HTML’in anlamsallığını bozarız, özellikle listeler (<ol>, <ul> ve <dl>), ve HTML <table> ile çalışırken. Bu durumlarda, çoklu öğeleri gruplamak için React Fragmentleri kullanmayı tercih etmelisiniz.

Örneğin,

import React, { Fragment } from 'react';
function ListItem({ item }) {
  return (
    <Fragment>      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    </Fragment>  );
}

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        <ListItem item={item} key={item.id} />
      ))}
    </dl>
  );
}

Başka herhangi bir öğe türünde yapacağınız gibi, bir öğe koleksiyonunu bir fragment dizisine (array’ine) eşleyebilirsiniz :

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (// Kolleksiyonları eşleştirirken, fragmentler de bir `anahtar` prop'a sahip olmalıdır. 
        <Fragment key={item.id}>
          <dt>{item.term}</dt>          <dd>{item.description}</dd>
        </Fragment>
      ))}    </dl>
  );
}

Fragment etiketinde herhangi bir prop’a ihtiyacınız olmadığında, eğer araç gereçleriniz onu destekliyorsa kısa sözdizimi(syntax)‘ni kullanabilirsiniz:

function ListItem({ item }) {
  return (
    <>      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    </>  );
}

Daha fazla bilgi için, Fragmentler dokümantasyonu‘na bakınız.

Erişilebilir Formlar

Etiketlemek

<input> ve <textarea> gibi her HTML form kontrolunun (form control), erişilebilir halde etiketlenmiş olması gerekir. Ekran okuyucuları tarafndan da ortaya çıkan, açıklayıcı etiketler sağlamamız gerekir.

Aşağıdaki kaynaklar bize bunun nasıl yapılacağını gösterir:

Bu standart HTML uygulamaları doğrudan React’te kullanılabilmesine rağmen, for niteliğinin JSX’de htmlFor olarak yazıldığına dikkat edin:

<label htmlFor="namedInput">Name:</label><input id="namedInput" type="text" name="name"/>

Kullanıcı hatalarını bildirmek

Hata durumlarının tüm kullanıcılar tarafından anlaşılmış olması gerekir. Aşağıdaki link, hata metinlerinin de ekran okuyucuları tarafından nasıl algılandığını gösterir:

Odak Kontrolü

Web uygulamanızın yalnızca klavye ile tam olarak çalıştırılabildiğinden emin olun:

WebAIM, klavye erişilebilirliği hakkında konuşur

Klavye odağı ve odak ana hatları

Klavye odağı, klavyeden girişi kabul etmek için seçilen DOM’daki varolan öğeye başvurur. Bunu her yerde aşağıdaki resimde gösterilene benzer bir odak anahat olarak görürüz: