Przejdź do treści
Monitor podłączony do laptopa, pokazujący kod. Zdjęcie nawiązuje do tematu szkolenia z dostępności cyfrowej.Zdjęcie Safar Safarov pochodzące z Unsplash

Witajcie, kochani czytelnicy! Dziś chcę poruszyć temat, który być może nie jest codziennie omawiany, ale ma ogromne znaczenie dla wielu użytkowników – mowa o alternatywnym tekście w systemie iOS. Zastanawiasz się, co to takiego i dlaczego powinieneś się tym zainteresować? Zapraszam do lektury!

Czym jest alternatywny tekst?

Alternatywny tekst, nazywany także „alt text”, to krótki opis obrazów, ikon czy innych elementów wizualnych na stronach internetowych lub w aplikacjach. Dzięki niemu osoby korzystające z czytników ekranu, takich jak VoiceOver na iOS, mogą zrozumieć, co przedstawia dany obrazek.

Dlaczego jest ważny?

Wyobraź sobie, że przeglądasz stronę lub aplikację, a obrazki są dla ciebie niewidoczne. Byłoby frustrujące, prawda? Dla osób niewidomych lub niedowidzących to codzienność. Alternatywny tekst pozwala im na pełne korzystanie z treści cyfrowych, tak jak to robią osoby widzące.

Jak dodać alternatywny tekst na iOS?

Twórcy aplikacji  mogą łatwo dodawać opisy za pomocą narzędzi dostępnych w systemie iOS:

Kiedy tworzysz aplikację w Swift, dodawanie opisu alternatywnego jest naprawdę proste. Przyjrzyjmy się krótkiemu przykładowi:

let logoKinaole = UIImageView(image: UIImage(named: "kinaoleLogo.jpg"))
logoKinaole.isAccessibilityElement = true 
logoKinaole.accessibilityLabel = "Kinaole logo"

W tym kodzie mamy:

  1. Tworzenie obiektu UIImageView: Ładujemy obrazek „kinaoleLogo.jpg” do widoku obrazka.
  2. Ustawienie isAccessibilityElement na true: Informujemy system iOS, że ten obiekt jest elementem dostępności i powinien być brany pod uwagę przez funkcje takie jak VoiceOver.
  3. Ustawienie accessibilityLabel: Tu dodajemy nasz opis alternatywny. Kiedy osoba korzystająca z VoiceOver dotknie tego obrazka, usłyszy „Kinaole logo”.

A jak wygląda to to po stronie React

import React from 'react';
import { Image } from 'react-native';

const App = () => {
  return (
    <Image
      source={require('./kinaoleLogo.jpg')}
      accessible={true}
      accessibilityLabel="Kinaole logo"
      style={{ width: 200, height: 200 }}
    />
  );
}

export default App;
  1. Tworzenie komponentu Image: Ładujemy obrazek „kinaoleLogo.jpg” i możemy ustawić jego rozmiar.
  2. Ustawienie accessible na true: Dzięki temu informujemy system, że ten obrazek jest elementem dostępności.
  3. Ustawienie accessibilityLabel: Dodajemy nasz opis alternatywny. Kiedy użytkownik korzystający z funkcji czytnika ekranu (jak VoiceOver na iOS lub TalkBack na Android) dotknie tego obrazka, usłyszy „Kinaole logo”.

I to wszystko! Tak prosto możemy uczynić naszą aplikację bardziej przyjazną dla wszystkich użytkowników. Pamiętajcie, że dbając o dostępność, tworzymy aplikacje i treści, które są naprawdę dla każdego. ❤️

Mam nadzieję, że ten krótki przewodnik był pomocny. Jeżeli macie dalsze pytania czy chcecie zobaczyć więcej przykładów, dajcie znać w komentarzach! Miłego kodowania!