markuplint のルールをカスタマイズする

今回触れる内容は下記の通りです。

(前置き) markuplint を導入する
markuplint ルールのカスタマイズ
- indentation ルールを切る
- <img> 要素で設定可能な属性を個別に調整する
- アンカー <a> 要素の rel 属性で入力すべき値を個別に調整する
- メディア要素の controlslist 属性で入力可能な値を調整する
- Emotion 利用の際に <div> 要素で css 属性の使用を許容する
- permitted-contents ルールの利用を考慮する
最新ニュース一覧
- <aside> 要素でアクセシビリティマッピングの変更を認識する
- <dialog> 要素でアクセシビリティを意識する
- 代替テキストはなぜ簡潔にすべきか
- 新たに freee アクセシビリティ研修動画が公開されている
- Global Accessibility Awareness Day 2022 (GAAD Japan) 登壇者が発表されている

記事と合わせも作成している。

markuplint を導入する

前置きとして、前回は markuplint の導入を進めた。

その詳細は markuplint おさわり会に記載しているので、是非ともチェックいただきたい。

/posts/setup-markuplint-to-audit-accessibility

markuplint ルールのカスタマイズ

主に下記の通りです。

indentation ルールを切る
<img> 要素で設定可能な属性を個別に調整する
アンカー <a> 要素の rel 属性で入力すべき値を個別に調整する
メディア要素の controlslist 属性で入力可能な値を調整する
CSS-in-JS 利用の際に <div> 要素で css 属性の使用を許容する
permitted-contents ルールの利用を考慮する

なお、 <audio> / <video> 要素で track 属性が書かれていないケースが挙げられる。これは字幕に対応していないことを意味しており、下記のようなエラーを確認できる。

error: 要素「track」が必要です (required-element)

よく分からない場合は、無理にカスタマイズを行わなくても良いでしょう。

今回、個々の該当ファイルを excludeFiles へ設定した。

他の解決策があれば、それに切り替えれば良い。

`indentation` ルールを切る

Prettier ルールとの Conflict を解消するため。

{
  "rules": {
    "indentation": false
  }
}

`<img>` 要素で設定可能な属性を個別に調整する

width 属性や height 属性はデフォルトで必須の属性となっているため。

{
  "nodeRules": [
    {
      "tagName": "img",
      "rules": {
        "required-attr": [
          "alt",
          "src"
        ]
      }
    }
  ]
}

アンカー `<a>` 要素の `rel` 属性で入力すべき値を個別に調整する

rel 属性で noopener が含まれているか、機械的にチェックしたいケースがあるため。

{
  "nodeRules": [
    {
      "tagName": "a",
      "rules": {
        "required-attr": [
          {
            "name": "rel",
            "value": "/noopener/i"
          }
        ]
      }
    }
  ]
}

メディア要素の `controlslist` 属性で入力可能な値を調整する

を設定することで、メディア要素 (<audio> / <video>) に表示するコントロールの選択を補助してくれる。

この属性に入る可能性の値をあらかじめ定義しておき、機械的にチェックしたいケースがあるため。

{
  "rules": {
    "invalid-attr": {
      "option": {
        "attrs": {
          "controlslist": {
            "enum": ["nodownload"]
          },
        }
      }
    }
  }
}

CSS-in-JS 利用の際に `<div>` 要素で `css` 属性の使用を許容する

CSS-in-JS に Styled Components や Emotion を利用している場合に、 <div> 要素で css 属性を使っているケースがあるため。

{
  "rules": {
    "invalid-attr": {
      "option": {
        "attrs": {
          "css": {
            "disallowed": true
          }
        }
      }
    }
  }
}

`permitted-contents` ルールの利用を考慮する

のルールで個別のタグを定義していけば、より精度の高いチェックツールが完成されて来そうです。

{
  "rules": {
    "permitted-contents": [
      {
        "tag": "x-container",
        "contents": [
          { "require": "x-item" },
          { "optional": "y-item" },
          { "oneOrMore": "z-item" },
          { "zeroOrMore": "#text" },
          // ❌ Cannot specify keywords simultaneously
          {
            "require": "x-item",
            "optional": "y-item"
          }
        ]
      }
    ]
  }
}

その他

記事と合わせも作成している。

markuplint のルールをカスタマイズする

markuplint を導入する

markuplint ルールのカスタマイズ

`indentation` ルールを切る

`<img>` 要素で設定可能な属性を個別に調整する

アンカー `<a>` 要素の `rel` 属性で入力すべき値を個別に調整する

メディア要素の `controlslist` 属性で入力可能な値を調整する

CSS-in-JS 利用の際に `<div>` 要素で `css` 属性の使用を許容する

`permitted-contents` ルールの利用を考慮する

最新ニュース一覧

`<aside>` 要素でアクセシビリティマッピングの変更を認識する

`<dialog>` 要素でアクセシビリティを意識する

代替テキストはなぜ簡潔にすべきか

新たに freee アクセシビリティ研修動画が公開されている

Global Accessibility Awareness Day 2022 (GAAD Japan) 登壇者が発表されている

その他

markuplint のルールをカスタマイズする

markuplint を導入する

markuplint ルールのカスタマイズ

indentation ルールを切る

<img> 要素で設定可能な属性を個別に調整する

アンカー <a> 要素の rel 属性で入力すべき値を個別に調整する

メディア要素の controlslist 属性で入力可能な値を調整する

CSS-in-JS 利用の際に <div> 要素で css 属性の使用を許容する

permitted-contents ルールの利用を考慮する

最新ニュース一覧

<aside> 要素でアクセシビリティマッピングの変更を認識する

<dialog> 要素でアクセシビリティを意識する

代替テキストはなぜ簡潔にすべきか

新たに freee アクセシビリティ研修動画が公開されている

Global Accessibility Awareness Day 2022 (GAAD Japan) 登壇者が発表されている

その他

`indentation` ルールを切る

`<img>` 要素で設定可能な属性を個別に調整する

アンカー `<a>` 要素の `rel` 属性で入力すべき値を個別に調整する

メディア要素の `controlslist` 属性で入力可能な値を調整する

CSS-in-JS 利用の際に `<div>` 要素で `css` 属性の使用を許容する

`permitted-contents` ルールの利用を考慮する

`<aside>` 要素でアクセシビリティマッピングの変更を認識する

`<dialog>` 要素でアクセシビリティを意識する