Skip to content

Commit f6972fa

Browse files
crystalenkacrystalenka
authored
Adding basic structure to a11y docs and a11y shortcut to homepage (#13)
Adding basic structure
1 parent d28031a commit f6972fa

File tree

11 files changed

+278
-5
lines changed

11 files changed

+278
-5
lines changed

‎docs/accessibility/atag.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
sidebar_position: 3
3+
---
4+
ATAG Conformance
5+
===========
6+
In this section we will explain the Authoring Tool Accessibility Guidelines, which level of conformance we are aiming for, and how to learn more about ATAG.
7+
8+
:::caution TODO
9+
10+
This page is unfinished, please use the **Edit this Page** link at the bottom of this page to help make it more useful.
11+
12+
:::

‎docs/accessibility/best-practices/empty-template.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
Page Template
2+
===========
3+
import Tabs from '@theme/Tabs';
4+
import TabItem from '@theme/TabItem';
5+
6+
:::tip
7+
This is an empty template, intended to be used as a starting point for adding new best practices pages. Try to keep it consistent with other pages and fill out all relevant sections; sections marked "optional" can be removed if not relevant.
8+
:::
9+
10+
## Overview
11+
12+
Definition / explanation of what this page is all about.
13+
14+
### Best Practices
15+
* Add best practices here.
16+
* etc
17+
18+
### Common Mistakes
19+
* Add common errors here.
20+
21+
## Who is affected?
22+
People using screen readers need ....
23+
24+
People with cognitive disabilities need ... etc.
25+
26+
Who is impacted most by the accessibility of this element?
27+
28+
## Testing for accessibility
29+
<Tabs>
30+
<TabItem value="screenreader" label="With a screenreader">
31+
32+
How does someone test that this is accessible with a screenreader?
33+
1. Use the screen reader to navigate to ...
34+
2. Make sure ...
35+
3. Make sure ...
36+
4. If ... then it passes. ✅
37+
5. If ... then it fails. ❌
38+
39+
</TabItem>
40+
<TabItem value="inspector" label="With web inspector">
41+
42+
How does someone test that this is accessible with web inspector?
43+
1. Right Click > Inspect ... on the page.
44+
2. Make sure ...
45+
3. Make sure ...
46+
4. If ... then it passes. ✅
47+
5. If ... then it fails. ❌
48+
6. If ... then it passes. ✅
49+
7. If ... then it fails. ❌
50+
51+
</TabItem>
52+
</Tabs>
53+
54+
## Relevant WCAG Success Criteria
55+
* Link to the WCAG Success Criteria here. For example:
56+
* [WCAG criteria 1.3.1 - Info and Relationships](https://www.w3.org/TR/WCAG22/#info-and-relationships)
57+
58+
## Relevant ATAG Guidelines (optional)
59+
* Link to the ATAG Guideline(s) here. For example:
60+
* [Guideline A.3.2: (For the authoring tool user interface) Provide authors with enough time.](https://www.w3.org/TR/ATAG20/#gl_a32)
61+

‎docs/accessibility/best-practices/index.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
sidebar_position: 4
3+
---
4+
Best Practices for Accessible Design
5+
===========
6+
In this section we will explain different aspects to designing with accessibility in mind.
7+
8+
Suggested sub-pages:
9+
1. Colours
10+
2. Fonts
11+
3. Images
12+
4. Focus Order
13+
5. (add more)
14+
15+
:::caution TODO
16+
17+
This page is unfinished, please use the **Edit this Page** link at the bottom of this page to help make it more useful.
18+
19+
:::

‎docs/accessibility/code-for-humans.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
sidebar_position: 1
3+
---
4+
You code for humans, not machines.
5+
===========
6+
In this section we will explain what accessibility is and why it matters. This should be evocative and informative; why should people care?
7+
8+
:::caution TODO
9+
10+
This page is unfinished, please use the **Edit this Page** link at the bottom of this page to help make it more useful.
11+
12+
:::

‎docs/accessibility/element-library/empty-template.md‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
Element Template
2+
===========
3+
import Tabs from '@theme/Tabs';
4+
import TabItem from '@theme/TabItem';
5+
6+
:::tip
7+
This is an empty template, intended to be used as a starting point for adding UI elements to the library. Try to keep it consistent with other elements and fill out all relevant sections; sections marked "optional" can be removed if not relevant.
8+
:::
9+
10+
## Overview
11+
12+
Definition / explanation of what this component is/how it works.
13+
14+
<Tabs>
15+
<TabItem value="front" label="Front End Screenshot">
16+
17+
Put front end/Cassiopeia screenshot here, if applicable. Don't forget alt text!
18+
19+
</TabItem>
20+
<TabItem value="back" label="Back End Screenshot">
21+
22+
Put back end/Atum screenshot here, if applicable. Don't forget alt text!
23+
24+
</TabItem>
25+
</Tabs>
26+
27+
## Usage
28+
### Requirements (optional)
29+
If this code only works in certain contexts or environments, add that here. For example:
30+
* PHP 8.0+
31+
* No IE Support
32+
33+
### Code Snippets
34+
35+
<Tabs>
36+
<TabItem value="front" label="Front End Usage">
37+
38+
:::info
39+
40+
Add notes about using this snippet in the front end, if applicable.
41+
42+
:::
43+
44+
```html title="Sample Front End Usage - ie, Cassiopia template"
45+
<!-- HTML Code Snippet Here -->
46+
```
47+
48+
</TabItem>
49+
<TabItem value="back" label="Back End Usage">
50+
51+
:::info
52+
53+
Add notes about using this snippet in the back end, if applicable.
54+
55+
:::
56+
57+
```html title="Sample Back End Usage - ie, Atum template"
58+
<!-- HTML Code Snippet Here -->
59+
```
60+
61+
</TabItem>
62+
</Tabs>
63+
64+
65+
66+
67+
### Best Practices
68+
* Add best practices here. For example, "Make sure you only use button elements when it will do an action, instead of navigating to a different page."
69+
* etc
70+
71+
### Common Mistakes
72+
* Add common errors here.
73+
74+
## Who is affected?
75+
People using screen readers need ....
76+
77+
People with cognitive disabilities need ... etc.
78+
79+
Who is impacted most by the accessibility of this element?
80+
81+
## Testing for accessibility
82+
<Tabs>
83+
<TabItem value="screenreader" label="With a screenreader">
84+
85+
How does someone test that this is accessible with a screenreader?
86+
1. Use the screen reader to navigate to ...
87+
2. Make sure ...
88+
3. Make sure ...
89+
4. If ... then it passes. ✅
90+
5. If ... then it fails. ❌
91+
92+
</TabItem>
93+
<TabItem value="inspector" label="With web inspector">
94+
95+
How does someone test that this is accessible with web inspector?
96+
1. Right Click > Inspect ... on the page.
97+
2. Make sure ...
98+
3. Make sure ...
99+
4. If ... then it passes. ✅
100+
5. If ... then it fails. ❌
101+
6. If ... then it passes. ✅
102+
7. If ... then it fails. ❌
103+
104+
</TabItem>
105+
</Tabs>
106+
107+
## Relevant WCAG Success Criteria
108+
* Link to the WCAG Success Criteria here. For example:
109+
* [WCAG criteria 1.3.1 - Info and Relationships](https://www.w3.org/TR/WCAG22/#info-and-relationships)
110+
111+
## Relevant ATAG Guidelines (optional)
112+
* Link to the ATAG Guideline(s) here. For example:
113+
* [Guideline A.3.2: (For the authoring tool user interface) Provide authors with enough time.](https://www.w3.org/TR/ATAG20/#gl_a32)
114+

‎docs/accessibility/code-blocks/index.md‎ renamed to ‎docs/accessibility/element-library/index.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
Code Blocks
1+
---
2+
sidebar_position: 4
3+
---
4+
Accessible UI Library
25
===========
36
In this section we will show how to write accessible elements for Joomla.
47
:::caution TODO

‎docs/accessibility/template.md‎ renamed to ‎docs/accessibility/further-reading.md‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1-
Template
2-
========
3-
This is the content for developing an accessible template.
1+
---
2+
sidebar_position: 7
3+
---
4+
Further Reading
5+
===========
6+
Additional accessibility resources can go here.
47

58
:::caution TODO
69

‎docs/accessibility/reporting-issues.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
sidebar_position: 6
3+
---
4+
Reporting Errors
5+
===========
6+
How do people report accessibility issues in the CMS or template to us?
7+
8+
:::caution TODO
9+
10+
This page is unfinished, please use the **Edit this Page** link at the bottom of this page to help make it more useful.
11+
12+
:::

‎docs/accessibility/testing.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
sidebar_position: 5
3+
---
4+
Testing Accessibility
5+
===========
6+
How should people test the accessibility of their sites?
7+
8+
Add notes about automated tools, jooA11y, checklists, etc.
9+
10+
:::caution TODO
11+
12+
This page is unfinished, please use the **Edit this Page** link at the bottom of this page to help make it more useful.
13+
14+
:::

‎docs/accessibility/wcag.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
sidebar_position: 2
3+
---
4+
WCAG Conformance
5+
===========
6+
In this section we will explain the Web Content Authoring Guidelines, which level of conformance we are aiming for, and how to learn more about WCAG.
7+
8+
:::caution TODO
9+
10+
This page is unfinished, please use the **Edit this Page** link at the bottom of this page to help make it more useful.
11+
12+
:::

0 commit comments

Comments
 (0)