accessible-html-content-patterns

    2.0.1 • Public • Published

    Accessible HTML Content Patterns

    A collection of the full HTML5 Doctor Element Index, minus the <command> and <menu> tags (which have poor browser support), as well as common markup patterns for quick reference.

    Motivation

    There are countless little gotchas and quirks to remember when writing markup, even for basic components. This is an attempt to capture and centralize them.

    Use this as a starting point when creating your base markup and styling for a stable, progressively enhanced foundation to your site or app, or cherry-pick as needed.

    Installation

    There are a few of ways to work with this repo:

    • Clone it in its entirety: https://github.com/ericwbailey/accessible-html-content-patterns.git
    • Download a zipped copy
    • Install via NPM: npm i accessible-html-content-patterns
    • Curl just the HTML page (great starting place for a styleguide): curl -o accessible-html-content-patterns.html https://raw.githubusercontent.com/ericwbailey/accessible-html-content-patterns/master/docs/index.html
    • Copy/paste individual elements from the source code

    To review any changes you make locally, run make build from the command line. This will stitch the handlebar templates together to update docs/index.html.

    Code Concerns

    Classes and IDs

    Are suggestions only, or used for internal navigation/reference. Don't feel you need to include them if they're not relevant to your component's needs.

    Code Style

    Tabs, indentation, comments, etc. are my personal preference. It's more important to be consistent than literal when using for your own project. Use EditorConfig to help make this easier.

    Accessibility Testing

    This page has been tested via the Chrome DevTools Accessibility Audit, as well as WebAIM's WAVE and Deque System's aXe accessibility testing browser extensions, as well as Khan Academy's tota11y bookmarklet.

    Answers to specific warnings issues are available on the repo's Wiki.

    A note about ARIA: ARIA is a band-aid and not a cure-all. Use semantic markup whenever possible.

    Contributing

    Contributions are welcome!

    Credits, Attribution, and Inspiration

    License

    MIT License

    Install

    npm i accessible-html-content-patterns

    DownloadsWeekly Downloads

    21

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    135 kB

    Total Files

    19

    Last publish

    Collaborators

    • avatar
    • avatar