Skip to content

問題となりがちな要素・属性 by mlca11y

Write a review Install Get Stylus

Details

Authormlca11y

LicenseNo License

Categoryglobal

Created

Updated

Size4.4 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

アクセシビリティチェックを行う上で問題となりがちな要素・属性を強調して表示します。

Notes

使い方

  1. ページのスタイルを無効にします
  2. 本ユーザースタイルを有効化します
  3. 本ユーザースタイルによる強調表示内容を目視で確認します

制限事項

  • ページやコンテンツによっては表示が崩れる場合があります
  • 強調表示される要素・属性がすべて問題となるわけではありません
  • 複数のルールに該当する要素では表示される内容が制限されます
    • たとえばscope属性とlang属性がth要素に指定されている場合はscope属性のみが強調表示されます

Source code

/* ==UserStyle==
@name           問題となりがちな要素・属性
@namespace      mlca11y
@version        1.0.0
@description    アクセシビリティチェックを行う上で問題となりがちな要素・属性を強調して表示します。
@author         mlca11y
==/UserStyle== */
@-moz-document url-prefix("http:"), url-prefix("https:"), url-prefix("file:") {
    :root {
        --outline-font: "Consolas", monospace;
        --outline-color-normal: hsl(60, 75%, 33%);
        --outline-color-01: hsl(0, 75%, 33%);
        --outline-color-02: hsl(120, 75%, 33%);
        --outline-color-03: hsl(180, 75%, 33%);
        --outline-color-04: hsl(240, 75%, 33%);
        --outline-color-05: hsl(300, 75%, 33%);
        --outline-width-error: 7px;
        --outline-width-warning: 5px;
        --outline-width-info: 3px;
        --outline-width-normal: 1px;
        --outline-style-usecss: dashed;
        --outline-style-aria: dotted;
        --outline-style-normal: solid;
    }
    /* 問題となりがちな要素・属性 */
    /* エラー */
    html[ns|xmlns]:not([xml|lang]),
    html[ns|xmlns]:not([lang]),
    html:not([ns|xmlns]):not([lang]),
    img:not([alt]),
    area:not([alt]),
    area[alt=""],
    input[type="image"]:not([alt]),
    input[type="image"][alt=""],
    a[href]:empty,
    button:empty,
    iframe:not([title]),
    iframe[title=""],
    frame:not([title]),
    frame[title=""] {
        outline-color: var(--outline-color-normal);
        outline-width: var(--outline-width-warning) !important;
        outline-style: var(--outline-style-normal);
        outline-offset: -2px !important;
    }
    /* 警告 */
    a > img[alt=""]:only-child {
        outline-color: var(--outline-color-normal);
        outline-width: var(--outline-width-warning) !important;
        outline-style: var(--outline-style-normal);
        outline-offset: -2px !important;
    }
    /* 注意して検証 */
    img[usemap],
    object[usemap],
    table[summary],
    [accesskey],
    [lang],
    th[scope],
    [tabindex],
    form[target]:not([target="_self"]):not([target="_top"]),
    a[target]:not([target="_self"]):not([target="_top"]) {
        outline-color: var(--outline-color-normal);
        outline-width: var(--outline-width-info) !important;
        outline-style: var(--outline-style-normal);
        outline-offset: -2px !important;
    }
    img[usemap]::after,
    object[usemap]::after,
    table[summary]::after,
    [accesskey]::after,
    [lang]::after,
    th[scope]::after,
    [tabindex]::after,
    form[target]:not([target="_self"]):not([target="_top"])::after,
    a[target]:not([target="_self"]):not([target="_top"])::after {
        all: initial;
        border: none !important;
        border-radius: 0 !important;
        color: #fff !important;
        display: inline !important;
        font: 14px/1.5 var(--outline-font) !important;
        isolation: isolate !important;
        padding: 1px !important;
    }
    img[usemap]::after {
        background: var(--outline-color-normal);
        content: 'usemap="' attr(usemap) '"' !important;
    }
    object[usemap]::after {
        background: var(--outline-color-normal);
        content: 'usemap="' attr(usemap) '"' !important;
    }
    table[summary]::after {
        background: var(--outline-color-normal);
        content: 'summary="' attr(summary) '"' !important;
    }
    [accesskey]::after {
        background: var(--outline-color-normal);
        content: 'accesskey="' attr(accesskey) '"' !important;
    }
    [lang]::after {
        background: var(--outline-color-normal);
        content: 'lang="' attr(lang) '"' !important;
    }
    th[scope]::after {
        background: var(--outline-color-normal);
        content: 'scope="' attr(scope) '"' !important;
    }
    [tabindex]::after {
        background: var(--outline-color-normal);
        content: 'tabindex="' attr(tabindex) '"' !important;
    }
    form[target]:not([target="_self"]):not([target="_top"])::after {
        background: var(--outline-color-normal);
        content: 'target="' attr(target) '"' !important;
    }
    a[target]:not([target="_self"]):not([target="_top"])::after {
        background: var(--outline-color-normal);
        content: 'target="' attr(target) '"' !important;
    }
}

Reviews

No reviews yet.