Accessibility: Element poboczny

0:00Cześć w tej lekcji opowiem o znaczniku aside czyli

0:04takim elemencie pobocznym który jest bardzo często używany na stronach internetowych

0:08jako coś co znajduje się po boku bo tak trochę nazwa jego sugeruje że

0:12coś jest aside czyli jest z boku czyli często ludzie wstawiają

0:16tam może jakąś nawigację może treść kolumnową

0:20jeżeli to jest taka na przykład gazeta online natomiast

0:24aside ma troszkę inne semantycznie znaczenie i według specyfikacji powinien

0:28być używany do nieco innych rzeczy zacznijmy może od tego jaki mamy przykład

0:33mamy artykuł o pitbullach no i generalnie treść jest tego taka

0:37że no pitbulle nie są taką agresywną rasą za jaką wszyscy je mają

0:41jeżeli puścimy sobie na ten czytnik ekranowy przypominam chromevox

0:45aktywujemy za pomocą control command a i ponownie a

0:50jeśli jesteśmy na mac os jeżeli jesteśmy

0:54na innym systemie operacyjnym no to po prostu robimy chromevox czyli

0:58ta kombinacja klawiszy która aktywuje chromevox na waszym systemie chromevox a

1:03i ponownie a no i wtedy możemy za pomocą chromevox strzałka w dół i

1:07w górę nawigować się po tej stronie

1:11pitbulls heading level one czyli jest to tytuł naszej strony lecimy

1:15dalej zapauzuję no

1:19i widzimy że ten pitbull został ominięty ponieważ jest on jakby dekoracją nie

1:23jest faktycznie treścią nie mówimy o tym konkretnym pitbullu jeśli

1:28uznali byśmy jako twórcy treści że jest to

1:32istotne że ten pitbull wygląda w ładny sposób bo chcemy podkreślić

1:36że nie jest taką agresywną rasą jaka się wydaje i jest spokojny albo jeżeli byłoby

1:40to zdjęcie dziecka bawiącego się z pitbullem no to oczywiście możemy tutaj tego

1:44alta uzupełnić ponieważ jest to istotne dla treści tu wchodzimy

1:49bardziej na projektowanie treści niż projektowanie faktycznych interfejsów czy koderki natomiast

1:53musimy znać takie podstawy techniczne żeby zrobić to poprawnie no więc możemy dać

1:57mu to przeczytać

2:18więc generalnie tak brzmi screen reader któremu się z reguły nie przerywa

2:22i tak analizujemy treść generalnie wpis jest o tym że no

2:27ominęliśmy miesiąc pitbulla gdzie szerzą właśnie informacje

2:32o tej rasie i o tych psach natomiast zachęcają do

2:36przeczytania całego artykułu no i oczywiście to jest faktyczny fragment pewnego artykułu który

2:40też będzie w opisie jeżeli zainteresuje was ten temat no i możemy iść dalej

2:49tak tutaj mamy jakby rozwiązywanie powszechnych mitów na temat pit

2:53bulterierów i to jest już heading level 3 czyli jest to mniej istotne

2:57niż faktyczny tytuł strony trzeba pamiętać że algorytm outline nie

3:01został nigdy wprowadzony w przeglądarkach dlatego nie powinniśmy robić kilku znaczników

3:06które są wewnątrz siebie zagnieżdżone to znaczy jeżeli zrobimy nagłówek

3:10h1 a wewnątrz niego zrobimy później sekcję która

3:15ma h2 i h3 no to jakby

3:19one nie są w relacji do tego więc nie możemy stworzyć kolejnego nagłówka h1

3:23ponieważ algorytm outline nie został zaimplementowany to o tym warto też pamiętać no

3:28ale wracając możemy też poczytać no generalnie jakie są tam mity i

3:34przejdziemy do faktycznego aside

3:38jest jasne że shetland sheepdog ma mniejszy

3:43wskaźnik przyjazności w tym teście który sprawdza

3:47przyjazność konkretnych ras psów czy do dzieci czy do generalnie tendencji

3:51agresywnych i to jest istotne ponieważ tutaj odnosimy się do treści jeżeli

3:55wejdziemy w aside przeczytało nam to że jesteśmy teraz w aside

4:00czyli tutaj w tej sekcji class supplementary

4:05czyli taka dodatkowa no i jesteśmy konkretnie

4:09na tym linku który przedstawia chart o pitbullach możemy

4:14oczywiście w niego wejść i wtedy zobaczymy to w powiększeniu

4:19no ale możemy wrócić normalnie na tą stronę i przeczytać dalszy kontekst tej wypowiedzi czyli

4:25generalnie ta część ten aside to jest jakaś treść dodatkowa

4:29i z definicji wcag 2.1 czy 2.0 wynika

4:33że definicja aside jest wtedy kiedy jest to treść na tyle dodatkowa

4:37że może zostać odjęta od głównej i nie

4:41wpłynie na jej zrozumienie to znaczy tutaj w tej sekcji nie

4:46powinno być nic co odnosi się do tego ani w tym nie powinno być nic co odnosi

4:50się bezpośrednio do tego oczywiście temat może być ten sam natomiast nie powinniśmy

4:54mieć zależności informacyjnej między tymi dwoma znacznikami

4:58to jest nasz maine to jest nasz aside w tym momencie i dlaczego tu jest problem ponieważ

5:03tutaj w tej sekcji odnosimy się do bezpośrednio

5:07do tego wykresu oraz odnosimy się do jakby wniosków

5:11płynących z nimi czyli tutaj mamy podsumowanie że pitbulterier był

5:15drugi w rankingu na najbardziej tolerancyjne psy przetestowane przez amerykańskie

5:20stowarzyszenie testowania temperamentu pokonując rasy takie właśnie

5:24jak shetland sheepdog akita coli czy boxers i tutaj

5:28mamy odniesienie do tej treści w związku z czym to już nie jest aside

5:33przynajmniej ten paragraf nie jest aside ponieważ główna

5:37treść do niego się odnosi i nie jest do końca zrozumiała bez niego tak

5:41samo sam aside powinien mieć sam w sobie sens więc tutaj

5:45akurat jest to taka sama zawarta informacja nie ma z tym problemu ponieważ

5:50możemy przeczytać sobie ten chart możemy przeczytać podsumowanie

5:54no i to jest informacja sama sobie ale tutaj ta informacja nie jest pełna

5:58w związku z czym można dojść do wniosku że to tak naprawdę nie

6:02powinno być w aside ta części czyli cały ten chart

6:07i ten pitbull nie powinno być w aside nie dlatego że on

6:11sam w sobie nie jest informacją na tyle generyczną ale że nasz artykuł

6:15odnosi się do niej w związku z czym możemy wynieść to konkretne

6:20zagadnienie do diva

6:24na przykład supplementary zobaczymy

6:29co z tego będzie zapiszemy no

6:35i akurat tak nam się css ułożył że thank you for your support poleciało nam

6:39na dół a tak naprawdę możemy usunąć stąd tą klasę i wstawić

6:43tego aside w tego diva o to jest fajne rozwiązanie i

6:50dlaczego to jest teraz lepsze wizualnie to się już niczym nie różni od tego co było wcześniej ale

6:54różnica jest taka że faktycznie w samym aside czyli

6:58w tym elemencie jest informacja bardzo generyczna dziękujemy

7:03za twoje wsparcie cieszymy się że odwiedziłeś naszą stronę nie jest

7:07to istotne co jest w main nie jest to istotne co jest w tym aside te dwa byty

7:11mogą istnieć między sobą i nie są względem siebie zależne i jeżeli teraz przeczytamy

7:15to faktycznie czytnikiem ekranowym jeszcze raz

7:25tak jest

7:30to oczywiste że ta rasa wypadła gorzej i ma

7:34to sens dlatego ponieważ ten wykres

7:39nie jest już w aside nie jest już czymś co można wyjąć i jakby

7:43dalej treść będzie zawarta w tym

7:57tak więc jakby można to potraktować w ten sposób że thank you for your support i

8:01ta sekcja jest jakby osobnym dokumentem zupełnie czymś co nie odnosi

8:05się do głównej treści a cała reszta to jest jakby jeden dokument

8:09który możemy rozumieć w ten sposób no i teraz jak przejdziemy faktycznie niżej no to teraz

8:14dostaniemy dopiero informację że to jest aside

8:18no i to ma sens ponieważ jest to taka no dodatkowa

8:22rzecz może ciekawostka która generalnie nie jest potrzebna do tego zrozumienia ale

8:26w tym przypadku jest po prostu miła dla czytelnika że nam dziękują za wsparcie

8:31i odwiedzenie strony internetowej więc pamiętajcie żeby tworząc strony

8:35internetowe korzystać z aside w ten sposób że ok nawigacja często

8:40podchodzi pod prawidłowe użycie aside natomiast jeśli chodzi

8:44o jakieś kolumny czy informacje dodatkowe zwracajcie uwagę na

8:48co treść kieruje się wzajemnie ponieważ no taka jest specyfikacja

8:52aside i o to w nim tak naprawdę chodzi a nie o element

8:56który jest po prostu z boku