sa11y-accessibility-checker
Reactive icon

Sa11y Accessibility Checker

Stable version 1.0.0 (Compatible with OutSystems 11)
Uploaded on 6 Aug (2 days ago) by 
0.0
 (0 ratings)
sa11y-accessibility-checker

Sa11y Accessibility Checker

Details
Sa11y Accessibility Checker Component (based on https://sa11y.netlify.app/)
Read more

Most accessibility tools are designed for developers and often require knowledge of code to make sense of the results. Sa11y is designed for content authors and focuses on content related issues and successes.


Checks

Sa11y has over 50 checks :

  • Errors
    • Images
    • Links
    • Tables
    • Poor text contrast.
    • Inputs missing labels.
    • Page language not declared.
    • Elements with duplicate IDs that are being referenced as a label.
    • Missing page title.
  • Warnings
    • Headings
    • Images
    • A list of items that should be converted into a semantic list.
    • Large quantities of ALL CAPS/Uppercase.
    • Contrast that cannot be programmatically determined, such as text with an image background.
    • Closed captions for videos.
    • Transcripts for podcasts and audio content.
    • Twitter widgets that may be problematic for keyboard users.
    • Reminder to manually review social media and other iFrame embeds
    • Check PDF for accessibility or recommend to convert into an accessible web page.
    • Links (Advanced)
    • Underlined text.
  • Successes
    • Images that have alternative text.
    • Links that have an accessible name using ARIA.


Automatic

Sa11y does a quick scan after the page is fully loaded. If there are any errors or warnings, Sa11y will display a notification badge with the total number of issues detected. Red indicates errors, while yellow indicates there are warnings only. Although be sure to review your page even if there are no errors or warnings!


Main features of the component include :

  • States of the findings
  • Page outline display
  • Images outline
  • Quality assurance
  • Additional settings that include Contrats, Form Labels, Links, Readability validations, and also a Dark Mode
  • 4 Color filters
    • Protanopia: Unable to perceive red light.
    • Deuteranopia: Unable to perceive green light.
    • Tritanopia: Unable to perceive blue light.
    • Monochromacy: Unable to perceive any red, green, and blue light. People with monochromacy see shades of gray.


At any time in the checking process, the component allows you to export the list of evidences found to a CSV file, or export a detailed report in HTML format.


Component usage is as simple as dragging and dropping the public Web Block on a page and setting all input parameters accordingly (all settings have default values for ease of use).

Release notes (1.0.0)
License (1.0.0)
Reviews (0)
Team