ReferenceshortDescription

<shortDescription>

A short accessibility description (e.g. for a `<graph>`) read by screen readers

<shortDescription> supplies a concise text alternative for an enclosing component that is consumed only by assistive technology, such as screen readers. It is never shown as visible content to sighted users.

Unless the enclosing component already has an explicit label, a <shortDescription> is exposed to assistive technology as the accessible name (label) of that component, and so it does satisfy the accessibility requirement for labeling. (When there already is an explicit <label> or external for-label, the <shortDescription> instead becomes supplementary description text, as explained below.)

A <description>, by contrast, is always associated with a component only as supplementary detail, never as a label, and so it never satisfies the labeling requirement.

For inputs and answers, adding a <label> is generally the preferred way to meet the labeling requirement: a <label> is visible to sighted users and exposed to assistive technology, so a single label serves everyone. Use a <shortDescription> when a visible label is not wanted, and for components such as <image>, <video>, and <graph>, which do not accept a <label> and so rely on a <shortDescription> for their text alternative.

A <shortDescription> is meaningful as a child of <image>, <video>, <graph>, <answer>, <mathInput>, <textInput>, <booleanInput>, <choiceInput>, and <matrixInput>.

How it reaches assistive technology depends on the component: it becomes the alt text of an image, the title of a video, and an aria-label or aria-labelledby for an input that has no visible <label>. When an input already has a visible <label>, the <shortDescription> is added as an aria-description instead, so the two do not conflict.

Keep the text short and write it in plain language. In particular, spell out any mathematics in words rather than nesting math components inside it — Doenet emits an accessibility warning if a <shortDescription> contains math, since a screen reader cannot reliably read raw math notation.

Attributes and Properties

Attributes for <shortDescription>

Common to all components (9)
copy

reference. Create an independent copy of another component by reference. Enter a references a $name.

disabled

boolean. Default value: false. Whether this component is disabled and cannot be interacted with.

extend

reference. Extend another component by reference, inheriting its children and attributes. Enter a reference as $name.

fixed

boolean. Default value: false. Whether this component's value is fixed and cannot be modified.

fixLocation

boolean. Default value: false. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

hide

boolean. Default value: false. Whether to hide this component from the rendered output.

isResponse

boolean. Default value: false. Whether this component is treated as a response for the purposes of assessment.

name

text. The name used to reference this component from elsewhere in the document.

styleNumber

integer. Default value: 1. The style number used to select this component's visual styling from the available style definitions.

Properties for <shortDescription name="s">

Other (6)
$s.disabled

boolean. Whether this component is disabled and cannot be interacted with.

$s.fixed

boolean. Whether this component's value is fixed and cannot be modified.

$s.fixLocation

boolean. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

$s.hidden

boolean. Whether this component is hidden from the rendered output.

$s.text

text. The combined content of this component's children, as a plain text string.

$s.value

shortDescription. The short description text.

Common to all components (4)
$s.doenetML

text. The DoenetML source code that produced this component.

$s.hide

boolean. Whether to hide this component from the rendered output.

$s.isResponse

boolean. Whether this component is treated as a response for the purposes of assessment.

$s.styleNumber

integer. The style number used to select this component's visual styling from the available style definitions.

Examples

Example: <shortDescription> on an <image>

Every <image> should have a <shortDescription> so that screen-reader users receive a meaningful text alternative. Its text becomes the image’s alt text and is not displayed on screen.

Example: <shortDescription> on a <graph>

A <graph> is a visual component, so a <shortDescription> gives assistive technology a summary of what the graph displays.

Example: <shortDescription> on a <mathInput>

When an input has no visible <label>, its <shortDescription> provides the accessible name screen-reader users need to identify the control. Note that the mathematics is spelled out in words (“x squared”) rather than written with a <m> component.

setupshuffle