SEO-текст
У блока два кінці, і вони на різних краях сторінки: лід під заголовком каталогу і сам блок у підвалі. Між ними одне посилання, «Читати більше», - і саме воно виявилось єдиним місцем продукту, де акцент на тексті не проходить контраст.
Розмітка звідси - та сама, що на listing.html: спершу лід, потім, через увесь каталог, блок.
Протеїн - базова добавка для росту й відновлення м'язів. У каталозі концентрат, ізолят, гідролізат і рослинний протеїн від перевірених брендів. Читати більше
Протеїн - базова спортивна добавка для росту й відновлення м'язів. У каталозі Stack - сироватковий концентрат, ізолят, гідролізат, казеїн, комплексний і рослинний протеїн від перевірених брендів.
Для кожного товару показуємо склад, походження і сертифікат - щоб ви бачили, що берете. Доставка по Україні, оплата при отриманні.
.lintro - 14, вторинний, не ширше 760. Стоїть під H1 каталогу і не сперечається з ним: це підпис, а не вступ.more - href="#seo", тобто не сусід блока, а його верхній кінець. До 7.10 лід жив у loyalty-rung.css, з яким не має нічого спільного.seotext - --bg-sunken, край-волосина, радіус 12. Найтихіша поверхня системи: текст для пошукача не мусить конкурувати з товарами.h - 18/900 --font-display. Приїхав із section-head.css на 7.50, де був одним із п'яти імен в одному рядку.uiv-bear - від 760 стоїть у правому полі блока. Приїхав із empty-state.css на 7.49: він не порожній стан, він ілюстрація цього блокаБлок розгорнутий завжди. Ні «показати ще», ні акордеона: текст, який ховають від людини й показують пошукачу, - це саме те, за що пошукачі карають. Лід дає коротку версію нагорі, повна лежить унизу, і посилання між ними чесне.
DESIGN-artifacts.md тримає замкнене правило: акцент на тексті - тільки від 19px жирного, бо #FF5A00 на білому це 3.13:1, а це AA лише для великого тексту. Правило застосували до ціни на 7.74 і більше ні до чого. Крок 7.81 застосував його до всього.
| Форма | Екз. | Кегль / вага | Поверхня | Контраст | WCAG |
|---|---|---|---|---|---|
.badge «еталон» | 28 | 10/600 | rgb(255,245,240) | 2.91 | не проходить |
.acc-link «Адреси» | 8 | 14/600 | rgb(250,249,247) | 2.97 | не проходить |
.more «Читати більше» | 8 | 14/700 | біле | 3.13 | не проходить |
.addr-tag | 2 | 10/700 | біле | 3.13 | не проходить |
.cbnew | 2 | 30/600 | rgb(250,249,247) | 2.97 | не проходить |
.hptag «Акція тижня» | 8 | 12/500 | rgb(28,28,28) | 5.45 | проходить |
.big · .new | 8 | 38/600 · 36/600 | біле | 3.13 | проходить, великий текст |
| вісім грошових форм | 72 | 20-30 / 700 | біле | 3.13 | проходить |
Шістнадцять форм несуть акцентний текст. П'ять не проходять AA - 48 екземплярів. І замір показує ще дещо: правило, як воно написане, і надто суворе, і надто м'яке одночасно.
Надто суворе
.hptag це 12/500 і 5.45:1 - бо він на майже чорному. Той самий помаранчевий на інверсній поверхні читається краще за будь-який текст на білому, а правило «від 19 жирного» забороняє його разом з усім іншим. Вирішує поверхня, а правило говорить про кегль.Надто м'яке
.cbnew це 30/600 - за WCAG великий текст, потрібно 3.0. Він стоїть не на білому, а на rgb(250,249,247), і там 2.97. Правило про теплі поверхні не каже нічого, а вони знімають 0.16 і цього досить.Не змінено цим кроком. Три виходи - підняти кегль, зняти акцент, лишити з винятком - і всі три є рішенням про значення. Правило замкнене в DESIGN-artifacts.md, і міняється воно вголос: «змінна -> значення -> чому», а не побічним ефектом кроку витрини.
btn--inline у крамниці«Читати більше» - дія, написана словами всередині речення, а це рівно те, для чого оголошений фініш btn--text btn--inline. Крок 7.6 написав на стенді кнопки, що такого вжитку в продукті немає - і це було хибно у спосіб, який варто назвати: 7.6 заміряв елементи, які вже НОСИЛИ btn--inline, і зробив висновок із них, замість шукати ті, що мали б носити. Їх чотири, по одному на кожен екран каталогу.
Що лишилось у файлі після фінішу: вага (фініш успадковує її, а абзац навколо - 400) і чорнило. white-space: nowrap пішло - button.css уже забороняє перенос усім чотирьом фінішам.
| Ширина | padding-right | min-height | ведмідь |
|---|---|---|---|
| 360 - 759 | 16 | 0 | display: none |
| 760 - 1280 | 310 | 244 | 362 заввишки, знизу -128 |
310 праворуч - це і є яма, у якій він стоїть, і до 7.49 два ці рядки лежали в різних файлах: правило блока тут, ведмідь у empty-state.css, який його порожнім станом не вважає. Заміряно: на 40 кольорових екранах .uiv-bear рендериться 18 разів, і кожен - усередині .seotext.
Ведмідь вищий за блок: 362 при min-height: 244, і bottom: -128 опускає його нижче краю. Тримає це overflow: hidden на блоці - тобто видно приблизно дві третини фігури, і так задумано: він визирає, а не стоїть у повний зріст.
| Стан | Що робить | Чому так |
|---|---|---|
| спокій | лід нагорі, блок у підвалі, обидва завжди видимі | текст не ховають від людини й не показують пошукачу окремо |
| наведення на «Читати більше» | прозорість .75 | власний ховер, бо колір тут уже акцентний і темнішати нікуди |
| фокус на «Читати більше» | системне кільце, 3px помаранчевого | носить фініш btn--text, тому кільце є - на відміну від п'яти посилальних компонентів без фінішу |
| до 760 | ведмідь схований, поле праворуч 16 | на телефоні 310px ями не лишилось би нічого для тексту |
| тексту немає | немає стану | у категорії без опису блок порожній із заголовком |
Правило
Текст для пошукача пишуть для людини. Лід каже коротко те саме, що блок каже повно, і обидва - звичайними словами. Принцип 5: інакше це два різні тексти, і один із них брехня.Антиправило
Не ховай блок під «показати ще». Текст, який видно роботу й не видно людині, - те, за що пошукачі карають, і те, що перетворює чесний опис на трюк.Сторінка звіряє себе з файлом: 5 власних класів і 3 стани.
ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4
Від якого порогу:--bp-shell-wide парою 860/859. Що саме міняється: текст віддає 310px під талісмана, і талісман з'являється. Було 760/759, поза реєстром. Тут складання пройшло чисто, на відміну від смуги довіри: зміряно на listing, на 860 текстова колонка виходить 500 проти 400 на 760 сьогодні, і не обрізає нічого. Одна поведінка - «талісман з'являється, коли поруч є місце» - була записана двома неузгодженими числами у двох файлах, 760 тут і 1180 у trust-strip.css; тепер обидва кажуть її точкою оболонки, кожен своїм способом.Робота: ВІДПОВІДЬ. Рухається: прозорість «читати далі». Тривалість --dur-fast (150ms), крива --ease-standard. Значення читаються через var(): підміна токена в браузері веде за собою кожне з них, тобто числа у файлі немає. При prefers-reduced-motion рух зникає, а стан лишається.
Це те посилання, яке раунд 1 переніс сюди: воно ловилось селекторами кнопки і давало літерал 0.15s на її стенді.
Прочитані з seo-text.css: 5 семантичних ролей і 13 примітивів.
| Семантичні ролі (5) | Примітиви (13) |
|---|---|
--bg-sunken --line-hair --text-action --text-primary --text-secondary | --font-display --fs-14 --fs-18 --fw-black --fw-bold --lh-airy --ls-lead --radius-12 --space-8 --space-12 --space-16 --space-24 --container-text |
| – | --dur-fast --ease-standard |
Повз шкалу сім чисел, і шість із них - розміри ведмедя та його ями: 310 поля, 244 мінімальної висоти, 362 зросту, -128 зсуву й межа 760/759. Сьоме - 760px міри ліда, третя міра тексту в системі поряд із 560 у банері тренера і 800 у блоці опису.
Цей файл не змінювався. Вирішувач по всіх 14 селекторах: жодного мертвого оголошення. Три проходи по 40 екранах: нульовий прохід 0, різниця 0.
Межа 760 заміряна власними ширинами - на 759 і 760, - бо стандартні ширини перепису її не бачать.
Чого бракує
- Акцент на тексті нижче гейта - п'ять форм, 48 екземплярів, не проходять AA. Розібрано вище, рішення про значення
- Правило гейта говорить про кегль, а вирішує поверхня - і про теплі поверхні не каже нічого
- Стан «опису категорії немає» - блок лишається із заголовком і без тексту
- Три міри тексту: 560, 760, 800 у трьох файлах, жодна не токен
- Ведмідь один на дев'ять екранів - одна фігура на всі категорії, і правила «яка ілюстрація до якої категорії» немає
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.