{ "version": "https:\/\/jsonfeed.org\/version\/1.1", "title": "HTML", "_rss_description": "HTML — стандартный язык разметки, используемый для создания и структурирования содержимого веб-страниц. HTML описывает структуру документа с помощью различных элементов и тегов, таких как заголовки, абзацы, списки, ссылки, изображения и другие элементы.", "_rss_language": "ru", "_itunes_email": "", "_itunes_categories_xml": "", "_itunes_image": "", "_itunes_explicit": "", "home_page_url": "https:\/\/www.modenov.ru\/blog\/tags\/html\/", "feed_url": "https:\/\/www.modenov.ru\/blog\/tags\/html\/json\/", "icon": "https:\/\/www.modenov.ru\/blog\/pictures\/userpic\/userpic@2x.jpg?1756117061", "authors": [ { "name": "Владимир Моденов", "url": "https:\/\/www.modenov.ru\/blog\/", "avatar": "https:\/\/www.modenov.ru\/blog\/pictures\/userpic\/userpic@2x.jpg?1756117061" } ], "items": [ { "id": "79", "url": "https:\/\/www.modenov.ru\/blog\/all\/chto-takoe-veb-dostupnost\/", "title": "Что такое веб-доступность?", "content_html": "

Недавно я решил погрузиться в веб-разработку: хочу узнать о том, как работают интернет и сети, различные протоколы, веб-доступность, HTML, CSS, JavaScript, а также другие базовые инструменты, на которых сегодня работают совершенно все сайты в интернете. Эти знания помогут мне в своих личных проектах и работе.<\/p>\n

Чтобы закреплять усвоенное лучше, я решил вести в своём блоге конспекты. Возможно, эти небольшие шпаргалки помогут не только мне, но и другим начинающим разработчикам.<\/p>\n

Сегодня говорим о веб-доступности и о том, зачем она нужна.<\/p>\n

\n\"Что\n<\/div>\n

Веб-доступность <\/b>(или accessibility<\/b>) — это подход к разработке веб-сайтов и приложений, который делает их удобными и доступными для всех пользователей, включая людей с ограниченными возможностями.<\/p>\n

Основные понятия веб-доступности:<\/h2>\n
    \n
  1. Перцептивность (Perceivable)<\/b>: Информация и элементы интерфейса должны быть представлены таким образом, чтобы их могли воспринимать все пользователи. Например, добавление текстовых описаний к изображениям для людей с нарушениями зрения.<\/li>\n<\/ol>\n
      \n
    1. Управляемость (Operable)<\/b>: Пользователи должны иметь возможность взаимодействовать с интерфейсом всеми доступными способами, включая клавиатуру и вспомогательные технологии. Например, все функции сайта должны быть доступны с клавиатуры.<\/li>\n<\/ol>\n
        \n
      1. Понятность (Understandable)<\/b>: Интерфейс и его элементы должны быть понятны и предсказуемы. Например, использование простого и ясного языка, а также логичная структура навигации.<\/li>\n<\/ol>\n
          \n
        1. Надежность (Robust)<\/b>: Контент должен быть доступен и корректно отображаться на различных устройствах и с использованием различных вспомогательных технологий. Например, использование стандартов HTML и CSS.<\/li>\n<\/ol>\n

          Основные задачи веб-доступности:<\/h2>\n
            \n
          1. Добавление альтернативного текста (alt-текста) к изображениям<\/b>: Это помогает людям с нарушениями зрения понять, что изображено на картинке.<\/li>\n<\/ol>\n
              \n
            1. Создание доступной навигации<\/b>: Убедитесь, что все элементы навигации доступны с клавиатуры и имеют логичную структуру.<\/li>\n<\/ol>\n
                \n
              1. Использование семантической разметки<\/b>: Правильное использование HTML-тегов помогает вспомогательным технологиям правильно интерпретировать контент.<\/li>\n<\/ol>\n
                  \n
                1. Контрастность цветов<\/b>: Убедитесь, что текст контрастирует с фоном, чтобы его было легко читать людям с нарушениями зрения.<\/li>\n<\/ol>\n
                    \n
                  1. Тестирование с помощью вспомогательных технологий<\/b>: Проверяйте ваш сайт с использованием экранных читалок и других вспомогательных технологий, чтобы убедиться в его доступности.<\/li>\n<\/ol>\n

                    Почему это важно?<\/h2>\n

                    Веб-доступность не только улучшает пользовательский опыт для людей с ограниченными возможностями, но и делает сайт более удобным для всех пользователей. Это также может улучшить SEO, так как поисковые системы лучше понимают структурированный и семантически правильный контент.<\/p>\n

                    Дополнительные материалы для изучения:<\/h2>\n

                    ✵ Что такое веб-доступность и как научиться делать доступные сайты<\/a>
                    \n✵                     Доступность — Doka Guide<\/a>
                    \n✵                     Доступность — Result School<\/a>
                    \n✵                     Доступность от Google<\/a>
                    \n✵                     ТОП-5 проблем с доступностью, которые чаще всего игнорируют<\/a>
                    \n✵                     Основы веба, которые должен знать начинающий разработчик<\/a>
                    \n✵                     Веб-разработчик: кто это, что делает, сколько зарабатывает и как им стать<\/a>
                    \n✵                     Веб-технологии для разработчиков | MDN<\/a><\/p>\n", "summary": "Веб-доступность — это подход к разработке веб-сайтов и приложений, который делает их удобными и доступными для всех пользователей. Сегодня говорим о веб-доступности подробнее.", "date_published": "2024-08-17T15:37:59+03:00", "date_modified": "2024-08-26T23:41:46+03:00", "tags": [ "css", "html", "образование", "разработка", "фронтенд" ], "image": "https:\/\/www.modenov.ru\/blog\/pictures\/web-accessibility.jpg", "_date_published_rfc2822": "Sat, 17 Aug 2024 15:37:59 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "79", "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/www.modenov.ru\/blog\/pictures\/web-accessibility.jpg", "https:\/\/www.modenov.ru\/blog\/pictures\/CSS-Logo.png", "https:\/\/www.modenov.ru\/blog\/pictures\/html5-logo.jpg", "https:\/\/www.modenov.ru\/blog\/pictures\/education.jpg", "https:\/\/www.modenov.ru\/blog\/pictures\/frontend.png" ] } } ], "_e2_version": 4199, "_e2_ua_string": "Aegea 11.5 (v4199)" }