Krafty

Sixteen 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 viewport that asks the browser not to zoom, a missing doctype, a canonical pointing at a different page, duplicated tags, a title or description past 60 or 160 characters, an og:image smaller than sharing platforms want, an og:image URL that does not load, and a JSON-LD block that is not valid JSON. A page with no JSON-LD is not reported; structured data is not required. On a multilingual site it checks the hreflang set too: whether it names the page it is on, since one that does not is ignored entirely, and whether the codes are language codes at all — `jp` and `cn` are countries, and Japanese and Chinese are `ja` and `zh`. A page declaring no hreflang is not reported; one language needs none. 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. Hover a row to box the heading on the page, and click to scroll to it. 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. Then form fields with nothing naming them — no label, wrapping or by `for`, no `aria-label`, no `aria-labelledby` that resolves to anything, and no `title`. The placeholder inside a field says what it is to anyone looking at it and to nobody else. Hidden fields and the button types are not counted; those take no label. And iframes and embeds with nothing naming them — no `title`, no `aria-label`, no resolving `aria-labelledby` — so a screen reader announces only the bare role. And inline SVGs that are neither named nor hidden. Named, an icon is announced; marked `aria-hidden`, it is skipped; neither, and what a screen reader does with it varies by screen reader. An `aria-hidden` on any element above the icon counts, since wrapping one is the ordinary way to hide it. Where such an icon is the whole of a link or button, that link is flagged as heavier — it is the reason the control has no name. And links or buttons with no accessible name at all: an icon `<button>` or an `<a>` with only an svg inside is announced as just its role — "button", "link" — and nothing else. Beside them, a link whose `href` is empty, which reloads the page it sits on rather than going anywhere; the same text used for more than one destination, which reads as one word repeated in a screen reader's link list; and the vague texts — "こちら", "read more" — listed for you to weigh rather than asserted, since whether a phrase is too vague is a judgement and depends on the language. And contradictions in the ARIA already on the page: an interactive `role` on an element that cannot take focus, so the control it promises cannot be reached; `aria-hidden` on something still in the tab order, which takes focus and is then announced as nothing; a `tabindex` above zero, which reorders the whole document's tab sequence. Each is a statement the markup makes twice and disagrees with itself. And inline `style` attributes with declarations the browser does not support — typos such as `colr` or `flexx` that CSSOM drops silently. SVG exporter leftovers are left alone. And a `button` in a form with no `type`, when it is not that form's only submitter — a button with no type submits, and a lone one is the ordinary submit control, so it is not reported. A `label` whose `for` matches no control. And `video` elements with no caption track in the markup, listed rather than asserted, because captions burned into the picture leave no element to find. Each finding is listed underneath as well as counted, and each list copies in one go. The fields, the icons and the nameless links have nothing to be called — that is the defect — so each row is built from whatever the element does carry: its id, its name, a link's address, its class, or the parent's where it has none of its own. An unlabelled field shows its placeholder beside it, which is both the quickest way to find it…