The Deutsche Bahn Passenger Rights Form has served as a means to get refunds for train delays for many years now. The goal of the optimization was to make the form as accessible as possible without changing the basic layout – mainly because the design needs to be consistent with the printed form to allow it to be automatically processed. And yes, i agree that we need an online version. Still there still are PDF files that need to meet the BITV (or WCAG) criteria.
The PDF optimization goal was to achieve the highest possible level of accessibility without changing the basic layout.
BITV requirements
The most important criteria for the accessibility of PDF documents and forms are:
- Form fields need to be accessible using the tab key
- Alternative / Alt-texts for all form elements (essential for screen readers for the visually impaired), for instance form fields, pictures, texts, graphic elements
- Text must be hierarchically structured (headings, sections) and made readable by a screenreader
- All elements in the PDF must be tagged, no blank white areas or superfluous graphic objects
Steps
The source document was created in InDesign initially designed for printing.
- InDesign preparation: Remove all invisible elements (e.g. masks) and clean up the layout. Place design elements that should not be visible in the printout (here i didn’t want the orange background areas with the red borders printed) in a separate layer
- Export PDF and either let Acrobat find the form fields automatically using the respective function (sorry, this tutorial was created in German initially)
or – this is more accurate: create the form fields manually. You can do this with a right mouse click when you’re in the form editing mode:
- The following attributes must be filled in (for each form element) to meet the requirements for accessible forms:
- Tab Allgemein: Name, Quickinfo (ALT-Text)
- Tab Erscheinungsbild: For the font that is used to fill in the text fields make sure that the font size is not too large (or small), so that the text remains visible even when filled out! System fonts are also a good idea in order to have more control in terms of design
- Tab Format: Depending on the field type, the correct category needs to be selected here, You can also integrate your own scripts to format the input and appearance:
- Reiter Validierung: Hier kann per Script validiert werden, ob die Nutzereingabe richtig ist:
Example for an error message after entering characters instead of numbers for the date:
- Create a tag structure: The reading order function in Acrobat can be found as a button in the “Edit PDF” area (in Acrobat Pro the editing the form and “regular editing” are two different functions:
The list on the left side shows EVERY element on the page. It is of importance to check the name of the elements and higly important to sort the elements in the correct reading order (drag + drop). - Check for Weblinks within the document. Make them interactice, check URLs.
- Define the options for the printout if necessary:
- Define document settings (Menu: Document > Settings or Properties):
- Description: Title, author
- Security: optional pass word protection
- More: Define Document language (this is really important for BITV!)
- In case users can save the (filled out) PDF Extended Reader Functions > Activate Additional Functions
- Test your creation thoroughly!
The result
I have worked for German authorities and government institutions quite a lot – they are required to offer their websites and services in a barrier-free manner by law. For example, I developed the BITV-compliant design of Jobbörse – Bundesagentur für Arbeit , which received an award for accessibility at the time. So I know pretty well which requirements for structure and interface design have to be considered. Revising a PDF form seems very technical for a UX designer – but I find working with restrictions particularly challenging.
Text in: Deutsch