New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@qualweb/core

Package Overview
Dependencies
Maintainers
3
Versions
271
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@qualweb/core

QualWeb evaluator core engine

  • 0.4.10
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
342
increased by93.22%
Maintainers
3
Weekly downloads
 
Created
Source

QualWeb core

The core allows you to perform automatic accessibility evaluations on web pages. It contains 4 evaluation modules:

  • @qualweb/act-rules
  • @qualweb/html-techniques
  • @qualweb/css-techniques
  • @qualweb/best-practices

How to install

  $ npm i @qualweb/core --save

How to run

  'use strict';

  const { start, stop, evaluate, generateEarlReport } = require('@qualweb/core');

  (async () => {
    // Starts the QualWeb core engine - only needs to run once
    const launchOptions = {
      ... // check https://github.com/puppeteer/puppeteer/blob/v3.0.3/docs/api.md#puppeteerlaunchoptions
      // in most of the cases there's no need to give additional options. Just leave the field undefined
    };
    await start(launchOptions);

    // QualWeb evaluation report
    const evaluationOptions = { 
      url: 'https://act-rules.github.io/pages/about/' 
    };

    // Evaluates the given options - will only return after all urls have finished evaluating or resulted in an error
    const reports = await evaluate(evaluationOptions);

    console.log(reports);
    //  {
    //    "url": "report",
    //    "url2": "report2"
    //  }

    const earlOptions = {
      // Check the options in the section below
    }

    // if you want an EARL report
    const earlReports = await generateEarlReport(earlOptions);

    console.log(earlReport);
    //  {
    //    "url": "earlReport",
    //    "url2": "earlReport2"
    //  }

    // Stops the QualWeb core engine
    await stop();
  })();

Options

The available options fot the evaluate() function are:

  {
    "url": "https://act-rules.github.io/pages/about/", // url to evaluate
    "urls": ["https://act-rules.github.io/pages/about/", "https://act-rules.github.io/rules/"], // Array of urls
    "file": "/path/to/file/with/urls", // urls must be separacted by a newline (\n)
    "crawl": "https://act-rules.github.io", // Experimental feature - domain to crawl and obtain the urls
    "viewport": {
      "mobile": false, // default value = false
      "landscape": true, // default value = viewPort.width > viewPort.height
      "userAgent": "custom user agent", // default value for desktop = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:22.0) Gecko/20100101 Firefox/22.0', default value for mobile = 'Mozilla/5.0 (Linux; U; Android 2.2; en-us; DROID2 GLOBAL Build/S273) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1'
      "resolution": {
        "width": 1920, // default value for desktop = 1366, default valuet for mobile = 1080
        "height": 1080 // default value for desktop = 768, default valuet for mobile = 1920
      }
    },
    "maxParallelEvaluations": "5", // Experimental feature - performs several urls evaluations at the same time - the higher the number given, more resources will be used
    "execute": { // choose which modules to execute
      "wappalyzer": false, // wappalyzer module (https://github.com/qualweb/wappalyzer) - default value = false
      "act": true, // act-rules module (https://github.com/qualweb/act-rules) - default value = true
      "html": true, // html-techniques module (https://github.com/qualweb/html-techniques) - default value = true
      "css": false, // css-rules module (https://github.com/qualweb/css-techniques) - default value = true
      "bp": false // best-practices module (https://github.com/qualweb/best-practices) - default value = true
    },
    "act-rules": { // More information about this options at https://github.com/qualweb/act-rules
      "rules": ["QW-ACT-R1", "b5c3f8"], // Array of rules to execute, can be passed the QualWeb Rule ID or the ACT Rule ID
      "levels": ["A", "AA", "AAA"], // Conformance levels to execute, 
      "principles": ["Perceivable", "Operable", "Understandable", "Robust"] // Principles to execute
    },
    "html-techniques": { // More information about this options at https://github.com/qualweb/html-techniques
      "rules": ["QW-HTML-T1", "H39"], // Array of techniques to execute, can be passed the QualWeb Technique ID or the WCAG 2.1 Technique Code
      "levels": ["A", "AA", "AAA"], // Conformance levels to execute, 
      "principles": ["Perceivable", "Operable", "Understandable", "Robust"] // Principles to execute
    },
    "css-techniques": { // More information about this options at https://github.com/qualweb/css-techniques
      "rules": ["QW-CSS-RT", "C19"], // Array of techniques to execute, can be passed the QualWeb Technique ID or the WCAG 2.1 Technique Code
      "levels": ["A", "AA", "AAA"], // Conformance levels to execute, 
      "principles": ["Perceivable", "Operable", "Understandable", "Robust"] // Principles to execute
    },
    "best-practices": { // More information about this options at https://github.com/qualweb/best-practices
      "bestPractices": ["QW-BP1", "QW-BP2"] // Array of best practices to execute
    }
  }

The available options fot the generateEarlReport() function are:

  {
    "aggregated": true, // default value = false
    "aggregatedName": "websites.json", // The name to save the aggregated earl reports. default value = first url of the list
    "modules": { // Choose which modules to convert the report to earl, by default all modules are converted if they were executed
      "act": true, // default value = true
      "html": false, // default value = true
      "css": false, // default value = true
      "best-practices": false // default value = true
    } // If the "modules" value is given, any missing module value missing it's automatically set to false  
  }

Report details

In this section it's explained the evaluation report in detail. For detailed version of the EARL report check @qualweb/earl-reporter.

  {
    "type": "evaluation",
    "system": {
      "name": "QualWeb",
      "description": "QualWeb is an automatic accessibility evaluator for webpages.",
      "version": "QualWeb version",
      "homepage": "http://www.qualweb.di.fc.ul.pt/",
      "date": "date of the evaluation",
      "hash": "unique hash",
      "url": {
        "inputUrl": "inserted url",
        "protocol": "protocol of the url",
        "domainName": "domain name of the url",
        "domain": "domain of the url",
        "uri": "uri of the url",
        "completeUrl": "complete url after all redirects"
      },
      "page": {
        "viewport": {
          "mobile": "was evaluated on a mobile context or not",
          "landscape": "was evaluated on a landscape context or not",
          "userAgent": "user agent used",
          "resolution": {
            "width": "window's width used",
            "height": "window's height used",
          }
        },
        "dom": {
          "source": {
            "html": {
              "plain": "html code as a string",
              "parsed": "html parsed using htmlparser2", // https://github.com/fb55/htmlparser2
            },
            "title": "Title of the webpage source code",
            "elementCount": "Element count of the webpage source code"
          },
          "processed": {
            "html": {
              "plain": "html code as a string"
            },
            "title": "Title of the webpage",
            "elementCount": "Element count of the webpage"
          },
          "stylesheets": [
            {
              "file": "path to the stylesheet file",
              "content": {
                "plain": "stylesheet file content as a string",
                "parsed": "stylesheet file content parsed using css" // https://github.com/reworkcss/css
              }
            }
          ]
        }
      }
    },
    "metadata": {
      "passed": "number of passed rules/techniques/best practices",
      "warning": "number of warning rules/techniques/best practices",
      "failed": "number of failed rules/techniques/best practices",
      "inapplicable": "number of inapplicable rules/techniques/best practices",
    },
    "modules": {
      "act-rules": {
        "type": "act-rules",
        "metadata": {
          "passed": "number of passed rules",
          "warning": "number of warning rules",
          "failed": "number of failed rules",
          "inapplicable": "number of inapplicable rules",
        },
        "assertions": {
          "QW_ACT_R1": {
            "name": "Name of the rule",
            "code": "QualWeb rule code",
            "mapping": "ACT rule code mapping",
            "description": "Description of the rule",
            "metadata": {
              "target": "Any target, can be one element, multiple elements, attributes, a relation between elements",
              "success-criteria?": [
                {
                  "name": "Name of the success criteria",
                  "level": "Level of conformance of the success criteria",
                  "principle": "Principle of the success criteria",
                  "url": "Url of the success criteria"
                }
              ],
              "related?": [], // related WCAG 2.1 techniques
              "url?": "Url of the rule",
              "passed": "Number of passed results",
              "warning": "Number of warning results",
              "failed": "Number ff failed results",
              "type?": [], // usually "ACTRule" or "TestCase"
              "a11yReq?": [], // WCAG 2.1 relation - something like "WCAG21:language"
              "outcome": "Outcome of the rule",
              "description": "Description of the outcome";
            },
            "results": [
              {
                "verdict": "Outcome of the test",
                "description": "Description of the test",
                "resultCode": "Test identifier",
                "pointer?": "Element pointer in CSS notation",
                "htmlCode?": "Element html code",
                "attributes?": "Attributes of the element",
                "accessibleName?": "Accessible name of the test target"
              },
              { ... }
            ]
          },
          "...": { ... }
        }
      },
      "html-techniques": {
        "type": "html-techniques",
        "metadata": {
          "passed": "number of passed techniques",
          "warning": "number of warning techniques",
          "failed": "number of failed techniques",
          "inapplicable": "number of inapplicable techniques",
        },
        "assertions": {
          "QW_HTML_T1": {
            "name": "Name of the technique",
            "code": "QualWeb technique code",
            "mapping": "WCAG techniques code mapping",
            "description": "Description of the technique",
            "metadata": {
              "target": "Any target, can be one element, multiple elements, attributes, a relation between elements",
              "success-criteria?": [
                {
                  "name": "Name of the success criteria",
                  "level": "Level of conformance of the success criteria",
                  "principle": "Principle of the success criteria",
                  "url": "Url of the success criteria"
                }
              ],
              "related?": [], // related WCAG 2.1 techniques
              "url?": "Url of the technique",
              "passed": "Number of passed results",
              "warning": "Number of warning results",
              "failed": "Number ff failed results",
              "type?": [], // usually "ACTRule" or "TestCase"
              "a11yReq?": [], // WCAG 2.1 relation - something like "WCAG21:language"
              "outcome": "Outcome of the technique",
              "description": "Description of the outcome";
            },
            "results": [
              {
                "verdict": "Outcome of the test",
                "description": "Description of the test",
                "resultCode": "Test identifier",
                "pointer?": "Element pointer in CSS notation",
                "htmlCode?": "Element html code",
                "attributes?": "Attributes of the element" // if available
              },
              { ... }
            ]
          },
          "...": { ... }
        }
      },
      "css-techniques": {
        "type": "css-techniques",
        "metadata": {
          "passed": "number of passed techniques",
          "warning": "number of warning techniques",
          "failed": "number of failed techniques",
          "inapplicable": "number of inapplicable techniques",
        },
        "assertions": {
          "QW_CSS_T1": {
            "name": "Name of the technique",
            "code": "QualWeb technique code",
            "mapping": "WCAG techniques code mapping",
            "description": "Description of the technique",
            "metadata": {
              "target": "Any target, can be one element, multiple elements, attributes, a relation between elements",
              "success-criteria?": [
                {
                  "name": "Name of the success criteria",
                  "level": "Level of conformance of the success criteria",
                  "principle": "Principle of the success criteria",
                  "url": "Url of the success criteria"
                }
              ],
              "related?": [], // related WCAG 2.1 techniques
              "url?": "Url of the technique",
              "passed": "Number of passed results",
              "warning": "Number of warning results",
              "failed": "Number ff failed results",
              "type?": [], // usually "ACTRule" or "TestCase"
              "a11yReq?": [], // WCAG 2.1 relation - something like "WCAG21:language"
              "outcome": "Outcome of the technique",
              "description": "Description of the outcome";
            },
            "results": [
              {
                "verdict": "Outcome of the test",
                "description": "Description of the test",
                "pointer?": "Element pointer in CSS notation", // if available
                "htmlCode?": "Element html code", // if available
                "attributes?": "Attributes of the element", // if available,
                "cssCode?": "Element CSS code",
                "stylesheetFile?": "path to the stylesheet file",
                "selector?": {
                  "value?": "Value of the selector",
                  "position?": "Position of the selector",
                },
                "property?": {
                  "name?": "CSS property name",
                  "value?": "CSS property value",
                  "position?": "CSS property position"
                }
              },
              { ... }
            ]
          },
          "...": { ... }
        }
      },
      "best-practices": {
        "type": "best-practices",
        "metadata": {
          "passed": "number of passed best practices",
          "warning": "number of warning best practices",
          "failed": "number of failed best practices",
          "inapplicable": "number of inapplicable best practices",
        },
        "assertions": {
          "QW_BP1": {
            "name": "Name of the technique",
            "code": "QualWeb best practices code",
            "description": "Description of the best practices",
            "metadata": {
              "target": "Any target, can be one element, multiple elements, attributes, a relation between elements",
              "success-criteria?": [
                {
                  "name": "Name of the success criteria",
                  "level": "Level of conformance of the success criteria",
                  "principle": "Principle of the success criteria",
                  "url": "Url of the success criteria"
                }
              ],
              "related?": [], // related WCAG 2.1 techniques
              "passed": "Number of passed results",
              "warning": "Number of warning results",
              "failed": "Number ff failed results",
              "type?": [], // usually "ACTRule" or "TestCase"
              "a11yReq?": [], // WCAG 2.1 relation - something like "WCAG21:language"
              "outcome": "Outcome of the best practices",
              "description": "Description of the outcome";
            },
            "results": [
              {
                "verdict": "Outcome of the test",
                "description": "Description of the test",
                "resultCode": "Test identifier",
                "pointer?": "Element pointer in CSS notation",
                "htmlCode?": "Element html code",
                "attributes?": "Attributes of the element" // if available
              },
              { ... }
            ]
          },
          "...": { ... }
        }
      }
    }
  }

Implemented ACT Rules

QualWeb Rule IDACT Rule IDACT Rule Name
QW-ACT-R12779a5HTML Page has a title
QW-ACT-R2b5c3f8HTML has lang attribute
QW-ACT-R35b7ae0HTML lang and xml:lang match
QW-ACT-R4bc659aMeta-refresh no delay
QW-ACT-R5bf051aValidity of HTML Lang attribute
QW-ACT-R659796fImage button has accessible name
QW-ACT-R7b33effOrientation of the page is not restricted using CSS transform property
QW-ACT-R89eb3f6Image filename is accessible name for image
QW-ACT-R9b20e66Links with identical accessible names have equivalent purpose
QW-ACT-R104b1c6ciframe elements with identical accessible names have equivalent purpose
QW-ACT-R1197a4e1Button has accessible name
QW-ACT-R12c487aeLink has accessible name
QW-ACT-R136cfa84Element with aria-hidden has no focusable content
QW-ACT-R14b4f0c3meta viewport does not prevent zoom
QW-ACT-R1580f0bfaudio or video has no audio that plays automatically
QW-ACT-R16e086e5Form control has accessible name
QW-ACT-R1723a2a8Image has accessible name
QW-ACT-R183ea0c8id attribute value is unique
QW-ACT-R19cae760iframe element has accessible name
QW-ACT-R20674b10role attribute has valid value
QW-ACT-R217d6734svg element with explicit role has accessible name
QW-ACT-R22de46e4Element within body has valid lang attribute
QW-ACT-R23c5a4eavideo element visual content has accessible alternative
QW-ACT-R2473f2c2autocomplete attribute has valid value
QW-ACT-R255c01eaARIA state or property is permitted
QW-ACT-R26eac66bvideo element auditory content has accessible alternative
QW-ACT-R275f99a7This rule checks that each aria- attribute specified is defined in ARIA 1.1.
QW-ACT-R284e8ab6Element with role attribute has required states and properties
QW-ACT-R29e7aa44Audio element content has text alternative
QW-ACT-R302ee8b8Visible label is part of accessible name
QW-ACT-R31c3232fVideo element visual-only content has accessible alternative
QW-ACT-R321ec09bvideo element visual content has strict accessible alternative
QW-ACT-R33ff89c9ARIA required context role
QW-ACT-R346a7281ARIA state or property has valid value
QW-ACT-R35ffd0e9Heading has accessible name
QW-ACT-R36a25f45Headers attribute specified on a cell refers to cells in the same table element
QW-ACT-R37afw4f7Text has minimum contrast
QW-ACT-R38bc4a75ARIA required owned elements
QW-ACT-R39d0f69eAll table header cells have assigned data cells
QW-ACT-R4059br37Zoomed text node is not clipped with CSS overflow
QW-ACT-R4136b590Error message describes invalid form field value
QW-ACT-R428fc3b6Object element has non-empty accessible name
QW-ACT-R430ssw9kScrollable element is keyboard accessible
QW-ACT-R44fd3a94Links with identical accessible names and context serve equivalent purpose
QW-ACT-R45c6f8a9Child elements of list(s) follow context model
QW-ACT-R46a73be2List elements follow content model
QW-ACT-R47b8bb68Text spacing in style attributes is not !important

Implemented WCAG 2.1 HTML Techniques

QualWeb Technique IDWCAG Technique IDWCAG Technique Name
QW-HTML-T1H24Providing text alternatives for the area elements of image maps
QW-HTML-T2H39Using caption elements to associate data table captions with data tables
QW-HTML-T3H71Providing a description for groups of form controls using fieldset and legend elements
QW-HTML-T4H73Using the summary attribute of the table element to give an overview of data tables
QW-HTML-T5H36Using alt attributes on images used as submit buttons
QW-HTML-T6SCR20Using both keyboard and other device-specific functions
QW-HTML-T7H28Providing definitions for abbreviations by using the abbr element
QW-HTML-T8F30Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives
QW-HTML-T9G141Organizing a page using headings
QW-HTML-T10H64Using the title attribute of the frame and iframe elements
QW-HTML-T11H2Combining adjacent image and text links for the same resource
QW-HTML-T13H25Providing a title using the title element
QW-HTML-T14H35Providing text alternatives on applet elements
QW-HTML-T15F46Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables
QW-HTML-T16F47Failure of Success Criterion 2.2.2 due to using the blink element
QW-HTML-T17H43Using id and headers attributes to associate data cells with header cells in data tables
QW-HTML-T19H59Using the link element and navigation tools
QW-HTML-T20H88Using HTML according to spec
QW-HTML-T22G140Separating information and structure from presentation to enable different presentations
QW-HTML-T23G125Providing links to navigate to related Web pages
QW-HTML-T24G88Providing descriptive titles for Web pages
QW-HTML-T25G162Positioning labels to maximize predictability of relationships
QW-HTML-T26F25Failure of Success Criterion 2.4.2 due to the title of a Web page not identifying the contents
QW-HTML-T27G130Providing descriptive headings
QW-HTML-T28H48Using ol, ul and dl for lists or groups of links
QW-HTML-T29F54Failure of Success Criterion 2.1.1 due to using only pointing-device-specific event handlers (including gesture) for a function
QW-HTML-T30H51Using table markup to present tabular information
QW-HTML-T31H45Using longdesc
QW-HTML-T32H32Providing submit buttons
QW-HTML-T33H33Supplementing link text with the title attribute
QW-HTML-T34F89Failure of Success Criteria 2.4.4, 2.4.9 and 4.1.2 due to not providing an accessible name for an image which is the only content in a link
QW-HTML-T35F52Failure of Success Criterion 3.2.1 and 3.2.5 due to opening a new window as soon as a new page is loaded
QW-HTML-T37G123Adding a link at the beginning of a block of repeated content to go to the end of the block
QW-HTML-T38G1Adding a link at the top of each page that goes directly to the main content area
QW-HTML-T39H37Accessible name on img and svg elements
QW-HTML-T40F55Failure of Success Criteria 2.1.1, 2.4.7, and 3.2.1 due to using script to remove focus when focus is received
QW-HTML-T41H63Using the scope attribute to associate header cells and data cells in data tables
QW-HTML-T42F59Failure of Success Criterion 4.1.2 due to using script to make div or span a user interface control in HTML without providing a role for the control
QW-HTML-T43F88Failure of Success Criterion 1.4.8 due to using text that is justified (aligned to both the left and the right margins)

Implemented WCAG 2.1 CSS Techniques

QualWeb Technique IDWCAG Technique IDWCAG Technique Name
QW-CSS-T1C12 C13 C14Using "percent, em, names" for font sizes
QW-CSS-T2C19Specifying alignment either to the left or right in CSS
QW-CSS-T3C21Specifying line spacing in CSS
QW-CSS-T4C22Using CSS to control visual presentation of text
QW-CSS-T5C24Using percentage values in CSS for container sizes
QW-CSS-T6F4Failure of Success Criterion 2.2.2 due to using text-decoration:blink without a mechanism to stop it in less than five seconds
QW-CSS-T7F24Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without specifying background colors or vice versa

Implemented accessibility best practices

QualWeb best practice IDRelated toBest practice Name
QW-BP1HTMLUsing h1-h6 to identify headings
QW-BP2HTMLConcise images alt text
QW-BP3HTMLLink element with text content equal to the content of the title attribute
QW-BP4HTMLGrouped links not within a nav element
QW-BP5HTMLUsing table elements inside other table elements
QW-BP6HTMLtitle element is not too long (64 characters)
QW-BP7HTMLTitle element contains ASCII-art
QW-BP8HTMLHeadings with images should have an accessible name
QW-BP9HTMLTable element without header cells has a caption
QW-BP10HTMLHTML elements are used to control visual presentation of content
QW-BP11HTMLUsing br to make a list
QW-BP12HTMLUsing scope col and row
QW-BP13HTMLUsing consecutive links with the same href and one contains an image
QW-BP14CSSAt least one container's width has been specified using values expressed in px
QW-BP15CSSAt least one width attribute of an HTML element is expressed in absolute values
QW-BP16HTMLVerify if page has links

License

ISC

Keywords

FAQs

Package last updated on 03 Jul 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc