Permalink
Browse files

README: Add a note about ARIA annotations

  • Loading branch information...
1 parent 0d9f6f8 commit 807e4ab1d6dae9ca5102d6fe461f38fa7916f8af @mathiasbynens committed Feb 7, 2012
Showing with 13 additions and 8 deletions.
  1. +9 −7 README.md
  2. +4 −1 demo.html
View
@@ -1,6 +1,6 @@
# `<details>`/`<summary>` jQuery plugin
-This plugin polyfills `<details>`/`<summary>` HTML elements. [More information can be found in my blog post on the subject.](http://mathiasbynens.be/notes/html5-details-jquery)
+This plugin polyfills `<details>`/`<summary>` HTML elements and adds [the appropriate ARIA annotations](http://mathiasbynens.be/notes/html5-details-jquery#comment-58) for optimal accessibility. [More information can be found in my blog post on the subject.](http://mathiasbynens.be/notes/html5-details-jquery)
## Demo & Examples
@@ -28,12 +28,12 @@ The plugin will provide `open.details` and `close.details` events for you to use
```js
$('details').on({
- 'open.details': function() {
- console.log('opened');
- },
- 'close.details': function() {
- console.log('closed');
- }
+ 'open.details': function() {
+ console.log('opened');
+ },
+ 'close.details': function() {
+ console.log('closed');
+ }
});
```
@@ -57,6 +57,8 @@ This plugin requires jQuery 1.7+. For a version that works with older jQueries,
This fallback works in all A-grade browsers, including IE6. It will only be executed if the `<details>` element is not natively supported in the browser. If it isn’t, and JavaScript is disabled, all elements will still be visible to the user.
+While the plugin has a certain level of support for `<details>` elements without a `<summary>`, it should be noted that omitting the `<summary>` element results in invalid HTML, and prevents the custom `open.details`/`close.details` events from firing in browsers that natively support `<details>`. Don’t do this!
+
## License
This plugin is dual licensed under the MIT and GPL licenses, just like jQuery itself.
View
@@ -58,8 +58,9 @@
</details>
</section>
<!-- Same example, but now without a <summary> -->
+ <!-- Note that omitting the <summary> element results in invalid HTML, and prevents the custom open/close events from firing in browsers that natively support `<details>`. Don’t do this! -->
<section class="progress window">
- <h1>Copying “Really Achieving Your Childhood Dreams” (<code>details</code> without <code>summary</code>)</h1>
+ <h1>Copying “Really Achieving Your Childhood Dreams” (<code>details</code> without <code>summary</code> — this is invalid HTML!)</h1>
<details>
<dl>
<dt>Transfer rate:</dt>
@@ -99,13 +100,15 @@
</details>
</section>
<!-- <details> element containing only text, as requested by Shelley Powers -->
+ <!-- Note that omitting the <summary> element results in invalid HTML, and prevents the custom open/close events from firing in browsers that natively support `<details>`. Don’t do this! -->
<section>
<h1><code>details</code> element containing only text</h1>
<details>
Test
</details>
</section>
<!-- <details> element containing some direct child text nodes in addition to other children -->
+ <!-- Note that omitting the <summary> element results in invalid HTML, and prevents the custom open/close events from firing in browsers that natively support `<details>`. Don’t do this! -->
<section>
<h1><code>details</code> element containing some children and some child text nodes</h1>
<details>

0 comments on commit 807e4ab

Please sign in to comment.