Accessibility

<Document title="Annual report" lang="en" pdfUA>
  <Page>
    <Text role="h1">Annual report</Text>
    <Text>Sales grew in every region.</Text>
    <Image src={chart} alt="Revenue by month, rising from 12k to 30k" />
    <Image src={flourish} alt="" />
    <View role="list">
      <View role="listItem" className="flex-row">
        <Text role="label">1.</Text>
        <View role="listBody"><Text>North: +12%</Text></View>
      </View>
    </View>
    <Table columns={['2fr', '1fr']} headerRows={1}>
      <Row><Cell>Region</Cell><Cell>Growth</Cell></Row>
      <Row><Cell header>North</Cell><Cell>12%</Cell></Row>
    </Table>
    <TextField name="email" label="Your email address" />
  </Page>
</Document>

tagged writes tagged PDF: a structure tree that tells screen readers, reflowing viewers and text extraction what each part of the page is, in reading order. pdfUA writes PDF/UA (ISO 14289), the standard for accessible PDF, which is tagged and also needs a title, a lang, alternative text on every image that is not decoration, a label on every field (in a Header or fixed too), headings in order and lists made of items: without one, the render fails with ENGINE_REJECTED (engineCode UA_CONFLICT) and the component that lacks it. pdfUA and pdfUA="1" write part 1, on PDF 1.7; pdfUA="2" writes PDF/UA-2 (ISO 14289-2), on PDF 2.0, with the same requirements, and links and bookmarks may not go to decoration (fixed or role="artifact"), which has no element for them. PDF/A-1, -2 and -3 are older than PDF 2.0, so pdfUA="2" with conformance fails the render, naming options.pdfUA. conformance="PDF/A-2a" or "PDF/A-3a" is PDF/A, tagged. The render options tagged and pdfUA do the same and win over the props. Neither prop is part of the document tree: to render a stored result.document tagged again, pass the render options to renderDocument.

• What is what. A Text is a paragraph, an Image, Svg or Canvas a figure with its alt, a Table a table (its header rows head their columns; <Cell header> heads its row; spans are kept), a field a form field with its label, a Note or an Attachment an annotation, and a link a link, which screen readers announce by its text. An image with alt inside a Text is a figure in place, and a link inside one a link. A View is not an element: its children belong to its parent. role says otherwise: 'h1' to 'h6' for headings (PDF/UA wants them to go down one level at a time from h1), 'section', 'blockQuote', 'caption', 'figure' (a View drawn as one figure, with alt), 'list', 'listItem', 'label' and 'listBody' for lists, or 'artifact' for decoration that screen readers skip. A 'listItem' belongs in a 'list' and a 'listBody' in a 'listItem'; the list's numbering is read from its labels (1., a), •).
• Parts of an SVG file. In an SVG file given to <Image src>, an element (a group, use, shape, image, text or a) with aria-label, or else a <title> child, is a figure of its own with that text as its alternative text, inside the image's; an element with aria-hidden="true" is decoration. Only elements that are drawn count, not those in defs, symbol, clipPath, mask, marker, patterns, gradients or filters, and not nested SVG images. The image's own alt is still its figure's.
• Decoration. alt="" makes an image decoration. Backgrounds, borders, rules, Headers, Footers and fixed elements (painted on every page), and repeated table header rows are decoration too.
• Reading order is the order of the template, whatever zIndex, floats, absolute positions or grid areas do on the page: write the template in the order it should be read.
• What checkers cannot tell. That alternative text says what an image shows, that the template's order is the reading order, and that colours have enough contrast are yours to check. Test with a screen reader, and with PAC or veraPDF.

A tagged file is larger: about 2.5 times for a long report of tables, much less for documents of paragraphs.