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

当記事は公開されてから 1 年以上経過している記事です。

「markuplint のルールをカスタマイズする」の改善提案など気軽にご協力いただければ幸いです。

Issue はこちらでよろしくお願いします: https://github.com/jiyuujin/webneko-blog/issues

4/21/2022

A11Y

React

TypeScript

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

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

記事と合わせ登壇スライドも作成している。

https://docs.google.com/presentation/d/1IGtF7dFfB4QTHNPBDND8KeczHRSrs0Uy7eBMvYqYHdQ/edit?usp=sharing

markuplint を導入する

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

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

https://webneko.dev/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` 属性で入力可能な値を調整する

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` ルールの利用を考慮する

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"
          }
        ]
      }
    ]
  }
}