МІНІСТЕРСТВО ЦИФРОВОЇ ТРАНСФОРМАЦІЇ УКРАЇНИ
НАКАЗ
23.06.2022 № 57
Зареєстровано в Міністерстві
юстиції України
15 липня 2022 р.
за № 785/38121
Про затвердження вимог до дизайну та порядку погодження проектів дизайну офіційних вебсайтів (вебпорталів) органів виконавчої влади та офіційних вебресурсів, що пов’язані з діяльністю органів виконавчої влади, та Єдиного вебпорталу Кабінету Міністрів України
( Із змінами, внесеними згідно з Наказами Міністерства цифрової трансформації № 67 від 21.07.2022 № 181 від 04.12.2024 )
( У заголовку та тексті Наказу слова "веб-сайт", "веб-портал", "веб-ресурс" в усіх відмінках замінено словами "вебсайт", "вебпортал", "вебресурс" у відповідних відмінках згідно з Наказом Міністерства цифрової трансформації № 67 від 21.07.2022 )
Відповідно до підпункту 1 пункту 4 постанови Кабінету Міністрів України від 04 січня 2002 року № 3 "Про Порядок оприлюднення у мережі Інтернет інформації про діяльність органів виконавчої влади", підпунктів 21, 21-2 пункту 4, пунктів 8, 10 Положення про Міністерство цифрової трансформації України, затвердженого постановою Кабінету Міністрів України від 18 вересня 2019 року № 856, НАКАЗУЮ:
1. Затвердити такі, що додаються:
1) Вимоги до дизайну офіційних вебсайтів (вебпорталів) органів виконавчої влади та офіційних вебресурсів, що пов’язані з діяльністю органів виконавчої влади, та Єдиного вебпорталу Кабінету Міністрів України;
2. Директорату розвитку електронних послуг (Банік М.С.) в установленому порядку забезпечити:
1) подання цього наказу на державну реєстрацію до Міністерства юстиції України;
2) оприлюднення цього наказу.
3. Цей наказ набирає чинності з дня його офіційного опублікування.
4. Контроль за виконанням цього наказу покласти на першого заступника Міністра Вискуба О.А.
| Віце-прем’єр-міністр України - Міністр | М. Федоров |
| ПОГОДЖЕНО: Міністр культури та інформаційної політики України Уповноважений Верховної Ради України з прав людини Урядовий Уповноважений з прав осіб з інвалідністю | О. Ткаченко Л. Денісова Т. Баранцова |
ЗАТВЕРДЖЕНО
Наказ Міністерства цифрової
трансформації України
23 червня 2022 року № 57
Зареєстровано в Міністерстві
юстиції України
15 липня 2022 р.
за № 785/38121
ВИМОГИ
до дизайну офіційних вебсайтів (вебпорталів) органів виконавчої влади та офіційних вебресурсів, що пов’язані з діяльністю органів виконавчої влади, та Єдиного вебпорталу Кабінету Міністрів України
( У заголовку та тексті слова "веб-сайт", "веб-портал", "веб-ресурс", "веб-сторінка" в усіх відмінках замінено словами "вебсайт", "вебпортал", "вебресурс", "вебсторінка" у відповідних відмінках згідно з Наказом Міністерства цифрової трансформації № 67 від 21.07.2022 )
I. Загальні положення
1. Ці Вимоги визначають основні вимоги до дизайну офіційних вебсайтів (вебпорталів) органів виконавчої влади та офіційних вебресурсів, що пов’язані з діяльністю органів виконавчої влади, та Єдиного вебпорталу Кабінету Міністрів України.
2. Для цілей цих Вимог терміни вживаються в таких значеннях:
дизайн-код - це комплекс правил щодо візуального впорядкування та формування зовнішнього вигляду офіційного вебсайту (вебсторінки);
колір у форматі HEX (hexadecimal) - мовою розмітки HTML шістнадцятирічне позначення кольору;
радіальний градієнт кольору - це перехід від одного кольору до іншого, що виходить з однієї точки (центру градієнта) і рівномірно розподіляється назовні, утворюючи форму кола.
Інші терміни вживаються у значеннях, наведених у Законі України "Про авторське право і суміжні права", постанові Кабінету Міністрів України від 04 січня 2002 року № 3 "Про Порядок оприлюднення у мережі Інтернет інформації про діяльність органів виконавчої влади" та ДСТУ EN 301 549:2022 (EN 301 549 V3.2.1 (2021-03), IDT) "Інформаційні технології. Вимоги щодо доступності продуктів та послуг ІКТ" (далі — ДСТУ EN 301 549:2022).
( Абзац п'ятий пункту 2 розділу I із змінами, внесеними згідно з Наказом Міністерства цифрової трансформації № 181 від 04.12.2024 )
3. Офіційний вебсайт (вебпортал) органів виконавчої влади, офіційні вебресурси, що пов’язані з діяльністю органів виконавчої влади та Єдиний вебпортал Кабінету Міністрів України (далі - офіційний вебсайт), повинні бути розміщеними в домені GOV. UA та у разі потреби у домені.УКР.
( Абзац перший пункту 3 розділу I із змінами, внесеними згідно з Наказом Міністерства цифрової трансформації № 67 від 21.07.2022 )
Домен, на якому розміщений офіційний вебсайт, повинен бути підписаний із застосуванням технології захисту доменних імен DNSSEC.
Обмін інформацією з офіційним вебсайтом та доменне ім’я, на якому розміщений офіційний вебсайт, повинні бути захищеними за допомогою кваліфікованого сертифіката автентифікації вебсайту.
4. Вміст офіційного вебсайту повинен бути структурованим, логічним, зрозумілим та легким для читання.
5. Офіційний вебсайт повинен бути доступним для користувачів з порушеннями зору, слуху, опорно-рухового апарату, мовлення та інтелектуального розвитку, а також з різними комбінаціями порушень відповідно до ДСТУ EN 301 549:2022.
( Пункт 5 розділу I із змінами, внесеними згідно з Наказом Міністерства цифрової трансформації № 181 від 04.12.2024 )
II. Дизайн-код офіційного вебсайту
1. Офіційний вебсайт повинен відповідати таким вимогам:
1) верхня частина офіційного вебсайту:
розташовується горизонтально вгорі кожної вебсторінки офіційного вебсайту та повинна містити:
графічний елемент інтерфейсу із надписом "Дія", який містить посилання на Єдиний державний вебпортал електронних послуг. Завантажити логотип можна за посиланням: https://thedigital.gov.ua/logo;
малий Державний Герб України (якщо емблема (логотип) органу виконавчої влади не містить зображення малого Державного Герба України) та емблему (логотип) органу виконавчої влади (за наявності) з лівої сторони верхньої частини вебсайту;
( Абзац четвертий підпункту 1 пункту 1 розділу II в редакції Наказу Міністерства цифрової трансформації № 181 від 04.12.2024 )
найменування органу виконавчої влади або назву офіційного вебсайту праворуч від малого Державного Герба України та емблеми (логотипа) органу виконавчої влади (за наявності) з лівої сторони верхньої частини вебсайту;
( Абзац п'ятий підпункту 1 пункту 1 розділу II із змінами, внесеними згідно з Наказом Міністерства цифрової трансформації № 181 від 04.12.2024 )
у разі відсутності емблеми (логотипа) органу виконавчої влади, що містить зображення малого Державного Герба України — малий Державний Герб України розташовується до чи після найменування органу виконавчої влади або назви офіційного вебсайту та/або емблеми (логотипа) органу виконавчої влади (за наявності);
( Підпункт 1 пункту 1 розділу II доповнено абзацом шостим згідно з Наказом Міністерства цифрової трансформації № 181 від 04.12.2024 )
графічний елемент інтерфейсу із зображенням міжнародного символу доступності, який містить посилання на розділ "Доступність", в якому розміщується інформація про діяльність органу виконавчої влади з питань доступності та інклюзивності послуг у відповідній сфері, з правої сторони верхньої частини вебсайту;
( Підпункт 1 пункту 1 розділу II доповнено абзацом сьомим згідно з Наказом Міністерства цифрової трансформації № 181 від 04.12.2024 )
у разі горизонтального розташування повинна містити горизонтальний зміст офіційного вебсайту (елемент інтерфейсу), що містить не більш як вісім пунктів (гіперпосилань на розділи офіційного вебсайту);
верхня частина офіційних вебресурсів, що пов’язані з діяльністю органів виконавчої влади, можуть мати відмінну від цієї структуру та порядок розміщення елементів;
2) всі вебсторінки офіційного вебсайту повинні містити компонент навігаційного ланцюга, який горизонтально розміщується під верхньою частиною вебсайту і вказує на розміщення активної вебсторінки в структурі офіційного вебсайту та містить гіперпосилання на вебсторінки з верхніх рівнів ієрархії структури офіційного вебсайту;
3) використовувати системи тегів для розподілу матеріалів за категоріями на офіційному вебсайті за тематикою з урахуванням сфери повноважень відповідних органів виконавчої влади;
4) використовувати шрифт e-Ukraine для вебсторінок офіційного вебсайту. Завантажити шрифт та переглянути приклади використання можна за посиланням: https://thedigital.gov.ua/fonts;
5) використовувати кольорову палітру для елементів інтерфейсу відповідно до положень розділу IV цих Вимог;
6) текст повинен мати коефіцієнт контрастності не менше 4,5: 1 відносно фону.
2. Винятками можуть бути:
великий текст, наприклад, заголовки, може мати коефіцієнт контрастності 3: 1;
другорядний текст, текст неактивних компонентів користувацького інтерфейсу або декоративний текст не вимагають дотримання коефіцієнта контрастності;
вимоги щодо мінімальних показників контрастності не застосовуються до логотипу.
III. Елементи інтерфейсу офіційних вебсайтів
1. Типографія офіційного вебсайту повинна відповідати таким вимогам:
1) використовувати заголовки рівнів від h1 до h7 під час формування структури вебсторінок офіційного вебсайту;
( Підпункт 1 пункту 1 розділу III із змінами, внесеними згідно з Наказом Міністерства цифрової трансформації № 181 від 04.12.2024 )
2) для заголовків використовувати наступні значення розміру кеглю та міжрядкового інтервалу: 56/120 %, 48/120 %, 40/120 %, 36/120 %, 32/120 %, 24/130 %, 20/130 %. Міжрядковий інтервал вказаний як відсоткове значення від розміру кеглю. Накреслення — regular;
( Підпункт 2 пункту 1 розділу III в редакції Наказу Міністерства цифрової трансформації № 181 від 04.12.2024 )
3) для основного тексту використовувати наступні значення розміру кеглю та міжрядкового інтервалу: 18/150 %, 16/150 %. Міжрядковий інтервал вказаний як відсоткове значення від розміру кеглю. Накреслення — light;
( Підпункт 3 пункту 1 розділу III в редакції Наказу Міністерства цифрової трансформації № 181 від 04.12.2024 )
4) для додаткового (пояснювального) тексту використовувати наступні значення розміру кеглю та міжрядкового інтервалу: 14/150 %, 13/120 %. Міжрядковий інтервал вказаний як відсоткове значення від розміру кеглю. Накреслення — regular;
( Підпункт 4 пункту 1 розділу III в редакції Наказу Міністерства цифрової трансформації № 181 від 04.12.2024 )
( Підпункт 5 пункту 1 розділу III виключено на підставі Наказу Міністерства цифрової трансформації № 181 від 04.12.2024 )
5) вирівнювання основного тексту - по лівому краю;
6) не допускається одночасне використання в тексті підкреслення, курсиву та заголовних літер;
7) рекомендована максимальна ширина вебсторінки становить 1680 пікселів. Якщо роздільна здатність пристрою більша, то до вебсторінки додаються поля;
8) міжрядковий інтервал — у 1,5 раза більший, ніж розмір шрифту;
( Пункт 1 розділу III доповнено новим підпунктом 8 згідно з Наказом Міністерства цифрової трансформації № 181 від 04.12.2024 )
9) довжина рядка — не менше 40 та не більше 80 символів;
( Пункт 1 розділу III доповнено новим підпунктом 9 згідно з Наказом Міністерства цифрової трансформації № 181 від 04.12.2024 )
10) ширина текстового блоку — до 900 пікселів;
( Пункт 1 розділу III доповнено новим підпунктом 10 згідно з Наказом Міністерства цифрової трансформації № 181 від 04.12.2024 )
11) абзаци повинні відокремлюватися один від одного відступами, вдвічі більшими, ніж розмір шрифту.
( Пункт 1 розділу III доповнено новим підпунктом 11 згідно з Наказом Міністерства цифрової трансформації № 181 від 04.12.2024 )
2. Розмір шрифту тексту, за винятком титрів, повинен змінюватися в межах до 200 відсотків без використання допоміжних технологій та втрати інформаційного наповнення або функціональності офіційного вебсайту.
3. Елементи інтерфейсу розміщуються на сторінці офіційного вебсайту через серію рядків та колонок з використанням модульної сітки. Рекомендовано використовувати 12-колонкову адаптивну сітку.
4. Сітка побудована з базових 8-піксельних модулів. Таким чином, розміри елементів і відступів необхідно робити кратними 8: 16, 24, 32, 40, 48.
IV. Кольори
1. Кольори офіційного вебсайту повинні бути контрастними та використовуватися в комбінації з формою та текстом. Колір не повинен бути єдиним візуальним засобом передачі інформації, що вказує на дію або вирізняє елемент серед інших.
Основними кольорами повинні бути кольори:
кольори тексту: #000000, #000000 (прозорість 50 %), #FFFFFF, #959595;
( Абзац третій пункту 1 розділу IV із змінами, внесеними згідно з Наказом Міністерства цифрової трансформації № 67 від 21.07.2022; в редакції Наказу Міністерства цифрової трансформації № 181 від 04.12.2024 )
основні кольори елементів: #E7EEF3, #000000, #FFFFFF, #F2F2F2, #FFB800;
( Абзац четвертий пункту 1 розділу IV із змінами, внесеними згідно з Наказом Міністерства цифрової трансформації № 67 від 21.07.2022; в редакції Наказу Міністерства цифрової трансформації № 181 від 04.12.2024 )
допоміжні кольори: #E6EBE6, #FFF4D7, #CCCCCC, F1F1F1, #1D1D1D, #E9E9E9, #454545, #636363;
( Абзац п'ятий пункту 1 розділу IV із змінами, внесеними згідно з Наказом Міністерства цифрової трансформації № 67 від 21.07.2022; в редакції Наказу Міністерства цифрової трансформації № 181 від 04.12.2024 )
кольори для системних станів: #DB3E3E, #FFD600, #04C65D.
( Абзац шостий пункту 1 розділу IV із змінами, внесеними згідно з Наказом Міністерства цифрової трансформації № 67 від 21.07.2022; в редакції Наказу Міністерства цифрової трансформації № 181 від 04.12.2024 )
Не допускається використання схожих та яскравих кольорів.
2. Під час використання світлих відтінків кольорів непрозорість повинна становити 75 та/або 50 відсотків.
3. Вебсторінки офіційного вебсайту повинні бути адаптованими для перегляду без прив’язки до кольору.
| Директор директорату розвитку електронних послуг | М. Банік |