This presentation will look at how to build accessible chat windows. Along the way we will explore: how they differ from traditional modals, how to manage focus, how to manage dynamically updating content for assistive technologies and more. The session is designed for developers and coders.
32. Welcome to live chat
Type your message here…
Chat window
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Message:
33. Welcome to live chat
Type your message here…
Chat title
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Message:
34. Welcome to live chat
Hi!
How may I help you?
Type your message here…
Can I ask about costs?
Close button
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Message:
35. Welcome to live chat
Type your message here…
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Optional collapse button
Message:
36. Welcome to live chat
Type your message here…
Conversation window
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Message:
37. Welcome to live chat
Type your message here…
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Operator name and time
Operator messages
Message:
38. Welcome to live chat
Type your message here…
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm User name and time
User message
Message:
39. Welcome to live chat
Type your message here…
Form label
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Message:
40. Welcome to live chat
Type your message here…
Form input
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Message:
41. Welcome to live chat
Type your message here… Submit button
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Message:
42. Welcome to live chat
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Type your message here…
Optional add attachments
Message:
59. We’ll now look at how chat
windows can affect four different
people.
60. These example user pro
fi
les are
taken from the Gov.UK disabilities
and impairments user pro
fi
les.
https://www.gov.uk/government/publications/
understanding-disabilities-and-impairments-user-pro
fi
les
62. Claudia is a person who is partially
sighted. She uses a screen magni
fi
er
so that she can enlarge the overall
display.
63. Claudia has her magni
fi
cation set to
an extreme setting, which means she
can only see a small section of the
screen at a time.
64. Problem 1:
If Claudia triggers the <button> and
focus doesn’t shift to the chat
window, she may not be aware that
the chat window has been activated.
65. Problem 2:
Claudia may not see messages from
the operator if actions take place
off-screen.
66. Things to consider:
For Claudia, proximity is the key. If
she triggers an action, the result
should appear in close proximity to
the trigger.
68. Christopher is a person with
rheumatoid arthritis. He prefers to
use a keyboard to avoid mouse
movements which can impact his
condition.
69. Problem 1:
If the <button> is one of the last
items in tabindex order, it may take
many keystrokes for Christoper to
navigate to this element.
70. Problem 2:
If focus doesn’t shift from the
<button> to the chat window when
it has been triggered, Christopher
may not be able to interact with the
chat window at all.
71. Problem 3:
If interactive functions within the
chat window are not accessible via
keystrokes, Christopher will not be
able to interact with them.
72. Things to consider 1:
Christopher should be able to bypass
blocks of content to access the chat
window trigger.
73. Things to consider 2:
All interactive elements in the chat
window must be completely
keyboard accessible without a
mouse.
74. Things to consider 3:
Focus must be visible on every
focusable element so that
Christopher can track what is
currently in focus.
76. Ashleigh is a person who is legally
blind. She uses a screen reader to
navigate websites.
77. Ashleigh is also a keyboard-only
user, as she does not use a mouse. So,
many of the issues mentioned for
Christopher also apply to Ashleigh.
78. Problem 1:
Ashleigh needs to know that the page
contains a chat function. Otherwise,
she may not even know that it exists.
79. Problem 2:
The purpose of the <button> needs
to be clearly de
fi
ned. For example, if
it just says “Chat”, this may not
provide enough context for Ashleigh.
80. Problem 3:
When focus shifts to the chat
window, Ashleigh may not know
what has happened. All she knows is
that focus has shifted somewhere
else on the page.
81. Problem 4:
If interactive elements within the
chat window don’t have clear labels,
Ashleigh may not understand their
purpose.
82. Problem 5:
If the operator submitting a new
message, Ashleigh may not be
informed that this has occurred.
83. Problem 6:
If Ashleigh closes the chat window
and focus does not return to the
<button>, Ashleigh may become
disorientated within the overall page.
84. Things to consider 1:
Ashleigh should be informed that the
page contains a chat function. And
she should be able to bypass blocks
of content to access the chat
window trigger.
85. Things to consider 2:
The <button> needs to have a label
that is meaningful for Ashleigh.
86. Things to consider 3:
When the chat window receives
focus, its name and role need to be
announced so that Ashleigh
understands its purpose.
87. Things to consider 4:
All interactive elements needs to
have clear labels so that Ashleigh
understands their purpose.
88. Things to consider 5:
Ashleigh needs to be informed about
all dynamic changes within the chat
window - such as newly added
messages from the operator.
89. Things to consider 6:
When the chat window is closed,
focus needs to return to the
<button> so Ashleigh can orientate
herself within the overall page.
102. Welcome to live chat
Type your message here…
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Message:
"chat"
104. The container for the heading and
“Close” button can be given a class
name of "chat-header".
105. Welcome to live chat
Type your message here…
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Message:
"chat-header"
107. The container for the messages
can be given a class name of
"chat-content".
108. Welcome to live chat
Type your message here…
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Message:
"chat-content"
110. The container for the label, user
input and submit button can be
given a class name of "chat-
submission".
111. Welcome to live chat
Type your message here…
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Message:
"chat-submission"
114. The overall container needs to be
given a role so that assistive
technology users understand its
purpose.
115. As there is no speci
fi
c role for
chat windows, we could use
role="group".
116. Welcome to live chat
Type your message here…
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Message:
role="group"
130. Welcome to live chat
Type your message here…
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Message:
role="log"
138. <div class="chat-content" role="log">
<ul>
<li class="chat-message-operator">
<span class="chat-details">Sandy at 2:15pm</span>
<span>How can I help you?</span>
</li>
<li class="chat-message-user">
<span class="chat-details">You at 2:17pm</span>
<span>What does it cost?</span>
</li>
</ul>
</div>
139. <div class="chat-content" role="log">
<ul>
<li class="chat-message-operator">
<span class="chat-details">Sandy at 2:15pm</span>
<span>How can I help you?</span>
</li>
<li class="chat-message-user">
<span class="chat-details">You at 2:17pm</span>
<span>What does it cost?</span>
</li>
</ul>
</div>
142. Welcome to live chat
Type your message here…
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Message:
form