Podręcznik

1. Front-end - wprowadzenie

Istotnym elementem aplikacji internetowej jest jej interfejs użytkownika, gdyż to z nim użytkownik bezpośrednio wchodzi w interakcję. Tym samym interfejs ten jest postrzegany i oceniany w pierwszej kolejności subiektywnie, na podstawie szeregu zaznanych wrażeń, obserwacji, itp. Przekłada to się na pewien wachlarz cech aplikacji, które łączą się w dość szerokie pojęcie określane z języka angielskiego jako tzw. User eXperience (UX). Na ten składa się zarówno warstwa artystyczna w postaci projektu graficznego interfejsu użytkownika, jak i jego cechy szczegółowe wynikające bezpośrednio ze sposobu jego oprogramowania. 

Niniejsza część podręcznika stawia sobie za cel przeprowadzenia Czytelnika przez najważniejsze (zdaniem autora) zagadnienia techniczne związane z projektowaniem interfejsu użytkownika aplikacji internetowej, odsyłając do źródeł po rozwinięcie i szczegóły omawianych tutaj zagadnień. Na warstwie artystycznej nie będziemy się specjalnie skupiać, za to weźmiemy na warsztat różnego rodzaju technikalia, próbując odpowiedzieć na następujące pytania:

1. W jaki sposób poprawnie ustrukturyzować treść prezentowaną na stronie internetowej?
2. W jaki sposób można wpływać na wygląd tych treści?
   
3. W jaki sposób wykorzystać multimedia?
   
4. Do czego potrzebuję JavaScriptu na front-endzie?
5. Jak sprawić, aby aplikacja była poprawnie wyświetlana na urządzeniach różnego typu? Słów kilka o Responsive Web Design.
   
6. Jak sprawić, aby aplikacja spełniała wymagania w zakresie dostępności cyfrowej?
   
7. Jakie narzędzia pomocnicze oferuje współczesna przeglądarka internetowa?

2. HTML5 - język opisu struktury

Terminem HTML5 (ang. HyperText Markup Language) określa się aktualną wersję języka znaczników HTML, który jest obecnie podstawowym standardem używanym do tworzenia i strukturalizacji treści na stronach i w aplikacjach internetowych. Jest to rozwinięcie wcześniejszych wersji HTML, które wprowadza nowe funkcje i elementy. Zakłada się przy tym, że specyfikacja tego standardu podlega i będzie podlegać sukcesywnym zmianom, dlatego pod pojęciem HTML5 rozumiemy tzw. żywy standard, który ciągle ewoluuje. Aktualną specyfikację języka HTML5 znajdziesz na stronie HTML Living Standard.

Zakładam, że Czytelnik niniejszego podręcznik ma już opanowane podstawy języka HTML, zatem w tym rozdziale skupię się wyłącznie na tych elementach składni, które są nowe i niezbędne dla zapewnienia właściwej struktury dokumentu na potrzeby implementacji responsywności aplikacji oraz zapewnienia dostępności cyfrowej, bądź też oferują ciekawe możliwości:

• znaczniki semantyczne,
• wsparcie dla multimediów,
• formularze i nowe typy pól wejściowych,
• obsługa grafiki i animacji.

2.1. Podstawowa struktura dokumentu HTML5

Podstawowa struktura dokumentu zapisanego w języku HTML5 wygląda następująco:

Powyższy plik można pobrać tutaj.

Dobrym pomysłem na rozpoczęcie nowego projektu może być także skorzystanie z gotowego szablonu "HTML5 Boilerplate" definiującego strukturę dokumentu HTML5 oraz podstawowe style CSS. W ramach tego projektu dostępna jest także wyczerpująca dokumentacja opisująca poszczególne pliki i ich zawartość.

2.2. Wybrane znaczniki semantyczne

Język HTML5 wprowadza nowe znaczniki semantyczne, które lepiej definiują strukturę strony internetowej. Dzięki nim kod jest bardziej czytelny zarówno dla programistów, jak i dla przeglądarek oraz narzędzi wspomagających (np. czytników ekranowych).

Element <header>

Może pełnić rolę nagłówka strony lub sekcji. Liczba tych elementów nie jest ograniczona, np. każdy element <section> może posiadać swój nagłówek. Więcej przeczytasz tutaj.

Element <footer>

Może pełnić rolę stopki strony lub sekcji. Liczba tych elementów nie jest ograniczona, np. każdy element <section> może posiadać swoją stopkę. Więcej przeczytasz tutaj.

Elementy <article>

Element <section>

<article>
    <header>
        <h2>Jak używać HTML5?</h2>
        <p>Autor: Jan Kowalski</p>
    </header>
    <section>
        <h3>Wprowadzenie</h3>
        <p>HTML5 to nowoczesny standard tworzenia stron internetowych...</p>
    </section>
    <section>
        <h3>Nowe funkcje HTML5</h3>
        <p>HTML5 wprowadza takie elementy, jak <article>, <section>...</p>
    </section>
    <footer>
        <p>Opublikowano 1 stycznia 2024</p>
    </footer>
</article>

Element <nav>

Element <aside>

• jako pasek boczny strony,
• jako przypis lub notatka wewnątrz sekcji,
• dla reklamy lub treści promocyjnych.

Element <main>

2.3. Formularze

Język HTML5 wprowadza nowe atrybuty i typy pól formularzy, które ułatwiają tworzenie bardziej funkcjonalnych formularzy bez potrzeby stosowania JavaScript.

Adres email

<input <span class="" style="color: rgb(0, 61, 245);">type="email"</span> id="email" name="email" />

Pole wyszukiwania

<input type="search" id="search" name="search" />

Numer telefonu

<input type="tel" id="tel" name="tel" />

Adres URL

<input type="url" id="url" name="url" />

Pole numeryczne

<pre><code><input type="number" name="change" id="pennies" min="0" max="1" step="0.01" />

Suwak

<pre><code><input type="range" name="change" id="pennies" min="0" max="1" step="0.01" />

Kolor

<input type="color" name="color" id="color" />

Wybór daty

<input type="datetime-local" name="datetime" id="datetime" />

• czas - type="time",
• dzień tygodnia - type="week",
• miesiąc - type="month",

<label for="myDate">Kiedy chcesz jechać na urlop w nadchodzące wakacje?</label><br />
<input
  type="date"
  name="myDate"
  min="2025-06-01"
  max="2025-08-31"
  step="7"
  id="myDate" />

2.4. Element Canvas

• width - definiujący szerokość obiektu wyrażoną w pikselach,
• height - definiujący wysokość obiektu wyrażoną w pikselach.

<canvas id="myCanvas" width="500" height="300" style="border:1px solid #000;"></canvas>

<script>
    // Pobierz element <canvas>
    const canvas = document.getElementById('myCanvas');
    
    // Uzyskaj kontekst 2D
    const ctx = canvas.getContext('2d');
    
    // Rysuj prostokąt
    ctx.fillStyle = 'blue'; // Ustaw kolor wypełnienia
    ctx.fillRect(50, 50, 200, 100); // Rysuj prostokąt (x, y, szerokość, wysokość)
</script>

Gdzie się plasuje Canvas względem innych technik rysowania w przeglądarkach internetowych?

• SVG: SVG to wektorowy sposób rysowania grafiki. Każdy kształt ma obiekt, do którego można dołączyć obsługę zdarzeń. Przy powiększeniu krawędzie kształtu pozostają gładkie, podczas gdy Canvas stałby się pikselowany.
• CSS: CSS to tak naprawdę stylizacja elementów DOM (ang. Document Object Model). Ponieważ nie ma obiektów DOM dla rzeczy rysowanych w Canvas, nie można użyć CSS do ich stylizacji. CSS wpłynie tylko na prostokątny obszar samego Canvas, więc możesz ustawić obramowanie i kolor tła, ale to wszystko.
• Animacja DOM: DOM definiuje obiekty dla wszystkiego na ekranie. Animacja DOM, za pomocą CSS lub JavaScript do przesuwania obiektów, może być w niektórych przypadkach płynniejsza niż w przypadku Canvas, ale zależy to od implementacji przeglądarki.

Do czego w praktyce mogę zastosować Canvas?

Canvas a dostępność cyfrowa

Literatura

3. CSS3 - język opisu wyglądu

Język CSS3 (ang. Cascading Style Sheets Level 3) to język arkuszy stylów, który służy do opisywania wyglądu i formatowania elementów na stronie internetowej w języku HTML. CSS3 pełni kluczową rolę w oddzieleniu warstwy prezentacyjnej (wyglądu) od warstwy strukturalnej (treści) strony, co pozwala na łatwiejsze zarządzanie i większą elastyczność w projektowaniu stron internetowych.

3.1. Podstawowe selektory

Selektory w języku CSS3 to mechanizmy służące do określania, które elementy HTML mają zostać sformatowane za pomocą reguł CSS. Są kluczowym elementem CSS, ponieważ pozwalają wybrać elementy na stronie i zastosować do nich określone style (np. kolory, marginesy, rozmiar czcionki).

W CSS3 wprowadzono kilka nowych selektorów, które rozszerzają możliwości stylizowania elementów HTML w jeszcze bardziej precyzyjny i złożony sposób.

Podstawowe selektory

Selektor uniwersalny ( * )

• Pasuje do wszystkich elementów na stronie.
• Jest użyteczny, gdy chcesz zastosować styl do całej strony lub do wszystkich elementów.

* {
    margin: 0;
    padding: 0;
}

Selektor typu (np. h1, p)

h1 {
    color: blue;
    font-size: 24px;
}

Selektor klasy (.classname)

<div class="box">
    To jest ramka
</div>
<div class="box">
    To też jest ramka
</div>

.box {
    border: 2px solid black;
    padding: 10px;
}

Selektor identyfikatora (#id)

<div id="main">
    To jest główny element
</div>

#main {
    background-color: yellow;
    padding: 20px;
}

Grupowanie selektorów (np. h1, p)

h1, p {
    color: green;
}

3.2. Selekcja oparta na relacji

Selektor potomków (spacja)

• Wybiera wszystkie elementy potomne danego elementu.

div p {
    color: red;
}

Selektor bezpośredniego potomka ( > )

div > p {
    color: blue;
}

h1 + p {
    font-size: 18px;
}

h1 ~ p {
    color: gray;
}

3.3. Pseudoklasy

Pseudoklasy dynamiczne

• Stylizują elementy w zależności od interakcji użytkownika:
  • :hover – styl dla elementu, gdy użytkownik najeżdża na niego myszką,
  • :focus – styl dla elementu, który ma fokus (np. aktywne pole formularza),
  • :active – styl dla elementu w momencie klikania.

button:hover {
    background-color: lightblue;
}

Pseudoklasy strukturalne

• Pozwalają stylizować elementy na podstawie ich pozycji w dokumencie:
  • :first-child – styl dla pierwszego dziecka w danym rodzicu,
  • :last-child – styl dla ostatniego dziecka w danym rodzicu,
  • :nth-child( n ) – styl dla dziecka na określonej pozycji,
  • :nth-last-child( n ) - jak wyżej, ale pozycja jest wyliczana od ostatniego elementu, a nie od pierwszego.

li:nth-child(odd) {
    background-color: #f0f0f0;
}

3.4. Pseudoelementy

Pseudoelementy ::before i ::after

• Dodają treść przed lub po zawartości elementu.

p::before {
    content: ">> ";
    color: red;
}

Pseudoelement ::selection

• Stylizuje część zawartości elementu, która jest zaznaczona przez użytkownika.

p::selection {
  color: blue;
  background: gray;
}

Pseudoelement ::first-letter

• Stylizuje pierwszą literę zawartości elementu.

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

Lektura uzupełniająca: W3Schools / CSS Pseudo-elements

3.5. Selektory atrybutów

CSS3 umożliwia wybieranie elementów do stylizowania na podstawie ich atrybutów. Poniżej zamieszczono kilka przykładowych selektorów.

Selektor [attr]

input[type] {
    border: 1px solid blue;
}

Selektor [attr="value"]

• Wybiera elementy o określonej wartości atrybutu.

input[type="text"] {
    background-color: yellow;
}

Selektor [attr^="value"]

a[href^="https://"] {
    color: green;
}

Selektor [attr$="value"]

• Wybiera elementy, których wartość atrybutu kończy się określonym ciągiem.

a[href$=".pdf"] {
    text-decoration: underline;
}

Lektura uzupełniająca: W3Schools / CSS Attribute Selectors.

3.6. Filtry

Filtry w CSS3 są narzędziem pozwalającym na stosowanie efektów graficznych do elementów HTML (np. obrazów, tekstu czy innych elementów). Filtry mogą zmieniać wygląd elementów poprzez modyfikację ich kolorów, ostrości, kontrastu, jasności i innych właściwości wizualnych.

Filtry są dostępne dzięki właściwości CSS filter i mogą być stosowane zarówno do elementów rastrowych (np. obrazów), jak i wektorowych (np. elementów SVG), a także innych elementów HTML.

Ogólna składnia wygląda następująco:

selektor {
    filter: efekt1(wartość) efekt2(wartość) ...;
}

Dostępne filtry

4. Multimedia w aplikacji internetowej

Pod pojęciem multimedia kryje się sposób prezentacji treści, który łączy różne formy przekazu, takie jak tekst, dźwięk, obraz, animacje, wideo oraz interakcje. Dzięki temu użytkownik może doświadczać treści w sposób bardziej atrakcyjny i zrozumiały.

Najpopularniejsze elementy multimediów:

1. Tekst - podstawowy nośnik informacji, zwykle używany w połączeniu z innymi mediami.
2. Grafika - obrazy statyczne, takie jak zdjęcia, rysunki czy wykresy.
3. Dźwięk - nagrania dźwiękowe, muzyka lub narracja.
4. Wideo - materiały w formie krótszych lub dłuższych filmów, zazwyczaj z towarzyszącą ścieżką dźwiękową.
5. Animacja - ruchome obrazy, które pomagają wizualizować procesy lub dodawać dynamiki treści.
6. Interaktywność - elementy umożliwiające użytkownikowi interakcję z treścią.

4.1. Osadzanie filmów i nagrań audio

W języku HTML5 można łatwo umieścić odtwarzacz plików wideo lub audio na stronie za pomocą elementu <video>. Znacznik ten umożliwia odtwarzanie plików multimedialnych bez potrzeby stosowania dodatkowych wtyczek, takich jak Flash Player (co było powszechną praktyką przed laty). Możesz również dodać kontrolki, napisy (subtitles), i obsługiwać różne formaty plików.

<video controls autoplay loop muted poster="miniatura.jpg" width="640" height="360">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Twoja przeglądarka nie obsługuje wideo HTML5.
</video>

<video controls width="640" height="360">
    <source src="video.mp4" type="video/mp4">
    <track src="napisy.vtt" kind="subtitles" srclang="pl" label="Polski">
    <track src="napisy_en.vtt" kind="subtitles" srclang="en" label="English">
    Twoja przeglądarka nie obsługuje wideo HTML5.
</video>

<audio controls>
    <source src="muzyka.mp3" type="audio/mpeg">
    Twoja przeglądarka nie obsługuje dźwięku HTML5.
</audio>

4.2. Formaty plików graficznych

Wybór odpowiedniego formatu pliku graficznego do wykorzystania w nowoczesnej aplikacji internetowej zależy od rodzaju wyświetlanych obrazów (np. fotografie, schematy, zrzuty ekranu) oraz wymagań dotyczących jakości, wydajności i kompatybilności z przeglądarkami. W niniejszym artykule zebrano najpopularniejsze formaty graficzne oraz rekomendacje dotyczące ich zastosowań.

5. Język JavaScript

JavaScript to jeden z najpopularniejszych języków programowania wykorzystywanych w aplikacjach internetowych. Jest to język skryptowy, który może być uruchamiany tak po stronie front-endu (czyli przez przeglądarkę internetową za pomocą wbudowanego w nią interpretera), jak i po stronie back-endu (czyli na serwerze, w środowisku takim jak np. Node.js). JavaScript pozwala na tworzenie dynamicznych, interaktywnych i responsywnych elementów stron internetowych. W praktyce oznacza to, że JavaScript umożliwia użytkownikom wykonywanie różnych akcji na stronie internetowej bez konieczności jej przeładowania. Wśród przykładowych zastosowań można wskazać:

1. Animacje i efekty wizualne - tworzenie animowanych przejść, karuzel zdjęć, efektów przewijania,
2. Obsługa formularzy i interakcji z użytkownikiem - walidacja danych, dynamiczne dodawanie pól formularza,
3. Tworzenie dynamicznych treści - pobieranie danych z serwera bez przeładowania strony (AJAX, Fetch API),
4. Gry w przeglądarce - silniki do renderowania gier, w tym 3D, np. przy użyciu WebGL.

• Frameworki: Angular, Vue.js,
• Biblioteki: React, jQuery, D3.js, Three.js.

5.1. Biblioteka jQuery

jQuery to popularna biblioteka JavaScript, która została stworzona w 2006 roku przez Johna Resiga. Jego celem jest uproszczenie pracy z językiem JavaScript, w szczególności manipulacji DOM, obsługi zdarzeń, animacji i wykonywania żądań AJAX. jQuery był jednym z najczęściej używanych narzędzi w tworzeniu dynamicznych aplikacji internetowych, w szczególności przed pojawieniem się bardziej zaawansowanych frameworków, takich jak React, Vue.js czy Angular. 

Wraz z rozwojem nowoczesnego JavaScript (ES6+), jQuery jest używane coraz rzadziej. Wynika to ze stopniowego zanikania problemów, które jQuery z sukcesem rozwiązywało w momencie tworzenia:

• niejednolite wsparcie dla poszczególnych elementów składni JavaScript, HTML i CSS w różnych przeglądarkach - jQuery zapewniało programiście uporządkowany interfejs, a biblioteka zajmowała się obsługą różnic pomiędzy przeglądarkami,
• nowoczesny język JavaScript posiada funkcjonalności niegdyś dostępne dopiero z użyciem jQuery.

5.2. React

React to popularna biblioteka JavaScript stworzona przez Facebook (obecnie Meta) w 2013 roku. Jest przeznaczona do budowania interfejsów użytkownika, w szczególności w aplikacjach jednostronicowych (ang. Single Page Applications, SPA). React pozwala budować dynamiczne i interaktywne interfejsy użytkownika na bazie komponenty, które mogą być zaprojektowane samodzielnie lub pochodzić z szerokiej bazy rozszerzeń.

React używa deklaratywnego stylu programowania, co oznacza, że deweloperzy opisują, jak interfejs użytkownika ma wyglądać, a React sam zarządza aktualizacjami w przeglądarce, minimalizując bezpośrednią manipulację DOM.

Jak zacząć?

1. Using React in Visual Studio Code
   
   • Edytor Visual Studio Code jest współcześnie zalecany jako podstawowe narzędzie deweloperskie. 
   • Niniejszy tutorial pokazuje, w jaki sposób zacząć korzystać ze środowiska VSC na przykładzie prostego projektu startowego create-react-app.
   • Pamiętaj, że na samym początku potrzebujesz mieć zainstalowane środowisko NodeJS oraz menedżer pakietów npm w najnowszych stabilnych wersjach. 
   • Czytelnik tutoriala prowadzony jest kolejno przez:
     • utworzenie nowego projektu,
     • podstawowe operacje w edytorze VSC,
     • skonfigurowanie debuggera oraz lintera.
   • Tyle na dobry początek. Następnie wypadałoby zacząć zgłębiać tajniki samego Reacta...
2. Tutorial: Tic-Tac-Toe
   
   • Ten tutorial prowadzi Czytelnika przez proces stopniowego budowania prostej gry typu "kółko i krzyżyk" działającej wyłącznie po stronie klienta.
   • W kolejnych krokach wprowadzany jest deklaratywny sposób opisu komponentów, elementy składni JSX, zarządzanie stanem itd.
   • Choć opisane w tutorialu kroki można ćwiczyć w dostępnym na stronie działającym online sandboksie, gorąco zachęcam Ciebie do pobrania sobie początkowych plików projektu i stopniowe rozwijanie go w lokalnie skonfigurowanym środowisku.
   • Pamiętaj, aby nie przeklejać (Ctrl+C / Ctrl+V) fragmentów kodu z tutoriala, ale samodzielnie wpisywać go w edytorze - to ułatwia zapamiętanie.
3. Thinking in React
   
   • Kolejny tutorial prowadzi do zbudowania złożonego interfejsu użytkownika aplikacji webowej i jest trampoliną do realizacji własnych projektów w kolejnych krokach.
     

Popularne rozszerzenia do Reacta

• React Router
  Umożliwia dodanie routingu do aplikacji React.
  
  
• Redux
  Biblioteka do zarządzania stanem aplikacji.
  
  
• React Query
  Obsługa zapytań do API i zarządzanie danymi asynchronicznymi.
  
  
• Formik
  Ułatwia obsługę i walidację formularzy.
  
  
• React Testing Library
  Narzędzie do testowania komponentów React.
  

6. Responsive Web Design

Responsywny projekt stron internetowych (ang. Responsive Web Design, RWD), to podejście do projektowania stron i aplikacji internetowych, które zakłada automatyczne dostosowywanie ich wyglądu i układu treści do parametrów ekranów różnych urządzeń, na których aplikacja będzie prezentowana. Głównym celem RWD jest zapewnienie użytkownikom optymalnego doświadczenia – wygodnego przeglądania i łatwej nawigacji, niezależnie od tego, czy korzystają z komputera, tabletu, czy smartfona.

Zalety Responsive Web Design:

1. Jedna wersja strony dla wszystkich urządzeń: strona przygotowana zgodnie z RWD dostosowuje się automatycznie do różnych ekranów, co eliminuje konieczność tworzenia osobnych wersji np. mobilnej i desktopowej.

2. Optymalizacja kosztów i łatwiejsze utrzymanie: zarządzanie jedną stroną responsywną jest łatwiejsze i bardziej opłacalne niż obsługa wielu wersji.

3. Lepsze doświadczenie użytkownika (UX): responsywne strony są czytelne i łatwe w nawigacji na każdym urządzeniu. Przy poprawnym projekcie nie ma potrzeby przewijania w poziomie czy powiększania zawartości na małych ekranach.

4. Lepsza widoczność w wyszukiwarkach (SEO): Google preferuje responsywne strony, co wpływa na ich wyższą pozycję w wynikach wyszukiwania.

5. Przyszłościowe podejście: strony responsywne są gotowe na różne urządzenia, nawet te, które jeszcze nie istnieją (np. nowe typy ekranów).

6.1. Stopniowe ulepszanie strony

Koncepcja stopniowego ulepszania strony (ang. Progressive Enhancement) dotyczy projektowania i tworzenia stron internetowych w sposób, który zapewnia ich podstawową funkcjonalność i dostępność dla wszystkich użytkowników, niezależnie od wykorzystywanego urządzenia czy przeglądarki, z jednoczesnym rozbudowywaniem interfejsu użytkownika i udostępnianiem bardziej zaawansowanych funkcji dla nowoczesnych przeglądarek i urządzeń.

Stopniowe ulepszanie często jest praktykowane w połączeniu z Responsive Web Design (RWD). Okazuje się, że zdecydowanie łatwiej jest zapewnić responsywność interfejsu użytkownika przy takim sposobie myślenia i projektowania UI, niż przy podejściu odwrotnym, czyli takim, w którym  najpierw projektuje się interfejs zawierający wszystkie funkcjonalności a następnie próbuje się go upraszczać w celu dostosowania do możliwości prostszych urządzeń.

Praktyczny przykład budowy fragmentu prostego interfejsu aplikacji zgodnie z koncepcją stopniowego ulepszania

1. Stwórz solidny fundament w języku HTML

<nav>
    <ul>
        <li><a href="#home">Strona główna</a></li>
        <li><a href="#about">O nas</a></li>
        <li><a href="#contact">Kontakt</a></li>
    </ul>
</nav>

nav ul {
    list-style: none;
    display: flex;
    gap: 10px;
}

nav ul li a {
    text-decoration: none;
    color: #007bff;
}

@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
    }
}

document.querySelector('.menu-toggle').addEventListener('click', function() {
    document.querySelector('nav ul').classList.toggle('show');
});

if ('IntersectionObserver' in window) {
    // Dodaj zaawansowaną funkcjonalność np. lazy loading obrazków
    console.log('IntersectionObserver jest obsługiwany');
} else {
    console.log('Brak wsparcia dla IntersectionObserver');
}

7. Dostępność cyfrowa

7.1. Zalecenia WCAG

WCAG (ang. Web Content Accessibility Guidelines) to zbiór międzynarodowych zaleceń opracowanych przez organizację W3C (World Wide Web Consortium), które mają na celu zwiększenie dostępności stron i aplikacji internetowych dla jak najszerszego grona użytkowników, w tym osób z niepełnosprawnościami. WCAG wskazuje, jak projektować i budować treści cyfrowe, aby były bardziej dostępne i przyjazne dla osób z różnymi ograniczeniami, takimi jak:

• niepełnosprawność wzrokowa (np. osoby niewidome lub słabowidzące),
• niepełnosprawność słuchowa,
• trudności w poruszaniu się (np. osoby korzystające z urządzeń wspomagających),
• trudności poznawcze (np. dysleksja, zaburzenia koncentracji),
• osoby starsze, które mogą mieć ograniczone zdolności sensoryczne lub motoryczne,
• osoby korzystające z nietypowych urządzeń (np. telefonów, czytników ekranowych).

7.2. Kluczowe zasady WCAG - "POUR"

Zalecenia WCAG opierają się na czterech głównych zasadach, które można łatwiej zapamiętać korzystając z akronimu POUR:

1. Postrzegalność (ang. Perceivable):
   Zasada postrzegalności oznacza, że wszystkie informacje i komponenty interfejsu muszą być przedstawione w sposób, który użytkownik może odebrać za pomocą swoich zmysłów, takich jak wzrok, słuch lub dotyk. Treści muszą być dostępne dla różnych grup użytkowników, niezależnie od ich ograniczeń sensorycznych.
   Przykłady:
   • zapewnienie tekstów alternatywnych (atrybut alt dla elementu <img>) dla wszystkich treści multimedialnych (obrazy, wideo, itp.), aby osoby niewidome mogły je odczytać za pomocą czytników ekranowych,
     

     <img src="przyklad.jpg" alt="Zdjęcie Mostu Północnego o zachodzie słońca">

   • udostępnienie napisów (transkrypcji) do treści audio i wideo dla osób niesłyszących i niedosłyszących,
   • używanie odpowiednio wysokiego kontrastu między tekstem a tłem (min. 4.5:1 dla zwykłego tekstu i 3:1 dla dużych czcionek), aby treści były czytelne dla osób słabowidzących,
   • treści powinny być skalowalne, np. umożliwiać użytkownikom powiększanie tekstu (do 200%) bez utraty funkcjonalności lub czytelności.
     
     
2. Funkcjonalność (ang. Operable):
   Strona lub aplikacja powinna być łatwa w nawigacji i obsłudze, niezależnie od sposobu interakcji użytkownika (mysz, klawiatura, urządzenia wspomagające).
   Przykłady:
   • strony muszą być w pełni dostępne dla użytkowników korzystających wyłącznie z klawiatury (np. osoby z ograniczeniami ruchowymi, które nie używają myszy),
   • strona powinna mieć logiczną i intuicyjną strukturę nawigacyjną, np. menu, spis treści, widoczne linki "przejdź do treści" (skip to content), które pozwalają szybko dotrzeć do głównej części strony,
     
   • zapewnienie wystarczającego czasu na przeczytanie i zrozumienie treści, a także na interakcję (np. brak automatycznego zamykania ważnych informacji, możliwość przedłużenia czasu wypełniania formularza itp.),
   • unikanie elementów wywołujących epilepsję, takich jak migoczące światła lub animacje.
     
     
3. Zrozumiałość (ang. Understandable):
   Zasada jest taka, jak się wydaje - użytkownicy końcowi muszą być w stanie zrozumieć zawartość strony internetowej niezależnie od ich umiejętności poznawczych, językowych czy technicznych..
   Przykłady:
   • treści powinny być napisane prostym i zrozumiałym językiem, dostosowanym do docelowych użytkowników; w razie potrzeby należy unikać żargonu lub wyjaśniać trudne pojęcia,
   • zapewnienie instrukcji dotyczących obsługi formularzy (np. w przypadku błędu walidacji formularza wskazać, którego pola dotyczy błąd i jaka jest jego przyczyna),
   • treść strony powinna być oznaczona odpowiednim atrybutem języka (np. lang="pl", lang="en"), co pozwala czytnikom ekranowym poprawnie odczytywać teksty.
     
     
4. Solidność (ang. Robust):
   Treści powinny być kompatybilne z różnymi technologiami, w tym z obecnymi i przyszłymi narzędziami wspomagającymi (np. czytnikami ekranowymi).
   Przykłady:
   • kod HTML powinien być zgodny ze standardami W3C, aby technologie wspomagające, takie jak czytniki ekranowe, mogły poprawnie interpretować strukturę strony; przykładowo należy korzystać z semantycznych znaczników HTML5, takich jak <header>, <main>, <footer>,  zamiast generować strukturę strony wyłącznie za pomocą znaczników <div>,
   • elementy interaktywne (np. przyciski, linki, formularze) powinny być dostępne dla użytkowników korzystających z technologii wspomagających, takich jak czytniki ekranowe, lupy ekranowe czy przełączniki,
     
   • należy unikać implementacji niestandardowych zachowań elementów interfejsu, takich jak przyciski, linki czy pola formularzy - one powinny działać zgodnie z ich naturalnym przeznaczeniem.
     

7.3. Jak uzyskać zgodność?

Co oznacza zgodność?

Zgodność ze standardem oznacza, że spełniasz „wymagania” standardu. W WCAG 2 „wymagania” są kryteriami sukcesu. Aby zachować zgodność z WCAG 2, musisz spełnić kryteria sukcesu, to znaczy, że nie mogą istnieć treści, które nie spełniają któregoś z kryteriów sukcesu. Oznacza to, że jeśli nie ma treści, do której odnosi się dane kryterium sukcesu, jest spełnione z automatu.

Zdefiniowanych jest pięć wymagań, które omówione zostaną poniżej wraz z towarzyszącymi im niektórymi pojęciami na kolejnych stronach.

Wymaganie nr 1 (poziomy zgodności)

Pierwsze wymaganie dotyczy poziomów zgodności. Zasadniczo mówi, że wszystkie informacje na stronie są zgodne lub posiadają zgodną wersję alternatywną, która jest dostępna ze strony. Wymaganie wyjaśnia również, że żadna zgodność nie jest możliwa bez spełnienia przynajmniej wszystkich kryteriów sukcesu poziomu A.

Poziomy zgodności

WCAG2 definiuje trzy poziomy zgodności, a więc i trzy poziomy kryteriów sukcesu:

• Poziom A:  strona internetowa spełnia wszystkie kryteria sukcesu poziomu A lub zapewniona jest zgodna wersja alternatywna,
• Poziom AA: strona internetowa spełnia wszystkie kryteria sukcesu poziomu A i poziomu AA lub zapewniona jest wersja alternatywna zgodna z poziomem AA,
• Poziom AAA:  strona internetowa spełnia wszystkie kryteria sukcesu poziomu A, poziomu AA i poziomu AAA lub zapewniona jest wersja alternatywna zgodna z poziomem AAA.
  

Poziom AAA stawia najwyższe wymagania. Nie zaleca się, aby zgodność z poziomem AAA była wymagana jako ogólna polityka dla całych witryn, ponieważ nie jest możliwe spełnienie wszystkich kryteriów sukcesu poziomu AAA dla niektórych treści.

Więcej szczegółów: WCAG 2.2 Understanding Docs / Understanding Requirement 1

Wymaganie nr 2 (zgodność dla całych witryn)

Zgodność (i poziom zgodności) dotyczy tylko pełnych stron internetowych i nie może zostać osiągnięta, jeśli część strony internetowej jest z niej wyłączona.

• Do celów określenia zgodności, alternatywy dla części treści strony są uważane za część strony, gdy do wersji alternatywnych można uzyskać dostęp bezpośrednio ze strony, np. długi opis ilustracji lub alternatywna opis materiału wideo.
• Autorzy stron internetowych, które nie mogą być zgodne z wymaganiami ze względu na zawartość pozostającą poza kontrolą autora, mogą rozważyć złożenie "Oświadczenia o częściowej zgodności".
• Pełna witryna obejmuje każdą odmianę strony, która jest automatycznie prezentowana dla różnych rozmiarów ekranu (np. odmiany na responsywnej stronie internetowej). Każda z tych odmian musi być zgodna (lub musi mieć zgodną wersję alternatywną), aby cała strona mogła zostać uznana za zgodną.

Niniejsza reguła wymaga po prostu, aby cała witryna była zgodna. Tym samym nie można stosować oświadczeń o "zgodności części strony". Istnieją jednak pewne wyjątki od tej reguły.

Czasami informacje uzupełniające mogą być dostępne na innej stronie. Przykładem jest atrybut longdesc w języku HTML. Dzięki longdesc długi opis grafiki może znajdować się na osobnej stronie, do której użytkownik może przejść ze strony z grafiką. Wyjaśnia to, że taka zawartość jest uważana za część witryny internetowej, więc wymaganie nr 2 jest spełnione dla połączonego zestawu stron internetowych traktowanych jako pojedyncza witryna internetowa. Alternatywy mogą być również udostępniane na tej samej stronie, na przykład tworząc odpowiednik interfejsu użytkownika.

Ze względu na wymaganie zgodności nr 5, cała witryna może być uznana za zgodną, nawet jeśli jej części wykorzystują technologie nieobsługujące dostępności, o ile nie kolidują one z resztą strony, a wszystkie informacje i funkcje są dostępne w innym miejscu na stronie lub z jej poziomu.

Możliwe jest dołączenie treści niezgodnych - zobacz objaśnienie do wymagania nr 5.

Wymaganie nr 3 (cały proces)

Gdy strona internetowa jest jedną z serii stron internetowych przedstawiających jakąś procedurę (tj. sekwencję kroków, które należy wykonać w celu wykonania danej czynności), wszystkie strony internetowe prezentujące etapy procedury są zgodne na określonym poziomie lub lepszym. (Innymi słowy, zgodność nie zostanie osiągnięta na danym poziomie, jeśli którakolwiek ze stron prezentujących etap procedury nie jest zgodna na tym samym poziomie lub lepszym).

Przykład: Sklep internetowy ma serię stron, które służą do wyboru i zakupu produktów. Wszystkie strony w procedurze zakupowej od początku (przeglądanie oferty, wrzucanie produktów do koszyka, itp.) do końca (kasa, płatność) muszą być zgodne, aby każda strona, która jest częścią tej procedury, mogła być uznana za zgodną.

Przepis ten uniemożliwia uznanie za zgodną strony internetowej, która jest częścią większej procedury, jeśli cała procedura nie jest zgodna. Uniemożliwia to sklasyfikowanie sklepu internetowego jako zgodnego z wymaganiami dostępności, jeśli np. kasa lub jakaś inna funkcjonalność witryny będąca częścią procedury zakupowej nie jest zgodna.

Wymaganie nr 4 (technologie obsługujące dostępność)

Aby spełnić kryteria sukcesu, należy polegać wyłącznie na obsługujących dostępność sposobach korzystania z technologii. Wszystkie informacje lub funkcje, które są zapewnione w sposób nieobsługujący dostępności, muszą być również zapewnione w sposób obsługujący dostępność.

Wiele z kryteriów sukcesu dotyczy zapewnienia dostępności za pomocą technologii wspomagających lub specjalnych funkcji dostępności w popularnych programach wykorzystywanych przez użytkownika (na przykład opcja „pokaż napisy” w odtwarzaczu multimedialnym). Oznacza to, że kryteria sukcesu wymagają, aby treści internetowe zostały przygotowane w taki sposób, który umożliwiłby technologiom wspomagającym pomyślne przedstawienie użytkownikowi zawartych w nich informacji. Na przykład obrazek, który należy kliknąć, aby przejść do danej podstrony, nie będzie dostępny dla osoby niewidomej, chyba że tekst alternatywny dla obrazka zostanie dostarczony w sposób umożliwiający programom użytkownika, w tym technologiom wspomagającym, ich znalezienie i wyświetlenie albo np. przeczytanie za pomocą syntezatora mowy. Kluczem jest tutaj to, że tekst alternatywny musi być dołączony w sposób, który programy użytkownika, w tym technologie wspomagające, mogą zrozumieć i wykorzystać - w sposób, który jest „Obsługiwany przez dostępność”.

Innym przykładem może być niestandardowa kontrolka umieszczona na stronie internetowej. W takim przypadku standardowy program użytkownika zwykle nie byłby w stanie przedstawić użytkownikowi alternatywy. Jeśli jednak informacje o kontrolce, w tym jej nazwa, rola, wartość, sposób jej ustawienia itp. są dostarczane w sposób, w jaki technologie wspomagające mogą je zrozumieć i kontrolować, wówczas użytkownicy z technologiami wspomagającymi będą mogli korzystać z tych kontrolek.

Gdy wprowadzane są nowe technologie, muszą wydarzyć się dwie rzeczy, aby osoby korzystające z technologii wspomagających mogły uzyskać do nich dostęp. Po pierwsze, technologie muszą być zaprojektowane w taki sposób, aby programy użytkownika, w tym technologie wspomagające, mogły uzyskać dostęp do wszystkich informacji potrzebnych do zaprezentowania treści użytkownikowi. Po drugie, programy użytkownika i technologie wspomagające mogą wymagać przeprojektowania lub modyfikacji, aby móc faktycznie pracować z tymi nowymi technologiami.

„Obsługiwanie dostępności” oznacza, że obie te czynności zostały wykonane, a technologia będzie współpracować z agentami użytkownika i technologiami wspomagającymi.

Więcej na ten temat przeczytasz tutaj: WCAG 2.2 Understanding Docs / Understanding Accessibility Support

Wymaganie nr 5 (bez zakłóceń)

Jeśli zastosowane na stronie technologie są użyte w sposób, który nie obsługuje dostępności lub jeśli są używane w sposób niezgodny z kryteriami sukcesu, wówczas nie blokują one użytkownikom możliwości dostępu do pozostałej części strony. Ponadto strona internetowa jako całość nadal spełnia wymagania zgodności jeśli spełniony jest każdy z poniższych warunków:

• gdy jakakolwiek technologia, na której nie można polegać, jest włączona w programie użytkownika,
• gdy jakakolwiek technologia, na której nie można polegać, jest wyłączona w programie użytkownika, oraz
• gdy jakakolwiek technologia, na której nie można polegać, nie jest obsługiwana przez program użytkownika.

Więcej na ten temat przeczytasz tutaj: WCAG 2.2 Understanding Docs / Understanding Requirement 5

7.4. Zgodna wersja alternatywna

Wymaganie zgodności nr 1 zezwala na zadeklarowanie zgodności dla niezgodnych stron, o ile mają one „zgodną wersję alternatywną”. Definiuje się ją jako wersję, która:

1. jest zgodna na danym poziomie, oraz
2. zapewnia wszystkie te same informacje i funkcje w tym samym ludzkim języku, oraz
3. jest tak samo aktualna jak treść niezgodna, oraz
4. dla której co najmniej jeden z poniższych warunków jest prawdziwy:
   • do wersji zgodnej można dotrzeć z wersji niezgodnej za pomocą mechanizmu obsługującego dostępność, lub
   • do wersji niezgodnej można dotrzeć tylko z wersji zgodnej, lub
   • do wersji niezgodnej można dotrzeć tylko ze strony zgodnej, która zapewnia również mechanizm umożliwiający dotarcie do wersji zgodnej.
     

W tej definicji „można dotrzeć tylko” oznacza, że zapewniony został pewien mechanizm, jak np. warunkowe przekierowanie, który uchroni użytkownika przed "dotarciem do" (załadowaniem) niezgodnej wersji, chyba że użytkownik właśnie przeszedł z wersji zgodnej.

Zgodna wersja alternatywna nie musi być identyczna, co do ilości stron z wersją podstawową (np. może się składać z kilku stron).

Jeśli dostępnych jest wiele wersji językowych, dla każdego oferowanego języka wymagane są zgodne wersje alternatywne.

Wersje alternatywne mogą być zapewniane w celu dostosowania do różnych środowisk technologicznych lub grup użytkowników. Każda wersja powinna być zgodna w jak najwyższym stopniu. Przynajmniej jedna wersja musi być w pełni zgodna, aby spełnić wymaganie zgodności nr 1.

Zgodna wersja alternatywna nie musi znajdować się w zakresie zgodności, ani nawet na tej samej stronie internetowej, o ile jest równie łatwo dostępna jak wersja niezgodna.

Wersji alternatywnych nie należy mylić z treściami uzupełniającymi, które wspierają oryginalną stronę i poprawiają jej zrozumienie.

Ustawienie w preferencjach użytkownika, które pozwala na dotarcie do zgodnej wersji alternatywnej, jest akceptowalnym mechanizmem dotarcia do innej wersji, o ile mechanizm ustawień obsługuje dostępność.

Więcej o tym, dlaczego WCAG zezwala na wersje alternatywne witryn, a także o technikach zapewniania zgodnej wersji alternatywnej, przeczytasz tutaj: WCAG 2.2 Understanding Docs / Understanding Conforming Alternate Versions

7.5. Poziom wsparcia technologii wspomagających

Pojawia się więc pytanie, ile lub które technologie wspomagające muszą obsługiwać technologię internetową, aby ta technologia internetowa została uznana za „obsługującą dostępność”. Grupa Robocza WCAG i W3C nie określają, które lub ile technologii wspomagających musi obsługiwać technologię internetową, aby można je było sklasyfikować jako obsługujące dostępność. Jest to złożony problem, który różni się zarówno w zależności od środowiska, jak i języka. Istnieje potrzeba zewnętrznego i międzynarodowego dialogu na ten temat. Oto kilka uwag, które pomogą w zrozumieniu i zgłębieniu tego tematu:

1. Wsparcie dostępności technologii internetowych różni się w zależności od środowiska.
   • Technologie internetowe mogą być obsługiwane tylko przez konkretne programy użytkownika i technologie wspomagające wdrożone w firmie (mogą to być starsze programów użytkownika i technologii wspomagających lub ich najnowsze wersje).
   • Treści publikowane w publicznej sieci Internet mogą wymagać współpracy z szerszym zbiorem programów użytkownika i technologii wspomagających, w tym ze starszymi wersjami.
     
2. Obsługa dostępności przez technologie internetowe różni się w zależności od języka (i dialektu).
   • Istnieją różne poziomy wsparcia starszych technologii wspomagających w różnych językach, a nawet krajach. Niektóre środowiska lub kraje mogą zapewniać bezpłatne technologie wspomagające.
     
3. Nowe technologie nie będą obsługiwane w starszych technologiach wspomagających.
   • Oczywiście nowa technologia nie może być obsługiwana przez wszystkie dotychczasowe technologie wspomagające, w związku z tym wymaganie, aby dana technologia była obsługiwana przez wszystkie technologie wspomagające, nie jest możliwe do spełnienia.
     
4. Wsparcie dla jednej starszej technologii wspomagającej zwykle nie jest wystarczające.
   • Obsługa tylko jednej technologii wspomagającej (dla danej niepełnosprawności) zwykle nie byłaby wystarczająca, zwłaszcza jeśli większość użytkowników, którzy potrzebują jej w celu uzyskania dostępu do treści, nie posiada takiej technologii wspomagającej i nie może sobie na nią pozwolić. Wyjątkiem są tutaj np. informacje rozpowszechniane tylko wśród pracowników firmy, gdzie wszyscy mają jedną technologię wspomagającą (tego typu).
     
5. Obecnie technologie wspomagające, które są dostępne dla ogółu społeczeństwa, są często niskiej jakości.
   • Należy unikać tworzenia treści, które nie mogą być używane przez ogół społeczeństwa z niepełnosprawnościami. W wielu przypadkach koszt technologii wspomagających jest zbyt wysoki dla użytkowników, którzy ich potrzebują. Ponadto możliwości bezpłatnych lub niedrogich technologii wspomagających są dziś często tak niewielkie, że treści internetowych nie można realistycznie ograniczyć do tego najniższego (lub nawet średniego) wspólnego mianownika. Stwarza to bardzo trudny dylemat, który należy rozwiązać.

Więcej na ten temat przeczytasz tutaj: WCAG 2.2 Understanding Docs / Understanding Accessibility Support

7.6. Kryteria sukcesu

Zestawienie kryteriów sukcesu wraz z ich wyjaśnieniami znajdziesz na stronie How to Meet WCAG (Quick Reference). W szczególności można wybrać wersję zaleceń WCAG:

• WCAG 2.0, 
  • wersja polskojęzyczna,
    
• WCAG 2.1,
  
  • wersja polskojęzyczna,
    
• WCAG 2.2, 
  • wersja polskojęzyczna,
    
• kryteria sukcesu dodane w WCAG 2.1,
  
  • wersja polskojęzyczna,
    
• kryteria sukcesu dodane w WCAG 2.2, 
  • wersja polskojęzyczna.
    

7.7. Atrybuty WAI-ARIA

• role opisujące typ prezentowanego widżetu, takie jak „menu”, „treeitem”, „slider” i „progressbar”,
• role opisujące strukturę strony internetowej, takie jak nagłówki i regiony,
• właściwości opisujące bieżący stan widżetów, takie jak „zaznaczone” dla pola wyboru lub „tylko do odczytu” dla typowych kontrolek formularzy,
• właściwości definiujące aktywne regiony strony, których zawartość podlegać może aktualizacji w trakcie wyświetlania (np. bieżące notowania giełdowe),
• sposób na zapewnienie nawigacji za pomocą klawiatury dla elementów stron internetowych, takich jak te wymienione powyżej.

• wzorce, czyli przykłady zastosowań zaleceń WAI-ARIA do typowych elementów, z których buduje się strony internetowe (przyciski, odnośniki, menu, slidery, itp.)
  • https://www.w3.org/WAI/ARIA/apg/patterns/
• oznaczenia ról poszczególnych obszarów interfejsu aplikacji, np. nagłówek, stopka, treść główna, treść dodatkowa, nawigacja, podział na sekcje
  • https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/
    
• zapewnienie dostępnych nazw i opisów elementów interfejsów aplikacji
  
  • https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/
    
•  zasady i metody tworzenia funkcjonalności strony internetowej, takie jak menu i siatki, a także interaktywne komponenty, takie jak paski narzędzi i okna dialogowe, obsługiwane za pomocą klawiatury
  • https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/
    
• zasady opisu siatek i tabel za pomocą atrybutów ARIA
  
  • https://www.w3.org/WAI/ARIA/apg/practices/grid-and-table-properties/
    
• zasady opisu kontrolek służących do komunikowania wartości numerycznych (np. paski postępu, slidery, scroll-bary, wskaźniki numeryczne itp.)
  
  • https://www.w3.org/WAI/ARIA/apg/practices/range-related-properties/
    
• role strukturalne
  • https://www.w3.org/WAI/ARIA/apg/practices/structural-roles/
    
• ukrywanie semantyki za pomocą roli "prezentacja"
  
  • https://www.w3.org/WAI/ARIA/apg/practices/hiding-semantics/
    

7.8. Walidatory

Dostępność cyfrową strony można zweryfikować korzystając z dedykowanych ku temu narzędzi. Należy pamiętać, że wskazane niżej programy do sprawdzenia WCAG 2.1 nie mogą być jedyną formą testu - zgodnie z Ustawą niezbędne jest jeszcze sprawdzenie dostępności w sposób „ręczny”.

Przykładowe narzędzia służące do walidacji aplikacji internetowych pod kątem spełniania wymagań dotyczących dostępności cyfrowej:

7.9. Przykładowe wdrożenia

Prezentacja Demo Przed i Po jest wielostronicowym zasobem zawierającym niedostępną witrynę internetową i poprawioną wersję tej samej witryny. Każda strona internetowa zawiera adnotacje śródliniowe, które można uaktywnić, aby wyróżnić niektóre najważniejsze bariery dostępności lub poprawki. Do każdej strony internetowej dołączony jest raport oceniający, który informuje projektantów stron o zgodności z wytycznymi WCAG.

Prezentacja jest dostępna na stronie Pracowni Dostępności Cyfrowej LepszyWeb.pl.

Z kolei na stronie Smultron Web Development można zapoznać się z artykułem opisującym szczegóły techniczne wdrożenia WCAG 2.1 na przykładzie projektu uczelniadostepna.pl.