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

Відповідно до підпункту 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" не нижче рівня AA.

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. Веб-сторінки офіційного веб-сайту повинні бути адаптованими для перегляду без прив'язки до кольору.