You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/en/fundamentals/accessibility/04-semantics-aria/semaria-two.md
+11-11Lines changed: 11 additions & 11 deletions
Original file line number
Diff line number
Diff line change
@@ -23,41 +23,41 @@ notes:
23
23
- "Catching, identifying, and removing potential accessibility roadblocks before they happen can improve your development process and reduce maintenance requirements."
24
24
---
25
25
26
-
As you saw with the checkbox example, ARIA can modify existing element semantics or add semantics to an element where no native semantics exist. It can also express semantic patterns that don't exist at all in HTML, like a menu or a tab panel. Often, ARIA lets us create widget-type elements that wouldn't be possible with plain HTML.
26
+
As you saw with the checkbox example, ARIA can modify existing element semantics or add semantics to elements where no native semantics exist. It can also express semantic patterns that don't exist at all in HTML, like a menu or a tab panel. Often, ARIA lets us create widget-type elements that wouldn't be possible with plain HTML.
27
27
28
28
- For example, ARIA can add extra label and description text that is only exposed to assistive technology APIs.
29
29
30
-
```html
30
+
{% highlight html %}
31
31
<buttonaria-label="screen reader only label"></button>
32
-
```
32
+
{% endhighlight %}
33
33
34
34
- ARIA can express semantic relationships between elements that extend the standard parent/child connection, such as a custom scrollbar that controls a specific region.
35
35
36
-
```html
36
+
{% highlight html %}
37
37
<divrole="scrollbar"aria-controls="main"></div>
38
38
<divid="main">
39
39
. . .
40
40
</div>
41
-
```
41
+
{% endhighlight %}
42
42
43
43
- And ARIA can make parts of the page "live", so they immediately inform assistive technology when they change.
44
44
45
-
```html
45
+
{% highlight html %}
46
46
<divaria-live="true">
47
47
<span>GOOG: $400</span>
48
48
</div>
49
-
```
49
+
{% endhighlight %}
50
50
51
51
Let's take a closer look at what ARIA roles and attributes are available and how to use them.
52
52
53
53
One of the core aspects of the ARIA system is its collection of *roles*. A role in accessibility terms amounts to a shorthand indicator for a particular UI pattern. ARIA provides a vocabulary of patterns we can use via the `role` attribute on any HTML element.
54
54
55
55
When we applied `role="checkbox"` in the previous example, we were telling assistive technology that the element should follow the "checkbox" pattern. That is, we're guaranteeing that it will have a checked state (either checked or not checked), and that the state may be toggled using the mouse or the spacebar, just like a standard HTML checkbox element.
56
56
57
-
In fact, because keyboard interactions feature so prominently in screen reader usage, it's very important to make sure that, when creating a custom widget, that the `role` attribute is always applied in the same place as the `tabindex` attribute; this ensures that keyboard events go to the right place and that when focus lands on an element its role is conveyed accurately.
57
+
In fact, because keyboard interactions feature so prominently in screen reader usage, it's very important to make sure that, when creating a custom widget, the `role` attribute is always applied in the same place as the `tabindex` attribute; this ensures that keyboard events go to the right place and that when focus lands on an element its role is conveyed accurately.
58
58
59
-
The [ARIA spec](https://www.w3.org/TR/wai-aria/) describes a taxonomy of possible values for the `role` attribute and associated ARIA attributes that may be used in conjunction with those roles. This is the best source of definitive information about how the ARIA roles and attributes work together and how they can be used in a way that is supported by browsers and assistive technologies.
59
+
The <ahref="https://www.w3.org/TR/wai-aria/"target="_blank">ARIA spec</a> describes a taxonomy of possible values for the `role` attribute and associated ARIA attributes that may be used in conjunction with those roles. This is the best source of definitive information about how the ARIA roles and attributes work together and how they can be used in a way that is supported by browsers and assistive technologies.
60
60
61
-
However, the spec is very dense; a more approachable place to start is the [ARIA practices document](http://rawgit.com/w3c/aria/master/practices/aria-practices.html), which explores best practices for using the available ARIA roles and properties.
61
+
However, the spec is very dense; a more approachable place to start is the <ahref="http://rawgit.com/w3c/aria/master/practices/aria-practices.html"target="_blank">ARIA practices document</a>, which explores best practices for using the available ARIA roles and properties.
62
62
63
-
ARIA also offers a set of landmark roles that extend the options available in HTML5. See the [Landmark Roles Design Patterns](http://rawgit.com/w3c/aria/master/practices/aria-practices.html#kbd_layout_landmark_XHTML) spec for more information.
63
+
ARIA also offers landmark roles that extend the options available in HTML5. See the <ahref="http://rawgit.com/w3c/aria/master/practices/aria-practices.html#kbd_layout_landmark_XHTML"target="_blank">Landmark Roles Design Patterns</a> spec for more information.
0 commit comments