Code Monkey home page Code Monkey logo

a11y-blog's Introduction

Hi, this is Tanya

I'm a web accessibility specialist and enthusiast who like to developing user-friendly interfaces. Obviously, my true passion is web accessibility (or a11y for short.) Even I focus more on web accessibility front-end and web development aren't strangers to me.

Facts about me 👩‍💻

  • Editor and front-end developer at Doka, open-source handbook for the Russian-speaking tech community
  • Technical writer, focusing on accessibility and web development
  • Open-source contributor
  • Podcast creator, have a lot to say about accessibility
  • Mentor who help other developers
  • Philomath and bookworm, love to learn new things about the web and help others learn.

Skills ⚙️

A prolifient PC user, know how to open Microsoft Word, send an email via Outlook…

Accessibility: WCAG, WAI-ARIA, WCAG-EM, assistive technologies (text-to-speech, speech-to-text, magnifiers), manual and automatic testing/evaluation, accessibility maturity models; US, EU and Russian legislation.

Core languages: HTML, CSS, JavaScript, jQuery (hello, my dark past.)

Frameworks and templating engines: Angular, Next.js, Nunjucks.

CSS preprocessors: SCSS, Sass, Stylus.

HTML preprocessor and static site generators: Pug, 11ty.

Builders: Gulp, Parcel.

Other: Basics of UX/UI (I've even read Don't Make Me Think), usability, and universal design; Git, BEM, closed captions, text transcriptions, wrote somehow on TypeScript.

My bonus non-professional superpower is dog and cat whispering 🐈.

Writings, translations and talks 🖊️

My other passion is tech writing. I bet you've already guessed my favorite topic, ha-ha. If not, I can give you a clue: The topic contains two letters “a” and “y” divided by the number “11.” If you are curious about it, check the list of my writings and translations or go to my personal blog.

Sometimes I realize that I can talk and have talks (as you can see, my logic is bulletproof.) A few years ago, I was a co-organizer of the first Russian-speaking meetup on accessibility pitera11y_meetup. I have experience being a speaker and, at the same time, a person who aren't sleep a wink because of organizer's duties. You need to find a place for an event, bring speakers, review their talks, slides, and so on. Pretty stressful duty!

Podcasts 🎙️

In April 2023, I decided it wasn't too late to start my own podcast. This is how the first Russian-speaking podcast about accessibility and inclusion, titled Inclusive Pineapple (because why not?), was created. Of course, I'm not alone. Glasha Zhur, my incredible co-host and an accessibility lead from Semrush, joins me.

I prepare topics and materials for discussions, record the audio, assist with audio mixing, transcribing, captioning, and update the podcast website… In short, I handle all typical podcaster tasks.

Occasionally, I appear as a guest on other tech podcasts, such as the Web Stadards Podcast. It's one of the most popular Russian-language podcasts with 28.2K subscribers on YouTube.

Currently learning 🎓

  • Preparing for IAAP CPACC certification
  • New CSS features (because there are a lot of them, so hard to stay updated)
  • How JavaScript works on a deep level
  • Automated testing
  • How to debug efficiently, like a ninja

And the last but not least, how to survive in this world as a late-diagnosed autistic adult 🙃.

Get in touch 🫰

a11y-blog's People

Contributors

tatianafokina avatar vasiliy-dudin avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

a11y-blog's Issues

Опечатка в статье: Внешний вид фокуса

Представим, что у кнопки радиус 100 пикселей. В этом случае умножаем 3.14 на 2 и затем на 100. Получаем 314 пикселей. В этом случае внешняя рамка может быть шириной 1 пиксель, так как эта область получается больше минимальной. А вот рамка внутри круглой кнопки уже должна быть минимум 2 пикселя.

При 3.14 * 2 * 100 должно получиться 628. Наверное, забыли умножить на 2.
Но, может, я неправильно понял что на что умножается, поэтому вместо PR - Issue.

Вопрос к статье: Внешний вид фокуса

Есть небольшой вопрос по поводу обяхательности критериев. В кратком описании

Когда элемент интерфейса получает фокус с клавиатуры, индикатор фокуса должен:
обводить элемент;
иметь соотношение контраста минимум 3:1 между одними и теми же пикселями в состоянии фокуса и без него;
иметь соотношение контраста минимум 3:1 по отношению к соседним цветам.
Область индикатора фокуса должна:
быть толщиной на 1 CSS-пиксель (дальше просто пиксель) больше минимальной области элемента или больше 4 пикселей, если индикатор равен самой короткой стороне элемента;
иметь соотношение контраста минимум 3:1 между одними и теми же пикселями в состоянии фокуса и без него;
иметь соотношение контраста минимум 3:1 по отношению к соседним цветам или быть толщиной 2 пикселя и больше.

и потом дальше в списке критериев

в первую очередь со сплошным начертанием;
полностью обводит или окаймляет элемент;
...

все критерии звучат как обязательные к выполнению одновременно.

При этом дальше в примерах есть, например, кнопка с пунктирной обводкой, что явно не соответсвует сплошному начертанию.

В спецификации над двумя группами критериев для индикатора и области индикатора написано

one or both of the following are true.

И в таком случае пунктирная обводка имеет право на жизнь, если соответсвует хотя бы второй группе критериев, которые рассчитаны на область индикатора.

Вообще выглядит так, что критерии контрастности одни и те же, а дальше есть вариант либо обводка может быть какой угодно толщины, но при этом сплошной. Либо какой угодно по "начертанию", но иметь определенную площадь.

Если я правильно понял спецификацию, могу попробовать обновить текст

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.