Warto byłoby pochylić się nad dostępnością. Pierwsze, co rzuciło mi się w oczy, to link wewnątrz przycisku. Nie robi się tak – nie ma to sensu z perspektywy semantyki, a dodatkowo obniża dostępność i użyteczność strony.
W portfolio nawigacja wygląda jak taby – warto byłoby więc trochę pomyśleć nad dostępnością tego. Osobiście bym też poszedł tutaj w linki – żeby każdy tab odpowiadał hashowi w adresie. Dodatkowo od razu wyświetlałbym zawartość pierwszego taba – inaczej podstrona wydaje się pusta. Chociaż nie wiem, czy po prostu bym nie zrobił trzech sekcji pod sobą i po prostu na górze linki do nawigacji między nimi.
W portfolio nie da się też w żaden sposób powiększyć obrazki, jeśli posługuje się wyłącznie klawiaturą (obrazki są klikalne, ale nie focusowalne; chyba najłatwiej byłoby je owinąć w przyciski). Dodatkowo, jeśli już idziemy w klikalne obrazki, to ich [alt] wówczas powinien wskazywać, co się stanie po kliknięciu takiego obrazka – coś typu "Powiększ zrzut ekranu [nazwa projektu]". Z kolei po powiększeniu IMO [alt] powinien opisywać, co dokładnie jest na zrzucie, a nie – czego to zrzut (czyli nie "Aplikacja todo", tylko "Ekran aplikacji, na którym znajduje się lista zadań z polami wyboru obok każdego zadania […]"). Obecne rozwiązanie (czyli [alt] duplikujący opis tuż pod zrzutem) jest problematyczne z dwóch powodów: nie mówi, że obrazek jest kilkalny i co się dzieje po kliknięciu oraz duplikuje informacje z kontekstu (np. czytnik ekranowy przeczyta dwa razy to samo – raz dla obrazka, raz dla samego tekstu).
Sam modal po powiększeniu też jest niedostępny. Po pierwsze, focus powinien zostać przerzucony do modala. Tutaj są różne szkoły – albo na sam element modala (czyli wówczas trzeba mu nadać [tabindex=0]), albo na pierwszy focusowalny element w jego wnętrzu (z tym może być problem, bo pierwszy – i w sumie jedyny – jest przycisk zamykania modala). Dodatkowo taki modal powinien być możliwy do zamknięcia przy pomocy klawisza Esc. Sam modal również powinien być odpowiednio oznaczony przy pomocy atrybutów ARIA. Ogólnie polecałbym albo natywny dialog (ma ten dodatkowy plus, że ładnie synchronizuje się z natywnym API do zamykania rzeczy; czyli obsługuje Esc na desktopie i przycisk wstecz na telefonach z androidem), albo rozwiązania pokroju a11y-dialog. No i warto zwrócić uwagę na to, żeby przycisk do zamykania modala był przyciskiem, bo obecnie jest spanem, przez co np. nie jest focusowalny. Także jego zawartość może nie być zrozumiała dla osoby używającej czytnika ekranowego – warto byłoby mu dać np. etykietę "Zamknij" przy pomocy [aria-label].
No i… tak średnio się powiększają te obrazki. Oczekuję, że jak już klikam w screena i pokazuje się modal, to ten screen będzie spory. Niekoniecznie na cały ekran, ale przynajmniej wyraźnie większy niż to, w co kliknąłem.
