Skip to content

WIKI template: accessibility pattern

What does this template do?

This WIKI template creates a new WIKI page in the Accessibility Patterns index. The wiki pages created from this template will be used for self guided learning of accessibility patterns.

When should this template be used?

Only use this template when you have confirmed that there isn't already a page in the Accessibility Patterns index

If this is not the correct template, see WIKI and Issue templates for a list of other templates available.

Instructions

  1. Replace all bracketed [placeholders] with actual content
  2. Update the date in YYYY-MM-DD format
  3. Fill in the area below "Click to see WAVE Accessibility Pattern" with content from the official WAVE documentation
    1. Replace [YYYY-MM-DD] with the date the content was added or reviewed
    2. Go to https://wave.webaim.org/api/docs?format=html
    3. Find the section that matches the WAVE guidance referenced in this file (e.g. Link to PDF document)
    4. Copy the anchor name from the end of that section (e.g. link_pdf)
    5. Replace both [REPLACE ANCHOR NAME] in the link with that anchor name
    6. For each header under that (e.g. ### WAVE Category), add the content from the relevant WAVE guidance section
  4. Add actual screenshot URLs to replace IMAGE_URL placeholders
  5. Add all contributor GitHub handles in the Credits section (wiki page author, PR author and reviewers)
  6. Remove or add screenshot sections as needed

Template

Copy/paste this template to create a wiki page in the folder: /getting-started/accessibility-patterns-index

File Name

The filename should be all lowercase and without brackets

[REPLACE WITH WAVE CATEGORY]-[REPLACE WITH WAVE ACCESSIBILITY PATTERN NAME].md

Body

# [REPLACE WITH WAVE CATEGORY] - [REPLACE WITH WAVE ACCESSIBILITY PATTERN NAME]
- WAVE Category: [REPLACE WITH WAVE CATEGORY]
- WAVE ACCESSIBILITY PATTERN: [REPLACE WITH NAME]

## Page Content Status
- [ ] WAVE Tool Reference text
- [ ] Example of a DOM Snippet Generated From WAVE Tool
- [ ] Screenshots of Accessibility Pattern in Use
- [ ] Credits/Authors

## WAVE Tool Reference

??? Info "Click to see WAVE Tool Reference"

    This content added [YYYY-MM-DD]. Check for updated guidance at: <a href="https://wave.webaim.org/api/docs?format=html#[REPLACE ANCHOR NAME]" target="_blank">https://wave.webaim.org/api/docs?format=html#[REPLACE ANCHOR NAME]</a>

    > ### WAVE Category
    > [REPLACE WITH WAVE CATEGORY]

    > ### WAVE ACCESSIBILITY PATTERN
    > [REPLACE WITH WAVE ACCESSIBILY PATTERN NAME]

    > ### What It Means
    > [REPLACE WITH WAVE CONTENT FOR What It Means]

    > ### Why It Matters
    > [REPLACE WITH WAVE CONTENT FOR Why It Matters]

    > ### What To Do
    > [REPLACE WITH WAVE CONTENT FOR What To Do]

    > ### The Algorithm... in English
    > [REPLACE WITH WAVE CONTENT FOR The Algorithm... In English]

    > ### Standards and Guidelines
    > [REPLACE WITH WAVE CONTENT FOR Standards and Guidelines]

## Example of a DOM Snippet Generated From WAVE Tool

> ```html
> [HTML snippet showing the code structure that WAVE detected]
> ```

## Screenshots of Accessibility Pattern in Use

<!-- Author Instructions: when including markdown images, ensure they are responsive by specifying EITHER width OR height. Do not provide both. -->

??? Info "1. Descriptive Title for Screenshot Set 1"

    Description/text for image

    [INSERT IMAGE HERE]

## Credits/Authors
<!-- Author Instructions: Add bullet points with GitHub handles of all HfLA members who contributed to this wiki page and/or contributed to Pull Requests that provided solutions for this page -->
- [INCLUDE Contributor 1]
- [INCLUDE Contributor 2]
- [INCLUDE Contributor N]
  • Page Status: In Progress
  • Authors:
    • Bonnie Wolfe
    • Rabia Shaikh