structure

Name: structure
Author: Owl-Listener

82stars25forks

How to install structure?

owl-listener/inclusive-design-skills/structure

$npx -y skills add Owl-Listener/inclusive-design-skills --skill structure

Installs into the current project.

Summary

Structure content for screen reader and assistive technology use. Chains: heading-structure, alt-text-design, table-accessibility, form-labelling. Use when building a new page, document, or content template and you want to get the structural accessibility right from the start.

Files · 1

View on GitHub

SKILL.md

1	# Structure for Assistive Technology
2
3	Build content structure that assistive technology can parse, navigate,
4	and present meaningfully — so the structure you designed is the
5	structure every user experiences.
6
7	## Process
8
9	### Step 1: Define the Document Outline
10	Using heading-structure, design the heading hierarchy:
11	- One H1 describing the page purpose
12	- H2s for major sections
13	- H3s for subsections within those
14	- Verify: does reading only the headings tell the full story?
15
16	### Step 2: Identify Landmarks
17	Map the page regions that assistive technology uses for navigation:
18	- banner — site header and branding
19	- navigation — primary and secondary nav
20	- main — the primary content area
21	- complementary — sidebars and related content
22	- contentinfo — footer
23	- search — search functionality
24	- form — significant forms (use aria-label to distinguish multiples)
25
26	Every page should have at minimum: banner, navigation, main, contentinfo.
27
28	### Step 3: Structure Images and Media
29	Using alt-text-design, assign alt text strategy for every image:
30	- Decorative: empty alt
31	- Functional: alt describes the action
32	- Informative: alt describes the information
33	- Complex: short alt plus extended description
34
35	### Step 4: Structure Data
36	Using table-accessibility, for every table:
37	- Assign headers with proper scope
38	- Add caption describing the table's content
39	- Plan responsive behaviour for small screens
40
41	### Step 5: Structure Forms
42	Using form-labelling, for every form:
43	- Associate every input with a visible label
44	- Group related fields with fieldset/legend
45	- Plan error message association
46	- Define required field indication strategy
47
48	### Step 6: Define Reading Order
49	- Verify that the DOM order matches the visual order
50	- Content should make sense when read linearly top to bottom
51	- Avoid CSS that visually rearranges content away from DOM order
52	- Tab order should follow reading order
53
54	## Output
55
56	Deliver a structural specification that includes:
57	- Document outline (heading hierarchy)
58	- Landmark map
59	- Image alt text strategy per image type
60	- Table structure specification
61	- Form labelling specification
62	- Reading order confirmation

People who liked this also viewed

6 picks

Type

structure

82stars25forks

View on GitHub

How to install structure?

owl-listener/inclusive-design-skills/structure

$npx -y skills add Owl-Listener/inclusive-design-skills --skill structure

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Structure for Assistive Technology
2
3	Build content structure that assistive technology can parse, navigate,
4	and present meaningfully — so the structure you designed is the
5	structure every user experiences.
6
7	## Process
8
9	### Step 1: Define the Document Outline
10	Using heading-structure, design the heading hierarchy:
11	- One H1 describing the page purpose
12	- H2s for major sections
13	- H3s for subsections within those
14	- Verify: does reading only the headings tell the full story?
15
16	### Step 2: Identify Landmarks
17	Map the page regions that assistive technology uses for navigation:
18	- banner — site header and branding
19	- navigation — primary and secondary nav
20	- main — the primary content area
21	- complementary — sidebars and related content
22	- contentinfo — footer
23	- search — search functionality
24	- form — significant forms (use aria-label to distinguish multiples)
25
26	Every page should have at minimum: banner, navigation, main, contentinfo.
27
28	### Step 3: Structure Images and Media
29	Using alt-text-design, assign alt text strategy for every image:
30	- Decorative: empty alt
31	- Functional: alt describes the action
32	- Informative: alt describes the information
33	- Complex: short alt plus extended description
34
35	### Step 4: Structure Data
36	Using table-accessibility, for every table:
37	- Assign headers with proper scope
38	- Add caption describing the table's content
39	- Plan responsive behaviour for small screens
40
41	### Step 5: Structure Forms
42	Using form-labelling, for every form:
43	- Associate every input with a visible label
44	- Group related fields with fieldset/legend
45	- Plan error message association
46	- Define required field indication strategy
47
48	### Step 6: Define Reading Order
49	- Verify that the DOM order matches the visual order
50	- Content should make sense when read linearly top to bottom
51	- Avoid CSS that visually rearranges content away from DOM order
52	- Tab order should follow reading order
53
54	## Output
55
56	Deliver a structural specification that includes:
57	- Document outline (heading hierarchy)
58	- Landmark map
59	- Image alt text strategy per image type
60	- Table structure specification
61	- Form labelling specification
62	- Reading order confirmation

People who liked this also viewed

6 picks

Type