Про затвердження вимог до дизайну та порядку погодження проектів дизайну офіційних веб-сайтів (веб-порталів) органів виконавчої влади та офіційних веб-ресурсів, що пов’язані з діяльністю органів виконавчої влади, та Єдиного веб-порталу Кабінету Міністрів України

Відповідно до підпункту 1 пункту 4 постанови Кабінету Міністрів України від 04 січня 2002 року № 3 "Про Порядок оприлюднення у мережі Інтернет інформації про діяльність органів виконавчої влади", підпунктів 21, 21-2 пункту 4, пунктів 8, 10 Положення про Міністерство цифрової трансформації України, затвердженого постановою Кабінету Міністрів України від 18 вересня 2019 року № 856, НАКАЗУЮ:

1. Затвердити такі, що додаються:

1) Вимоги до дизайну офіційних вебсайтів (вебпорталів) органів виконавчої влади та офіційних вебресурсів, що пов’язані з діяльністю органів виконавчої влади, та Єдиного вебпорталу Кабінету Міністрів України;

2) Порядок погодження проектів дизайну офіційних вебсайтів (вебпорталів) органів виконавчої влади та офіційних вебресурсів, що пов’язані з діяльністю органів виконавчої влади, та Єдиного вебпорталу Кабінету Міністрів України.

2. Директорату розвитку електронних послуг (Банік М.С.) в установленому порядку забезпечити:

1) подання цього наказу на державну реєстрацію до Міністерства юстиції України;

2) оприлюднення цього наказу.

3. Цей наказ набирає чинності з дня його офіційного опублікування.

4. Контроль за виконанням цього наказу покласти на першого заступника Міністра Вискуба О.А.

1. Ці Вимоги визначають основні вимоги до дизайну офіційних вебсайтів (вебпорталів) органів виконавчої влади та офіційних вебресурсів, що пов’язані з діяльністю органів виконавчої влади, та Єдиного вебпорталу Кабінету Міністрів України.

2. Для цілей цих Вимог терміни вживаються в таких значеннях:

дизайн-код - це комплекс правил щодо візуального впорядкування та формування зовнішнього вигляду офіційного вебсайту (вебсторінки);

колір у форматі HEX (hexadecimal) - мовою розмітки HTML шістнадцятирічне позначення кольору;

радіальний градієнт кольору - це перехід від одного кольору до іншого, що виходить з однієї точки (центру градієнта) і рівномірно розподіляється назовні, утворюючи форму кола.

Інші терміни вживаються у значеннях, наведених у Законі України "Про авторське право і суміжні права", постанові Кабінету Міністрів України від 04 січня 2002 року № 3 "Про Порядок оприлюднення у мережі Інтернет інформації про діяльність органів виконавчої влади" та ДСТУ ISO/IEC 40500:2015 "Інформаційні технології. Настанова з доступності веб-контенту W3C (WCAG) 2.0".

3. Офіційний вебсайт (вебпортал) органів виконавчої влади, офіційні вебресурси, що пов’язані з діяльністю органів виконавчої влади та Єдиний вебпортал Кабінету Міністрів України (далі - офіційний вебсайт), повинні бути розміщеними в домені GOV. UA та у разі потреби у домені.УКР.

Домен, на якому розміщений офіційний вебсайт, повинен бути підписаний із застосуванням технології захисту доменних імен DNSSEC.

Обмін інформацією з офіційним вебсайтом та доменне ім’я, на якому розміщений офіційний вебсайт, повинні бути захищеними за допомогою кваліфікованого сертифіката автентифікації вебсайту.

4. Вміст офіційного вебсайту повинен бути структурованим, логічним, зрозумілим та легким для читання.

5. Офіційний вебсайт повинен бути доступним для користувачів з порушеннями зору, слуху, опорно-рухового апарату, мовлення та інтелектуального розвитку, а також з різними комбінаціями порушень відповідно до ДСТУ ISO/IEC 40500:2015 "Інформаційні технології. Настанова з доступності веб-контенту W3C (WCAG) 2.0" не нижче рівня АА.

1. Офіційний вебсайт повинен відповідати таким вимогам:

1) верхня частина офіційного вебсайту:

розташовується горизонтально вгорі кожної вебсторінки офіційного вебсайту та повинна містити:

графічний елемент інтерфейсу із надписом "Дія", який містить посилання на Єдиний державний вебпортал електронних послуг. Завантажити логотип можна за посиланням: https://thedigital.gov.ua/logo;

малий Державний Герб України з лівої сторони верхньої частини вебсайту;

найменування органу виконавчої влади або назву офіційного вебсайту праворуч від малого Державного Герба України по центру верхньої частини вебсайту;

у разі горизонтального розташування повинна містити горизонтальний зміст офіційного вебсайту (елемент інтерфейсу), що містить не більш як вісім пунктів (гіперпосилань на розділи офіційного вебсайту);

верхня частина офіційних вебресурсів, що пов’язані з діяльністю органів виконавчої влади, можуть мати відмінну від цієї структуру та порядок розміщення елементів;

2) всі вебсторінки офіційного вебсайту повинні містити компонент навігаційного ланцюга, який горизонтально розміщується під верхньою частиною вебсайту і вказує на розміщення активної вебсторінки в структурі офіційного вебсайту та містить гіперпосилання на вебсторінки з верхніх рівнів ієрархії структури офіційного вебсайту;

3) використовувати системи тегів для розподілу матеріалів за категоріями на офіційному вебсайті за тематикою з урахуванням сфери повноважень відповідних органів виконавчої влади;

4) використовувати шрифт e-Ukraine для вебсторінок офіційного вебсайту. Завантажити шрифт та переглянути приклади використання можна за посиланням: https://thedigital.gov.ua/fonts;

5) використовувати кольорову палітру для елементів інтерфейсу відповідно до положень розділу IV цих Вимог;

6) текст повинен мати коефіцієнт контрастності не менше 4,5: 1 відносно фону.

2. Винятками можуть бути:

великий текст, наприклад, заголовки, може мати коефіцієнт контрастності 3: 1;

другорядний текст, текст неактивних компонентів користувацького інтерфейсу або декоративний текст не вимагають дотримання коефіцієнта контрастності;

вимоги щодо мінімальних показників контрастності не застосовуються до логотипу.

1. Типографія офіційного вебсайту повинна відповідати таким вимогам:

1) використовувати заголовки рівнів від h1 до h7 під час формування структури вебсторінок офіційного вебсайту, при цьому кожна вебсторінка повинна містити лише один заголовок рівня h1;

2) для заголовків використовувати наступні значення розміру кеглю та міжрядкового інтервалу: 38/40, 28/32, 24/28, 20/24, 18/28, 16/24. Накреслення - regular;

3) шрифт основного тексту - 16 пікселів, міжрядковий інтервал - 24 пікселі. Накреслення - light;

4) шрифт додаткового (пояснювального) тексту - 13 пікселів, міжрядковий інтервал - 18 пікселів. Накреслення - regular;

5) шрифт посилань - 12 пікселів, міжрядковий інтервал - 16 пікселів. Накреслення - regular;

6) вирівнювання основного тексту - по лівому краю;

7) не допускається одночасне використання в тексті підкреслення, курсиву та заголовних літер;

8) рекомендована максимальна ширина вебсторінки становить 1680 пікселів. Якщо роздільна здатність пристрою більша, то до вебсторінки додаються поля.

2. Розмір шрифту тексту, за винятком титрів, повинен змінюватися в межах до 200 відсотків без використання допоміжних технологій та втрати інформаційного наповнення або функціональності офіційного вебсайту.

3. Елементи інтерфейсу розміщуються на сторінці офіційного вебсайту через серію рядків та колонок з використанням модульної сітки. Рекомендовано використовувати 12-колонкову адаптивну сітку.

4. Сітка побудована з базових 8-піксельних модулів. Таким чином, розміри елементів і відступів необхідно робити кратними 8: 16, 24, 32, 40, 48.

1. Кольори офіційного вебсайту повинні бути контрастними та використовуватися в комбінації з формою та текстом. Колір не повинен бути єдиним візуальним засобом передачі інформації, що вказує на дію або вирізняє елемент серед інших.

Основними кольорами повинні бути кольори:

кольори тексту: #000000, #808080, #808080 (прозорість 50 %), #FFFFFF;

основні кольори елементів: #E7EEF3, #000000, #FFFFFF;

допоміжні кольори: #E6EBE6, #FFF7E3, #CCCCCC, #FFF4D7, #F1F1F1;

кольори для системних станів: #FF3A44, #E6EBE6, #FFD600.

Не допускається використання схожих та яскравих кольорів.

2. Під час використання світлих відтінків кольорів непрозорість повинна становити 75 та/або 50 відсотків.

3. Вебсторінки офіційного вебсайту повинні бути адаптованими для перегляду без прив’язки до кольору.