Developer
This page is intended to help developers of ReefChat and other Ajax applications to better understand the code and in particular, the WAI-ARIA live region markup. The main technique described in this page is how to use Live Regions. If you are new to ARIA or Live Regions, I highly recommend you visit the Mozilla Dev. Live Region's page and also read a paper Charles Chen and I wrote entitled Ajax Live Regions: Chat as a Test Case.
The below image is a screenshot taken from the ReefChat interface with the different live region areas marked up with colour.
The green coloured area is the chat transcript area where new message nodes were added. The live region setting for the area is aria-live=polite to allow messages to be spoken naturally as they are received. A new concept of a channel is introduced in this area and given aria-channel=main which is the default.
The blue coloured area is the chat controls area where new messages are inputed.
The red coloured area is the chat status log area where status messages are added. The live region setting for the area is aria-live=assertive to be slightly more aggressive than chat messages. This area also set as a channel and is set to aria-channel=notify, the highest priority channel.
Each of these areas are described in more detail below.
Chat Log
All new chat messages are posted in the Transcript div.
Transcript
The transcript is located in Figure one as the light blue highlighted area.
chat messages here
</div>
The Transcript div in Figure 2 is marked up as a ARIA live region. The role aria-role="log" defines the transcript div to have the ARIA log behavior. The setting aria-live="polite" specifies that all new message nodes will be treaded as polite and displayed/spoken as they are received. The setting aria-relevant="additions", specifies that only new message nodes (additions) are important. The setting aria-atomic="false", specifies that the live region should NOT be treated as a whole and rather than having the entire live region nodes re spoken, only speak a new message(s) (additions). The role? aria-channel="main", specifies that this live region should be treated as a low priority channel. Its important to note that the role and settings for this live region are treated as the default for any new nodes added. As you can see in Figure 3, each additional node can customize its own settings.
Chat Message
Chat messages are added to the transcript log div as an appended node to the DOM.
Normal Priority Message
The chat message markup in Figure 3 displays the default chat message that is added to the transcript when a new message is received. The role aria-role="chatMessage" is not an official ARIA role yet, but rather a role that Charles Chen and I are attempting to have added to the ARIA specification.
<div aria-state="timestamp" class="timestamp">timestamp</div>
<div aria-role="username" class="username">username</div>
<div class="content">content</div>
</div>
High Priority Message
A high priority message is identical to a low priority chat message other than the live region setting set to aria-live="assertive" to give messages a higher spoken priority and the role aria-channel="notify", to place the chat message in the higher priority channel. This allows messages that are marked for example with your username to be spoken first.
message contents ...
</div>
Compose Message
Chat messages are sent through this form and the submit button uses the aria-controls="transcript" to link the control (form) with the transcript live region.
Status Log
All status related messages such as a user logging in, are displayed in the status area.
Status Area
The status area is marked up as a live region and located in Figure 1 as the light red highlighted area.
chat messages here ...
</div>
The status area is marked up similar to the transcript area but differs by having higher priority settings. For example, aria-live="assertive" is a more aggressive setting as is aria-channel="notify". The higher live region settings allow status messages to be spoken before other messages, such as a low priority chat message.
Status Message
The settings in a status message carry the default of the status area and are not required but there out of paranoia.
message contents ...
</div>
