Thoughts on coding chats

A typical conversation starter. It does need proper markup though. (screenshot of the original implementation, discussed below)

Chats are hard to code. Apparently there are no common best practices or common standards.

For my work at tripla, I needed to create a chat interface, which has a conversational, question and answer based interface, as well as actions, similarly to what you would find on Facebook, and other platforms.

Researching this, I found there is no common standard. There once was a <dialog /> element in HTML(5.0), but it never saw the day of light; before that we had the idea of using <dl /> (see What it should not be used for), leaving us with some wonky recommendations. (Example 9 would work in a flat conversation, but appears to not be applicable in this case.)

As chat widgets become a more and more a common occurrence, let me share my insights and approach in hopes it will help others.

The following were my requirements as I tried to find a sustainable solution:

• needs to clean and accessible code
• needs to be expandle
• needs to as accessible as possible (it works, but I need to put more effort into it)
• needs to work effortless with vue.js (the whole widget is a vue app)
• no div soup

First of all, what is that others are doing?

• Intercom: div — soup
• FB messenger: div — soup, but they at least use the <time /> element
• GetSiteControl: div soup with customised elements (they use a <w-div />, which I assume is based on some JS framework and utterly destroys any meaning a div might have)
• Chatwee: div soup (also, I have never heard of them before…)
• Slack: div soup with some inline elements

Nah, son!

Looking around for other possible solutions I compiled the following list for discussion with the companies Front End developers:

Using <blockquote />

Using <blockquote /> would only make sense, if we were quoting from other sources. This would work, whenever we want to repeat back what a customer has chosen (for example in an action), but it is not scalable as a general element to wrap each conversation piece. Plus, if we need to quote, a simple <q /> would suffice.

Also, always repeating the action a customer has taken is not great, as it does not make a for lively conversation.

Using <article>

From MDN:

The HTML <article /> element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry.

I took issue with independently distributable, because this is not the case. Pieces of a conversation are very quotable, but do not make sense as standalone content. Furthermore the html spec states:

A general rule is that the article element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

I did not feel this is the case here. On the one hand, the widget itself is not indexable. And on the other we do not create an archive, but an active conversation. Hence, this does not really meet requirements.

Finally: Using <figure />

To quote MDN:

The HTML <figure /> element represents self-contained content, frequently with a caption (<figcaption />), and is typically referenced as a single unit.

It is not perfect, because a piece of a conversation is hardly self-contained, but in combination with the group role, it should be good as we can use it for widgets as well:

Authors SHOULD use a group to form logical collection of items in a widget such as children in a tree widget forming a collection of siblings in a hierarchy, or a collection of items having the same container in a directory. [...]

Following this research and some discussions with our main Front End developer, we settled on this:

<figure role="group">
  <p>Here is a chat message from us.</p>
  <ul>
    <li>add actions, sliders, etc.</li>
  </ul>
  <figcaption>Name of Chatbot &ndash; <time datetime="2018–04–27T13:32:05">13:32</time></figcaption>
</figure>

<figure role="group">
  <p>Customer message</p>
  <figcaption><time datetime="2018–04–27T13:32:05">13:32</time></figcaption>
</figure>

Since a sizeable amount of messages includes images, <figure />was an obvious solution.

It does give the chats a much needed structure and with proper aria-roles, the whole thing is more accessible then not.

You can see it here in action, as well as in other places. It is not yet perfect and we do need to conduct more testing with text to speech, but it is on the right track.

If you know of or are coding a semantic & accessible chat widget, let me know here or on twitter. I am eager to learn more. 😄