terra-clinical-result
Version:
The Terra Clinical Result package is a collection of standardized views for presenting clinical results documented to a Patient's Medical Chart, such as Vital Signs, Laboratory Results, and Discretely Documented Values
141 lines (81 loc) • 9.44 kB
text/mdx
import { Badge } from 'terra-clinical-result/package.json?dev-site-package';
import { Notice } from "@cerner/terra-docs";
import ClinicalResultBloodPressureExtraDisplays from '../example/clinical-result-blood-pressure/ClinicalResultBloodPressureExtraDisplays?dev-site-example';
import FlowsheetResultCellMultipleResultsSymbols from '../example/flowsheet-result-cell/FlowsheetResultCellMultipleResultsSymbols?dev-site-example';
import ResultNameHeaderCellAccessibleNamesExample from '../example/result-name-header-cell/ResultNameHeaderCellAccessibleNamesExample?dev-site-example';
<Badge />
# Accessibility Guide for Terra Clinical Result
## Why is this important?
Terra Clinical Result is a collection of standardized views for single result values added to a patient's medical chart. As there are many patients who rely on assistive technologies to interact with their chart, it is critical that any information conveyed by a clinical result to sighted users is also conveyed to screen reader users in a meaningful way.
## Accessibility Considerations
Terra Clinical Result has several variants designed to either display specific results or for use within a flowsheet. The table below lists each variant and its use:
| Variant | Use |
| --- | --- |
| Clinical Result | The default Clinical Result component intended for displaying a single result value |
| Clinical Result Blood Pressure | Intended for displaying Blood Pressure Vital Sign results |
| Flowsheet Result Cell | Specifically for the grid display of a result collection |
| Result Name Header Cell | Standardized view for the Result Name and Unit of Measure in the row header for each row within a flowsheet |
| Result Time Header Cell | Standardized view for the Date/Time Header cells for each bucketed time column within a flowsheet |
The following sections go into more detail on accessibility considerations for each variant.
----
### Code Considerations
#### Clinical Result Blood Pressure with Additional Displays
Clinical Result Blood Pressure creates a standardized view for single result values added to a patient's medical chart. Along with the blood pressure results, we have the option to display additional details like concept names (Systolic, Diastolic) and the date and time of the results. Visually we can see that this information is related but it is possible that screen reader users may not understand the whole cell as a group.
<Notice variant="important" ariaLevel="5">
It is highly recommended to set the optional `isBloodPressureGrouped` [prop](https://engineering.cerner.com/terra-ui/components/terra-clinical-result/clinical-result/clinical-result-blood-pressure#clinical-result-blood-pressure-props) to true when additional information is displayed with the blood pressure results. This will semantically relate the blood pressure results and additional displays as a group context.
</Notice>
##### Code Example:
This example shows how to set up the optional `isBloodPressureGrouped` prop in order to group the blood pressure results with additional displays:
<ClinicalResultBloodPressureExtraDisplays title="Clinical Result Blood Pressure with Additional Displays" />
#### Result Name Header Cell Accessible Names
Result Name Header Cell creates a standardized view for the Result Name and Unit of Measure pair within a flowsheet. In many cases, the displayed result name or displayed unit of measure is an abbreviation. Reading out these abbreviations is not very helpful for screen reader users.
<Notice variant="important" ariaLevel="5">
In order to provide better accessible names for the result name and unit of measure, the optional `fullResultName` and `fullUnit` [props](https://engineering.cerner.com/terra-ui/components/terra-clinical-result/clinical-result/result-name-header-cell#result-name-header-cell-props) can be used to set the full name of the result name and unit when consuming the Result Name Header Cell component.
</Notice>
##### Code Example:
This example shows how to set up the optional `fullResultName` and `fullUnit` props in order to provide accessible names for the displayed result name and unit:
<ResultNameHeaderCellAccessibleNamesExample title="Result Name Header Cell Accessible Names" />
#### Accessibility of Cell Components
Flowsheet Result Cell, Result Name Header Cell, and Result Time Header Cell all return their content using HTML table elements.
Flowsheet Result Cell utilizes the `<td>` element while both of the header cell components utilize the `<th>` element.
As such, the best way to consume these components for true accessibility is in a semantic HTML table.
Otherwise, the context of being a cell/header cell will not be understood by screen reader users.
The [Terra HTML Table](https://engineering.cerner.com/terra-ui/components/cerner-terra-core-docs/html-table/about) component can be used to create a semantic HTML table for this purpose.
**NOTE:** When using a semantic HTML table, use `table-layout: 'fixed'` or otherwise ensure the styling for column widths is preserved.
### Other Considerations
#### Flowsheet Result Cell with Multiple Results
Flowsheet Result Cell is used for the grid display of a result collection and can handle displaying an indication of multiple results. When there are multiple results, the first result is displayed along with a custom symbol that is used to communicate information about the remaining results:
<FlowsheetResultCellMultipleResultsSymbols />
The number represents how many additional results exist and the color of the result stack indicates the severity of the **most** serious result in the side panel.
Alternative text has been added to communicate the number of additional results and the severity:
| Severity Color | Meaning | Text to be Read |
| --- | --- | --- |
| Gray | Normal | "A total of [number] results are available." |
| Light Red | Out of range (high or low) but not critical | "A total of [number] results are available with at least 1 out of range result." |
| Dark Red | Critical | "A total of [number] results are available with at least 1 critical result." |
e.g. if we have a dark red box with 3 results the screenreader will read out:
“A total of 3 results are available with at least 1 critical result.”
#### Usage of Visually Hidden Text
There are a few cases in which we leverage visually hidden text to give greater context to certain styling on the front end - or related to statuses of certain results. These cases are as follows:
##### No Results:
When the `hasResultNoData` prop is used the display will show: '--'
Hidden text has been added to read out "No Results" when the `hasResultNoData` prop is used.
##### Entered In Error:
When a result inside a Flowsheet Result Cell has a status of `entered-in-error`, the display will show: 'In Error'
Hidden text has been added to read out "Value Uncharted as In Error" to convey this has a status of `entered-in-error`.
##### Strikethrough Result Entered In Error:
When a result is shown on the front end with a strikethrough, that means it has been entered in error. The result is important enough to be shown visually and as such, needs to be read by the screen reader while also giving some context that it has a status of `entered-in-error`.
Hidden text has been added to read out "Result {strikethroughResult} Entered In Error" when we have a strikethrough result.
## Support Compliance
Terra is committed to ensuring its components provide maximum possible accessibility. However, simply using Terra components will not automatically make a product accessible.
Final responsibility lies with the consumers of Terra components — ensuring proper usage, engineers following correct implementation patterns, and authors crafting content that follows best practice guidance — to make a product fully accessible.
### WCAG Resources
#### Success Criteria
- [**1.1.1 Non-text Content**](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content) - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.
- [**1.3.1 Info and Relationships**](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships) - Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
- [**3.2.4 Consistent Identification**](https://www.w3.org/WAI/WCAG21/Understanding/consistent-identification) - Components that have the same functionality within a set of Web pages are identified consistently.
- [**4.1.2 Name, Role, Value**](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) - For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
### Partial Support & Requiring Further Enhancement
- None identified
- [Report a problem with this component on **GitHub**](https://github.com/cerner/terra-clinical/issues/new/choose)
_For more information about Accessibility Support with Terra — go to [Component Standards: Accessibility (A11y)](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#accessibility-a11y)._