`wai-aria`

WAI-ARIAおよびARIA in HTMLの仕様のとおりrole属性またはaria-*属性が設定されていない場合に警告します。

次の場合に警告します。

明らかな仕様違反
- 仕様に存在しないロールを指定した場合
- 抽象ロールを指定した場合
- 指定したロール（もしくは暗黙のロール）が持たないプロパティ/ステートを指定した場合
- プロパティ/ステートに無効な値を指定した場合
- ARIA in HTMLの仕様における要素に許可されていないロールを指定した場合
- 必須のプロパティ/ステートを指定していない場合
推奨されない使い方
- 非推奨（廃止予定）のロールを指定した場合
- 非推奨（廃止予定）のプロパティ/ステートを指定した場合
- ARIA in HTMLの仕様における要素の暗黙のロールを明示的に指定した場合
- ARIA in HTMLの仕様において、HTMLの属性と同等の意味を持つプロパティ/ステートを指定した場合
プリファレンス
- プロパティ/ステートのデフォルト値を明示的に指定した場合

❌ 間違ったコード例

<div role="landmark" aria-busy="busy">
  <ul>
    <li role="button">an item</li>
  </ul>
  <button aria-checked="true">Click me!</button>
</div>

✅ 正しいコード例

<div role="banner" aria-busy="true">
  <ul>
    <li role="menuitemcheckbox">an item</li>
  </ul>
  <button aria-pressed="true">Click me!</button>
</div>

Interface

{
  "wai-aria": boolean
}

Options

{
  "wai-aria": {
    "options": {
      "checkingValue"?: boolean
      "checkingDeprecatedRole"?: boolean
      "checkingDeprecatedProps"?: boolean
      "permittedAriaRoles"?: boolean
      "disallowSetImplicitRole"?: boolean
      "disallowSetImplicitProps"?: boolean
      "disallowDefaultValue"?: boolean
      "version"?: "1.1" | "1.2"
    }
  }
}

Property	Type	Default Value	Description
`checkingValue`	`boolean`	`"true"`	プロパティ/ステートの値をチェックします。このオプションは、Markuplintが許可リストに追加するよりも先にWAI-ARIAの仕様が更新された場合などに、必要に応じて一時的に無効化できるようにしています。基本的に無効化を推奨しません。
`checkingDeprecatedRole`	`boolean`	`"true"`	非推奨（廃止予定）のロールをチェックします。WAI-ARIAの古いバージョンのためにこの評価を無効化できます。基本的に無効化を推奨しません。
`checkingDeprecatedProps`	`boolean`	`"true"`	非推奨（廃止予定）のプロパティ/ステートの値をチェックします。WAI-ARIAの古いバージョンのためにこの評価を無効化できます。基本的に無効化を推奨しません。
`permittedAriaRoles`	`boolean`	`"true"`	ARIA in HTMLの仕様において要素に許可されているロールかチェックします。ARIA in HTMLによるもので厳密にはWAI-ARIAの仕様ではないためオプションとしています。
`disallowSetImplicitRole`	`boolean`	`"true"`	暗黙的なロールの明示的な設定を禁止します。ARIA in HTMLによるもので厳密にはWAI-ARIAの仕様ではないためオプションとしています。
`disallowSetImplicitProps`	`boolean`	`"true"`	暗黙的なプロパティ/ステートの明示的な設定を禁止します。ARIA in HTMLによるもので厳密にはWAI-ARIAの仕様ではないためオプションとしています。
`disallowDefaultValue`	`boolean`	`"true"`	プロパティ/ステートのデフォルト値の明示的な設定を禁止します。
`version`	`"1.1" \| "1.2"`	`"1.2"`	評価するWAI-ARIAのバージョンを指定します。

Default Severity

error

設定例

ブラウザのサポート状況や支援技術の振る舞いで調整が必要な場合の例を挙げます。

以下はSafariとVoiceOverの環境で、SVGを読み込んでいるimg要素にrole="img"が必要な場合に、disallowSetImplicitRoleを無効化する例です。（この問題はこの課題に基づいています）

{
  "rules": {
    "wai-aria": true
  },
  "nodeRules": [
    {
      "selector": "img[src$=.svg]",
      "rules": {
        // 暗黙のロールを許可する
        "wai-aria": {
          "options": {
            "disallowSetImplicitRole": false
          }
        },
        // role属性を必須とする
        "required-attr": "role",
        // role属性の値をimgのみとする
        "invalid-attr": {
          "options": {
            "allowAttrs": [
              {
                "name": "role",
                "value": {
                  "enum": ["img"]
                }
              }
            ]
          }
        }
      }
    }
  ]
}

セレクタimg[src$=.svg]を指定してSVGを読み込んでいる要素に限定してルールを設定します。そして、 disallowSetImplicitRoleオプションを無効化することで、img要素の暗黙のロールであるrole="img"の指定を許可します。

さらに、required-attrルールで role属性の指定を必須とし、invalid-attrルールでrole属性の値をimgのみ許可することで、img[src$=.svg]の要素にrole="img"を付加することを促すことができます。

wai-aria

Interface​

Options​

Default Severity​

設定例​

`wai-aria`

Interface

Options

Default Severity

設定例