The "CLC Fan Club" demo provides an example of using accessible live regions on a form that validates as the user enters information. For a real deployment of such a system, the data that the user has entered should be submitted to the website (in this case, the data is not sent anywhere as I am not trying to collect information from anyone).
The page is composed of two main DIV elements: "theForm" and "theCertificate". "theCertificate" is initially set to "display: none"; thus, it will not show up when the page is first loaded. When "theCertficate" is displayed, "theForm" is removed by setting "display: none" for it.
Each of the warning boxes are live regions that are "assertive". "theCertificate" is a live region that is "polite" and "atomic"; being "atomic" is important as this is what causes the entire region to be read out when it is displayed since only the "certificateName" and "certificateDate" DIVs inside of it are updated.
The warning boxes are all live regions that are "assertive". The "assertive" politeness level was chosen as these warnings should be given to users as soon as possible so that they can immediately correct their mistakes. "polite" was not used as a user who is quickly tabbing through the blanks may miss a warning and only hear it later on, thus causing confusion as to which input blank triggered the warning. "rude" was not used as overriding a focus announcement message from the AT telling users that they have switched into a new input blank could cause users to lose track of where they are on the page.
For users who do not have an AT which supports live regions or who have chosen to disable the use of live regions, the alert box that is shown if there were errors made in filling out the form will list the problems.
Only the "certificateName" and "certificateDate" are updated when the user has successfully completed the form. However, since they are enclosed inside "theCertificate" which is a live region that is marked as "atomic", when they are updated, all of "theCertificate" is announced to the user.
As the user fills out the form, if everything is filled out correctly, then none of the warning boxes will show up. However, if they make an obvious mistake that the form can catch, then as soon as they move on to another blank, a warning box will show up. The AT is expected to announce the warning boxes when they appear; if the AT normally announces focus change events, those events should still be announced so that users know that they are not on the same blank as the one which triggered the warning box. After successfully completing the form, the AT is expected to completely read out "theCertificate".
Things that can trigger warning boxes: