From 9f3209e450a58d6eb1d247862563a400bf724753 Mon Sep 17 00:00:00 2001 From: Michiel Bijl Date: Mon, 23 Jan 2017 16:20:35 +0000 Subject: [PATCH] Update alert example to new template --- examples/alert/index.html | 110 ++++++++++++++++++++++++-------------- 1 file changed, 71 insertions(+), 39 deletions(-) diff --git a/examples/alert/index.html b/examples/alert/index.html index 88f3503318..24ef4255b0 100644 --- a/examples/alert/index.html +++ b/examples/alert/index.html @@ -2,60 +2,67 @@ - ARIA Alert Role Example + Alert Example | WAI-ARIA Authoring Practices 1.1 + - - - + +
-

ARIA alert Role Example

-

- Note: - This page requires updates per issue 185. - Please provide any additional feedback in this issue. -

+

Alert Example

-

This example shows a simple alert after you click the button.

+

+ This example shows a simple alert after you click the button. + It’s implemented according to the design pattern for alert. +

-

More information on alert pattern

+
+

Example

+ +
+

- - -
+
+
+ +
-

Accessibility Feature

- - - -

Keyboard Support

+ + +
+

Keyboard Support

No keyboard interaction needed.

+
-

ARIA Roles, Properties and States

- - +
+

Role, Property, State, and Tabindex Attributes

+
- - - + + + + - + + - - + + + - + +
RoleProperty/StateUsageRoleAttributeElementUsage
alertalert Identify element as Alert widget @@ -63,29 +70,54 @@

ARIA Roles, Properties and States

aria-live with implicit value of assertive - Announces alert when it is displayed. - aria-live with implicit value of assertiveAnnounces alert when it is displayed.
aria-atomic with implicit value of truearia-atomic with implicit value of true Tells assistive technologies to announce all content.
+ - - -

Source Code

- +
+

Javascript and CSS Source Code

+
+ +
+

HTML Source Code

+ +
+ + 
+<script type="text/template" id="alert-template">
+  <div role="alert">
+    <p>Hej, hello, ciao, こんにちは, 안녕</p>
+  </div>
+</script>
+
+<button id="alert-trigger">Trigger an alert</button>
+
+
+