# Dobre praktyki WCAG - szablony wydruków (low-code)

## Darmowe narzędzia pozwalające weryfikować dostępność wydruku <a href="#dobrepraktykiwcagszablonywydrukow-lowcode-darmowenarzedziapozwalajaceweryfikowacdostepnoscwydruku" id="dobrepraktykiwcagszablonywydrukow-lowcode-darmowenarzedziapozwalajaceweryfikowacdostepnoscwydruku"></a>

## PAC

PAC - <https://pac.pdf-accessibility.org/en> (Windows) - narzędzie służące do sprawdzania, czy pliki PDF są zgodne z wymogami dostępności. Przy jego użyciu można zweryfikować czy nasz PDF spełnia standardy PDF/UA i WCAG oraz wygenerować na tej podstawie raport. Pozwala również na podejrzenie struktury dokumentu dla czytnika ekranu.

{% hint style="info" %}
Należy zwrócić uwagę, że PAC nie jest oficjalnym narzędziem stworzonym przez komisję ISO, a firmę zewnętrzną, tym samym wyniki jej raportów i analiz nie są jedynymi, którymi należy się w pełni sugerować, ponieważ nie stanowią one jedynego dostępnego narzędzia tego typu, a inne rozwiązania mogą oferować informacje oraz analizy, które w jakimś stopniu mogą się różnić.
{% endhint %}

<figure><img src="https://1082717226-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>Ilustracja 1.</strong> Panel główny PAC</em></p></figcaption></figure>

<figure><img src="https://1082717226-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>Ilustracja 2.</strong> Drzewo struktury HTML dokumentu</em></p></figcaption></figure>

<figure><img src="https://1082717226-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>Ilustracja 3.</strong> Podgląd struktury HTML dokumentu</em></p></figcaption></figure>

## Axes4

Axes4 - <https://check.axes4.com/en/> - narzędzie online generujące raport dostępności. Jest ograniczony względem narzędzia PAC o dokładniejszą analizę ze wskazaniem błędów i brak możliwości podglądu struktury PDF.

<figure><img src="https://1082717226-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>Ilustracja 4.</strong> Raport dostępności</em></p></figcaption></figure>

## Czytniki ekranowe <a href="#dobrepraktykiwcagszablonywydrukow-lowcode-czytnikiekranowe" id="dobrepraktykiwcagszablonywydrukow-lowcode-czytnikiekranowe"></a>

Informacje znajdują się [tutaj](#dobrepraktykiwcagszablonywydrukow-lowcode-czytnikiekranowe)

## Deklaracje metadanych wydruku <a href="#dobrepraktykiwcagszablonywydrukow-lowcode-deklaracjemetadanychwydruku" id="dobrepraktykiwcagszablonywydrukow-lowcode-deklaracjemetadanychwydruku"></a>

W kontekście dostępności **\<fo:declarations>** możemy zadeklarować metadane lub inne dodatkowe informacje, które nie wpływają bezpośrednio na formatowanie wizualne.

{% hint style="danger" %}
**\<fo:declarations>** dla poprawnego działania w strukturze dokumentu musi znajdować się pomiędzy tagiem **\<fo:layout-master-set>**, a pierwszym **\<fo:page-sequence>**
{% endhint %}

Czytniki ekranu mogą interpretować te wartości. Zgodnie z założeniami UA i WCAG w metadanych powinny pojawić **tytuł wniosku, język oraz ustawienie DisplayDocTitle**. Przykład deklaracji:

```
<fo:declarations>
    <pdf:catalog xmlns:pdf="http://xmlgraphics.apache.org/fop/extensions/pdf">
       <pdf:string key="Lang">pl</pdf:string> <- zadeklarowanie języka
          <pdf:dictionary type="normal" key="ViewerPreferences">
              <pdf:boolean key="DisplayDocTitle">true</pdf:boolean> <- ustawienie DisplayDocTitle
          </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> <- tytuł
                    <dc:creator>Document author</dc:creator> <- autor
                    <dc:description>Dokument AwZ</dc:description> <- opis
         </rdf:Description>
       </rdf:RDF>
     </x:xmpmeta>
</fo:declarations>
```

## Nadanie prawidłowego tagu adresów e-mail oraz linków <a href="#dobrepraktykiwcagszablonywydrukow-lowcode-nadanieprawidlowegotaguadresowe-mailorazlinkow" id="dobrepraktykiwcagszablonywydrukow-lowcode-nadanieprawidlowegotaguadresowe-mailorazlinkow"></a>

Adresy e-mail oraz linki do adresów zewnętrznych powinny być zawarte w kontekście tagu **\<fo:basic-link>**

Przykład:

```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>
```

## Modyfikacja roli elementów <a href="#dobrepraktykiwcagszablonywydrukow-lowcode-modyfikacjarolielementow" id="dobrepraktykiwcagszablonywydrukow-lowcode-modyfikacjarolielementow"></a>

Domyślnie elementy automatycznie mają ustawiane odpowiadające im typy w generowanej strukturze PDF. (H1 do H6 dla nagłówków, L dla list itp.). Jest jednak możliwość nadpisania domyślnych ról w przypadku, gdybyśmy chcieli poprawić domyślną strukturę za pomocą atrybutu "role".

**Domyślne \<fo:block> ma przypisaną rolę \<p>**`.`

```
...
<fo:block role="H1" font-weight="bold">Header z tagiem H1</fo:block>
<fo:block>Paragraf w sekcji</fo:block>
...
```

W celu pominięcia niektórych elementów w strukturze PDF, aby nie były widoczne dla czytnika ekranowego, możemy zastosować **role="artifact"**. Przydaje się to w celu ominięcia w strukturze np. elementów typu **\<fo:static-content>** takich jak nagłówki oraz stopki stron, które przypadku osób niewidomych są nieprzydatne w momencie przeczytania przez czytnik ekranowy.

Przykład wykorzystania dla nagłówka:

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

Istnieje również możliwość "zawinięcia" treści, którą chcielibyśmy pominąć w strukturze PDF używając elementu <**fo:wrapper>** z nadaną rolą "artifact".

Przykład dla prezentacji formatu daty dd-mm-rrrr pod polem:

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

## Prezentacja pustych komórek <a href="#dobrepraktykiwcagszablonywydrukow-lowcode-prezentacjapustychkomorek" id="dobrepraktykiwcagszablonywydrukow-lowcode-prezentacjapustychkomorek"></a>

Do tworzenia elementów, które nie muszą prezentować wartości i mogą być puste nie powinno stosować niełamliwej spacji czy znaków w takim samym kolorze jak tło wydruku.

Przykład template dla checkboxa bez zaznaczenia powodujący błąd w raporcie dostępności ze względu na użycie color="white" co powoduje wyświetlenie białego znaku na białym tle:

```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>

```

Zamiast niego lepiej utworzyć pustą komórkę z nadanym stylem **padding-top** i **padding-bottom**, który wizualnie da nam taki sam wygląd komórki bez konieczności występowania w niej żadnego niepotrzebnego znaku.

```
<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>
```

## Odległości pomiędzy elementami - unikanie pustych wierszy <a href="#dobrepraktykiwcagszablonywydrukow-lowcode-odlegloscipomiedzyelementami-unikaniepustychwierszy" id="dobrepraktykiwcagszablonywydrukow-lowcode-odlegloscipomiedzyelementami-unikaniepustychwierszy"></a>

Złą praktyką jest używanie elementów np. fo:block ze znakami niełamliwej spacji do zwiększania odległości pomiędzy elementami na wydruku. Taki sam efekt można osiągnąć używając stylów takich jak **margin-top** i **margin-bottom.** Unikniemy dzięki temu niepotrzebnych pustych elementów w strukturze dokumentu.

W przypadku chęci zwiększenia odległości pomiędzy wierszami **\<fo:table-row>** można skorzystać z własności tabeli **border-collapse="separate"** oraz **border-spacing="...".**

Przykładowo:

```
<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" %}
Dostępność w PDF (artykuł na blogu Consdaty)

[Dostępność w PDF - dokumenty bez barier](https://blog.consdata.tech/2025/04/28/dostepnosc-w-pdf-dokumenty-bez-barier.html)
{% endhint %}