- Style dla focusa słabo wyglądają.
- Linki przewijają bez zmiany hasha.
- Nie wszystkie elementy interaktywne są dostępne z poziomu klawiatury.
- W portfolio średnio działa filtrowanie (nie zmienia się zaznaczenie aktywnego przycisku).
-
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Existence, sans-serif;
}
Lepiej dziedziczyć, a nie wymuszać.
-
.main-title aż się prosi o bycie h1.
-
To h4 poniżej powinno być akapitem, bo podtytułów nie robimy nie nagłówkach.
-
Inna rzecz, że hierarchia treści jest totalnie zmasakrowana i nie ma żadnego sensu.
-
Te ikonki w headerze sstanowią element nawigacyjny, więc powinno to być nav > ul > li a.
-
Pasek nawigacyjny nie powinien być sekcją, ale kolejnym elementem nav. Inna rzecz, że nie bardzo widzę sens w posiadaniu go.
-
Sekcjom brakuje nagłówków opisujących, o czym są.
-
#services h6 nie ma sensu. #services powinien mieć nagłówek h2, a poszczególne wyszczególnione w nim usługi nagłówki h3. A jak już dajemy tu nagłówki, można się pokusić o wydzielanie tego do podsekcji.
-
Dodatkowo ikonki SVG służą tutaj za ozdobniki, więc svg > title jest całkowicie niepotrzebne (czytnik ekranowy nie powinien czytać tych ikonek).
-
<div class="about-header">
<img class="main-titles" src="img/heading.png" alt="">
</div>
Ten obrazek zawiera nagłówek sekcji, więc zamiast div powinno być h2, a [alt] powinien zawierać nazwę tej sekcji ("About us"). Polecam przejrzeć zalecenia co do tekstów alternatywnych.
-
<img id="button1" class="button button-container learn_more" src="img/button.png" alt="">
Przycisk to przycisk (albo link w ostateczności), więc [alt] powinien wskazywać, co dany element robi. No i MUSI być wewnątrz odpowiedniego elementu (button, a).
-
<div class="col-12">
<div class="our-team-img"><img class="main-titles" src="img/our_team.png" alt=""></div>
<div class="buttons"><img src="img/small_button.png" alt=""><img src="img/small_button_2.png" alt=""></div>
</div>
to powinno wyglądać mniej więcej tak:
<div class="col-12">
<h2 class="our-team-img">
<img class="main-titles" src="img/our_team.png" alt="Our team">
</h2>
<div class="buttons">
<button>
<img src="img/small_button.png" alt="Previous team members">
</button>
<button>
<img src="img/small_button_2.png" alt="Next team members">
</button>
</div>
</div>
-
<a href="http://www.facebook.com" target="_blank"><img src="img/Social_icon_1.png" alt=""></a>
[alt]!!!!!!!!!!!! + warto poczytać o [target].
-
Nie krzycz w nazwiskach członków zespołu, jest text-transform: uppercase. Dodatkowo h5 tu nie pasuje, powinno być h3.
-
Skille aż się proszą o prezentację przy pomocy listy dl.
-
Tak samo jak te liczniki w sliderze poniżej. h1 nie ma tam najmniejszego sensu.
-
<div class="col-12 slider-section slider2-section" data-days="350" data-succes="95%" data-fails="7" data-costumers="1788">
<div class="person-img"><img src="img/deviantart.png" alt=""></div>
<p>“Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum. Duis mollis, est non commodo luctus, nisi erat ”</p>
<h5>LESALE CHRISTOPER, PINTEREST1</h5>
<div class="social-img">
<a href="http://www.facebook.com" target="_blank"><img src="img/Social_icon_1.png" alt=""></a>
<a href="http://www.plus.google.com" target="_blank"><img src="img/Social_icon_2.png" alt=""></a>
</div>
</div>
to powinno wyglądać mniej więcej tak:
<figure class="col-12 slider-section slider2-section" data-days="350" data-succes="95%" data-fails="7" data-costumers="1788">
<div class="person-img"><img src="img/deviantart.png" alt=""></div>
<blockquote>
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum. Duis mollis, est non commodo luctus, nisi erat</p>
</blockquote>
<figcaption>
<cite>LeSale Christoper, Pinterest1</cite>
<span class="visuallyhidden">Find him on social media:</span>
<ul class="social-img">
<li>
<a href="http://www.facebook.com">
<img src="img/Social_icon_1.png" alt="Facebook">
</a>
</li>
<li>
<a href="http://www.plus.google.com">
<img src="img/Social_icon_2.png" alt="Google+">
</a>
</li>
</ul>
</figcaption>
</figure>
- O .visuallyhidden możesz sobie poczytać w H5BP + skopiować z ich kodu.
- Przyciski do przełączania widoku portfolio winny być przyciskami.
- W formularzu powinien być label.
- Socjalki na samym końcu to lista (może nawet nawigacyjna), a [alt] powinien wskazywać na konkretne portale społecznościowe.
- Walidacja formularza to dłuższy temat, niemniej od razu mogę powiedzieć, że jest zrobiona w niedostępny sposób.
Ogólnie to polecam zapoznać się z podstawami semantyki w HTML-u i dostępności.
