Note: Adobe has plans to stop updating and distributing the Flash Player at the end of 2020, " + - "and encourages authors interested in creating accessible web content to use HTML.
" - ); - } else if (scope.technique.technology === "silverlight") { - $(aboutBoxSelector).append( - "Note: Microsoft has stopped updating and distributing Silverlight, " + - "and authors are encouraged to use HTML for accessible web content.
" - ); - } + // Remove any effectively-empty techniques/resources sections, + // due to template boilerplate or obsolete technique removal + $("section#related:not(:has(a))").remove(); + $("section#resources:not(:has(a, li))").remove(); // Update understanding links to always use base URL // (mainly to avoid any case-sensitivity issues) @@ -376,7 +379,6 @@ export class CustomLiquid extends Liquid { el.attribs.href = el.attribs.href.replace(/^.*\//, scope.understandingUrl); }); } else if (scope.isUnderstanding) { - const $title = $("title"); if (scope.guideline) { const type = scope.guideline.type === "SC" ? "Success Criterion" : scope.guideline.type; $title.text( @@ -387,13 +389,20 @@ export class CustomLiquid extends Liquid { $title.text().replace(/WCAG 2( |$)/, `WCAG ${scope.versionDecimal}$1`) + titleSuffix ); } + + // Remove Techniques section from obsolete SCs (e.g. Parsing in 2.2) + if (scope.guideline?.level === "") $("section#techniques").remove(); } // Process defined terms within #render, // where we have access to global data and the about box's HTML const $termLinks = $(termLinkSelector); const extractTermName = ($el: CheerioHTML and XHTML used with script.
+Site designers often want to create dialogs that do not use the pop-up windows supplied by the browser. This is typically accomplished by enclosing the dialog contents in a div and placing the div above the page content using z-order and absolute positioning in CSS.
To be accessible, these dialogs must follow a few simple rules.
+div into the Document Object Model (DOM) immediately after the element that triggered it. The triggering element will maintain focus, and inserting the dialog content after that element will make the content inside the dialog next in the screen-reader reading order and next in the tab order. The dialog can still be absolutely positioned to be elsewhere on the page visually. This can be done either by creating the dialog in the HTML and hiding it with CSS, as in the example below, or by inserting it immediately after the triggering element with script. It is also nice, but not always necessary, to make the launching link toggle the dialog open and closed, and to close the dialog when the keyboard focus leaves it.
+The HTML for this example includes a triggering Element, in this case a button, and a div that acts as the frame for the dialog.
+The triggering element is a button and the script is triggered from the onclick event. This sends the appropriate events to the operating system so that assistive technology is aware of the change in the DOM.
+In this example, the Submit and Reset buttons inside the dialog simply hide the div.
... +<button onclick="TogglePopup(event,true)" + name="pop0001">Options</button> + +<div class="popover" id="pop0001"> + <h3>Edit Sort Information</h3> + <form action="default.htm" onsubmit="this.parentNode.style.display='none'; return false;" onreset="this.parentNode.style.display='none'; return false;"> + <fieldset> + <legend>Sort Order</legend> + <input type="radio" name="order" id="order_alpha" /><label for="order_alpha">Alphabetical</label> + <input type="radio" name="order" id="order_default" checked="true" /><label for="order_default">Default</label> + </fieldset> +<div class="buttons"> + <input type="submit" value="OK" /> + <input type="reset" value="Cancel" /> +</div> +</form> + +</div> +... ++ +
The div, heading and form elements are styled with CSS to look like a dialog.
...
+a { color:blue; }
+a.clickPopup img { border:none; width:0; }
+
+div.popover { position:absolute; display:none; border:1px outset; background-color:beige; font-size:80%; background-color:#eeeeee; color:black; }
+div.popover h3 { margin:0; padding:0.1em 0.5em; background-color:navy; color:white; }
+#pop0001 { width:20em; }
+#pop0001 form { margin:0; padding:0.5em; }
+#pop0001 fieldset { margin-bottom:0.3em; padding-bottom:0.5em; }
+#pop0001 input, #pop0001 label { vertical-align:middle; }
+#pop0001 div.buttons { text-align:right; }
+#pop0001 div.buttons input { width:6em; }
+...
+
+
+ The script toggles the display of the popup div, showing it and hiding it.
...
+function TogglePopup(evt,show) {
+ HarmonizeEvent(evt);
+ var src = evt.target;
+ if ("click" == evt.type) {
+ evt.returnValue = false;
+ }
+ var popID = src.getAttribute("name");
+ if (popID) {
+ var popup = document.getElementById(popID);
+ if (popup) {
+ if (true == show) {
+ popup.style.display = "block";
+ }
+ else if (false == show) {
+ popup.style.display = "none";
+ }
+ else {
+ popup.style.display = "block" == popup.style.display ? "none" : "block";
+ }
+ if ("block" == popup.style.display) {
+ //window.alert(document.documentElement.scrollHeight);
+ popup.style.top = ((document.documentElement.offsetHeight - popup.offsetHeight) / 2 ) + 'px';
+ popup.style.left = ((document.documentElement.offsetWidth - popup.offsetWidth) / 2) + 'px';
+ }
+ }
+ }
+}
+
+function SubmitForm(elem) {
+ elem.parentNode.style.display='none';
+ return false;
+}
+
+function ResetForm(elem) {
+ elem.parentNode.style.display='none';
+ return false;
+}
+...
+
+
+ Markup languages: HTML, XHTML, and other SGML or XML-based technologies.