# WCAG best practices - print templates (low-code)

## Free tools allowing verification of print accessibility <a href="#dobrepraktykiwcagszablonywydrukow-lowcode-darmowenarzedziapozwalajaceweryfikowacdostepnoscwydruku" id="dobrepraktykiwcagszablonywydrukow-lowcode-darmowenarzedziapozwalajaceweryfikowacdostepnoscwydruku"></a>

## PAC

PAC - <https://pac.pdf-accessibility.org/en> (Windows) - a tool used to check whether PDF files comply with accessibility requirements. Using it you can verify whether your PDF meets PDF/UA and WCAG standards and generate a report based on that. It also allows previewing the document structure for a screen reader.

{% hint style="info" %}
It should be noted that PAC is not an official tool created by the ISO committee, but by an external company; therefore the results of its reports and analyses are not the only ones to fully rely on, as they do not constitute the only available tool of this type, and other solutions may offer information and analyses that may differ to some extent.
{% endhint %}

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FFRZsvqQVhkQVsCtRlbmu%2Fimage.png?alt=media&#x26;token=fba374c0-ba8c-4910-b75f-b992bd7a9c9c" alt=""><figcaption><p><em><strong>Illustration 1.</strong> PAC main panel</em></p></figcaption></figure>

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2F3pukuzCwNq2J6HTCcObp%2Fimage.png?alt=media&#x26;token=376ccc04-de15-4102-9a09-4d6c6bc003a6" alt=""><figcaption><p><em><strong>Illustration 2.</strong> HTML structure tree of the document</em></p></figcaption></figure>

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FQzm1qmIRgxXweFHjrGsQ%2Fimage.png?alt=media&#x26;token=43c1c608-d0ac-4288-aa6e-c0556df18305" alt=""><figcaption><p><em><strong>Illustration 3.</strong> Preview of the document's HTML structure</em></p></figcaption></figure>

## Axes4

Axes4 - <https://check.axes4.com/en/> - an online tool that generates an accessibility report. It is limited compared to PAC regarding more detailed analysis with indication of errors and lacks the ability to preview the PDF structure.

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2F260jejILvZs7DcyFGB62%2Fimage.png?alt=media&#x26;token=637e922c-bf09-493a-9ecc-3e7551215899" alt=""><figcaption><p><em><strong>Illustration 4.</strong> Accessibility report</em></p></figcaption></figure>

## Screen readers <a href="#dobrepraktykiwcagszablonywydrukow-lowcode-czytnikiekranowe" id="dobrepraktykiwcagszablonywydrukow-lowcode-czytnikiekranowe"></a>

Information is located [here](#dobrepraktykiwcagszablonywydrukow-lowcode-czytnikiekranowe)

## Print metadata declarations <a href="#dobrepraktykiwcagszablonywydrukow-lowcode-deklaracjemetadanychwydruku" id="dobrepraktykiwcagszablonywydrukow-lowcode-deklaracjemetadanychwydruku"></a>

In the context of accessibility **\<fo:declarations>** we can declare metadata or other additional information that does not directly affect visual formatting.

{% hint style="danger" %}
**\<fo:declarations>** for correct operation it must be located in the document structure between the tag **\<fo:layout-master-set>**, and the first **\<fo:page-sequence>**
{% endhint %}

Screen readers can interpret these values. According to UA and WCAG assumptions, the metadata should include **the application title, language and the DisplayDocTitle setting**. Example of a declaration:

```
<fo:declarations>
    <pdf:catalog xmlns:pdf="http://xmlgraphics.apache.org/fop/extensions/pdf">
       <pdf:string key="Lang">pl</pdf:string> <- declaration of language
          <pdf:dictionary type="normal" key="ViewerPreferences">
              <pdf:boolean key="DisplayDocTitle">true</pdf:boolean> <- DisplayDocTitle setting
          </pdf:dictionary>
    </pdf:catalog>
    <x:xmpmeta xmlns:x="adobe:ns:meta/">
       <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
         <rdf:Description rdf:about=""
               xmlns:dc="http://purl.org/dc/elements/1.1/">
                    <dc:title>Dokument AwZ</dc:title> <- title
                    <dc:creator>Document author</dc:creator> <- author
                    <dc:description>Dokument AwZ</dc:description> <- description
         </rdf:Description>
       </rdf:RDF>
     </x:xmpmeta>
</fo:declarations>
```

## Assigning the correct tag to email addresses and links <a href="#dobrepraktykiwcagszablonywydrukow-lowcode-nadanieprawidlowegotaguadresowe-mailorazlinkow" id="dobrepraktykiwcagszablonywydrukow-lowcode-nadanieprawidlowegotaguadresowe-mailorazlinkow"></a>

Email addresses and links to external addresses should be contained in the context of the tag **\<fo:basic-link>**

field is sufficient.

```xml
<xsl:variable name="wnioskodawca_email"
        select="//wnio:AdresZamieszkania/wnio:AdresPocztyElektronicznej"></xsl:variable>
<xsl:variable name="wnioskodawca_email_link"
        select="concat('mailto:', '$wnioskodawca_email')"></xsl:variable>
...
 
 
<fo:basic-link>
   <xsl:attribute name="external-destination">
       <xsl:value-of select="$wnioskodawca_email_link"/>
   </xsl:attribute>
   <xsl:value-of select="$wnioskodawca_email" />
</fo:basic-link>
```

## Modifying element roles <a href="#dobrepraktykiwcagszablonywydrukow-lowcode-modyfikacjarolielementow" id="dobrepraktykiwcagszablonywydrukow-lowcode-modyfikacjarolielementow"></a>

By default elements are automatically assigned corresponding types in the generated PDF structure. (H1 to H6 for headings, L for lists, etc.). However, it is possible to override default roles if we want to improve the default structure using the "role" attribute.&#x20;

**The default \<fo:block> has the role \<p> assigned**`.`

```
...
<fo:block role="H1" font-weight="bold">Header with H1 tag</fo:block>
<fo:block>Paragraph in a section</fo:block>
...
```

To skip some elements in the PDF structure so they are not visible to a screen reader, we can apply **role="artifact"**. This is useful to omit in the structure, for example, elements like **\<fo:static-content>** such as page headers and footers, which are useless for blind people when read by a screen reader.

Example usage for a header:

```
<fo:static-content flow-name="first-page-header" role="artifact">
     <xsl:call-template name="naglowek1"></xsl:call-template>
</fo:static-content>
```

There is also the possibility of "wrapping" content that we would like to skip in the PDF structure using the element <**fo:wrapper>** with the role "artifact" assigned.&#x20;

Example for presenting the date format dd-mm-yyyy under a field:

```
<fo:block text-align="center" font-weight="bold">
<fo:wrapper role="artifact">dd - mm - yyyy</fo:wrapper>
</fo:block>
```

## Presentation of empty cells <a href="#dobrepraktykiwcagszablonywydrukow-lowcode-prezentacjapustychkomorek" id="dobrepraktykiwcagszablonywydrukow-lowcode-prezentacjapustychkomorek"></a>

To create elements that do not need to present values and may be empty, non-breaking spaces or characters in the same color as the print background should not be used.

Example template for an unchecked checkbox causing an accessibility report error due to the use of color="white", which results in displaying a white character on a white background:

```xml
xsl:template name="checkbox_template">
        <xsl:param name="checked"></xsl:param>
         <xsl:choose>
            <xsl:when test="$checked = 'true'">
                <fo:inline font-family="ZapfDingbats" font-size="10pt" min-width="12mm">✕</fo:inline>
            </xsl:when>
            <xsl:otherwise>
                <fo:inline font-family="ZapfDingbats" font-size="10pt" color="white" width="100mm">
        ✕</fo:inline>
            </xsl:otherwise>
        </xsl:choose>
    </xsl:template>

```

Instead, it is better to create an empty cell with the style **padding-top** and **padding-bottom**, which will visually give us the same appearance of the cell without the need for any unnecessary character to be present in it.&#x20;

```
<xsl:template name="checkbox_template">
    <xsl:param name="checked"></xsl:param>
     <xsl:choose>
        <xsl:when test="$checked = 'true'">
            <fo:block font-size="8pt" min-width="12mm" padding-top="0.1mm" padding-bottom="0.1mm">X</fo:block>
        </xsl:when>
        <xsl:otherwise>
            <fo:block width="100mm" padding-top="2mm" padding-bottom="1.5mm"></fo:block>
        </xsl:otherwise>
    </xsl:choose>
</xsl:template>
```

## Spacing between elements - avoiding empty rows <a href="#dobrepraktykiwcagszablonywydrukow-lowcode-odlegloscipomiedzyelementami-unikaniepustychwierszy" id="dobrepraktykiwcagszablonywydrukow-lowcode-odlegloscipomiedzyelementami-unikaniepustychwierszy"></a>

It is bad practice to use elements such as fo:block with non-breaking space characters to increase spacing between elements on the print. The same effect can be achieved using styles such as **margin-top** and **margin-bottom.** This will help us avoid unnecessary empty elements in the document structure.

If you want to increase the spacing between rows **\<fo:table-row>** you can use table properties **border-collapse="separate"** and **border-spacing="...".**

For example:

```
<fo:table border-collapse="separate" border-spacing="10pt">
    <fo:table-body>
        <fo:table-row>
            <fo:table-cell border="solid 1pt black">
                <fo:block>Row 1</fo:block>
            </fo:table-cell>
        </fo:table-row>
        <fo:table-row>
            <fo:table-cell border="solid 1pt black">
                <fo:block>Row 2</fo:block>
            </fo:table-cell>
        </fo:table-row>
    </fo:table-body>
</fo:table>
```

{% hint style="info" %}
Accessibility in PDF (article on the Consdata blog)

[Accessibility in PDF - documents without barriers](https://blog.consdata.tech/2025/04/28/dostepnosc-w-pdf-dokumenty-bez-barier.html)
{% endhint %}
