Krafty

Krafty is HTML Checker for Web Director

Eight checks you can turn on over any page, from the toolbar or from a keyboard shortcut you assign yourself. Nothing is sent anywhere: every check runs in your own browser, on the tab you are looking at, and Krafty collects no data at all. Available in English and Japanese, following your browser's language. Head Checker Reports the problems in a page's head that software can actually decide: a robots tag asking search engines to ignore the page, a missing viewport, title, description or lang, a missing doctype, a canonical pointing at a different page, duplicated tags, text long enough to be cut off, and an og:image smaller than sharing platforms want. It will not tell you whether the title is the right title. Nothing can — a title can be correctly formed and still say "Home | Home" or carry a staging site's name. So the page is drawn the way visitors meet it, as a search result and as a shared link, for you to read and judge. Every value in the head is listed underneath, each with a button to copy it, and the URLs open in a new tab. Nest Checker Highlights every element its parent element is not allowed to contain, such as a div directly inside a ul, or an li with no list around it. Hover any highlighted element and it tells you the rule it breaks and what the parent may contain instead. The panel totals them and breaks them down by pair, and copies the whole list in one go so it can go straight into a ticket. Heading Checker Reports what can be decided about the heading structure: more than one level one heading, a level skipped on the way down, a heading with no text at all, and a page with no headings. Whether the headings read as a sensible outline of the page is not something software can answer, so they are listed in order and indented by level, as a table of contents to read. Headings hidden from everyone are left out, and the panel says how many. The whole outline copies as one indented block. Markup Checker Reports markup that is wrong in ways the page does not show. Ids used more than once: nothing looks different, but a `label` stops reaching its field, an in-page link lands on the first one and never the second, and any script asking for that element gets whichever came first. A page template repeated down a listing produces this without anyone writing it. And tables with no header cells, where a screen reader announces every cell bare, with nothing to say which column it belongs to. Tables marked as layout are left alone. Every panel has a check-again button. A check reads the page as it stands when it runs, so press it after opening an accordion or scrolling a list in. The review One button under the checker list runs everything that reports and copies the result as one block, ready for a ticket: the address, then each checker with what it found underneath. There is no total, on purpose. A single number would be a verdict on the whole page, including everything nothing looked at. Each checker says what it checked and nothing more. Image Checker Finds images served much larger than the space they are drawn in — a 1920×1080 file shown at 300×169 — and lists them worst first, with the file name and the address ready to copy. Also counts the images with no width and height attributes, which is what makes a layout jump while it loads. High-density displays are allowed for, so an image correctly built at twice the displayed size is never reported, and the allowance does not depend on the monitor you happen to be checking on. The panel states the basis it judged against, and each row carries its own ratio. Outline Checker Draws an outline around every element, so the structure and spacing of a layout can be seen at a glance. Alt Checker Shows the alt text of every image, and separates an image with no alt attribute at all from one deliberately marked decorative with an empty alt. The two look identical in a browser and mean opposite things. Brightness Checker Turns the page monochrome, which shows up anything that relies on colour alone to be understood.