Accessibility v4 → v5

Page under construction...

New and built-in behaviours

Scalability

Adopted relative unit measurement (rem) instead of fixed (px)

Rem units allow for dynamic scaling based on a single root font size and adjust proportionally. Giving greater flexibility over pixels. This is particularly beneficial for users who adjust their browser settings for larger text, as these units scale according to user-defined preferences.

Reference: WCAG 2.2 SC 1.4.4 Resize Text

Headings

Automated heading levels

Aria levels are calculated dynamically, based upon the existence of a title on the defined parent and the offset through the tree. For example, if a component has no article or block title, its aria level will be calculated relative to the page heading level 1, this is as the block and article offsets are not applied.

See: Automated aria levels

Reference: Headings

Navigation

Navigation button order

Button order was introduced to ensure the DOM order matches the visual order of the navigation bar. This also gives flexibility in the visual display of the navigation bar. The sorting order can be configured per course.

See: Navigation sorting order on the wiki

Reference: Making the DOM order match the visual order

Navigation button labels

As part of the navigation button API, button labels were introduced to provide a text label based upon the button aria-label. Icons are a helpful tool to improve perception, but they aren't a replacement for text. Adding a visible text label makes the button’s purpose obvious.

See: Navigation Button API on the wiki

Reference: Making the DOM order match the visual order

Perceivable

Use aria-disabled instead of <button disabled>

Using aria-disabled improves discoverability as buttons will not be removed from the focus order of the page. Instead, it signals to assistive tech that a button is disabled whilst reading any associated label, for example “Submit button, unavailable”. Disabled buttons using the disabled attribute are typically ignored by assistive tech meaning a user won't be aware a button exists until it becomes available whilst the button is visually available to a sighted user. Note, developers will still need to use JavaScript to fully disable the functionality of the element while also changing the appearance of the element so sighted users know it is disabled via the .is-disabled class.

See: Switch from disabled to aria-disabled for ButtonsView

Reference: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled, https://css-tricks.com/making-disabled-buttons-more-inclusive/

Support for semantic quotes

It's important to ensure that the HTML used in Adapt is semantically correct to ensure the content is accessible to as many users as possible. Representing quotes with CSS styling alone is not identified by assistive tech. The text will read as any other body text on the page regardless how different the visual styling is. Adapt styling for <blockquote> and <q> was introduced to Vanilla and a brief explanation of some common HTML elements has been detailed on the wiki.

See: Making quotes semantic to encourage inclusive design, Semantic HTML Quotation on the wiki

Reference: Using semantic markup to mark emphasized or special text