Accessibility: Domyślne zachowanie przeglądarki

Czego się nauczysz

Poznaj najczęstsze błędy dostępności

Naucz się rozwiązywać niecodzienne przypadki

Poznasz nowe źródła oraz dokumenty z których czerpać wiedzę

Unikalne przykłady

Zrozumiesz czym są i jak działają czytniki ekranowe

Nauczysz się nawigacji klawiaturą i uczyń krok ku zostaniu power-userem!

Poznasz przydatne narzędzia do udzielania audytów dostępności

Accessibility - Dostępność stron WWW

Nawet najbardziej estetyczna, nowoczesna strona czy aplikacja internetowa jest bezużyteczna, gdy użytkownik nie może z niej skorzystać w wygodny sposób. Na twórcy stron WWW ciąży duża odpowiedzialność - powinien tworzyć strony, które są nie tylko atrakcyjne wizualnie, ale też dostępne i użyteczne dla wszystkich. Niestety, wielu developerów zapomina o tym aspekcie lub nie posiada odpowiedniej wiedzy, potrzebnej do tego, by tworzyć strony dostępne dla użytkownika. Znajomość zagadnień z tego Kursu pomoże Ci tworzyć lepsze, zoptymalizowane dla wszystkich użytkowników strony, zadbać o user experience, jak i poznać nowoczesne, praktyczne rozwiązania, które wykorzystasz w codziennej pracy.

Przede wszystkim dostępność

HTML został wynaleziony już w 1989 roku i jest on podstawą tworzenia stron internetowych do dziś. W ciągu ponad 30 lat społeczność programistów tworzących strony internetowe odkrywała coraz to nowe problemy w tworzeniu treści pod unikalne medium jakim jest internet. Jednak na przełomie dekad społeczność zdaje się zapominać o pierwotnych założeniach sieci - treści dostępnych dla każdego. W czasach gdy nowe JavaScriptowe frameworki stawiają... developer experience ponad user experience, paradoksalnie - jest coraz mniej stron internetowych, które są szybkie oraz dostępne dla szerokiej grupy odbiorców.

Strony dostępne dla każdego

Dostępność w tym kontekście to tworzenie rozwiązań, z których korzystać może każdy - niezależnie od tego czy zapomniał słuchawek, niedowidzi, zepsuła mu się myszka czy mówi w innym języku. To także troska o użytkownika bez względu na jego potencjalne ograniczenia. Przekłada się to bezpośrednio na ilość osób, które mogą skorzystać z Twojej strony WWW. To właśnie przedstawimy Ci w tym kursie - poznasz techniki tworzenia stron internetowych, które z założenia dbają o użytkownika i pozostawiają kontrolę w jego rękach. Dowiesz się też jaki ma to wpływ dla biznesu czy Ciebie - jako użytkownika sieci.

Korzyści dla warstwy biznesowej

Troska o użytkownika to dobry User Experience - co z kolei tworzy przywiązanie do produktu. Ale mniej oczywistymi aspektami dostępności jest wpływ na pozycjonowanie stron internetowych. Poprzez korzystanie z semantycznych znaczników i jawne wyrażanie treści poprzez markup możemy - jako przyjemny efekt uboczny - wpłynąć na silniki wyszukiwarek internetowych, by pojawiać się w wynikach wyżej niż dotychczas.

Poznasz najczęstsze błędy dostępności

Niestety, łatwo jest tworzyć strony niedostępne - głównie ze względu na niewiedzę. W kursie zrozumiesz najczęściej popełniane błędy dostępności, przez które Twoje treści mogą nie docierać do Twoich potencjalnych użytkowników, oraz dowiesz się jak tworzyć te same rozwiązania w sposób dostępny.

Poszerzaj horyzonty

Jesteś znudzony tym, co oferuje Front-End? Każdy framework brzmi jak koło wynajdywane na nowo? Wątek dostępności to zupełnie nowy poziom postrzegania produktu i pracy na rzecz użytkownika. Ilość potencjalnych przypadków do rozwiązania, jeśli chodzi o formę konsumpcji treści przez użytkownika, jest ogromna - możesz ponownie rozpalić swoje zainteresowanie web developmentem!

Dla kogo jest ten kurs?

Aby móc efektywnie skorzystać z tego kursu, potrzebujesz podstawowej wiedzy na temat HTML i CSS. Przyda się również znajomość języka angielskiego, ale nie jest to obowiązkowe, pojedyncze zwroty są tłumaczone na bieżąco.

Kod

Kod na poczatek lekcji · 1 min

:root {
    --black: #181C25;
    --black-lighter: rgb(46, 52, 66);
    --black-darker: rgb(17, 19, 26);
    --orange: orange;
    --green: rgb(54, 138, 54);
    --yellow: yellow;
    --blue: aqua;
    --purple: rebeccapurple;
    --white: white;
}

body {
    font-family: 'Helvetica', 'Arial', sans-serif;
    width: 80vw;
    margin: 0 auto;
    min-height: 100vh;
    background: var(--black);
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 1rem;
    line-height: 1.4rem;
}

img {
    max-width: 100%;
}

.cover {
    background-color: rgba(255, 0, 0, 0.637);
    width: 100%;
}

.cta {
    border: none;
    font-size: 2rem;
    padding: 1rem;
    cursor: pointer;
    align-self: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}

.game {
    position: relative;
}

.game:hover .cta {
    display: flex;
}

Kod pod koniec lekcji · 6 min

:root {
    --black: #181C25;
    --black-lighter: rgb(46, 52, 66);
    --black-darker: rgb(17, 19, 26);
    --orange: orange;
    --green: rgb(54, 138, 54);
    --yellow: yellow;
    --blue: aqua;
    --purple: rebeccapurple;
    --white: white;
   }
   
   body {
    font-family: 'Helvetica', 'Arial', sans-serif;
    width: 80vw;
    margin: 0 auto;
    min-height: 100vh;
    background: var(--black);
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 1rem;
    line-height: 1.4rem;
   }
   
   img {
    max-width: 100%;
   }
   
   .cover {
    background-color: rgba(255, 0, 0, 0.637);
    width: 100%;
   }
   
   .cta {
    border: none;
    font-size: 2rem;
    padding: 1rem;
    cursor: pointer;
    align-self: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    display: flex;
   }
   
   .game {
    position: relative;
   }
   
   .game:hover .cta {
    opacity: 1;
   }

Autor kursu

Wojciech Połowniak

Średnia ocen autora: 4,5

Bio

Cześć! Nazywam się Wojtek i moja obecna rola to Full Stack Engineer - tworzeniem stron zajmuję się już od ponad dziesięciu lat. Jeśli miałbym wskazać moją pasję, to zdecydowanie byłoby to programowanie w technologiach webowych i dalsze szerzenie się wiedzą :)

Możesz kojarzyć mnie z kanału Koduje na Youtube, gdzie stworzyłem ponad 50 darmowych poradników dotyczących różnych zagadnień z Front-Endu, czy jako głównego koordynatora cyklicznych spotkań Meet.js Warszawa. Poza tym jestem też członkiem programu Mozilla TechSpeakers - technologie open-source, ich tworzenie oraz przemowy publiczne również nie są mi obce. Od czasu do czasu prowadzę również indywidualne zajęcia dla osób poszukujących swojej pierwszej pracy jako Front-End developer.

Uwielbiam tematykę dostępności sieci - o której świadomość, zwłaszcza na polskim rynku - jest dosyć znikoma. Interesuję się również IoT oraz VR (❤️) czy Game-Developmentem, również w JavaScript!

Uważam, że nauczanie jest zdecydowanie najlepszą metodą, by poszerzać swoje horyzonty i dalej się rozwijać!

https://koduje.pl

Inne kursy tego autora

Pokaż więcej kursów

Accessibility: Domyślne zachowanie przeglądarki

Czego się nauczysz

Accessibility - Dostępność stron WWW

Przede wszystkim dostępność

Strony dostępne dla każdego

Korzyści dla warstwy biznesowej

Poznasz najczęstsze błędy dostępności

Poszerzaj horyzonty

Dla kogo jest ten kurs?

Kod

Kurs Accessibility

Wprowadzenie

Dlaczego warto się tym zajmować

Narzędzia przydatne przy tworzeniu dostępnych stron

Najczęstsze błędy dostępności

Informacje dla czytników ekranowych

O nawigacji klawiaturą

O wskaźnikach skupienia

Podsumowanie

Ten kurs jest w bazie eduweb

Autor kursu

Bio

Inne kursy tego autora