Добавляет схемы в доки про tablist, tab, tabpanel
#4997
Conversation
|
Строго имхо: из-за зелёной рамочки кажется, что стрелочки указывают на неё и весь этот блок целиком это и tab, и tablist, и tabpanel. Но тут @skorobaeus лучше разбирается |
Это моя версия схемы до графов, которая тоже этим грешила. Было не понятно, что где что. Надо переделывать, наверное, так же. Убрать рамку как минимум. @skorobaeus, добавила исправленный вариант схемы рядом со старым. |
|
Всё справедливо! @TatianaFokina ещё немножечко причесала обновлённый вариант и положила рядом :) Я попробовала покрутить и повыделять рамочкой только части, например только tab или tablist, но понятнее от этого не становится) |
|
@solarrust, вот такая обновлённая схемка.
|
|
Простите, что я так докопалась к этой схеме 😅 Что вы думаете, если мы всё же добавим пару направляющих? (ниже очень грубый набросок)
|
Это как раз то, что я имела в виду под "попробовала покрутить и повыделять рамочкой только части, но понятнее от этого не становится". Направляющие это дополнительные визуальные элементы (а в инфографике чем лаконичнее, тем лучше), которые вызывают вопросы. Например: почему у таблиста и табпанели есть направляющие, а у таба нет? Потому что таб маленький и про него всё понятно? А почему тогда про таблист и табпанель не понятно? А надо ли вообще это объяснять? :) Я не говорю, что есть пользователи, которые прям задают такие вопросы, но это те вопросы, которые задаю себе я :) Если правда кажется, что указания стрелочками недостаточно, то я бы переделала бы тогда схему вообще, надо пробовать подсвечивать разными цветами, мб подписывать что-то прямо вместо рыбного текста. |
|
А как вам такой вариант?
|
|
Классная идея с увеличением таба! Продолжаем крутить :)
|
Превью контента из adb9fc6 опубликовано. |
Описание
Добавила одну и ту же схему с устройством вкладок для наглядности в тексты.
https://content-4997.dev.doka.guide/a11y/role-tablist/#kak-ponyat
https://content-4997.dev.doka.guide/a11y/role-tab/#kak-ponyat
https://content-4997.dev.doka.guide/a11y/role-tabpanel/#kak-ponyat
Чек-лист
/css/color/,/tools/json/,/tools/gulp/#kak-ponyat)images/example.png,demos/example/,../demos/example/)