Оцените верстку?

Question

[Даша]

Добрый день.
Оцените пожалуйста верстку. Что не так со стилями, js кодом? Что нужно поправить?

Страничка: https://finnishfox.github.io/surfing
Код на github: https://github.com/finnishfox/surfing

Спасибо.

Comments

[alvvi]

Мне нравится, но Тостер - это Q&A, не форум верстальщиков, вы ошиблись сайтом.

Answer 1

[ой всё]

верстка оценивается валидаторами кода и валидатором accessibility

Comments

[Даша]

Меня интересует не только валидность.

[ой всё]

FinnishFox, все остальное не имеет ровным счетом никакого значения

[ой всё]

phpuser, это у вас просто законы такие
в цивилизованных странах обязательное требование по совместимости со скринридерами

[ой всё]

phpuser, я же сказала, ваши законы не соответствуют законам цивилизованных стран, где заботятся не только о рейтинге в запросах

[ой всё]

phpuser, если вы не знакомы с законами других стран, то так и говорите, вместо того, чтобы переходить на личности
ваша "осведомлённость" говорит сама за себя

Answer 2

[Владислав Софиенко]

Небольшой минус.


И этот ярко-серый цвет текста на белом фоне просто напрягают мои глаза. В целом адаптивность не плохая.

P.S. В верстку саму как реализовано не смотрел, только бегом html, на проверку того, что семантика присутствует.

Comments

[Даша]

Верстала по макету. Но да, с контрастом не очень.
Спасибо.

Answer 3

[Nubbin]

Слямзил, 100%.
Я видел этот шаблон где та, сейчас найду!

Comments

[alvvi]

Причем тут шаблон, если речь идет о верстке?

Answer 4

[Ivan Bogachev]

Что нужно поправить?

Доступность. В частности вопросы контрастности элементов. Если вам дизайнер дает такую бяку - вы просто обязаны его поправить. В частности состояния элементов:

Вы видите разницу? А она есть. Мы с вами может и заметим ее, но пользователь - нет.

С фокусом вообще все печально, нормально протабать страницу нельзя - фокус улетает в неизвестном направлении и пол страницы пребывает где-то там. Ну и синенькие рамочки - не комильфо.

Comments

[rinatoptimus]

Скажите, пож-ста, как должно табаться? Есть какой-то порядок? Где об этом почитать?

[Ivan Bogachev]

rinatoptimus, в общем случае порядок не так важен, тут проблема в том, что фокус где-то перемещается, а где именно - не видно, т.е. для :focus стилей никаких нет. Это хорошо заметно, если включить какую-нибудь читалку, которая умеет самостоятельно подсвечивать элементы (я обычно включаю ChromeVox) и протабать страницу.

Скажите, пож-ста, как должно табаться?

Со ссылками все просто, а вот с интерактивными элементами (аккордеоны, вкладки и.т.д.) все гораздо интереснее - там нужно не просто табать. Добавляются стрелки, пробел, enter, ctrl, shift... почитать рекомендации можно вот тут (хотя применять все это на практике весьма непросто, особенно учитывая тот факт, что бизнесу обычно наплевать на тех, кому это может быть полезно).

[rinatoptimus]

Ivan Bogachev, спасибо за ответ!

[Даша]

Ivan Bogachev, спасибо. А что не так с синими рамочками?

[Ivan Bogachev]

FinnishFox, Слишком стандартные + они естественным образом получаются смещенными относительно текста в ссылках, что выбивается из красивого дизайна. Если уж и использовать какие-то рамочки, то стоит их выравнивать красиво, чтобы отступы были одинаковые со всех сторон.

Answer 5

[Максим]

Одно что прям бросается в глаза (а точнее не очень) - иконки соц. сетей не каждый увидит :)