# WCAG 2.1 Principles in Markdown Context

## Principle 1: Perceivable
Information must be presentable in ways users can perceive.

### Text Alternatives for Images
```markdown
<!-- Accessible image with descriptive alt text -->
![Screenshot showing the main navigation menu with File, Edit, and View options highlighted in blue](navigation-screenshot.png)

<!-- Decorative image that should be ignored by screen readers -->
![](decorative-border.png)

<!-- Complex image with detailed description -->
![Chart showing quarterly sales data](sales-chart.png "Detailed description: Bar chart displays Q1-Q4 sales with Q3 showing highest performance at $2.3M, Q1 at $1.8M, Q2 at $2.1M, and Q4 at $1.9M")
```

### Meaningful Content Structure
```markdown
<!-- Logical heading hierarchy -->
# Main Document Title (h1)
## Primary Section (h2)
### Subsection (h3)
#### Detail Section (h4)

<!-- Meaningful list structure -->
## Installation Steps
1. Download the installer package
2. Run the installer with administrator privileges
3. Follow the setup wizard prompts
4. Restart your system to complete installation

## Feature List
- **Core Features**: Essential functionality for basic usage
- **Advanced Features**: Extended capabilities for power users
- **Experimental Features**: Beta functionality for early adopters
```

## Principle 2: Operable
Interface components must be operable.

### Keyboard Navigation Support
```markdown
<!-- Accessible link text -->
<!-- Bad: Generic link text -->
[Click here](download-page.html) for downloads.

<!-- Good: Descriptive link text -->
[Download the user manual PDF (2.3 MB)](user-manual.pdf)

<!-- Link with context -->
Read more about [accessibility testing procedures in our development guide](dev-guide.html#accessibility-testing).
```

### Focus Management
```html
<!-- In generated HTML, ensure focus indicators are visible -->
<style>
/* Ensure focus indicators are clearly visible */
a:focus {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
    background-color: #fffbf0;
}

/* Skip navigation link for keyboard users */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
    z-index: 1000;
}

.skip-link:focus {
    top: 6px;
}
</style>
```

## Principle 3: Understandable
Information and UI operation must be understandable.

### Clear Language and Structure
```markdown
<!-- Use clear, simple language -->
## How to Create a New Project

To create a new project:

1. **Open the application**
   - Double-click the desktop icon, or
   - Press Ctrl+Alt+N for the new project shortcut

2. **Select project type**
   - Choose "Basic Project" for standard features
   - Choose "Advanced Project" for custom configurations

3. **Configure settings**
   - Enter project name (required)
   - Select save location (optional, defaults to Documents folder)
   - Choose template (optional, uses blank template by default)

### Important Notes
- Project names cannot contain special characters: / \ : * ? " < > |
- Save locations must be accessible and writable
- Templates can be customized after project creation
```

### Consistent Terminology
```markdown
<!-- Maintain consistent terminology throughout documentation -->
## Glossary

**Project**: A collection of files and settings that define a complete work unit
**Workspace**: The main application window where projects are edited
**Template**: A pre-configured project structure that provides starting content
**Export**: The process of converting project content to output formats

<!-- Use consistent terms in content -->
## Creating Your First Project

When you create a new **project**, it opens in the main **workspace**. You can choose to start from a blank **project** or select a **template** that matches your needs. Once your **project** is complete, you can **export** it to various formats.
```

## Principle 4: Robust
Content must be robust enough for interpretation by assistive technologies.

### Semantic Markup
```markdown
<!-- Use semantic markup patterns -->
## Data Comparison

| Feature | Basic Plan | Premium Plan | Enterprise Plan |
|---------|------------|--------------|-----------------|
| **Storage** | 10 GB | 100 GB | Unlimited |
| **Users** | 1 | 5 | Unlimited |
| **Support** | Email | Email + Chat | 24/7 Phone |
| **Price** | $9/month | $29/month | Contact Sales |

### Key Differences Summary
- **Basic Plan**: Suitable for individual users with light storage needs
- **Premium Plan**: Ideal for small teams requiring collaboration features  
- **Enterprise Plan**: Comprehensive solution for large organizations
```