Electronic records (21 CFR Part 11)
Audit Trail <smart-audit-trail>
AuditTrail displays audit trail entries for review, as required by 21 CFR Part 11 ยง11.10(e).
Accessibility Attributes
The AuditTrail is an HTML table with a caption and column headers, so the table navigation of a screen reader works on it: reading a column, reading a row, jumping to a header. The rows have a roving tab stop: one stop for the table, the arrow keys move between rows and Enter selects a row. The toolbar controls are native inputs with labels. The chain verification result is a status message, and a broken chain is announced assertively. The previous value and the new value are two columns and both are read; neither is struck through, because struck-through text is skipped by some screen readers.
The following ARIA attributes are used inside the AuditTrail:
- role="group" - set on the container, with an aria-label of the label.
- <table> with <caption> and <th scope="col"> - the table is a table. The caption is the label, visually hidden; the headers name every column.
- aria-sort - set on the Time and # headers, "descending" or "ascending". The header is a button named "Time, sorted newest first".
- tabindex - a roving tab stop on the rows: 0 on the selected row, or the first, and -1 on the rest.
- aria-selected="true" - set on the selected row.
- <time datetime> - every time cell carries the full ISO stamp with its offset in datetime, with the readable form as its text.
- role="status" - set on the integrity badge ("Chain intact - 128 entries", "Chain broken at #57 (hash)") and on the footer that says how many rows were held back.
- aria-label - set on the search field, the user and action selects, and the from/to inputs through their labels.
- title - set on a signature cell with the full manifestation.
Keyboard Interaction
The following keyboard shortcuts are available to interact with the AuditTrail:
| Key | Action |
|---|---|
| Tab | Moves through the toolbar, search, user, action, from, to, the export buttons, Mark reviewed, then the sort header, then onto the rows as one stop. |
| Arrow Down / Arrow Up | Move between rows. |
| Home / End | Move to the first / last row shown. |
| Enter / Space on a row | Selects it, raising entrySelect. |
| Enter / Space on the Time header | Toggles the sort order. |
| Typing in the search field | Narrows the rows as you type, raising filterChange. The row count is in the footer when rows are held back. |
Localization
All strings the AuditTrail exposes to assistive technology come from its messages property, so they can be provided in the user's language. Set locale to select a language and add a language through messages. Assigning messages replaces the whole object, so include the existing languages when adding one: el.messages = Object.assign({}, el.messages, { de: pack }); If the built-in en pack is dropped, switching back to English shows raw message keys.
The AuditTrail uses the following message keys:
- caption, search, allUsers, allActions, from, to, exportCsv, exportJson, review
- intact, broken, unchained, noEntries, showing, sortNewest, sortOldest
- colSeq … colSystem - the column names; actionCreate … actionReject - the action names; reasonLink, reasonHash, reasonSequence, reasonMissing - why a chain broke
- byApproved … byWitnessed - the signature forms
German, French, Spanish and Chinese packs are included in the Smart.Industrial package. An action the viewer has no key for is shown as given, an audit trail must not rename what it was told. Record names, fields, values and reasons are the entries' own and are never translated.
Additional information on WAI-ARIA for the SMART Framework can be found here.