WSTECZ
W dzisiejszych czasach dostępność (A11y) jest kluczowa na wszystkich etapach tworzenia niestandardowego oprogramowania. Począwszy od części projektowej UX/UI, wkracza na zaawansowane poziomy budowania funkcji w kodzie. Zapewnia mnóstwo korzyści dla programistów, którzy pracują nad zwiększeniem DX, ale co ważniejsze dla użytkowników końcowych. Jedną z tych a11y części HTML są znaczniki semantyczne i to właśnie chciałbym tutaj omówić.
Programiści front-end muszą być dobrze zaznajomieni z Znaczniki HTML ponieważ jest to ich naturalne środowisko na co dzień. Założę się, że każdy z was zna kilka podstawowych tagów, takich jak
Załóżmy, że pracujesz nad stroną internetową lub aplikacją dla niemieckiego klienta. Jak wiadomo, niemieckie słowa mogą być naprawdę długie. Masz więc projekt z treścią tekstową, którą musisz odtworzyć w języku niemieckim. kod a ta treść musi zostać przerwana w bardzo konkretnych momentach. Tutaj pojawia się
GeburtstagskuchenTo wszystko! Za pomocą tak prostego znacznika można dowolnie manipulować zawartością tekstu.
Ale co z obsługą przeglądarki? Szczerze mówiąc, jest całkiem nieźle. Większość przeglądarek zrozumie ten tag, ale Opera na Androida i Safari na iOS mogą mieć problemy.
Wyobraź sobie, że tworzysz aplikację do zarządzania pamięcią dyskową. Musisz w jakiś sposób pokazać w interfejsie użytkownika, ile pamięci jest jeszcze dostępne i naprawdę chcesz, aby było to jak najbardziej dostępne. To idealny przypadek użycia dla aplikacji <meter> tag. Wyświetla on tylko wartość w określonym zakresie. Kolejną fajną rzeczą w tym tagu są jego atrybuty:
Możesz również znać podobny tag, którym jest postęp. Jaka jest więc między nimi różnica? Znacznik postępu powinien być używany do bieżących zadań. Innymi słowy, używaj tagu postępu, gdy masz do czynienia z konkretnym zadaniem. Znacznik meter powinien być używany do pokazywania użycia dysku lub pamięci. Kolejną różnicą jest to, że tag meter nie jest obsługiwany przez IE i jest to właściwie jedyna wada tego tagu.
Czy kiedykolwiek zastanawiałeś się, jak zbudować dostępny wskaźnik usuniętych i dodanych części treści (diff w GitHub lub powiadomienia e-mail z Jira, gdy bilet został zaktualizowany)? Wystarczy zawinąć usuniętą zawartość za pomocą atrybutu<del><p>Właśnie usunięta zawartość</p></del>. Aby wyświetlić tylko dodaną część treści, można użyć opcji w dokładnie taki sam sposób. Ten znacznik oferuje również dwa atrybuty:
Są oczywiście znacznie bardziej przydatne znaczniki w HTML . Gorąco polecam korzystanie z nich wszystkich, gdy jest to możliwe i właściwe. Twoi klienci i użytkownicy aplikacji będą Ci wdzięczni za takie podejście. Bądź jednak ostrożny, ponieważ niektóre tagi mogą być przestarzałe. Zawsze możesz upewnić się, że mniej popularny tag, którego chcesz użyć, jest nadal ważny i ma dobre wsparcie w Dokumentacja MDN.
Polish 
English 
German 
Swedish 
Danish 
Norwegian 
Finnish 
French 
Arabic 
Italian 
Japanese 
Korean 
Spanish 
Dutch