tower4.png

A story about how we created a GOST-compliant version of a website in collaboration with Goose Gaming. All for a competition by the presidential platform "Russia — Land of Opportunities" for gaming industry talents. We share the pitfalls that arise when adapting a website for people with disabilities.

<h3>How We Built a GOST-Compliant Website with Goose Gaming</h3>

<img src="/uploads/prevyu_5a1c594efd.png" alt="превью.png" />

<p>
  When Goose Gaming approached us to create an accessible version of their gaming website for a
  talent competition hosted by Russia's presidential platform "Russia — Land of Opportunities," we
  knew we were taking on something special.
</p>
<p>
  We won't bore you with the official GOST requirements—Russia's state standards for web
  accessibility. Here's a quick list: we needed to work on settings for the visually impaired —
  develop speech synthesis, change font size, increase contrast. At the same time, ensure the site
  can be navigated via keyboard and that there are no time limits for properly perceiving and using
  the content.
</p>
<blockquote>
  We're happy to participate in a socially significant project, as companies rarely think about
  special versions of websites. Because of this, people even with common conditions cannot use
  products without assistance.
</blockquote>
<p>Julia Semenchuk, Head of Development and Product Management at Mish.</p>

<h3>We Created the Problem — We Solved It</h3>

<p>
  Interface accessibility depends on design. Initially, it consisted of broken, intersecting
  elements and we liked it. But when we started adapting the site to GOST standards, the beauty
  broke. Tabs and buttons stopped highlighting from the keyboard. This is because the broken design
  was achieved by cutting off the excess part of the element, and the focus outline fell under the
  cut-off element. A unique experience for us, but not for our frontend developers. They complained
  a lot since they had to redo everything, so consider requirements at the design development stage.
</p>
<img
  src="/uploads/Sami_problemu_sdelali_sami_reshili_46105ccc40.png"
  alt="Сами проблему сделали — сами решили.png"
/>

<h3>How We Coded It</h3>

<p>
  First, we needed to work out the order of elements. On tablets, mobile versions, and desktop, they
  should be arranged in the same order, not shift or blur. Therefore, we used responsive layout and
  designed several mockups for main device resolutions.
</p>
<p>
  After that, we concentrated on creating ARIA attributes, which allow explicitly indicating what
  state the menu is in and adding readable text to graphic elements. In general, they help screen
  readers more accurately read the site, context, quotes, buttons, links, describe images, icons,
  etc. However, ARIA attributes need to be used consciously and not overdone, so as not to
  complicate screen readers' work.
</p>
<p>
  <em>
    Screen reader is a program that converts interface content into speech or Braille. They are
    needed by people with blindness and visual impairments, as well as users with cognitive features
    who find it easier to perceive information by ear. For example, people with dyslexia.
  </em>
</p>
<p>
  Of course, we couldn’t skip using semantic tags — they’re essential for proper SEO optimization.
</p>

<h3>Set Up and Save</h3>

<p>
  It's very convenient when special version settings are saved when revisiting the site, but there
  are cases when several people use one computer. Therefore, during development, such a scenario
  appeared: when a user enables the special version of the site, they see it in the state they
  configured it. Font size, line and letter spacing, color scheme are saved. But when revisiting the
  site or reloading the page, the special version is disabled so the current user can decide whether
  they need the special version or not.
</p>

<img src="/uploads/Nastroj_i_sohrani_59d509911c.png" alt="Настрой и сохрани.png" />

<h3>What About Images?</h3>

<p>
  GOST requires that the site has a function to disable images while preserving text content and
  voice-over. This way, users with impaired perception of small and bright images will find it
  easier to use the site.
</p>
<p>To describe how we did this, we'll tell you a bit of technical details, get ready:</p>
<ul>
  <li>
    Using a custom hook, we set default parameters for the special version and placed them in local
    storage by key.
  </li>
  <li>
    Then, thanks to a wrapper component in which we place the entire application. We passed
    parameters and a handler for changing them through context.
  </li>
  <li>
    We implemented the logic for finding all DOM elements corresponding to required conditions and
    assigning them necessary CSS properties in a separate custom hook.
  </li>
</ul>
<p>Ultimately, we simply call the hook on all application pages where images need to be hidden.</p>
<img src="/uploads/Kak_byt_s_kartinkami_97cc4ec4d2.png" alt="Как быть с картинками.png" />
<p>
  To pull off this scenario, we had to work through all possible cases of image usage on the site's
  pages, which took quite a bit of time. We handled each case in a specific way in terms of
  assigning or removing CSS properties. Additionally, we needed to designate some images as
  exceptions, as they should always remain visible to the user to keep the interface convenient and
  readable. For such cases, we added a special data-attribute to the images, which made them ignored
  when the "No Images" mode is enabled
</p>

<h3>Monochrome and Its Companions</h3>

<p>
  When creating the design for the accessibility version, it's crucial to adapt it for the most
  common vision problems. To achieve this, we developed monochrome variants, the ability to change
  font sizes, toggle images and sound on/off, and more. We also paid significant attention to hover
  effects and highlighting active tabs. We didn't forget about the order of elements either,
  ensuring it remains consistent across different resolutions—failing to do this would inevitably
  create difficulties when using screen readers and keyboard navigation.
</p>

<img src="/uploads/Monohrom_i_ego_druzya_37b53d239f.png" alt="Монохром и его друзья .png" />

<p>
  All browsers have built-in solutions for keyboard navigation, and we wanted to use them. However,
  over time we realized that standard libraries incorrectly displayed the broken design; the outline
  was crooked or didn't display at all. So we had to get a bit creative.
</p>
<p>
  To create complex object shapes, we used a CSS property called Clip-Path. It allows you to hide
  part of an element by creating a clipping region around it. But when it came to creating the
  accessibility version, another problem emerged. When trying to highlight an element using the Tab
  key, the outline still wouldn't display. To solve this issue, we created pseudo-elements and
  placed them over the elements that needed to be highlighted.
</p>
<blockquote>
  It's generally a good practice for any website, not just accessibility versions, to be keyboard
  accessible. If semantic tags are written correctly, 95% of this work pays off.
</blockquote>
<p>Maria, frontend developer at Mish</p>

<h3>How We Optimized the Workflow</h3>

<p>
  At our agency, we like everything organized; it simplifies work. Therefore, it made sense to
  organize the process when configuring site parameters so we wouldn't have to run around the entire
  project. For example, if we had developed all buttons from scratch, we would have had to make
  changes to each one when configuring the site.
</p>
<p>
  So we extracted the button into a component and added a special state. In it, we specified
  conditions and embedded all the information about how the element should look when the
  accessibility version is enabled. This allowed us to write all requirements in just one file
  without having to go through all the others. But this is standard practice: we create components
  on all projects and extract them into a separate library. It is convenient and speeds up the
  process.
</p>
<p>
  The site contains a lot of text that changes when the accessibility version is enabled, font size
  and letter spacing increase. Therefore, we handled text blocks the same way as buttons—we created
  a component that specifies all necessary parameters. Now, when switching to the accessibility
  version of the site, the component automatically commands all files. As a bonus, this feature
  makes it easy to add site narration.
</p>

<img
  src="/uploads/Kak_my_optimizirovali_rabotu_e014821f1e.png"
  alt="Как мы оптимизировали работу .png"
/>

<h3>What Conclusion Can We Draw?</h3>

<p>
  Challenges make you stronger, for example unusual requirements you're not prepared for, short
  implementation deadlines, and limited budgets. In such situations, you can only rely on experience
  and your team. Therefore, read requirements carefully and don't be afraid to improvise and add
  useful functionality that will improve user experience.
</p>
<p>
  Meanwhile, the first season of the "Start the Game" project has already ended. The finalists went
  to Kazan, predented their projects, and received financial support. The creators are preparing for
  a new stage of the competition so that those who didn't have time to participate in the first
  round or didn't pass the selection can try their luck in the second. We're adding new mechanics
  and tasks to ensure nothing prevents participants from reaching the finals.
</p>


GOST Busters: How We Developed a Custom Version of “Start the Game”

Силаев Герман

Семенчук Юлия

Скосырская Мария

Frame 1171274527.png

One day, our Middle Developer Vitalik decided to rewatch Spider-Man and realized that the main character’s journey was remarkably similar to his own. The next day, he excitedly told us about it, and we asked him to write an article. So, why are IT specialists a kind of Spider-Man too?

<h3>
  Perhaps we could have chosen another superhero movie, but let’s break it down using this one as an
  example.
</h3>
<p><strong>Any movie of this genre follows the same structure:</strong></p>
<ul>
  <li>The main character is basically a loser and doesn’t know what they want to be.</li>
  <li>Their life is falling apart, and they realize they need to do something about it.</li>
  <li>
    They turn to a mentor and learn an important lesson (with great power comes great
    responsibility).
  </li>
  <li>An event gives them superpowers. The hero enjoys their newfound strength.</li>
  <li>
    A critical situation occurs (death or injury of a loved one, for example); the character
    initially gives up but then realizes it’s time to take control.
  </li>
  <li>
    The hero grows and becomes who they wanted to be, thanks to self-belief and support from loved
    ones.
  </li>
</ul>
<p>
  Doesn’t this resemble the path into IT before landing your first job? If you don’t see the
  similarities, let’s dive in deeper.
</p>
<img src="/uploads/Bez_nazvaniya_6effda991f_a5feb5351b.png" alt="Bez_nazvaniya_6effda991f.png" />

<h3>Step One: Life “Before”</h3>
<p>
  So, you’re an ordinary person, studying in school or university, and in your free time, you’re
  glued to your computer. People around you constantly ask what you want to do in the future and
  what you want from life. You don’t know exactly, given your age, but you suspect it will involve
  computers. Computers are interesting: there are web browsers, games, videos, and all kinds of fun
  stuff — you want to work in this world, but you don’t know in what role.
</p>
<p>
  Time passes, but you can’t make a choice. You try video editing, making music, writing articles,
  and other cool stuff, but nothing feels right. However, by learning new skills, you learn how to
  learn. You don’t have money for courses, so all information comes from Google, YouTube, and other
  open sources. You figure some things out on your own. Each day, your confidence that you should
  work with computers grows.
</p>
<p>
  Or imagine a different scenario: you’re already an adult, but your life isn’t satisfying. You
  don’t like your job, the pay is low, your professionalism isn’t appreciated, and your colleagues
  only talk about kids and household chores. It all starts to feel frustrating. You want a different
  life and feel capable of more.
</p>
<img
  src="/uploads/Bez_nazvaniya_1_79aeb3fdd0_e1b49e4458.png"
  alt="Bez_nazvaniya_1_79aeb3fdd0.png"
/>

<h3>Step Two: Crisis</h3>
<p>
  You reach the end of school or your first year at university, and the skills you’ve accumulated
  weigh on you: with so many possibilities, you don’t know what you want. You face choices:
</p>
<ul>
  <li>Videomaker</li>
  <li>Journalist</li>
  <li>System administrator</li>
  <li>IT support</li>
  <li>Designer</li>
</ul>
<p>
  Perhaps you make a mistake and choose one of these paths, hoping that university will help you
  grow and become a professional.
</p>
<p>
  Or you give up on that and become a programmer because you’ve heard they earn huge salaries and
  are generally awesome — but it’s completely unfamiliar to you; maybe math has always been your
  enemy.
</p>
<p>
  At university, you’re taught some really strange basics: data structures, algorithms, binary
  systems, lots of theory about memory and how computers process data — all supposedly important. In
  practice, though, this knowledge is mostly useless. How to create your own Facebook, write a
  cookie clicker, or build a new Tinder? University doesn’t tell you.
</p>
<p>
  As an adult, it’s unclear how you could leave a comfortable job for vague prospects. You feel
  anxious about failing because information is harder to absorb, risks seem scary, and it’s tough to
  decide what to retrain in. Diving into a new field from scratch is intimidating. On top of that,
  balancing work is difficult: studying takes time and effort, and with a full-time job, you barely
  have a couple of hours a day for learning (forget about family). So time passes, you’re stuck in
  anxiety, blame yourself for indecision, but are too scared to act.
</p>
<img
  src="/uploads/Bez_nazvaniya_2_7f32aac4fc_69f1651210.png"
  alt="Bez_nazvaniya_2_7f32aac4fc.png"
/>

<h3>Step Three: Mentor</h3>
<p>
  At university, you meet an interesting guy who really works as a programmer and earns a lot of
  money. He shares his experience and tells you how he got there. Maybe he’s a geeky overachiever
  who’s been learning Pascal since childhood. Or maybe he’s a 200 IQ genius who just watched YouTube
  courses and now codes like a pro in any language.
</p>
<p>
  Or, while searching for a homework solution, you come across an article about getting into
  programming, get hooked, and decide to try. A programmer friend gives you advice on what to focus
  on and how to pass interviews.
</p>
<p>
  If you’re an adult, you might reconnect with a school friend who used to tinker with computers and
  is now earning a huge salary as a programmer. Inspired by their example, you see an ad for a
  course and finally decide: it’s time.
</p>
<img
  src="/uploads/Bez_nazvaniya_3_0717eb5919_3b99a15965.png"
  alt="Bez_nazvaniya_3_0717eb5919.png"
/>

<h3>Step Four: Gaining Power</h3>
<p>
  You start diving into the subject, and the more information you absorb, the more confident you
  feel: everything works, tasks rarely require deep knowledge, and new skills come easily. You just
  do interesting work in the evenings after studying or work. This is the moment of gaining
  superpowers — for you, there are no obstacles. You realize you can Google anything, solve any
  problem, and enjoy it. People ask you for advice, even to fix minor issues, and you start
  understanding IT humor. Your new profession feels like a blessing.
</p>
<p>
  <img
    src="/uploads/Bez_nazvaniya_4_d1a86fa449_d10cffd6ef.png"
    alt="Bez_nazvaniya_4_d1a86fa449.png"
  />
</p>
<p>
  Energized by success, you’re determined to get a job. But first, you need to organize your
  knowledge, see what interviewers ask, and understand requirements for test assignments — all
  tedious. You also notice that you keep using the same techniques from project to project, no real
  growth. But it seems minor: if all lines and methods are similar, why reinvent the wheel?
</p>
<p>
  Putting doubts aside, you go to your first interview, thinking they’ll snatch up a talent like you
  right away.
</p>
<img
  src="/uploads/Bez_nazvaniya_5_abf89e1c7e_6328e77648.png"
  alt="Bez_nazvaniya_5_abf89e1c7e.png"
/>

<h3>Step Five: Failure</h3>
<p>Your first interview is a complete failure.</p>
<p>
  You discover your knowledge is useless; you should have studied based on job requirements, not
  online articles. You lack real skills or have only the basics. You get rejected repeatedly, and no
  one hires you. Beaten and desperate, you crawl back to your “den,” unsure of how to move forward.
</p>
<p>
  Now comes reflection. What’s next? Neither YouTube, Google, nor courses help anymore. The
  situation seems hopeless.
</p>
<p>
  Then you remember the person who inspired you to become a programmer. Or a friend who’s been in IT
  for three years. You reach out, and they kindly tell you it’s not time to give up — here’s a plan.
  You improve the necessary skills, ask for detailed feedback after interviews, complain to your
  loved ones about how hard it is, and they support you and celebrate every success with you.
  Gradually, you regain confidence that you can achieve your goal.
</p>
<img src="/uploads/Bez_nazvaniya_4734f2bbde_3406a77cfc.png" alt="Bez_nazvaniya_4734f2bbde.png" />

<h3>Step Six: Success</h3>
<p>
  Your old code now seems terrible, projects become more meaningful, you build an impressive
  portfolio, and after thirty interviews, finally — the thirty-first is a success! Pop the
  champagne: our hero has finally landed the desired job. A happy ending worthy of a superhero
  movie.
</p>
<img
  src="/uploads/Bez_nazvaniya_2_0237efb417_43d7d5cfba.png"
  alt="Bez_nazvaniya_2_0237efb417.png"
/>

<p><strong>Key Takeaways</strong></p>
<p>
  Trying to see if you have what it takes to be Spider-Man? My answer: yes, you are Spider-Man. Why?
  Because you fell a hundred times and got back up a hundred times. You faced difficult problems and
  solved them repeatedly. You learned not to give up and to fight to the end.
</p>
<p>
  Who will pick up production after a junior drops it? Who will configure servers so clients can see
  results? Who will repaint that button red on the homepage if not you? Exactly — no one. You took
  responsibility for your employer, client, and yourself. That’s why you cannot fail at the next
  challenge; every project must be more complex, implementation simpler, algorithms shorter, and
  memory usage smaller.
</p>
<p>
  Each of us is a Spider-Man who, despite challenges, handles them and learns to live with them.
  You’ve struggled a hundred times over a hundred years, yet you never think of quitting because the
  feeling of swinging on your web (solving a problem) is why you became a developer.
</p>


Stories

hello@mish.design

Moscow

Nizhny Novgorod