Chat App CSS Illustration

Hi!

1. I don't think using role="presentation" on a div is the correct way to use this attribute. I myself never used it, but what I understood from what I googled about it is that it should be used on elements with semantic meaning to remove that meaning. So, it has no sense to use it on divs.

Also, this attribute affects not only the element it's applied on, but the children of that element too, and you used this attribute on every div.

In my opinion, the better solution to hide the chat app illustration from assistive technologies would be using aria-hidden="true" on the parent element (the element with .phone class in your case).

I recommend you take a look at this article (or the article on MDN) if you want to learn more about presentation role.

1. I don't know how much experience you have with CSS, but your .msg-user-two class is weird. It's not easy to understand why all those properties is used. The positioning of the chat messages on the right and on the left could have been done with a few lines of flexbox, example below:

.message-exchange {
  /* your code... */
  display: flex;
  flex-direction: column;
}

.msg-user-two {
  align-self: flex-end;
}

Much simpler.

1. You can build pixel perfect (or maximally close to that) solutions by using PerfectPixel extension for Chrome.