🗣️ Я что пытаюсь сказать…

Твиттер Экс-дот-ком – это социальная сеть, где изображения в постах являются смысловыми, и они должны быть доступными. Поэтому внедрение видимых описаний в качестве повышения осведомлённости всех пользователей – это их способ вовлечения всех нас подписывать фотографии, картинки и мемы в своих постах. Мне кажется, это очень хороший пример, какая мотивация стоит за реализацией подобного функционала на платформе. Не всегда имеет смысл идти за гигантами индустрии без понимания контекста.

Поэтому я бы всё ещё так не делала у нас на проекте, зная контекст, что мы только в самом начале пути 🙃

P.S. Этим постом я впервые поделюсь ссылкой на канал. И так как запал написать эту историю погас бы скорее, чем я прочитала все комменты и цитирования в твиттере, то буду рада альтернативным мыслям по теме (в следующем сообщении 😅)

Так, я привязала группу для обсуждений.
Спасибо @besuhoff 🫶🏻
Увы, это не распространяется на предыдущие записи 😭

Можно сюда по всем предыдущим прокомментировать ✍️

Только, если так 🙈

19 октября я провела презентацию/воркшоп для Travix.

Команда заполнила опросник (список вопросов можно посмотреть тут), проанализировав который я выделила две проблемы:

1. Концепция дизайн системы новая для команды, поэтому непонятно, как организовать процесс.

2. Неконсистентность в дизайнах и разработке. Дизайнеры и разработчики тратят много времени на обсуждение “slightly different blue tone”, много лишней коммуникации, чтобы выяснить преднамеренное ли это изменение и где лежит the source of truth.

Эти две темы я раскрывала в презентации. Делюсь слайдами.

Проблему долгой коммуникации о неконсистентности в дизайнах решала с помощью дизайн-токенов 🪙
Давно хотела полноценно с ними поработать, чтобы автоматизировать процесс перевода дизайн-решений в код. На демо показывала, как токенезировать компоненты с помощью двухуровневой системы переменных, экспортировать значения из Фигмы и переводить в кастомные свойства CSS с помощью Style Dictionary нажатием (почти) одной кнопки.

#DesignSystem

Если с 2020 года приходить на каждый митинг и говорить слово "аксессабилити", то к концу 2023 эту тему, возможно, начнут воспринимать всерьёз. Но это не точно...

У нас в команде витают разговоры о доступности, но мало кто понимает, что надо делать. Единственное, о чём все договорились – это то, что надо делать любыми способами и желательно побыстрее. Мы решили провести опрос, чтобы понять, какой у людей уровень заинтересованности, экспертизы, необходимости в обучении.

Делюсь ссылкой на опрос. Мы использовали нашу платформу для этого, но какие-нибудь Google Forms тоже подойдут. Если в команде не слишком много людей, то можно и в формате беседы.

Приходите в комментарии и Issues 🙌

#accessibility #a11y

Нашла тут одну Accessibility game (она на нидерландском, но Google translator отлично переводит на английский), и что-то я её вообще пройти не могу 😅
Еле разобралась с квадратами для нахождения цветовых пар в Color blind режиме

#accessibility #a11y

Привет 👋

Джош Комо дал участникам его курсов купон со скидкой 50%, который можно отдать другу.

У меня есть один такой купон, и я бы хотела отдать его тому, кому будет полезно пройти один из его курсов:
– The Joy of React
– CSS for JavaScript Developers

Подробнее можно почитать тут.

Если кому-то из вас интересно, напишите мне, и я передам вам купон 💝

Фавиконка для светлой и тёмной темы

В современных интерфейсах фавиконка – визуальный элемент, адаптирующийся под различные устройства и пользовательские предпочтения. Её можно заметить не только в углу вкладки браузера, но и в закладках, списке для чтения и на главном экране телефона.

Если вы подключаете фавиконку НЕ в 1999 году, то вам следует учитывать несколько способов её подключения, не ограничиваясь лишь форматом .ico 🙃

Сегодня хочу поделиться, как подключить фавиконку в формате SVG. Подчёркиваю, это лишь один из необходимых способов. Браузеры уже начинают поддерживать SVG для фавиконок, что открывает новые возможности для дизайнеров и разработчиков. SVG обладает преимуществом идеального масштабирования без потери качества изображения и позволяет изменять стили фавиконки в зависимости от предпочтений пользователя, например, от темы операционной системы (тёмной или светлой).

Создаём файл favicon.svg с векторной графикой, экспортированной из графического редактора (не забывайте оптимизировать SVG с помощью инструментов вроде SVGOMG, чтобы уменьшить размер файла без потери качества):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 260">
  <path fill="#eaf91b" d="M0 0h260v260H0V0Z"/>
  <path fill="#121212" d="M77.802 124.631 28.82 143.463l48.983 18.832V177L10 151.074v-15.221l67.802-26.055v14.833ZM117.123 140.497h24.692l-12.012-33.795h-.267l-12.413 33.795ZM119.125 84h21.489l35.636 92.097h-21.755l-7.208-20.509h-35.636l-7.474 20.509H83.089L119.125 84ZM181.398 162.295l48.983-18.832-48.983-18.832v-14.833l67.802 26.055v15.221L181.398 177v-14.705Z"/>
</svg>

Подключаем фавиконку в <head> HTML-страницы:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Используя светлую тему по умолчанию, моя фавиконка отображается во вкладке браузера в виде тёмного символа <A> на ярко-жёлтом фоне.

Добавим немного стиля 😎

Внутри SVG можно использовать CSS. Немного “причешем” иконку, назначив цвета через классы:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 260">
<style>
  .surface {
   fill: #eaf91b; /* ярко-жёлтый фон */
  }

  .symbol {
   fill: #121212; /* тёмный символ */
  }
 </style>
  <path class="surface" … />
  <path class="symbol" …/>
</svg>

Добавление стилей для тёмной темы становится возможным благодаря использованию медиа-запроса @media (prefers-color-scheme: light | dark), который адаптирует иконку в зависимости от установленной в настройках операционной системы темы. Добавим стили для тёмной темы, поменяв назначение цветов:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 260">
<style>
  …
  
  @media (prefers-color-scheme: dark) {
   .surface {
    fill: #121212; /* тёмный фон */
   }

   .symbol {
    fill: #eaf91b; /* ярко-жёлтый символ */
   }
  }
 </style>
  …
</svg>

Фавиконка – это полезный инструмент идентификации бренда среди множества других. Темизация может стать утончённым приёмом, который привлечёт внимание и улучшит пользовательский опыт на вашем сайте, делая его более адаптивным и внимательным к предпочтениям пользователей.

Alt картинки:
Вкладки браузеров Chrome, Firefox, Edge, для светлой и тёмной тем, показывающие адаптацию фавиконки на MacOS

Alt text: A well-known template from the 1960s Spider-Man cartoon with multiple Spider-Men pointing at each other. The text at the bottom of the image reads, "Who should do a11y," referring to the responsibility for accessibility. Each Spider-Man is labeled with a different role or tool related to web development and accessibility: Auto Tools, Designer, Content, QA, Developer, PM, AI.

[1/2] Мой путь к сертификации CPACC 🎓🚀

В конце прошлого года я задумалась о получении сертификации CPACC от IAAP. Это стало одной из целей на 2024 год. В октябре состоялся экзамен, и вот на прошлой неделе я наконец-то получила имейл, что успешно сдала 🎉
Решила, что это отличный повод написать в канал.

Что такое IAAP и CPACC? 🌐

IAAP — это Международная Ассоциация Профессионалов по Доступности (International Association of Accessibility Professionals). IAAP занимается поддержкой и развитием профессионалов, предоставляя обучение, сертификацию и ресурсы для специалистов, работающих над улучшением доступности для людей с инвалидностью.

Сертификации IAAP, такие как CPACC, WAS, ADS, CPABE, подтверждают знания и навыки специалистов в определённых направлениях доступности и являются авторитетным знаком качества в этой сфере.

Certified Professional in Accessibility Core Competencies (CPACC) — это базовая профессиональная сертификация. Её релевантные области включают веб и другие цифровые технологии, архитектуру и инфраструктуру, потребительский и промышленный дизайн, транспортные системы и любые другие сферы, где продуманный дизайн, общий подход, принципы и управление могут улучшить доступ для людей с инвалидностью.

Эта сертификация демонстрирует, что специалист обладает широкими междисциплинарными знаниями о: инвалидности, доступности и универсальном дизайне, а также о стандартах, законах и стратегиях управления, связанных с доступностью. Сертификация CPACC подходит для тех, кто управляет и поддерживает доступность, но не занимается лично разработкой, внедрением или оценкой технических деталей доступных решений.

Почему я решила сдать 💪

Потому что могу 😼
На самом деле, для европейских вакансий в области доступности (аудитор, Digital Accessibility Specialist, Accessibility Engineer) наличие сертификата является огромным плюсом. Ну, и я надеялась преодолеть синдром самозванца 😅

Об экзамене 📝

Более подробно можно почитать на сайте IAAP, но кратко:

• 100 вопросов, 4 варианта ответа, только один правильный (интересный факт: такой формат называется Multiple choice, а не Single choice, как можно подумать)
• Официальный язык — American English. Можно запросить дополнительный час в качестве accommodation, если английский не родной
• Стандартно — 2 часа, но я взяла дополнительный час, который оказался очень полезен
• Запрещено пользоваться какими-либо вспомогательными материалами
• Сдавать можно удалённо либо в центре. Я выбрала центр. Назначила время на сайте. В аудиторию для сдачи можно заходить только с документом, удостоверяющим личность, и, по специальному запросу, с бутылкой воды (прозрачной и без этикеток)
• Стоимость $485 из Нидерландов. IAAP предоставляет скидку для резидентов стран из списка Emerging & Developing Economies

Общие впечатления 🤔

Уже сдававшие знакомые говорили, что это самый простой из всех возможных экзаменов для сертификации. Требования минимальные: 1 год опыта в области доступности или новая/изменяющаяся роль с определённой ответственностью в этой сфере (например, для WAS уже требуется 3 года опыта и много чего ещё). Описание экзаменационного материала больше про общие концепции, чем про конкретные техники реализации или тестирования. Я называю такой материал более “гуманитарным”. А так как мой мозг больше заточен на формулы, запомнить материал подобного плана мне было, скажу откровенно, нелегко: “понять — вроде поняла, но вот пересказать это — вряд ли”.

[2/2] Мой путь к сертификации CPACC 🎓🚀

Как я готовилась 📚

Долго, с большими перерывами 😬 Подготовку я начала в феврале, тогда мы как раз собрали чатик нашей “группировки”, кто хотел сдать экзамен. В свободное время я размеренно изучала материал, используя:

• Body of Knowledge
• Deque online CPACC preparation course (платная подписка)
• Писала собственные конспекты по некоторым темам
• Регулярные созвоны с группой для обсуждения
• Разные наборы карточек на Quizlet — очень редко, не совсем мой метод. Мы с группой проводили несколько сессий, где проходили карточки вместе
• Использовала ChatGPT для генерации тестов по теме — полезно для проверки понимания выученных концепций
• Искала видео по определённой теме или наглядные примеры, чтобы лучше запомнить и создать визуальную связь с прочитанным. Много живого контента можно найти в TikTok и Reddit – так я узнала про tactile sign language, например.
• Посмотрела весь плейлист подготовки к CPACC Африки и Дорлин – во время готовки, укладки волос, на фоне любых бытовых дел.

Ещё мне для поддержания мотивации помогало почитать статьи/посты тех, кто уже сдал экзамен. Очень рекомендую Prepare for the CPACC (or any) Exam — Strategies for Learning Success by Jen Blatz (есть и в формате видеопрезентации), так как там есть примеры визуализации некоторых тем — я бы не выучила все стандарты и законы без этого!

Для меня работал подход изучения по спирали: сначала я проходила тему в одном источнике, например, курсе Deque, затем смотрела видео или перечитывала BOK, чтобы повторить уже известное и подхватить новую информацию. В зависимости от того, насколько мне была интересна тема, такие итерации я проводила подряд либо уже непосредственно перед экзаменом повторяла какой-то раздел второй раз.

Кажется, с февраля по октябрь — очень долго, но это у меня так вышло, т.к. мы особо не спешили с группой сдавать экзамен, где-то в этом же таймлайне я выступила с докладом на саммите, проходила интервью и просто выгорала на работе. IAAP рекомендует тратить 5–10 часов в неделю в течение 6–8 недель на подготовку.

Результаты 🌟

Результаты объявляют не сразу. Проходит экзаменационная сессия, и с последнего её дня подсчёт результатов занимает 4–6 недель. Я сдавала экзамен 2 октября и получила долгожданный имейл 7 ноября. IAAP использует модифицированную методологию Ангоффа (Angoff Methodology) для определения проходного балла (cut-score). Для CPACC необходимо набрать минимум 600 из 800 баллов для успешной сдачи. Я набрала 716 баллов ☺️
Осталось подождать ещё 2–3 недели, пока мне пришлют PDF сертификата и бейдж для LinkedIn, чтобы обновить био: “Anastasiia Batarei, IAAP CPACC” 💫

Сегодня поделюсь двумя историями.

Первая – про название этого канала, HTML cry. За годы работы во фронтенде, особенно с фокусом на вёрстку, я видела столько кхм… интересных решений в продакшне, что иногда хотелось то ли кричать, то ли плакать. Так и появилось это название. Имя я зарезервировала давно, но идею публикации криповых код-сниппетов так и не реализовала. А черновики имеются! Надо завести отдельную рубрику #HTMLcry 🥲

Вторая история – про то, что одну долгую дискуссию под лозунгом “Это дефолтное поведение браузера, мы ничего больше не можем сделать (даже погуглить две минуты)” я всё-таки решила использовать и написать заметку, которую скоро опубликуют в одном из моих любимых проектов. Это прям неожиданный хайлайт года! 💫
Всё было по канону: прокрастинация ночами, пропущенное мероприятие, чтобы успеть к дедлайну, скрипучее складывание мыслей в текст, редактура и обещание больше ни за что за такое не браться – классическое “два часа работы, растянувшиеся на два месяца” 😅
Но в итоге – получилось, и я очень рада!

✍🏻 Написала свой первый блог-пост! 🎉

Сегодня он опубликован в 13-ой ячейке HTMLHell Advent Calendar.

После переезда в Нидерланды я стала активным пользователем функции автоперевода в браузере, поэтому написала заметку о небольшом код-сниппете, который поможет улучшить пользовательский опыт.

Improving User Experience for Multilingual Web Browsing

P.S. Ну, и предысторию вы знаете 😈