Skip to content

Commit 64e0ff2

Browse files
author
dgash
authored
copy edit 2
1 parent 03a293f commit 64e0ff2

File tree

1 file changed

+11
-11
lines changed
  • src/content/en/fundamentals/accessibility/04-semantics-aria

1 file changed

+11
-11
lines changed

src/content/en/fundamentals/accessibility/04-semantics-aria/semaria-two.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -23,41 +23,41 @@ notes:
2323
- "Catching, identifying, and removing potential accessibility roadblocks before they happen can improve your development process and reduce maintenance requirements."
2424
---
2525

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.
2727

2828
- For example, ARIA can add extra label and description text that is only exposed to assistive technology APIs.
2929

30-
```html
30+
{% highlight html %}
3131
<button aria-label="screen reader only label"></button>
32-
```
32+
{% endhighlight %}
3333

3434
- ARIA can express semantic relationships between elements that extend the standard parent/child connection, such as a custom scrollbar that controls a specific region.
3535

36-
```html
36+
{% highlight html %}
3737
<div role="scrollbar" aria-controls="main"></div>
3838
<div id="main">
3939
. . .
4040
</div>
41-
```
41+
{% endhighlight %}
4242

4343
- And ARIA can make parts of the page "live", so they immediately inform assistive technology when they change.
4444

45-
```html
45+
{% highlight html %}
4646
<div aria-live="true">
4747
<span>GOOG: $400</span>
4848
</div>
49-
```
49+
{% endhighlight %}
5050

5151
Let's take a closer look at what ARIA roles and attributes are available and how to use them.
5252

5353
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.
5454

5555
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.
5656

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.
5858

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 <a href="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.
6060

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 <a href="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.
6262

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 <a href="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

Comments
 (0)