MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

To tłumaczenie jest niekompletne. Pomóż przetłumaczyć ten artykuł z języka angielskiego.

Czym jest ARIA?

WAI-ARIA z angielskiego Accessible Rich Internet Applications (ARIA) dokumentacja stworzona przez Web Accessibility Initiative (WAI) z inicjatywy W3C. ARIA dostarcza sposób aby tworzyć aplikacje internetowe, lepiej dostępne dla osób zmagającymi się z różnorakimi problemami, włącznie z tymi, którzy muszą korzystać z dodatkowych narzędzi, które umożliwiają im użytkowanie stron internetowych takich jak: czytniki ekranowe czy szkła powiększające.

ARIA dostarcza semantykę opisującą role (eng. roles), statusy (eng. states) oraz funkcjonalności dla wielu komponentów stron internetowych takich jak: nawigacje (menu), slajdery, okna dialogowe czy drzewa rozwijane (częściej występujące w aplikacjach desktopowych). Dostarcza również informacje strukturalne, które pomagają twórcom identyfikować odpowiednie komponenty. ARIA pozwala dynamicznym aplikacjom internetowym opartym o JavaScript na interpolację z technologiami pochodzenia desktopowego.

Po więcej informacji na temat ARIA, przejdź do: Overview of accessible web applications and widgets. (TBD Polish translation).

Wsparcie dla ARIA

ARIA jest relatywnie młodą specyfikacją ale jest coraz lepiej wspierana. Posiada wsparcie głównych przeglądarek, technologii wspomagających, narzędzi JavaScript oraz aplikacji. Jednakże część użytkowników może wciąż używać starszych wersji tych narzędzi czy aplikacji. W takim przypadku możesz rozważyć implementację ARIA ulepszając swoją aplikację progresywnie, na przykład przy użyciu JavaScript, zamiast znaczników HTML w celu lepszego wsparcia dla użytkowników wciąż kożystających ze starych technologii.

Przeglądarki

ARIA posiada wsparcie następujacych przeglądarek:

Nazwa Wersja minimum Informacja dodatkowa
Firefox 3.0+ Działa z NVDA, JAWS 10+ i Orca
Chrome 15+ Czytniki ekranowe mogą mieć problem z Chrome 15 i starszymi
Safari 4+ Działa z VoiceOver od iOS5 oraz OS X Lion
Opera 9.5+ Wymaga VoiceOver na OS X w początkowych wersjach
Internet Explorer 8+ Działa z JAWS 10+ i NVDA.

W niektórych przypadkach, we wczesnych wersjach przeglądarek, wsparcie ARIA może być ograniczone, po bardziej dokładne informacje udaj się na:

Technologie wspomagające

Technologie wspomagające coraz częściej wspierają ARIA. Między innymi:

Nazwa Technologii Wersja minimum, podstawowe wsparcie ARIA Wersja minimum dla live region i alert support
NVDA 2010.2
(NVDA is always a free upgrade)
2011.1 dla Firefox, brak wsparcia live region dla IE z dniem 2011.2.
Orca ? (TBD) ? (TBD)
VoiceOver OSX 10.5,
iOS 4
OS X 10.7
iOS 5
JAWS 8 10
Window-Eyes 7 ? (TBD)
ZoomText ? ? (TBD)

Wczesne wersje tych narzędzi często mają częściową implementację ARIA lub zawierającą błędy.

Na temat wsparcia JAWS dla ARIA, przeczytaj artykuł Paciello Group: JAWS Support for ARIA.

Narzędzia JavaScript

Role (roles), statusy (states), właściwości (properties) zostały dodane do wielu popularnych narzędzi JavaScript do tworzenia komponentów webowych, między innymi:

  • Dojo/Dijit
  • jQuery UI
  • Fluid Infusion
  • Google Closure
  • Google Web Toolkit
  • BBC Glow
  • Yahoo! User Interface Library (YUI)

Po więcej informacji na temat dostępności ARIA w narzędziach JavaScript, przeczytaj:

ARIA w akcji

Przykład atrybutu ARIA dla paska postępu:

<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" />

Ten pasek postępu jest zbudowany z <div> z atrybutami ARIA określającymi role i właściwości. W tym przykładzie role="progressbar" daje informację przeglądarce, że działanie paska postępu jest sterowane w JavaScript. Atrybuty aria-valuemin oraz aria-valuemax określają minimalną i maksymalną wartość dla paska postępu, a aria-valuenow opisuje aktualny jego status.

Atrybuty ARIA umieszczone wewnątrz tagu HTML mogą być dodawane i aktualizowane w JavaScript, kod poniżej:

// Szukam elementu <div> w DOM.
var progressBar = document.getElementById("percent-loaded");

// Ustawiam role i statusy ARIA, aby technologie pomocnicze miały informację na temat komponentu.
progressBar.setAttribute("role", "progressbar");
progressBar.setAttribute("aria-valuemin", 0);
progressBar.setAttribute("aria-valuemax", 100);

// Tworzę funkcję aktualizującą pasek postępu,
// którą następnie wywołam w odpowiednim miejscu aby zaktualizować pasek postępu
function updateProgress(percentComplete) {
  progressBar.setAttribute("aria-valuenow", percentComplete);
}

Czy ARIA zmieni styl mojej strony lub działanie?

Nie. ARIA jest przeznaczona tylko dla API technologi pomocniczych (assistive technologies), nie ma wpływu na DOM czy style. ARIA jest tylko dodatawanym do elementu HTML przez developera atrybutem, który ma wspomóc AT API (assistive technologi API). Mimo, że sama ARIA nie zmienia stylów to w połączeniu z atrybutem HTML, możemy odpowiednio stylować elementy ARIA w CSS:

.tab-panel[aria-hidden="true"] {
  display: none;
  }
  
.tab-panel[aria-hidden="false"] {
  display: block;
  }

Co z walidacją?

Nowe atrybuty ARIA, jak role czy prefiks aria- nie są oficjalnie częścią specyfikacji HTML 4 czy XHTML 4. Przez co mogą nie przechodzić walidacji W3C: W3C's Markup Validator.

Jednym z rozwiązań tego problemu jest umieszczenie roli i statusów ARIA przy pomocy JavaScript jak zostało pokazane w powyższym przykładzie ARIA w akcji. Strona teoretycznie będzie niezgodna ze standardem ale przejdzie walidację.

Problem rozwiązuje się w HTML5, który zawiera wbudowane wsparcie dla ARIA. Walidator W3C's HTML5 znajdzie nawet nieprawidłowe użycie ARIA na stronie HTML5.

Co w związku z HTML5 i ARIA?

HTML5 przedstawia wiele nowych tagów. Kilka z nich dotyczy bezpośrednio roli ARIA, jak na przykład nowy element <progress>. W przypadkach gdy przeglądarka wspiera tag HTML5 to również dotyczy ARIA, w takich przypadkach zazwyczaj nie ma potrzeby dodawania ról i statusów do elementu. ARIA zawiera jednak wiele ról, statusów i właściwości, które nie są dostępne w HTML5. W takim przypadku developer HTML5 może z nich korzystać. Po więcej informacji można się udać do artykułu Steve'a Faulkner'a o relacji HTML5 i ARIA.

Łagodne zejście z HTML5 do ARIA

Przy tworzeniu aplikacji kompatybilnej HTML5 możesz zastosować w swoim kodzie łagodne zejście do ARIA w przypadku braku wsparcia dla przeglądarku. Używając przykładu z paskiem postępu, zastosować łagodne zejście, gdy tag <progressbar> nie jest wspierany.

Przykład markupu HTML5 dla paska postępu:

<!DOCTYPE html>
<html>
  <head><title>Gracefully degrading progress bar</title></head>
  <body>
    <progress id="progress-bar" value="0" max="100">0% complete</progress>
    <button id="update-button">Update</button>
 </body>
</html>

... i kod JavaScript zapewniający wsparcie dla starszych przeglądarek:

var progressBar = document.getElementById("progress-bar");
      
// Sprawdza wsparcie tagu <progress> dla przeglądarki.
var supportsHTML5Progress = (typeof (HTMLProgressElement) !== "undefined");

function setupProgress() {
  if (!supportsHTML5Progress) {
    // HTML5 <progress> nie jest wspierany więc dodaje.
    // ARIA role i statusy do elementu.
    progressBar.setAttribute("role", "progressbar");
    progressBar.setAttribute("aria-valuemin", 0);
    progressBar.setAttribute("aria-valuemax", 100);
  }
}

function updateProgress(percentComplete) {
  if (!supportsHTML5Progress) {
    // HTML5 <progress> nie jest wspierany przez przeglądarkę, 
    // więc musimy zaktualizować aria-valuenow atrybut
    progressBar.setAttribute("aria-valuenow", percentComplete);
  } else {
    // HTML5 <progress> jest wspierany, więc aktualizujemy atrybut value.
    progressBar.setAttribute("value", percentComplete);
  }

  progressBar.textContent = percentComplete + "% complete";
}

function initDemo() {
  setupProgress(); // Instalacja paska postępu.     

  // Dodajemy click handler do przycisku, który zaktualizuje pasek postępu do 75%.
  document.getElementById("update-button").addEventListener("click", function (e) {
    updateProgress(75);
    e.preventDefault();
  }, false);
}
initDemo();

Jak działają technologie pomocnicze (assistive technologies)?

Technologie pomocnicze używają używają API wbudowane w każdy system operacyjny, zaprojektowane tak aby opisywać role, statusy oraz strukturę interfejsu użytkownika. Na przykład: czytnik ekranu używa API do czytania interfejsu użytkownika przy pomocy silnika text-to-speech (tekst do mowy), a szkło powiększające używa go do uwyraźnienia  ważnych elementów na ekranie,  klawiatura ekranowa może używać API aby dostosować się do aktualnego kontekstu lub interfejsu. Technologie pomocnicze często korzystają z DOM przez API, aby najlepiej zrozumieć semantykę i atrybuty na stronie.

ARIA jest mostem pomiędzy DOM a desktopem. Przeglądarki wskazują elementy ARIA do API technologii pomocniczych aby wyglądały jak komponenty natywne. W rezultacie użytkownik dostaje bardziej zwarty UX, gdzie komponenty JavaScript można porównywać do odpowiedników desktopowych.

Jak można przetestować ARIA? Są do tego darmowe narzędzia?

Istnieją narzędzia do sprawdzania i debugowania ARIA:

Są również darmowe open source'owe czytniki ekranu, które mogą być użyte do testowania ARIA:

Kiedy testujesz ARIA pamiętaj:

  1. Nieformalne testowanie przy pomocy czytników ekranu, nigdy nie zastąpi informacji zwrotnej, testowania i pomocy prawdziwych użytkowników
  2. Czytniki ekranu to nie wszystko. Spróbuj testować przy pomocy różnych metod użyczyteczności i dostępności.

Inne pomocne narzędzia i techniki testowania ARIA:

Gdzie można pogadać i dopytać o ARIA?

Gdzie się więcej dowiem o ARIA?

Autorzy i etykiety dokumentu

Etykiety: 
 Autorzy tej strony: konradluka
 Ostatnia aktualizacja: konradluka,