Accessibility Report for "logged_in"

Run on: http://mediawiki-web:8080/wiki/Test?useskin=vector-2022

Generated at: Mon Oct 28 2024 12:46:01 GMT+0000 (Coordinated Universal Time)

Overview of changes

✅ No change

All issues found

Errors (6)

This form does not contain a submit button, which creates issues for those who cannot submit the form using the keyboard. Submit buttons are INPUT elements with type attribute "submit" or "image", or BUTTON elements with type "submit" or omitted/invalid.

Rule: htmlcs, WCAG2AA.Principle3.Guideline3_2.3_2_2.H32.2

3 issue(s): 
  • #skin-client-prefs-vector-feature-custom-font-size > div:nth-child(2) > ul > li > div > form
    <form><div class="cdx-radio"><input n...</form>
  • #skin-client-prefs-vector-feature-limited-width > div:nth-child(2) > ul > li > div > form
    <form><div class="cdx-radio"><input n...</form>
  • #skin-client-prefs-skin-theme > div:nth-child(2) > ul > li > div > form
    <form><div class="cdx-radio"><input n...</form>

ARIA attributes must conform to valid values (https://dequeuniversity.com/rules/axe/4.8/aria-valid-attr-value?application=axeAPI)

Rule: axe, aria-valid-attr-value

Impact: critical

1 issue(s): 
  • #ca-watch > a
    <a href="/w/index.php?title=Test&amp;action=watch" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only" data-mw="interface" title="Add this page to your watchlist [alt-w]" accesske...

Elements must only use permitted ARIA attributes (https://dequeuniversity.com/rules/axe/4.8/aria-prohibited-attr?application=axeAPI)

Rule: axe, aria-prohibited-attr

Impact: serious

1 issue(s): 
  • #bodyContent
    <div id="bodyContent" class="vector-body ve-init-mw-desktopArticleTarget-targetContainer" aria-labelledby="firstHeading" data-mw-ve-target-container="">
					<div class="vector-body-b...</div>

This searchinput element does not have a name available to an accessibility API. Valid names are: label element, title undefined, aria-label undefined, aria-labelledby undefined.

Rule: htmlcs, WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.InputSearch.Name

1 issue(s): 
  • #vector-sticky-search-form > div > div > input
    <input class="cdx-text-input__input webfonts-changed" type="search" name="search" placeholder="Search mediawiki" autocomplete="off">

Warnings (9)

If these radio buttons or check boxes require a further group-level description, they should be contained within a fieldset element.

Rule: htmlcs, WCAG2AA.Principle1.Guideline1_3.1_3_1.H71.SameName

3 issue(s): 
  • #skin-client-prefs-vector-feature-custom-font-size > div:nth-child(2) > ul > li > div > form
    <form><div class="cdx-radio"><input n...</form>
  • #skin-client-prefs-vector-feature-limited-width > div:nth-child(2) > ul > li > div > form
    <form><div class="cdx-radio"><input n...</form>
  • #skin-client-prefs-skin-theme > div:nth-child(2) > ul > li > div > form
    <form><div class="cdx-radio"><input n...</form>

The heading structure is not logically nested. This h2 element appears to be the primary document heading, so should be an h1 element.

Rule: htmlcs, WCAG2AA.Principle1.Guideline1_3.1_3_1_A.G141

2 issue(s): 
  • #vector-toc > div > h2
    <h2 class="vector-pinnable-header-label">Contents</h2>
  • #vector-toc > div > h2
    <h2 class="vector-pinnable-header-label">Contents</h2>

This element has "position: fixed". This may require scrolling in two dimensions, which is considered a failure of this Success Criterion.

Rule: htmlcs, WCAG2AA.Principle1.Guideline1_4.1_4_10.C32,C31,C33,C38,SCR34,G206

2 issue(s): 
  • html > body > div:nth-child(4)
    <div class="vector-header-container vector-sticky-header-container">
	<div id="vector-sticky-header...</div>
  • #p-dock-bottom
    <div class="vector-settings" id="p-dock-bottom">
	<ul></ul>
</div>

Form field must not have multiple label elements (https://dequeuniversity.com/rules/axe/4.8/form-field-multiple-labels?application=axeAPI)

Rule: axe, form-field-multiple-labels

Impact: moderate

1 issue(s): 
  • #vector-user-links-dropdown-checkbox
    <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox webfonts-changed" aria-label="Personal tools">

Img element is marked so that it is ignored by Assistive Technology.

Rule: htmlcs, WCAG2AA.Principle1.Guideline1_1.1_1_1.H67.2

1 issue(s): 
  • html > body > div:nth-child(2) > header > div:nth-child(1) > a > span > img:nth-child(2)
    <img class="mw-logo-tagline" alt="" src="https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-tagline-en.svg" width="117" height="13" style="width: 7.3125em; height: 0.8125em;">

Notices (9)

ARIA role should be appropriate for the element (https://dequeuniversity.com/rules/axe/4.8/aria-allowed-role?application=axeAPI)

Rule: axe, aria-allowed-role

Impact: minor

9 issue(s): 
  • #vector-main-menu-dropdown-checkbox
    <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox webfonts-changed" aria-label="Main menu">
  • #vector-user-links-dropdown-checkbox
    <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox webfonts-changed" aria-label="Personal tools">
  • #p-lang-btn-checkbox
    <input type="checkbox" id="p-lang-btn-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-lang-btn" class="vector-dropdown-checkbox mw-interlanguage-selector webfonts-changed" aria-label="This article exist only in this langua...
  • #vector-variants-dropdown-checkbox
    <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox webfonts-changed" aria-label="Change language variant">
  • #vector-page-tools-dropdown-checkbox
    <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox webfonts-changed" aria-label="Tools">
  • #vector-appearance-dropdown-checkbox
    <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox webfonts-changed" aria-label="Appearance">
  • #vector-page-titlebar-toc-checkbox
    <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox webfonts-changed" aria-label="Toggle the table of contents">
  • #vector-sticky-header-toc-checkbox
    <input type="checkbox" id="vector-sticky-header-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-sticky-header-toc" class="vector-dropdown-checkbox webfonts-changed" aria-label="Toggle the table of contents">
  • #vector-user-links-dropdown-checkbox-sticky-header
    <input type="checkbox" id="vector-user-links-dropdown-checkbox-sticky-header" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown-sticky-header" class="vector-dropdown-checkbox webfonts-changed" aria-label="Pers...

Errors (6)

This form does not contain a submit button, which creates issues for those who cannot submit the form using the keyboard. Submit buttons are INPUT elements with type attribute "submit" or "image", or BUTTON elements with type "submit" or omitted/invalid.

Rule: htmlcs, WCAG2AA.Principle3.Guideline3_2.3_2_2.H32.2

3 issue(s): 
  • #skin-client-prefs-vector-feature-custom-font-size > div:nth-child(2) > ul > li > div > form
    <form><div class="cdx-radio"><input n...</form>
  • #skin-client-prefs-vector-feature-limited-width > div:nth-child(2) > ul > li > div > form
    <form><div class="cdx-radio"><input n...</form>
  • #skin-client-prefs-skin-theme > div:nth-child(2) > ul > li > div > form
    <form><div class="cdx-radio"><input n...</form>

ARIA attributes must conform to valid values (https://dequeuniversity.com/rules/axe/4.8/aria-valid-attr-value?application=axeAPI)

Rule: axe, aria-valid-attr-value

Impact: critical

1 issue(s): 
  • #ca-watch > a
    <a href="/w/index.php?title=Test&amp;action=watch" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only" data-mw="interface" title="Add this page to your watchlist [alt-w]" accesske...

Elements must only use permitted ARIA attributes (https://dequeuniversity.com/rules/axe/4.8/aria-prohibited-attr?application=axeAPI)

Rule: axe, aria-prohibited-attr

Impact: serious

1 issue(s): 
  • #bodyContent
    <div id="bodyContent" class="vector-body ve-init-mw-desktopArticleTarget-targetContainer" aria-labelledby="firstHeading" data-mw-ve-target-container="">
					<div class="vector-body-b...</div>

This searchinput element does not have a name available to an accessibility API. Valid names are: label element, title undefined, aria-label undefined, aria-labelledby undefined.

Rule: htmlcs, WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.InputSearch.Name

1 issue(s): 
  • #vector-sticky-search-form > div > div > input
    <input class="cdx-text-input__input webfonts-changed" type="search" name="search" placeholder="Search mediawiki" autocomplete="off">

Warnings (9)

If these radio buttons or check boxes require a further group-level description, they should be contained within a fieldset element.

Rule: htmlcs, WCAG2AA.Principle1.Guideline1_3.1_3_1.H71.SameName

3 issue(s): 
  • #skin-client-prefs-vector-feature-custom-font-size > div:nth-child(2) > ul > li > div > form
    <form><div class="cdx-radio"><input n...</form>
  • #skin-client-prefs-vector-feature-limited-width > div:nth-child(2) > ul > li > div > form
    <form><div class="cdx-radio"><input n...</form>
  • #skin-client-prefs-skin-theme > div:nth-child(2) > ul > li > div > form
    <form><div class="cdx-radio"><input n...</form>

The heading structure is not logically nested. This h2 element appears to be the primary document heading, so should be an h1 element.

Rule: htmlcs, WCAG2AA.Principle1.Guideline1_3.1_3_1_A.G141

2 issue(s): 
  • #vector-toc > div > h2
    <h2 class="vector-pinnable-header-label">Contents</h2>
  • #vector-toc > div > h2
    <h2 class="vector-pinnable-header-label">Contents</h2>

This element has "position: fixed". This may require scrolling in two dimensions, which is considered a failure of this Success Criterion.

Rule: htmlcs, WCAG2AA.Principle1.Guideline1_4.1_4_10.C32,C31,C33,C38,SCR34,G206

2 issue(s): 
  • html > body > div:nth-child(4)
    <div class="vector-header-container vector-sticky-header-container">
	<div id="vector-sticky-header...</div>
  • #p-dock-bottom
    <div class="vector-settings" id="p-dock-bottom">
	<ul></ul>
</div>

Form field must not have multiple label elements (https://dequeuniversity.com/rules/axe/4.8/form-field-multiple-labels?application=axeAPI)

Rule: axe, form-field-multiple-labels

Impact: moderate

1 issue(s): 
  • #vector-user-links-dropdown-checkbox
    <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox webfonts-changed" aria-label="Personal tools">

Img element is marked so that it is ignored by Assistive Technology.

Rule: htmlcs, WCAG2AA.Principle1.Guideline1_1.1_1_1.H67.2

1 issue(s): 
  • html > body > div:nth-child(2) > header > div:nth-child(1) > a > span > img:nth-child(2)
    <img class="mw-logo-tagline" alt="" src="https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-tagline-en.svg" width="117" height="13" style="width: 7.3125em; height: 0.8125em;">

Notices (9)

ARIA role should be appropriate for the element (https://dequeuniversity.com/rules/axe/4.8/aria-allowed-role?application=axeAPI)

Rule: axe, aria-allowed-role

Impact: minor

9 issue(s): 
  • #vector-main-menu-dropdown-checkbox
    <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox webfonts-changed" aria-label="Main menu">
  • #vector-user-links-dropdown-checkbox
    <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox webfonts-changed" aria-label="Personal tools">
  • #p-lang-btn-checkbox
    <input type="checkbox" id="p-lang-btn-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-lang-btn" class="vector-dropdown-checkbox mw-interlanguage-selector webfonts-changed" aria-label="This article exist only in this langua...
  • #vector-variants-dropdown-checkbox
    <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox webfonts-changed" aria-label="Change language variant">
  • #vector-page-tools-dropdown-checkbox
    <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox webfonts-changed" aria-label="Tools">
  • #vector-appearance-dropdown-checkbox
    <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox webfonts-changed" aria-label="Appearance">
  • #vector-page-titlebar-toc-checkbox
    <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox webfonts-changed" aria-label="Toggle the table of contents">
  • #vector-sticky-header-toc-checkbox
    <input type="checkbox" id="vector-sticky-header-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-sticky-header-toc" class="vector-dropdown-checkbox webfonts-changed" aria-label="Toggle the table of contents">
  • #vector-user-links-dropdown-checkbox-sticky-header
    <input type="checkbox" id="vector-user-links-dropdown-checkbox-sticky-header" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown-sticky-header" class="vector-dropdown-checkbox webfonts-changed" aria-label="Pers...