4.x WCAG 2.2 Test Layout
- Cathy Allison
This page was created on 5/8/2023 for version 4.0 of VetView. (Every screen should have a date it was created, a version number it was created, and if it is updated later, the version to which it was updated. Major screen rewrites should have a whole new page created with the version number in the page name. Avoid moving or deleting pages.)
A search box should follow this info section.
The table of contents should be at the top to allow for easier tab navigation for screen readers.
High Level Overview of Page Content (Layer 1)
This section should contain a brief description of the purpose of the page. In this example, the page is a test of the Confluence 2.0 editor with an attempt to make our documentation follow WCAG 2.2 standards.
This section should not contain any hyperlinks or screenshots, but it can include rich text like Bold for emphasis.
Medium Level Explanation of Content (Layer 2)
This section is intended to provide a bit more detail about the content.
Text Standards
It can include hyperlinks to other pages, any definitions of the terms used, or screenshots. It can also include bullet point lists as needed.
It should not include the tables found on Screen by Screens. For a How-To guide, this should be the main section on the page. For the Screen Details pages, there can be a third layer.
Screenshot Standards
Screenshots should be created in SnagIt and have a drop shadow. In Confluence, we will need to add a caption and alt text for the image to describe what it is displaying.
This section can include very nitty gritty details.
Numbered lists and other tools
screenshots
tables with icons
multiple levels of header trees
itemized lists like this one
Tables
Field | Description |
|---|---|
Screenshots | Visual images of VetView that have been taken directly from the application. They may be modified with markup to highlight certain portions. |
Tables with Icons | Icons can be uploaded directly from VetView or they can be emojis. The standard for web site icons is now set to 32px for WCAG 2.2. |
Multiple Levels of Header Trees | We should use heading levels, and not colors or bold text, to act as the outline. Screen readers use the headers to correctly describe the structure of text. The Page Contents need to be moved to the top, and they will automatically build based on these headers. |
Itemized / Numbered Lists | These itemized lists can be pair matched with a screenshot that has callouts in this highly detailed section. |
Other Possible Confluence Widgets
Panels
Multiple Column Layouts
Use this to have a small image on one side and explanatory text on the other side. There are no outlines in this section, so use it only when it is clear from the image what this text should be referring to. Callouts from Snagit in the image will help a lot.
Dividers
They took away our clean panel outlines but gave us dividers that can be used to separate sections.
It’s not as clean but it can still help.