Media
5 items
Description
Krafty is HTML Checker for Web Director Eleven 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, an og:image smaller than sharing platforms want, and an og:image URL that does not load. 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. 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. 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. Also lists 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. 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. ### 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. ### Open on a phone Shows a QR code of the current tab's address in the toolbar menu, 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.