Alt-text wizard

A step-by-step wizard that helps authors write accessible alt text for images.

npm versionGitHub repository

Demo

Decision tree

The wizard guides users through a yes/no decision tree. The diagram below is automatically generated from the XState state machine.

stateDiagram-v2
    [*] --> informationLost
    canPlaceTextBeside --> result_functionalWithText: ANSWER_NO
    canPlaceTextBeside --> result_functionalWithSupplementaryText: ANSWER_YES
    containsText --> result_functionalWithoutText: ANSWER_NO
    containsText --> canPlaceTextBeside: ANSWER_YES
    containsUniqueInfo --> result_ambient: ANSWER_NO
    containsUniqueInfo --> isInfoSimple: ANSWER_YES
    informationLost --> result_decorative: ANSWER_NO
    informationLost --> isClickable: ANSWER_YES
    isClickable --> isLogo: ANSWER_NO
    isClickable --> isLogoClickable: ANSWER_YES
    isInfoSimple --> result_complexInformative: ANSWER_NO
    isInfoSimple --> result_simpleInformative: ANSWER_YES
    isLogo --> containsUniqueInfo: ANSWER_NO
    isLogo --> result_logo: ANSWER_YES
    isLogoClickable --> containsText: ANSWER_NO
    isLogoClickable --> result_clickableLogo: ANSWER_YES