Krafty

Krafty is HTML Checker for Web Director

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 on the page and, usually, the reason the label was left off. Hover a listed row to draw a box over the element on the page, and click it to scroll there and leave the box behind. Aggregate findings — a duplicated id, a reused link text — keep the count and point at the first instance. The short descriptor a row shows is weakest for exactly the elements these checks flag, so the box is the surer way to find them. Every panel has a check-again button, and Escape closes the topmost panel. Focus moves into a panel when it opens and returns when it closes; the title bar also moves with the arrow keys. A check reads the page as it stands when it runs, so press check-again 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. The alt checker has no panel, so the same block adds its counts: images with no alt, images marked decorative, and images with alt text. Those are the images its labels would cover, and copying the review does not draw the labels. 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 — including CSS `background-image` on heroes and sections, and lists them worst first, with the file name and the address ready to copy. A sprite sheet, the same file with a different position in each box, is left off that list. The same file shown the same way more than once is one row, with a count. Also lists images with no width and height attributes. An image whose box is already reserved — by an aspect-ratio, by both dimensions on the element, or by a parent ratio it is positioned into — is left off that list. 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. Hover a row to box the image on the page, and click to scroll to it. ### Leftovers Checker Finds development leftovers a page shipped with. A `src`, `href`, `srcset` or `action` pointing at a local or private address — `localhost`, a `192.168` or `10.x` host, a `.local` name — that no visitor can reach: the production page still loading its hero image from the machine it was built on. Resources loaded over `http` on an `https` page, which the browser blocks outright. And images still coming from a placeholder service like placehold.co or dummyimage.com, that nobody swapped for the real picture. Three more are listed rather than asserted, because each can be innocent: a resource whose host reads like a staging environment — `dev.`, `staging.`, `test.` — which may be a link to the test site left in the page or may just be a product's name; a developer marker left in an HTML comment — TODO, FIXME, 仮 — which may or may not still matter; and dummy text left in the visible copy — Lorem ipsum, a repeated あああ, テストです — where a word like "テスト" is real content as often as it is filler, so only you can tell which this one is. The page's own host is left alone, so a site served from localhost is not flagged for its own relative URLs. Each finding is listed with its address, and points at the element on the page where it has one to show. ### Landmark Checker Reports what can be decided about a page's landmark regions: no `main` for a reader to skip to, or more than one where only one may be exposed; and two landmarks of the same role that a screen reader announces identically, because they share a name or because neither has one — two unlabelled `nav`s read as the same word twice in the list a reader jumps between regions with. Whether the page marks up the regions it ought to is not something software can answer — one `main` and nothing else may be right, or may be a header and footer built from unmarked divs — so the landmarks are drawn in document order, nested, each with its role and accessible name, for you to read as a map of the page. Hover a row to box the region on the page, and click to scroll to it. Regions hidden from everyone are left out, and the whole map copies as one indented block. ### Token Check Lists the colours, fonts, border radii and box shadows the page actually renders with, led by the counts that say whether the tokens look disciplined. Near-identical colours, radii or shadows, and a typeface whose first named face never loaded, are noted for you to judge — Krafty does not know the design system, so it does not assert that anything is off-system. The same red, green and blue at another opacity is one colour in that note. ### 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. Labels are placed by measurement and re-measured when images load or enter view; use Check again after a reflow those miss. ### Brightness Checker Turns the page monochrome, which shows up anything that relies on colour alone to be understood. ### Squint Checker The squint test, without the squinting. Blurs the page until the text can no longer be read, leaving only the masses: what the eye lands on first, and whether the main action is it. Krafty's own panels stay sharp. Turn Brightness on as well to squint in monochrome. ### Tab Checker Lists every control Tab reaches, in that order, with its role and name. Whether the order matches the page is not something software can answer, so the list is there to read. A `tabindex` above zero is already reported by the Markup Checker; here it only shows up as a change in the order. Hover a row to box the control on the page, and click to scroll to it. ### Target Checker Lists buttons and links under 24 CSS pixels on both sides, with the measured size on the row. The same wording is one row, with a count, even when the ids differ. A control with no wording shares a row only when the measured size matches. A control whose only short side is its line is left out, along with a link sitting in a sentence: that box is the line of text. The size is a fact. It is not a verdict: space around a control can still make a smaller one fine, and that space is not measured. Hover a row to box the first control, and click to scroll to it. ### Spacing Checker Widens line, letter, word and paragraph spacing to the point a reader's own stylesheet is allowed to push it, so clipping and overlap can be seen on the page. Krafty does not count them. The panels keep their own spacing. ### Dummy Checker Replaces the text, field values and pictures on the page with stand-ins of a similar size, so a screenshot does not carry a name, a line of copy or a picture that was not meant to be shared. Spaces are kept, and a wide character stays wide, so lines wrap where they did. Turn it off and the originals come back; they never leave the browser. A canvas, a video and a frame Krafty cannot open still paint their own pixels, so each is covered with a labelled patch of the same size. An inline drawing is left as drawn. Do not send a form while this is on: the fields are holding stand-ins. Krafty does not count any of it, and its own panels are left alone. ### Open on a phone Press **Open on a phone** in the toolbar menu for a QR code of the current tab's address, generated in your own browser — never by sending the URL to a QR service. Scan it once and the phone is on the same page, including staging URLs you would rather not type by hand. ## Checkers (Japanese) The store's Japanese locale. Written rather than translated, so the two say the same things without matching sentence for sentence. Both need updating when a checker changes.