
Opis alternatywny grafik w technologiach iOS Swift i React
- Przejdź do artykułów z tagiem accessibility
- Przejdź do artykułów z tagiem akademiaWCAG
- Przejdź do artykułów z tagiem iOS
- Przejdź do artykułów z tagiem mobile
- Przejdź do artykułów z tagiem react
Treść artykułu
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:
- Tworzenie obiektu UIImageView: Ładujemy obrazek „kinaoleLogo.jpg” do widoku obrazka.
- Ustawienie
isAccessibilityElement
natrue
: Informujemy system iOS, że ten obiekt jest elementem dostępności i powinien być brany pod uwagę przez funkcje takie jak VoiceOver. - 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;
- Tworzenie komponentu Image: Ładujemy obrazek „kinaoleLogo.jpg” i możemy ustawić jego rozmiar.
- Ustawienie
accessible
natrue
: Dzięki temu informujemy system, że ten obrazek jest elementem dostępności. - 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!

Piotr Źrołka
Accessibility expert & CEO
Polecane artykuły
-
15.02.2024Nie tylko dizajn
Okiem niewidomego. Wyruszam w nieznane, czyli orientacja w przestrzeni jako osoba niewidoma
Dzisiaj chciałabym opowiedzieć nieco o kwestii orientacji w przestrzeni. Od razu też nadmienię, że moja perspektywa może w tym zakresie…
-
21.09.2023Dostępność cyfrowa
Okiem niewidomego. Ugotować coś, czy upiec ciasto?
Przygotowywanie posiłków to jedna z tych rzeczy, które są stałym elementem każdego dnia. Dzisiaj chciałabym więc opisać, co ułatwia mi…
-
18.09.2023Dostępność cyfrowa
Przegląd funkcji dostępności w iOS. Część 1: Widzenie
W poprzednich artykułach wspominałam o różnych funkcjach dostępności, które użytkownicy mogą dostosowywać do swoich potrzeb. I choć wiele z nich…