Skip to content

Commit

Permalink
Add WAI permalink structure part 1 of 2
Browse files Browse the repository at this point in the history
  • Loading branch information
alflennik committed May 12, 2022
1 parent 56c4529 commit 1de4afb
Show file tree
Hide file tree
Showing 311 changed files with 2,048 additions and 1,221 deletions.
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
# This is a generated file
title: "Accordion Example"
ref: /WAI/ARIA/APG/example-index/accordion/accordion
ref: /ARIA/APG/example-index/accordion/accordion

github:
repository: w3c/aria-practices
branch: main
path: examples/accordion/accordion.html
feedbackmail: [email protected]
permalink: /WAI/ARIA/APG/example-index/accordion/accordion
permalink: /ARIA/APG/example-index/accordion/accordion

sidebar: true

Expand All @@ -26,9 +26,15 @@ lang: en
<link rel="stylesheet" type="text/css" href="css/accordion.css" />


<link rel="stylesheet" href="/content-assets/wai-aria-practices/styles.css">
<link
rel="stylesheet"
href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
>
<!-- Code highlighting styles -->
<link rel="stylesheet" href="/WAI/ARIA/APG/example-index/css/github.css">
<link
rel="stylesheet"
href="{{ '/ARIA/APG/example-index/css/github.css' | relative_url }}"
>
<script>
const addBodyClass = undefined;
Expand All @@ -48,8 +54,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<ul>
<li>
There may be support gaps in some
<a href="/WAI/ARIA/APG/practices/read-me-first/#browser_and_AT_support">browser and assistive technology combinations</a>,
especially for <a href="/WAI/ARIA/APG/practices/read-me-first/#mobile_and_touch_support">mobile/touch devices</a>.
<a href="{{ '/ARIA/APG/practices/read-me-first/#browser_and_AT_support' | relative_url }}">browser and assistive technology combinations</a>,
especially for <a href="{{ '/ARIA/APG/practices/read-me-first/#mobile_and_touch_support' | relative_url }}">mobile/touch devices</a>.
Testing code based on this example with assistive technologies is essential before considering use in production systems.
</li>
<li>
Expand All @@ -60,12 +66,12 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
Robust accessibility can be further optimized by choosing implementation patterns that
<a href="https://www.w3.org/TR/using-aria/#rule1">maximize use of semantic HTML</a>
and heeding the warning that
<a href="/WAI/ARIA/APG/practices/read-me-first/#no_aria_better_bad_aria">No ARIA is better than Bad ARIA</a>.
<a href="{{ '/ARIA/APG/practices/read-me-first/#no_aria_better_bad_aria' | relative_url }}">No ARIA is better than Bad ARIA</a>.
</li>
</ul>
</details>
<img alt=""
src="/content-images/wai-aria-practices/img/accordion.svg"
src="{{ '/content-images/wai-aria-practices/img/accordion.svg' | relative_url }}"
class="example-page-example-icon"
>

Expand All @@ -74,7 +80,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<p>
The below example section contains a simple personal information input form divided into 3 sections
that demonstrates the
<a href="/WAI/ARIA/APG/patterns/accordion/">design pattern for accordion</a>.
<a href="{{ '/ARIA/APG/patterns/accordion/' | relative_url }}">design pattern for accordion</a>.
</p>
<section>
<div class="example-header">
Expand Down Expand Up @@ -335,4 +341,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
}
};
</script>
<script src="/content-assets/wai-aria-practices/skipto.min.js"></script>
<script
src="{{ '/content-assets/wai-aria-practices/skipto.min.js' | relative_url }}"
></script>
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
# This is a generated file
title: "Alert Example"
ref: /WAI/ARIA/APG/example-index/alert/alert
ref: /ARIA/APG/example-index/alert/alert

github:
repository: w3c/aria-practices
branch: main
path: examples/alert/alert.html
feedbackmail: [email protected]
permalink: /WAI/ARIA/APG/example-index/alert/alert
permalink: /ARIA/APG/example-index/alert/alert

sidebar: true

Expand All @@ -27,9 +27,15 @@ lang: en
<script src="js/alert.js" type="text/javascript"></script>


<link rel="stylesheet" href="/content-assets/wai-aria-practices/styles.css">
<link
rel="stylesheet"
href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
>
<!-- Code highlighting styles -->
<link rel="stylesheet" href="/WAI/ARIA/APG/example-index/css/github.css">
<link
rel="stylesheet"
href="{{ '/ARIA/APG/example-index/css/github.css' | relative_url }}"
>
<script>
const addBodyClass = undefined;
Expand All @@ -49,8 +55,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<ul>
<li>
There may be support gaps in some
<a href="/WAI/ARIA/APG/practices/read-me-first/#browser_and_AT_support">browser and assistive technology combinations</a>,
especially for <a href="/WAI/ARIA/APG/practices/read-me-first/#mobile_and_touch_support">mobile/touch devices</a>.
<a href="{{ '/ARIA/APG/practices/read-me-first/#browser_and_AT_support' | relative_url }}">browser and assistive technology combinations</a>,
especially for <a href="{{ '/ARIA/APG/practices/read-me-first/#mobile_and_touch_support' | relative_url }}">mobile/touch devices</a>.
Testing code based on this example with assistive technologies is essential before considering use in production systems.
</li>
<li>
Expand All @@ -61,19 +67,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
Robust accessibility can be further optimized by choosing implementation patterns that
<a href="https://www.w3.org/TR/using-aria/#rule1">maximize use of semantic HTML</a>
and heeding the warning that
<a href="/WAI/ARIA/APG/practices/read-me-first/#no_aria_better_bad_aria">No ARIA is better than Bad ARIA</a>.
<a href="{{ '/ARIA/APG/practices/read-me-first/#no_aria_better_bad_aria' | relative_url }}">No ARIA is better than Bad ARIA</a>.
</li>
</ul>
</details>
<img alt=""
src="/content-images/wai-aria-practices/img/alert.svg"
src="{{ '/content-images/wai-aria-practices/img/alert.svg' | relative_url }}"
class="example-page-example-icon"
>

<div>

<p>
The below example demonstrates the <a href="/WAI/ARIA/APG/patterns/alert/">design pattern for alert</a>.
The below example demonstrates the <a href="{{ '/ARIA/APG/patterns/alert/' | relative_url }}">design pattern for alert</a>.
Activating the <q>Trigger Alert</q> button causes a message to be inserted into the example alert element.
</p>
<p>Similar examples include:</p>
Expand Down Expand Up @@ -198,4 +204,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
}
};
</script>
<script src="/content-assets/wai-aria-practices/skipto.min.js"></script>
<script
src="{{ '/content-assets/wai-aria-practices/skipto.min.js' | relative_url }}"
></script>
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
# This is a generated file
title: "Breadcrumb Example"
ref: /WAI/ARIA/APG/example-index/breadcrumb/index
ref: /ARIA/APG/example-index/breadcrumb/index

github:
repository: w3c/aria-practices
branch: main
path: examples/breadcrumb/index.html
feedbackmail: [email protected]
permalink: /WAI/ARIA/APG/example-index/breadcrumb/index
permalink: /ARIA/APG/example-index/breadcrumb/index

sidebar: true

Expand All @@ -26,9 +26,15 @@ lang: en
<link href="css/breadcrumb.css" rel="stylesheet" />


<link rel="stylesheet" href="/content-assets/wai-aria-practices/styles.css">
<link
rel="stylesheet"
href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
>
<!-- Code highlighting styles -->
<link rel="stylesheet" href="/WAI/ARIA/APG/example-index/css/github.css">
<link
rel="stylesheet"
href="{{ '/ARIA/APG/example-index/css/github.css' | relative_url }}"
>
<script>
const addBodyClass = undefined;
Expand All @@ -48,8 +54,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<ul>
<li>
There may be support gaps in some
<a href="/WAI/ARIA/APG/practices/read-me-first/#browser_and_AT_support">browser and assistive technology combinations</a>,
especially for <a href="/WAI/ARIA/APG/practices/read-me-first/#mobile_and_touch_support">mobile/touch devices</a>.
<a href="{{ '/ARIA/APG/practices/read-me-first/#browser_and_AT_support' | relative_url }}">browser and assistive technology combinations</a>,
especially for <a href="{{ '/ARIA/APG/practices/read-me-first/#mobile_and_touch_support' | relative_url }}">mobile/touch devices</a>.
Testing code based on this example with assistive technologies is essential before considering use in production systems.
</li>
<li>
Expand All @@ -60,18 +66,18 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
Robust accessibility can be further optimized by choosing implementation patterns that
<a href="https://www.w3.org/TR/using-aria/#rule1">maximize use of semantic HTML</a>
and heeding the warning that
<a href="/WAI/ARIA/APG/practices/read-me-first/#no_aria_better_bad_aria">No ARIA is better than Bad ARIA</a>.
<a href="{{ '/ARIA/APG/practices/read-me-first/#no_aria_better_bad_aria' | relative_url }}">No ARIA is better than Bad ARIA</a>.
</li>
</ul>
</details>
<img alt=""
src="/content-images/wai-aria-practices/img/breadcrumb.svg"
src="{{ '/content-images/wai-aria-practices/img/breadcrumb.svg' | relative_url }}"
class="example-page-example-icon"
>

<div>

<p>The following example demonstrates the <a href="/WAI/ARIA/APG/patterns/breadcrumb/">breadcrumb design pattern</a>.</p>
<p>The following example demonstrates the <a href="{{ '/ARIA/APG/patterns/breadcrumb/' | relative_url }}">breadcrumb design pattern</a>.</p>
<section>
<div class="example-header">
<h2 id="ex_label">Example</h2>
Expand All @@ -84,10 +90,10 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<a href="../../">WAI-ARIA Authoring Practices</a>
</li>
<li>
<a href="undefined">Design Patterns</a>
<a href="{{ '/ARIA/APG/patterns/' | relative_url }}">Design Patterns</a>
</li>
<li>
<a href="/WAI/ARIA/APG/patterns/breadcrumb/">Breadcrumb Pattern</a>
<a href="{{ '/ARIA/APG/patterns/breadcrumb/' | relative_url }}">Breadcrumb Pattern</a>
</li>
<li>
<a href="index.html" aria-current="page">Breadcrumb Example</a>
Expand Down Expand Up @@ -196,4 +202,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
}
};
</script>
<script src="/content-assets/wai-aria-practices/skipto.min.js"></script>
<script
src="{{ '/content-assets/wai-aria-practices/skipto.min.js' | relative_url }}"
></script>
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
# This is a generated file
title: "Button Examples"
ref: /WAI/ARIA/APG/example-index/button/button
ref: /ARIA/APG/example-index/button/button

github:
repository: w3c/aria-practices
branch: main
path: examples/button/button.html
feedbackmail: [email protected]
permalink: /WAI/ARIA/APG/example-index/button/button
permalink: /ARIA/APG/example-index/button/button

sidebar: true

Expand All @@ -27,9 +27,15 @@ lang: en
<script src="js/button.js"></script>


<link rel="stylesheet" href="/content-assets/wai-aria-practices/styles.css">
<link
rel="stylesheet"
href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
>
<!-- Code highlighting styles -->
<link rel="stylesheet" href="/WAI/ARIA/APG/example-index/css/github.css">
<link
rel="stylesheet"
href="{{ '/ARIA/APG/example-index/css/github.css' | relative_url }}"
>
<script>
const addBodyClass = undefined;
Expand All @@ -49,8 +55,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<ul>
<li>
There may be support gaps in some
<a href="/WAI/ARIA/APG/practices/read-me-first/#browser_and_AT_support">browser and assistive technology combinations</a>,
especially for <a href="/WAI/ARIA/APG/practices/read-me-first/#mobile_and_touch_support">mobile/touch devices</a>.
<a href="{{ '/ARIA/APG/practices/read-me-first/#browser_and_AT_support' | relative_url }}">browser and assistive technology combinations</a>,
especially for <a href="{{ '/ARIA/APG/practices/read-me-first/#mobile_and_touch_support' | relative_url }}">mobile/touch devices</a>.
Testing code based on this example with assistive technologies is essential before considering use in production systems.
</li>
<li>
Expand All @@ -61,12 +67,12 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
Robust accessibility can be further optimized by choosing implementation patterns that
<a href="https://www.w3.org/TR/using-aria/#rule1">maximize use of semantic HTML</a>
and heeding the warning that
<a href="/WAI/ARIA/APG/practices/read-me-first/#no_aria_better_bad_aria">No ARIA is better than Bad ARIA</a>.
<a href="{{ '/ARIA/APG/practices/read-me-first/#no_aria_better_bad_aria' | relative_url }}">No ARIA is better than Bad ARIA</a>.
</li>
</ul>
</details>
<img alt=""
src="/content-images/wai-aria-practices/img/button.svg"
src="{{ '/content-images/wai-aria-practices/img/button.svg' | relative_url }}"
class="example-page-example-icon"
>

Expand All @@ -75,7 +81,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');


<p>
The following command and toggle button examples demonstrate the <a href="/WAI/ARIA/APG/patterns/button/">button design pattern.</a>
The following command and toggle button examples demonstrate the <a href="{{ '/ARIA/APG/patterns/button/' | relative_url }}">button design pattern.</a>
</p>

<p>Similar examples include:</p>
Expand Down Expand Up @@ -271,4 +277,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
}
};
</script>
<script src="/content-assets/wai-aria-practices/skipto.min.js"></script>
<script
src="{{ '/content-assets/wai-aria-practices/skipto.min.js' | relative_url }}"
></script>
Loading

0 comments on commit 1de4afb

Please sign in to comment.