Semantic Elements
HTML should be developed with accessibility in mind, aiming to be as semantic as possible to ensure users can easily navigate and interact with the site.
Examples:
- <header>: Represents the header of a section or page.
- <nav>: Contains navigation links.
- <article>: Represents a self-contained piece of content.
- <section>: Represents a section in a document.
- <aside>: Contains supplementary content, like a sidebar.
- <footer>: Represents the footer of a section or page.
- <main>: Represents the main content of the document.
- <strong>: Indicates strongly emphasized text.
- <em>: Indicates text with stress emphasis.
Non-Semantic Elements
Non-semantic elements are generic containers used for styling or scripting purposes. They do not provide any meaningful information about the content they enclose.
Examples:
- <div>: A generic container for grouping and styling content.
- <span>: A generic inline container for styling content.
- <b>: Bolds text without adding semantic meaning.
- <i>: Italicises text without emphasizing content type.
- <br>: Adds a line break.
- <hr>: Adds a horizontal line.
Web Content Accessibility Guidelines (WCAG)
WCAG, developed by the World Wide Web Consortium (W3C), provides standards to make web content more accessible to people with disabilities. These guidelines ensure web content is perceivable, operable, understandable, and robust for all users and are divided into three compliance levels: A, AA, and AAA.
WCAG Compliance Levels:
| Compliance Level | Description |
|---|---|
| Level A | Basic web accessibility features; does not cover all accessibility barriers. |
| Level AA | Addresses a wide range of accessibility issues; recommended level for most websites. |
| Level AAA | Highest level of accessibility; difficult to achieve and not always necessary. |
Note: Level AA is the target compliance level recommended by WCAG. Meeting Level AA indicates that a design addresses many accessibility issues.
POUR Principles
POUR stands for Perceivable, Operable, Understandable, and Robust. These principles guide the creation of accessible digital content.
Perceivable
Ensure all users can perceive (access and understand) the content. Provide alternative text for images, captions for videos, and use clear headings and paragraphs.
Operable
Ensure users can navigate and interact with content. Implement keyboard accessibility, focus indicators, and options to skip repetitive content.
Understandable
Make content clear and predictable. Use simple language, clear instructions, and informative error messages.
Robust
Ensure content is compatible with current and future technologies. Use valid, well-structured code and ARIA roles for dynamic content.
Additional Accessibility Considerations
- Headings: Use <h1>, <h2>, etc., to define page structure.
- Important: Provide alternative text for images to support screen readers.
- Declare the Language: Use the lang attribute in the <html> tag (e.g., <html lang="en">).
- Descriptive Link Text: Use clear, descriptive link text.
- Web Accessibility Checkers: Use tools like WAVE (https://wave.webaim.org/) to evaluate accessibility.
- Ensuring your website adheres to these accessibility principles will improve user experience for all visitors and comply with legal standards.
Meet Gordon
