diff --git a/docs/images/skipto-menu-anatomy.png b/docs/images/skipto-menu-anatomy.png new file mode 100644 index 0000000..43df347 Binary files /dev/null and b/docs/images/skipto-menu-anatomy.png differ diff --git a/docs/images/skipto-menu.png b/docs/images/skipto-menu.png new file mode 100644 index 0000000..22baaa2 Binary files /dev/null and b/docs/images/skipto-menu.png differ diff --git a/docs/index.html b/docs/index.html index 1b3b2ba..3cfeffc 100644 --- a/docs/index.html +++ b/docs/index.html @@ -20,6 +20,24 @@ + @@ -191,7 +209,85 @@

Three Ways to Use Skipto.js

+

Anatomy of the SkipTo.js Menu

+
+ Screen shot of SkipTo.js menu features with call out pointers +
Features of the SkipTo.js Menu
+
+ +

Detailed Information on SkipTo.js Menu

+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureDescription
+ "Skip To Content" Button + +
    +
  • Opens and closes the menu of landmark regions and headings.
    • +
  • Button can initially be hidden or visible on the web page.
    • +
  • A shortcut key is used to activate the button (e.g. Option+0 or Alt+0).
    • +
  • Button is first tab stop on the web page.
    • +
+
+ Landmark Regions + +
    +
  • Landmark regions are the first section of the menu.
    • +
  • First menu item is the group label "Landmark Regions" and the number indicates how many landmarks are in the menu.
    • +
  • By default the landmarks are listed in order of importance on the page: +
      +
    1. Main
      2. +
    2. Search
      3. +
    3. Navigation
      4. +
    4. Complementary
      5. +
    5. Contentinfo
      6. +
    +
    • +
  • When a landmark region has an accessible name, it is included in the menu item after the region type.
    • +
+
+ Headings + +
    +
  • Heading are the second section of the menu.
    • +
  • The section includes a group label "Headings" and the number indicates how many headings are in the menu.
    • +
  • The headings are listed in document order.
    • +
  • The number before the heading name indicates the level of the sub-section heading. Level 2 headings are sub-sections of level 1 headings, level 3 headings are subsections of level 2 headings and so on up to heading leel 6.
    • + The accessible name is after the heading level. +
+
+ Shortcuts + +
    +
  • The Shortcuts group label indicates whether the shortcuts are currently enabled or disabled.
    • +
  • The first menu item is used to change the state of the shortcuts.
    • +
  • The second menu item opens a dialog box showing the current keyboard shortcuts.
    • +
+

Feedback and Reporting Issues

diff --git a/src-docs/templates/content-home.njk b/src-docs/templates/content-home.njk index 5a5e104..0c28b07 100644 --- a/src-docs/templates/content-home.njk +++ b/src-docs/templates/content-home.njk @@ -2,6 +2,24 @@ {% include "./head.njk" %} + {% include "./header.njk" %} @@ -92,7 +110,85 @@ +

Anatomy of the SkipTo.js Menu

+
+ Screen shot of SkipTo.js menu features with call out pointers +
Features of the SkipTo.js Menu
+
+ +

Detailed Information on SkipTo.js Menu

+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureDescription
+ "Skip To Content" Button + +
    +
  • Opens and closes the menu of landmark regions and headings.
    • +
  • Button can initially be hidden or visible on the web page.
    • +
  • A shortcut key is used to activate the button (e.g. Option+0 or Alt+0).
    • +
  • Button is first tab stop on the web page.
    • +
+
+ Landmark Regions + +
    +
  • Landmark regions are the first section of the menu.
    • +
  • First menu item is the group label "Landmark Regions" and the number indicates how many landmarks are in the menu.
    • +
  • By default the landmarks are listed in order of importance on the page: +
      +
    1. Main
      2. +
    2. Search
      3. +
    3. Navigation
      4. +
    4. Complementary
      5. +
    5. Contentinfo
      6. +
    +
    • +
  • When a landmark region has an accessible name, it is included in the menu item after the region type.
    • +
+
+ Headings + +
    +
  • Heading are the second section of the menu.
    • +
  • The section includes a group label "Headings" and the number indicates how many headings are in the menu.
    • +
  • The headings are listed in document order.
    • +
  • The number before the heading name indicates the level of the sub-section heading. Level 2 headings are sub-sections of level 1 headings, level 3 headings are subsections of level 2 headings and so on up to heading leel 6.
    • + The accessible name is after the heading level. +
+
+ Shortcuts + +
    +
  • The Shortcuts group label indicates whether the shortcuts are currently enabled or disabled.
    • +
  • The first menu item is used to change the state of the shortcuts.
    • +
  • The second menu item opens a dialog box showing the current keyboard shortcuts.
    • +
+
{% include "./feedback.njk" %} {% endblock %}