-
Notifications
You must be signed in to change notification settings - Fork 256
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2987 from w3c/syntax-highlighting-for-client-side…
…-script-techniques Syntax highlighting for client side script techniques
- Loading branch information
Showing
42 changed files
with
2,327 additions
and
2,104 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,46 +1,54 @@ | ||
| <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Allowing the user to extend the default time limit | ||
| </title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Allowing the user to extend the default time limit | ||
| </h1><section class="meta"><p class="id">ID: SCR1</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2> | ||
| <p> | ||
| Time limits that are controlled by client-side scripting. | ||
| </p> | ||
| </section><section id="description"><h2>Description</h2> | ||
| <p>The objective of this technique is to allow user to extend the default time limit by providing a mechanism to extend the time when scripts provide functionality that has default time limits. In order to allow the user to request a longer time limit, the script can provide a form (for example) allowing the user to enter a larger time limit or indicating that more time is needed. If the user is being warned that a time limit is about to expire (see <a href="../client-side-script/SCR16">SCR16</a>), this form can be made available from the warning dialog. The user can extend the time limit to at least 10 times the default time limit, either by allowing the user to indicate how much additional time is needed or by repeatedly allowing the user to extend the time limit.</p> | ||
| </section><section id="examples"><h2>Examples</h2> | ||
| <ul> | ||
| <li> | ||
| A Web page contains current stock market statistics and is set to refresh periodically. When the user is warned prior to refreshing the first time, the user is provided with an option to extend the time period between refreshes. | ||
| </li> | ||
| <li> | ||
| In an online chess game, each player is given a time limit for completing each move. When the player is warned that time is almost up for this move, the user is provided with an option to increase the time. | ||
| </li> | ||
| </ul> | ||
| </section><section id="tests"><h2>Tests</h2> | ||
| <section class="procedure"><h3>Procedure</h3> | ||
| <ol> | ||
| <li> | ||
| On a Web page that uses scripts to enforce a time limit, wait until the time limit has expired. | ||
| </li> | ||
| <li> | ||
| Determine if an option was provided to extend the time limit. | ||
| </li> | ||
| </ol> | ||
| </section> | ||
| <section class="results"><h3>Expected Results</h3> | ||
| <ul> | ||
| <li> | ||
| #2 is true and more time is provided to complete the interaction. | ||
| </li> | ||
| </ul> | ||
| </section> | ||
| </section><section id="related"><h2>Related Techniques</h2><ul> | ||
| <li><a href="../client-side-script/SCR16">SCR16</a></li> | ||
| </ul></section><section id="resources"><h2>Resources</h2> | ||
|
|
||
| <ol> | ||
| <li> | ||
| <a href="http://www.phpbuilder.com/tips/item.php?id=141">PHPBuilder Time-out Info</a> | ||
| </li> | ||
| </ol> | ||
|
|
||
| </section></body></html> | ||
| <!DOCTYPE html> | ||
| <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> | ||
| <head> | ||
| <title>Allowing the user to extend the default time limit</title> | ||
| <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link> | ||
| </head> | ||
| <body> | ||
| <h1>Allowing the user to extend the default time limit</h1> | ||
| <section class="meta"> | ||
| <p class="id">ID: SCR1</p> | ||
| <p class="technology">Technology: client-side-script</p> | ||
| <p class="type">Type: Technique</p> | ||
| </section> | ||
| <section id="applicability"> | ||
| <h2>When to Use</h2> | ||
| <p>Time limits that are controlled by client-side scripting.</p> | ||
| </section> | ||
| <section id="description"> | ||
| <h2>Description</h2> | ||
| <p>The objective of this technique is to allow user to extend the default time limit by providing a mechanism to extend the time when scripts provide functionality that has default time limits. In order to allow the user to request a longer time limit, the script can provide a form allowing the user to enter a larger time limit or indicating that more time is needed. If the user is being warned that a time limit is about to expire (see <a href="SCR16">providing a script that warns the user a time limit is about to expire</a>), this form can be made available from the warning dialog. The user can extend the time limit to at least 10 times the default time limit, either by allowing the user to indicate how much additional time is needed or by repeatedly allowing the user to extend the time limit.</p> | ||
| </section> | ||
| <section id="examples"> | ||
| <h2>Examples</h2> | ||
| <ul> | ||
| <li>A Web page contains current stock market statistics and is set to refresh periodically. When the user is warned prior to refreshing the first time, the user is provided with an option to extend the time period between refreshes.</li> | ||
| <li>In an online chess game, each player is given a time limit for completing each move. When the player is warned that time is almost up for this move, the user is provided with an option to increase the time.</li> | ||
| </ul> | ||
| </section> | ||
| <section id="tests"> | ||
| <h2>Tests</h2> | ||
| <section class="procedure"> | ||
| <h3>Procedure</h3> | ||
| <ol> | ||
| <li>On a Web page that uses scripts to enforce a time limit, wait until the time limit has expired.</li> | ||
| <li>Determine if an option was provided to extend the time limit.</li> | ||
| </ol> | ||
| </section> | ||
| <section class="results"> | ||
| <h3>Expected Results</h3> | ||
| <ul> | ||
| <li>2 is true and more time is provided to complete the interaction.</li> | ||
| </ul> | ||
| </section> | ||
| </section> | ||
| <section id="related"> | ||
| <h2>Related Techniques</h2> | ||
| <ul> | ||
| <li><a href="../client-side-script/SCR16">SCR16</a></li> | ||
| </ul> | ||
| </section> | ||
| <!-- <section id="resources"><h2>Resources</h2> | ||
| </section> --> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,73 +1,106 @@ | ||
| <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using scripts to make nonessential alerts optional</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using scripts to make nonessential alerts optional</h1><section class="meta"><p class="id">ID: SCR14</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2> | ||
| <!DOCTYPE html> | ||
| <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> | ||
| <head> | ||
| <title>Using scripts to make nonessential alerts optional</title> | ||
| <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link> | ||
| </head> | ||
| <body> | ||
| <h1>Using scripts to make nonessential alerts optional</h1> | ||
| <section class="meta"> | ||
| <p class="id">ID: SCR14</p> | ||
| <p class="technology">Technology: client-side-script</p> | ||
| <p class="type">Type: Technique</p> | ||
| </section> | ||
| <section id="applicability"> | ||
| <h2>When to Use</h2> | ||
| <p>Scripting technologies which use scripting alerts for non-emergency communication.</p> | ||
| </section><section id="description"><h2>Description</h2> | ||
| <p>The objective of this technique is to display a dialog containing a message (alert) to the user. When the alert is displayed, it receives focus and the user must activate the OK button on the dialog to dismiss it. Since these alerts cause focus to change they may distract the user, especially when used for non-emergency information. Alerts for non-emergency purposes such as displaying a quote of the day, helpful usage tip, or count down to a particular event, are not presented unless the user enables them through an option provided in the Web page.</p> | ||
| <p>This technique assigns a global JavaScript variable to store the user preference for displaying alerts. The default value is false. A wrapper function is created to check the value of this variable before displaying an alert. All calls to display an alert are made to this wrapper function rather than calling the alert() function directly. Early in the page, a button is provided for the user to enable the display of alerts on the page. This technique works on a visit by visit basis. Each time the page is loaded, alerts will be disabled and the user must manually enable them. Alternatively, the author could use cookies to store user preferences across sessions.</p> | ||
| </section><section id="examples"><h2>Examples</h2> | ||
| <section class="example"> | ||
| </section> | ||
| <section id="description"> | ||
| <h2>Description</h2> | ||
| <p>The objective of this technique is to toggle announcements to screen readers of changes in a stock-price alert component. By default, when the stock price changes, the change is announced by screen readers. This could be annoying to some users, so there are buttons to allow users to toggle the announcements on or off.</p> | ||
| <p>This technique uses the <code class="language-html">aria-live</code> property to turn the stock component into a live region and the <code class="language-html">aria-atomic</code> property to tell screen readers to announce all of the component's content rather than just what was updated when the stock is updated. For the sake of this demo, the stock updates every 10 seconds. If announcements are turned on, the <code class="language-html">aria-live</code> property is set to <code class="language-html">assertive</code>; if announcements are turned off, the <code class="language-html">aria-live</code> property is set to <code class="language-html">off</code>. The two buttons used to control the announcements use the <code class="language-html">aria-pressed</code> property, updated to either <code class="language-html">true</code> or <code class="language-html">false</code>, to inform screen reader users which button is pressed and therefore whether their screen reader will announce the stock updates or not. In a real-life situation, an author should consider setting a cookie (or equivalent) to store the user's preference so that it's set over multiple visits to the page.</p> | ||
| </section> | ||
| <section id="examples"> | ||
| <h2>Examples</h2> | ||
| <section class="example"> | ||
| <h3>Updating screen reader settings for stock price update alerts</h3> | ||
| <p>The script below will update a stock value in an aria-live component every 10 seconds. If the user presses the "Turn Announcements Off" button, their screen reader will stop making announcements when the stock value changes; if they press the "Turn Announcements On" button, the announcements will start again.</p> | ||
|
|
||
| <h4>The JavaScript</h4> | ||
|
|
||
| <p>The script below will display a quote in an alert box every ten seconds, if the user selects the "Turn Alerts On" button. The user can turn the quotes off again by choosing "Turn Alerts Off".</p> | ||
|
|
||
| <pre xml:space="preserve"> | ||
| <script type="text/javascript"> | ||
| var bDoAlerts = false; // global variable which specifies whether to | ||
| // display alerts or not | ||
| /* function to enable/disable alerts. | ||
| * param boolean bOn - true to enable alerts, false to disable them. | ||
| */ | ||
| function modifyAlerts(isEnabled) { | ||
| bDoAlerts = isEnabled; | ||
| } | ||
| /* wrapper function for displaying alerts. Checks the value of bDoAlerts | ||
| *and only calls the alert() function when bDoAlerts is true. | ||
| */ | ||
| function doAlert(aMessage) { | ||
| if (bDoAlerts) { | ||
| alert(aMessage); | ||
| <pre xml:space="preserve"><code class="language-javascript"><script> | ||
| document.addEventListener("DOMContentLoaded", function (e) { | ||
| const stockBox = document.querySelector("#stock-box"); | ||
| const stockMovement = document.querySelector("#stock-movement"); | ||
| const onBtn = document.querySelector("#live-on"); | ||
| const offBtn = document.querySelector("#live-off"); | ||
| const stocks = new Array("stock went down", "stock stayed the same", "stock went up"); | ||
| let loopCount = 0; | ||
|
|
||
| onBtn.addEventListener("click", modifyLive, false); | ||
| offBtn.addEventListener("click", modifyLive, false); | ||
|
|
||
| function modifyLive(e){ | ||
| let elm = e.currentTarget; | ||
| let liveState = elm.getAttribute("id"); | ||
| if (liveState === "live-off"){ | ||
| stockBox.setAttribute("aria-live", "off"); | ||
| onBtn.setAttribute("aria-pressed", "false"); | ||
| offBtn.setAttribute("aria-pressed", "true"); | ||
| } | ||
| else{ | ||
| stockBox.setAttribute("aria-live", "assertive"); | ||
| onBtn.setAttribute("aria-pressed", "true"); | ||
| offBtn.setAttribute("aria-pressed", "false"); | ||
| } | ||
| } | ||
|
|
||
| setInterval(() => { | ||
| if(loopCount >2){ | ||
| loopCount = 0; | ||
| } | ||
| } | ||
| // example usage - a loop to display famous quotes. | ||
| var gCounter = -1; // global to store counter | ||
| // quotes variable would be initialized with famous quotations | ||
| var quotes = new Array("quote 1", "quote 2", "quote 3", "quote 4", "quote 5"); | ||
| function showQuotes() { | ||
| if (++gCounter >= quotes.length) { | ||
| gCounter = 0; | ||
| } | ||
| doAlert(quotes[gCounter]); | ||
| setTimeout("showQuotes();", 10000); | ||
| } | ||
| showQuotes(); | ||
| </script> | ||
| </pre> | ||
| stockMovement.innerHTML = stocks[loopCount]; | ||
| loopCount++; | ||
| }, 10000) | ||
| }); | ||
| </script></code></pre> | ||
|
|
||
| <p>Within the body of the page, include a way to turn the alerts on and off. Below is one example:</p> | ||
| <h4>The <abbr title="HyperText Markup Language">HTML</abbr></h4> | ||
|
|
||
| <pre xml:space="preserve"> | ||
| <body> | ||
| <p>Press the button below to enable the display of famous quotes | ||
| using an alert box<br /> | ||
| <button id="enableBtn" type="button" onclick="modifyAlerts(true);"> | ||
| Turn Alerts On</button><br /> | ||
| <button id="disableBtn" type="button" onclick="modifyAlerts(false);"> | ||
| Turn Alerts Off</button></p> | ||
| </pre> | ||
| <pre xml:space="preserve"><code class="language-html"><body> | ||
| <h1>Turbo Encabulator Stock Information</h1> | ||
| <div id="stock-box" aria-atomic="true" aria-live="assertive"> | ||
| <span>Turbo Encabulator Stock Price: </span> | ||
| <span id="stock-movement">stock went up</span> | ||
| </div> | ||
| <p>Use the buttons to toggle screen reader announcements of stock changes:</p> | ||
| <div> | ||
| <button aria-pressed="true" id="live-on" type="button"> | ||
| Turn Announcements On</button> | ||
| <button aria-pressed="false" id="live-off" type="button"> | ||
| Turn Announcements Off</button> | ||
| </div> | ||
| </body></code></pre> | ||
|
|
||
| <p class="working-example">Working example of this code: <a href="../../working-examples/script-enable-alerts/">Demonstration of Alerts</a>.</p> | ||
| <p class="working-example">Working example of this code: <a href="../../working-examples/script-toggle-aria-alerts/">Demonstration of toggling ARIA alerts</a>.</p> | ||
|
|
||
| </section> | ||
| </section><section id="tests"><h2>Tests</h2> | ||
| <section class="procedure"><h3>Procedure</h3> | ||
| <p>For a Web page that supports non-emergency interruptions using a JavaScript alert:</p> | ||
| <p>For a Web page that supports non-emergency interruptions:</p> | ||
| <ol> | ||
| <li>Load the Web page and verify that no non-emergency alerts are displayed.</li> | ||
| <li>Verify there is a mechanism to activate the non-emergency alerts.</li> | ||
| <li>Activate the non-emergency alerts and verify that the alerts are displayed.</li> | ||
| <li>Verify there is a mechanism to activate and deactivate the non-emergency interruptions.</li> | ||
| </ol> | ||
| </section> | ||
| <section class="results"><h3>Expected Results</h3> | ||
| <section class="results"> | ||
| <h3>Expected Results</h3> | ||
| <ul> | ||
| <li>For a Web page that supports non-emergency interruptions using a JavaScript alert, checks 1, 2, and 3 above are true.</li> | ||
| <li>For a Web page that supports non-emergency interruptions, checks 1 and 2 are true.</li> | ||
| </ul> | ||
| </section> | ||
| </section></body></html> | ||
| </section> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css"> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> | ||
| <script>hljs.highlightAll();</script> | ||
| </body></html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.