Create inclusive designs with Stark
"Check Contrast" tool by Stark used in Figma

Create inclusive designs with Stark

As a developer, you often get design templates that are supposed to be implemented pixel-perfectly. Why this approach to work has become so established is a mystery to me, since no one consumes websites in Figma, Adobe XD, Sketch and the like.

Sticking to a design that is consumed on different devices, with different operating systems, with different screen sizes and different user behaviour is unrealistic. It leads to the fact that a lot of media queries have to be written and various edge cases have to be considered, so that it looks exactly the same in the Internet Explorer (rip) at company XY.

What would be an alternative? Instead of considering design templates as set in stone, they should rather be seen as guidelines. In other words, we don't dictate to the browser how it should look, but rather pass these guidelines on to it. Only a browser knows what device, operating system, screen size, and user behaviour it is dealing with. We don't. Therefore, it should decide how content is displayed. ??

This does not mean that designers should not let their imagination run wild. It just means that they shouldn't expect it to look exactly the way they want it to look to the user, but that it can look that way. AND NOW TO THE ACTUAL TOPIC:

Stark not only offers a very well-maintained public library on accessibility, but also the following tools for designers:

  • Vision Simulator
  • Check Contrast
  • Focus Order
  • Landmarks

Designs that would be created with accessibility in mind pave the way to an easy to use end product and less questions and head shaking during development. If you're a designer and have made it to the end of this article: check it out, it's a real blast to use Stark's tools.

要查看或添加评论,请登录

?? Steve Frenzel的更多文章