https://github.com/danielmatthew/inaccessible.css

A stylesheet to highlight common markup flaws
https://github.com/danielmatthew/inaccessible.css

accessibility css highlight

Last synced: 4 months ago
JSON representation

A stylesheet to highlight common markup flaws

• Host: GitHub
• URL: https://github.com/danielmatthew/inaccessible.css
• Owner: danielmatthew
• Created: 2020-08-09T11:40:12.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2024-06-16T13:16:27.000Z (about 1 year ago)
• Last Synced: 2025-03-17T23:39:00.916Z (4 months ago)
• Topics: accessibility, css, highlight
• Language: SCSS
• Homepage: https://inaccessible-css.netlify.app/
• Size: 380 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# inaccessible.css

![NPM Version 1.2.0](https://img.shields.io/npm/v/inaccessible.css?style=for-the-badge)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=for-the-badge)](https://github.com/semantic-release/semantic-release)

A stylesheet to highlight inaccessible markup. It'll add an obnoxious red outline around elements which are lacking important attributes.

## Violations

The stylesheet will highlight the following accessibility mistakes:

- Document missing the `lang`

- Images missing an `alt`

- Labels without a `for`

- Links without an `href`

- iframes without a `title`

## Usage

### CSS

Add `inaccessible.css` to the document head:

```html

```

### SCSS

Import `inaccessible.scss` into your stylesheet:

```scss

@import 'inaccessible';

body { … }

```