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

Darmowe narzędzia pozwalające weryfikować dostępność wydruku

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.

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ć.

Ilustracja 1. Panel główny PAC

Ilustracja 2. Drzewo struktury HTML dokumentu

Ilustracja 3. Podgląd struktury HTML dokumentu

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.

Ilustracja 4. Raport dostępności

Czytniki ekranowe

Informacje znajdują się tutaj

Deklaracje metadanych wydruku

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.

<fo:declarations> dla poprawnego działania w strukturze dokumentu musi znajdować się pomiędzy tagiem <fo:layout-master-set>, a pierwszym <fo:page-sequence>

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

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

Przykład:

<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

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

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:

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

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>

Dostępność w PDF (artykuł na blogu Consdaty)

Dostępność w PDF - dokumenty bez barier