Normally aria-disabled is used to reference a pseudo form element, such as an image being used to represent a check box. Can it be used to represent an upcoming section in a multipart form?
This is a sample, multi-part process. Pretend this page will walk you through the process of getting a new pet.
...
This is a sample, multi-part process. Pretend this page will walk you through the process of getting a new pet.
...
This alerts the user the header is "dimmed".
This is a sample, multi-part process. Pretend this page will walk you through the process of getting a new pet.
...
Watch VoiceOver announce the samples on this page(.mov).
This is a grey area. The upcoming sessions are disabled, but we still want the user to be able to focus on the headers to know what is coming up. We just want them to understand these steps are not ready to be acted upon. The documentation suggests aria-disabled should prevent these headers from receiving focus. So this may not be a valid use.
Aria States and Properties - W3C
aria-disabled
(state)Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. See related
aria-hidden
andaria-readonly
.For example, irrelevant options in a radio group may be disabled. Disabled elements might not receive focus from the tab order. For some disabled elements, applications might choose not to support navigation to descendants. In addition to setting the
aria-disabled
attribute, authors SHOULD change the appearance (grayed out, etc.) to indicate that the item has been disabled.The state of being disabled applies to the current element and all focusable descendant elements of the element on which the
aria-disabled
attribute is applied.
Characteristics of aria-disabled Characteristic Value Used in Roles: All elements of the base markup Value: true/false
Values of aria-disabled Value Description true: The element and all focusable descendants are disabled and its value cannot be changed by the user. false (default): The element is enabled.