(Based on VPAT® Version 2.4)
Report Date
This report was last updated on June 18, 2024.
Product Description
npm is the package manager for Node.js. npm is a critical part of the JavaScript community and helps support one of the largest developer ecosystems in the world.
Please share questions or comments on the accessibility community discussion page.
Scope
The scope of this report is limited to the following content on npmjs.com, semver.npmjs.com, and status.npmjs.org:
- NPM Documentation
- Semver and Code Explore page
- Status page
- Granular Access Tokens
- Account recovery
- Password Reset Flow
Evaluation Methods Used
Scenarios were tested using:
- Keyboard-only interactions
- JAWS and NVDA with Google Chrome
- axe
- Colour Contrast Analyzer
- Platform features such as high contrast and zoom
Applicable Standards/Guidelines
This report reflects outstanding issues found by an audit based on the level A and AA criteria of the Web Content Accessibility Guidelines version 2.1 (WCAG 2.1 AA).
Terms
- Supports: The functionality of the product has at least one method that meets the criterion without known defects or meets with equivalent facilitation.
- Partially Supports: Some functionality of the product does not meet the criterion.
- Does Not Support: The majority of product functionality does not meet the criterion.
- Not Applicable: The criterion is not relevant to the product.
- Not Evaluated: The product has not been evaluated against the criterion.
WCAG 2.1
Level A Success Criteria
| Success Criteria |
Conformance Level |
Remarks and Explanations |
| 1.1.1 Non-text Content |
Partially Supports
|
Exceptions include:
- [NPMSTATPG1.1] [NPM Status Page- NPM Status page] Alt attribute is not defined for 'NPM' image link present in ‘NPM status’ page.
|
| 1.2.1 Audio-only and Video-only (Prerecorded) |
Supports
|
|
| 1.2.2 Captions (Prerecorded) |
Supports
|
|
| 1.2.3 Audio Description or Media Alternative |
Supports
|
|
| 1.3.1 Info and Relationships |
Partially Supports
|
Exceptions include:
- [NpmGrpB&GrpC3.10] [NPM Status Page-View historical uptime] Screen reader is not announcing the information of the graphic images.
- [NpmGrpB&GrpC3.2] [Npm Docs-Status page] The aria children role is not defined for the tablist present inside the 'Subscribe to updates' dialog
- [NpmGrpB&GrpC3.3] [npm Status-Status page] 'Get a new challenge' button has tab index greater than zero.
- [NpmGrpB&GrpC3.3] [npm Status-Status page] Blank aria label is defined for the control with role="dialog".
- [NpmGrpB&GrpC3.12] [Npm docs-Status page] The screen reader is not announcing the selected state information when focus lands on 'Incident' tab.
- [NpmGrpB&GrpC1.9] [npm Docs-Npm Docs] The heading structure on the 'npm-access' page is not in the hierarchy level.
- [NpmGrpB&GrpC1.18] [npm Docs-Npm Docs] Screen reader does not announce the position count for the control present under 'table of content'.
- [NPMGrpAProject1.12] [NPMGROUPAPROJECT- Navigation] Screen reader is not providing the information of “product navigation region” when the tab focus moves to the navigation region.
- [NPMGrpAProject2.47] [NPMGROUPAPROJECT - Access Token] Incorrect heading structure
- [NPMGrpAProject2.47] [NPMGROUPAPROJECT - Access Token] Visually appearing text 'General' is not defined in heading.
- [NPMGrpAProject2.3] [NPMGROUPAPROJECT - Account Settings] Unnecessary information is being announced by screen reader on '+ Add Private Package.'
- [NPMGrpAProject2.12] [NPMGROUPAPROJECT - Two-Factor Authentication] Complete description of radio button is not announced by the screen reader.
- [NPMGrpAProject2.14] [NPMGROUPAPROJECT - Two-Factor Authentication] Screen reader is not announcing the associated header information for the radio buttons in the page.
- [NPMGrpAProject1.36] [NPMGROUPAPROJECT - Settings] Label is not associated with its radio button.
- [NPMGrpAProject1.35] [NPMGROUPAPROJECT - Packages] Screen reader does not announce information of the invitation dialog.
- [NPMGrpAProject1.9] [NPMGROUPAPROJECT- NPM Sign up/in and Package invite] The screen reader does not announce the displayed new page information on invoking any versions control under versions tab.
- [NPMGrpAProject1.9] [NPMGROUPAPROJECT- NPM Sign up/in and Package invite] The screen reader announces incorrect information as multiple versions are being detected as primarily dates.
- [NPMSTATPG1.12] [NPM Status Page- Incidents] The Aria parent role is not defined for the "Incidents" tab control.
- [NPMSTATPG1.8] [NPM Status Page- www.npmjs.com website] Screen reader is not announcing the complete information when the focus lands upon '90 days ago' present under 'www.npmjs.com website' section.
- [NPMSTATPG1.12] [NPM Status Page- Incidents] Appropriate role attribute is not defined for the '+ Show all 5 incidents' control.
- [NPMSTATPG1.10] [NPM Status Page- View historical uptime] Screen reader is not announcing any information indicating the users when the 'next page' control is disabled.
- [NPMSTATPG1.10] [NPM Status Page- View historical uptime] Screen reader is not announcing any information upon activating 'previous page' and 'next page' links.
- [NPMSTATPG1.9] [NPM Status Page- Package installation] Screen reader is not announcing the position of tab items- 'Incidents' and 'Uptime'.
- [NPMSTATPG1.1] [NPM Status Page- NPM Status Page] Screen reader is not announcing any information upon activating 'About this site' link.
|
| 1.3.2 Meaningful Sequence |
Supports
|
|
| 1.3.3 Sensory Characteristics |
Supports
|
|
| 1.4.1 Use of Color |
Partially Supports
|
Exceptions include:
- [NpmGrpB&GrpC3.1] [npm Docs-Status Page] Color is the sole medium to identify the 'partial outage' time on a particular date.
- [NpmGrpB&GrpC3.10] [NPM Status-View historical uptime] The link (View historical uptime) must be distinguishable without relying on color.
- [NPMSTATPG1.10] [NPM Status Page- View historical uptime] Color is the sole medium to identify the power outage time on a particular date.
|
| 1.4.2 Audio Control |
Supports
|
|
| 2.1.1 Keyboard |
Partially Supports
|
Exceptions include:
- [NpmGrpB&GrpC3.3] [npm Status-Status page] The Tooltip that appears on mouse hover for the 'Get a new challenge' button is not displayed through keyboard.
- [NpmGrpB&GrpC3.5] [npm Status-Status Page] The Tooltip that appears on mouse hover for the 'Follow@npmstatus' link is not displayed through keyboard.
- [NPMSTATPG1.12] [NPM Status Page- Incidents] ‘+ Show all 5 incidents' control present under 'Incidents' tab is not accessible through keyboard.
- [NPMSTATPG1.8] [NPM Status Page- NPM Status page] Individual color strips that are present under 'www.npmjs.com website' are not accessible through keyboard.
|
| 2.1.2 No Keyboard Trap |
Supports
|
|
| 2.1.4 Character Key Shortcuts |
Supports
|
|
| 2.2.1 Timing Adjustable |
Supports
|
|
| 2.2.2 Pause Stop Hide |
Supports
|
|
| 2.3.1 Three Flashes or Below Threshold |
Supports
|
|
| 2.4.1 Bypass Blocks |
Partially Supports
|
Exceptions include:
- [NPMSTATPG1.1] [NPM Status Page- NPM Status page] There are no landmarks defined for 'npm status' page.
- [NPM4.4] [NPM-2- Pay with Card] Main landmark is not defined on ‘Pay with Card’ page.
|
| 2.4.2 Page Titled |
Supports
|
|
| 2.4.3 Focus Order |
Partially Supports
|
Exceptions include:
- [NPMSTATPG1.4] [NPM Status Page- Subscribe via SMS] Keyboard focus is not logical while navigating through the elements under 'Subscribe to updates' control in forward navigation.
- [NPMSTATPG1.2] [NPM Status Page- Subscribe to updates] Keyboard focus moves out of the expanded items of 'Subscribe to updates' control to the background control of the page.
- [NPMSTATPG1.2] [NPM Status Page- Subscribe to updates] Upon activating the 'Subscribe to updates' control, focus does not move to the first element under it.
- [NPMSTATPG1.4] [NPM Status Page- Subscribe via SMS] Upon pressing 'esc' key when the 'Country Code' dropdown is expanded, the entire 'Subscribe to Updates' control collapses instead of just the 'Country Code' dropdown.
- [NPM4.4] [NPM-2- Pay with Card] Keyboard focus disappears while navigating on the controls present after activating ‘More info’ button.
|
| 2.4.4 Link Purpose (In Context) |
Partially Supports
|
Exceptions include:
- [NPMGrpAProject2.7] [NPMGROUPAPROJECT- Change Your Gravatar] The link 'Back' is not descriptive enough, to identify its purpose.
- [NPMSTATPG1.2] [NPM Status Page- Subscribe to updates] Multiple ‘Privacy Policy’ links present under ‘Subscribe via email’ tab of 'Subscribe to Updates' control is not descriptive enough, as read by screen reader.
|
| 2.5.1 Pointer Gestures |
Supports
|
|
| 2.5.2 Pointer Cancellation |
Supports
|
|
| 2.5.3 Label in Name |
Supports
|
|
| 2.5.4 Motion Actuation |
Supports
|
|
| 3.1.1 Language of Page |
Supports
|
|
| 3.2.1 On Focus |
Supports
|
|
| 3.2.2 On Input |
Partially Supports
|
Exceptions include:
- [NPM4.4] [NPM-2- Pay with Card] After activating ‘Save my info…checkout’ checkbox, keyboard focus does not stay on the same control.
|
| 3.3.1 Error Identification |
Partially Supports
|
Exceptions include:
- [NpmGrpB&GrpC2.4] [Semver and Code Explore Page-Version range] On providing any input in the 'Version range' editable control the screen reader is not announcing the error message information.
|
| 3.3.2 Labels or Instructions |
Supports
|
|
| 4.1.1 Parsing |
Partially Supports
|
Exceptions include:
- NpmGrpB&GrpC3.1] [npm Docs-Status Page] Ensure that every id attribute value used in ARIA and in labels is unique
- [NpmGrpB&GrpC3.1] [npm Docs-Status Page] Id attribute is not unique for the control present in the Subscribe to update dialog.
- [NPM4.4] [NPM-2- Pay with Card] Ensure that every id attribute value used in ARIA and in labels is unique.
|
| 4.1.2 Name Role Value |
Partially Supports
|
Exceptions include:
- [NpmGrpB&GrpC3.8] [NPM Status-www.npmjs.com website] Screen reader is not announcing the name of the 'Question' button.
- [NpmGrpB&GrpC3.2] [Npm Docs-Status page] ARIA attributes must conform to valid values.
- [NPMGrpAProject1.5] [NPMGROUPAPROJECT- Readme ] Aria hidden element-'Installation' is focusable.
- [NPMGrpAProject2.47] [NPMGROUPAPROJECT - Access Token] Screen reader does not announce role information for the list item under 'Permissions'.
- [NPMGrpAProject1.6] [NPMGROUPAPROJECT- Code(Beta)] Invalid ARIA attribute value: aria-controls="tabpanel-code".
- [NPMSTATPG1.2] [NPM Status Page- Subscribe to updates] Role is not defined for the opened dialog box that opens after activating 'subscribe to updates' button.
- [NPMSTATPG1.11] [NPM Status Page- Combo-box] Appropriate role attribute is not defined for the 'Select Component' combo box.
- [NPMSTATPG1.1] [NPM Status Page- NPM Status page] 'NPM' image link does not have any discernible text attached to it that clearly describes its function/purpose.
|
Level AA Success Criteria
| Success Criteria |
Conformance Level |
Remarks and Explanations |
| 1.2.4 Captions (Live) |
Supports
|
|
| 1.2.5 Audio Description (Prerecorded) |
Supports
|
|
| 1.3.4 Orientation |
Supports
|
|
| 1.3.5 Identify Input Purpose |
Partially Supports
|
Exceptions include:
- [NPM4.4] [NPM-2- Pay with Card] Autocomplete attribute is not correct for the form field ‘Name on Card’.
|
| 1.4.3 Contrast (Minimum) |
Partially Supports
|
Exceptions include:
- [NpmGrpB&GrpC3.8] [NPM-NPM Status page] The luminosity contrast ratio of the text 'Related' is 2.2:1, which is less than 4.5:1.
- [NpmGrpB&GrpC3.9] [NPM-NPM Status page] The luminosity contrast ratio of the text 'No incidents reported today' is 2.18:1, which is less than 4.5:1.
- [NpmGrpB&GrpC3.11] [npm docs-Status page] The luminosity ratio for the text 'Degraded performance while installing packages' is 2.67 which is less than the required contrast ratio i.e.,4.5:1
- [NpmGrpB&GrpC3.11] [npm docs-Status page] The luminosity ratio for the text 'Degraded performance for package search' text is 2 which is less than the required contrast ratio i.e.,4.5:1
- [NpmGrpB&GrpC3.11] [npm docs-Status page] The luminosity ratio for the text 'Aug 22, 17:51 - Aug 23, 03:48 UTC' is 2.18 which is less than the required contrast ratio i.e.,4.5:1.
- [NpmGrpB&GrpC3.11] [npm docs-Status page] The luminosity ratio for the text 'No incidents reported for this month.' is 2.06 which is less than the required contrast ratio i.e.,4.5:1.
- [NpmGrpB&GrpC3.8] [NPM-NPM Status page] The luminosity contrast ratio of the text 'Operational' is 2.94:1, which is less than 4.5:1.
- [NPMGrpAProject2.24] [NPMGROUPAPROJECT- Profile] The luminosity ratio for the text- 'Pay faster on npm,Inc. and everywhere link is accepted' is 2.5:2 which is less than the required contrast ratio 4.5:1.
- [NPMGrpAProject3.7] [NPMGROUPAPROJECT-Product] Luminosity ratio for text- 'CREATE AN ORG' is 2.8:1, which is less than the required contrast ratio 4.5:1.
- [NPMGrpAProject2.24] [NPMGROUPAPROJECT-Pay with Card] The luminosity contrast ratio for placeholder text - '1234 1234 1234 1234' is 3.4:1 which is less than the required contrast ratio 4.5:1.
- [NPMGrpAProject1.13] [NPMGROUPAPROJECT-NPM Home page]: Luminosity ratio for placeholder text - 'Search Packages' is 4:1 which is less than the required contrast ratio 4.5:1.
- [NPMSTATPG1.12] [NPM Status Page- Incidents] The luminosity ratio of ‘Publish Failure to some customers’ text is 2.0:1, which is less than the required ratio of 4.5:1.
- [NPMSTATPG1.3] [NPM Status Page- Subscribe via email] The luminosity ratio of the error message text is 3.1:1, which is less than the required ratio of 4.5:1.
- [NPMSTATPG1.1] [NPM Status Page- NPM Status page] The luminosity ratio of ‘90 days ago’ text is 1.4:1, which is less than the required ratio of 4.5:1.
- [NPMSTATPG1.1] [NPM Status Page- NPM Status page] The luminosity ratio of ‘All Systems Operational’ text is 3.1:1, which is less than the required ratio of 4.5:1.
- [NPM4.4] [NPM-2- Pay with Card] The luminosity ratio of ‘pay faster with NPM…sites’ text present under ‘Pay with card’ section is less than the required ratio of 4.5:1.
|
| 1.4.4 Resize text |
Partially Supports
|
Exceptions include:
- [NpmGrpB&GrpC3.1] [npm Docs-Status Page] Zooming and scaling are disabled in the page.
- [NPMGrpAProject2.24] [NPMGROUPAPROJECT- Profile] Zooming and scaling functionality is disabled on the page.
- [NPMGrpAProject2.46] [NPMGROUPAPROJECT-Billing Info] A horizontal scroll bar is getting displayed upon resizing the page to 200%.
|
| 1.4.5 Images of Text |
Supports
|
|
| 1.4.10 Reflow |
Partially Supports
|
Exceptions include:
- [NPMGrpAProject2.17] [NPMGROUPAPROJECT-Manage Recovery Codes] The content of the "Manage Recovery Codes" page gets truncated when the viewport is set to 320*256 pixels.
- [NPMGrpAProject2.47] [NPMGROUPAPROJECT - Access Token] On setting the viewport to 320px*256px, horizontal scrolling is available for the page.
- [NPMGrpAProject3.7] [NPMGROUPAPROJECT- Product] Upon setting the viewport to 320*256 pixels, the label text- 'Name' gets overlapped with its adjacent text on providing an input in the edit field.
- [NPMGrpAProject2.42] [NPMGROUPAPROJECT- Billing Info] The 'cancel (X)' link is getting over lapped with 'Are you sure you want to delete this organization' text on changing the viewport to 320*256pixels.
- [NPMGrpAProject1.6] [NPMGROUPAPROJECT- Code(Beta)] The information alongside of the folder under the 'Code' tab is not completely vissibleon changing the viewport to 320*256 pixels.
- [NPMGrpAProject2.41] [NPMGROUPAPROJECT- Billing Info] 'Delete' control text gets truncated on setting the viewport to 320*256 pixels.
- [NPMGrpAProject1.42] [NPM Group a Project-Deprecate package] On setting the viewport to 320* 256 pixels the text of the page is getting truncating.
- [NPMGrpAProject2.14] [NPMGROUPAPROJECT - Two-Factor Authentication] A horizontal scroll bar is getting displayed upon setting viewport to 320*256pixels.
- [NPMGrpAProject1.6] [NPMGROUPAPROJECT- Code(Beta)] The horizontal scroll bar appears upon changing the viewport to 320*256 pixels.
- [NPMSTATPG1.1] [NPM Status Page- NPM Status page] 'Subscribe to Updates' control is truncating after setting the viewport to 320*256 pixels.
|
| 1.4.11 Non-text Contrast |
Partially Supports
|
Exceptions include:
- [NpmGrpB&GrpC3.3] [npm Status-Status page] The luminosity contrast ratio for the focus indicator over the 'Get a new challenge' control is 1.3:1 which is less than the required contrast ratio 3:1.
- [NpmGrpB&GrpC3.3] [npm Status-Status page] The luminosity contrast ratio for the focus indicator over the 'Verify' control is 1.4:1 which is less than the required contrast ratio 3:1.
- [NPMGrpAProject2.24] [NPMGROUPAPROJECT- Profile] The luminosity ratio of focus indicator for 'Email' edit field is 1.8:1 which is less than the minimum required contrast ratio 3:1.
- [NPMGrpAProject2.24] [NPMGROUPAPROJECT- Pay with cards] The luminosity contrast ratio for the borderline over the 'Email' edit field is 1.3:1 which is less than required contrast ratio of 3:1.
- [NPM4.4] [NPM-2- Pay with Card] The luminosity ratio of focus indicator for the checkbox under ‘Pay with Card’ is 1.4:1, which is less than the required ratio of 3:1.
|
| 1.4.12 Text-spacing |
Supports
|
|
| 1.4.13 Content on Hover or Focus |
Supports
|
|
| 2.4.5 Multiple Ways |
Supports
|
|
| 2.4.6 Headings and Labels |
Partially Supports
|
Exceptions include:
- [NPMSTATPG1.1] [NPM Status Page- NPM Status page] There is no level-one (H1) heading defined for 'npm status' page.
|
| 2.4.7 Focus Visible |
Partially Supports
|
Exceptions include:
- [NpmGrpB&GrpC3.2] [Npm Docs-Status page] The keyboard focus indicator is not visible on selected tab item present in 'Subscribe to updates' dialog
- [NpmGrpB&GrpC3.3] [npm Status-Status page] The keyboard focus indicator is not visible on 'ReCAPTCHA images'.
|
| 3.1.2 Language of Parts |
Supports
|
|
| 3.2.3 Consistent Navigation |
Supports
|
|
| 3.2.4 Consistent Identification |
Supports
|
|
| 3.3.3 Error Suggestion |
Partially Supports
|
Exceptions include:
- [NpmGrpB&GrpC3.3] [npm Status-Status Page] Upon giving incorrect email ID the displayed error message is not descriptive enough for correction.
- [NPMGrpAProject1.16] [NPMGROUPAPROJECT-Sign up for free]: Upon giving incorrect email ID the displayed error message is not descriptive enough for correction.
|
| 3.3.4 Error Prevention (LFD) |
Supports
|
|
| 4.1.3 Status Messages |
Supports
|
|
Disclaimer
©2024 GitHub Inc. All rights reserved. The names of actual companies and products mentioned herein may be the trademarks of their respective owners. The information contained in this document represents the current view of GitHub Inc. on the issues discussed as of the date of publication. GitHub cannot guarantee the accuracy of any information presented after the date of publication.
GitHub’s WCAG 2.1 conformance reports provide the information included in ITI’s “VPAT® 2.4Rev WCAG (March 2022)” template. “Voluntary Product Accessibility Template” and “VPAT” are registered service marks of the Information Technology Industry Council (ITI). This document includes material copied from or derived from the Web Content Accessibility Guidelines (WCAG 2.1). Copyright © 2017-2018 W3C® (MIT, ERCIM, Keio, Beihang). This document is not the Web Content Accessibility Guidelines (WCAG) and should not be used as a substitute for it. Excerpts of WCAG are referenced solely for purposes of detailing GitHub’s conformance with the relevant provisions. A full and complete copy of the Guidelines is available from the W3C WAI.
GitHub regularly updates its websites and provides new information about the accessibility of products as that information becomes available. Customization of the product voids this conformance statement from GitHub. Customers may make independent conformance statements if they have conducted due diligence to meet all relevant requirements for their customization. Please consult with Assistive Technology (AT) vendors for compatibility specifications of specific AT products. This document is for informational purposes only. GitHub MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT.
