-
Notifications
You must be signed in to change notification settings - Fork 39
/
accessibility.Rmd
114 lines (82 loc) · 8.34 KB
/
accessibility.Rmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!-- TDOO: check https://w3c.github.io/using-aria/ for further details to include? -->
# Standards and Accessibility
### Semantic HTML {-}
A major step in making sure your web pages are accessible is to make sure that your use of HTML elements is _semantic_. HTML elements should be used to describe the meaning or form of their content, _not_ to give that content a visual appearance!
For example, an `<h1>` element is used to indicate a top-level heading, such as the title of the page. But by default, browsers will give `<h1>` elements a different visual appearance than unmarked content (usually by making it larger and bold). It is possible to achieve a similar visual effect just using CSS:
<div class="row">
<div class="column col2">
```html
<!-- html -->
<h1>This is a real heading!</h1>
<div class="fake-header">
This just LOOKS like a heading.
</div>
```
</div>
<div class="column col2">
```css
/* css */
.fake-header {
font-size: 2em;
font-weight: bold;
}
```
</div>
</div>
Your HTML should **always** be semantic! A screen reader will (mostly) ignore the CSS, so if something is supposed to be a top-level heading, you need to tag it as such for the screen reader to understand that. Similarly, you should **only** use elements when they are semantically appropriate—don't use an `<h3>` element just because you want text to look bigger if it isn't actually a third-level heading (use CSS to do the styling instead).
<p class="alert alert-warning">HTML is just for semantics. CSS is for appearance.</p>
This is the same reason that you should never use the `<i>` tag to make elements _italic_. The `<i>` tag has no valuable semantic meaning (it just means "italic", or "different"); instead you want to use a more meaningful semantic tag. Usually this means `<em>`, since italic text is usually being _emphasized_.
In fact, HTML 5 includes a large number of [semantic elements](https://www.w3schools.com/tags/ref_byfunc.asp) that can be used to indicate "formatted" text that has a particular meaning, including ones such as:
[`<abbr>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr),
[`<address>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address),
<!-- [`<code>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code), -->
[`<cite>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite),
[`<del>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del),
[`<dfn>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn),
[`<mark>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark),
and
[`<time>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time).
Be sure and check the documentation for each of these elements to determine when they are supposed to be used (as well as what additional attributes they may support).
<p class="alert alert-warning">Never use the [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) tag to structure documents and position content. The `<table>` tag should **only** be used for content that is semantically a table (e.g., a data table). If you want to lay out content in a grid, use a CSS system such as Flexbox (see [Chapter 7](#flexbox)).</p>
### ARIA {-}
### Page Structure (Navigable) {-}
Because screen readers cannot take in a web page's content "at a glance", accessible pages need to be explicitly structured so that their content can be easily navigated—e.g., so that the user can quickly "scroll" to a particular blog post.
The most important way to provide this structure is by the considered use of **heading** elements (`<h1>`, `<h2>`, etc). Screen readers automatically generate a "table of contents" based on these headings, allowing users to easily move through large amounts of content. In order to ensure that the headings are useful, they need to be **meaningful** (actually marking section headings) and **hierarchical** (they don't skip levels: every `<h3>` has an `<h2>` above it). The former is just good HTML usage that you will be doing anyway; the later may take some consideration.
The `<h#>` heading elements are part of the original HTML specification, and so will be supported by _all_ screen reader systems. However, HTML 5 introduced additional elements that can be used to help organize web page content in order to make its structure more explicit. These are often referred to as [semantic elements](https://www.w3schools.com/html/html5_semantic_elements.asp) or "sectioning elements". These are all **block-level** elements that produce no visual effects on their own, but provide semantic structuring to web content. You can think of them as specialized `<div>` elements.
<p class="alert alert-info">One metaphor is that nesting HTML elements into a `<div>` is like putting that content into a envelope to "group" it together (e.g., for styling purposes). In that case, a semantic element such as `<header>` is just an envelope with a unique color that makes it easier to find in the filing cabinet.</p>
- [`<header>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header) represents the "header" or introduction part of the page, such as the title or banner image. It may also include common page elements such as navigation or search bars. This corresponds to the `role="banner"` landmark role; you do not need to include that role if you use this element.
Note that a `<header>` is different from a head**ing** (`<h1>`) which is different from the `<head>`! A _head**ing**_ is element (e.g., `<h1>`) that includes a title or subtitle. A _<code><head**er**></code>_ is a "grouping" element that can contain multiple elements, and usually has banner/logo information. The `<head>` is an element that is NOT part of the `<body>` (so is not shown in the web page), and contains _metadata_ about that page.
- [`<nav>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav) contains navigation links, usually for navigating around the site (think like a navigation bar). Not all links need to be in a `<nav>`; this is for "sections" of the webpage that are purely navigational. This element corresponds to the `role="navigation"` landmark role.
- [`<main>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav) represents the "main" content of the document. This usually comes _after_ the `<header>` (but not inside—in fact, `<main>` _cannot_ be a descendant of `<header>`). Note that a web page can only have a single `<main>` element. This element corresponds to the `role="main"` landmark role.
- [`<footer>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer) represents the "footer" of the page, usually containing information about the page. This element corresponds to the `role="contentinfo"` landmark role.
- [`<section>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) represents a standalone section of content (e.g., that might have a subheading such as `<h3>`). A `<section>` can also contain its own `<header>`, `<footer>`, and `<nav>` elements relevant to that section.
Similarly, an [`<article>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) element also represents standalone content, but content that might be published independently (such as a news article or a blog post). Note that a `<section>` may group together multiple `<article>` elements (such as a blog roll), and an `<article>` might potentially contain more than one `<section>`. Think about how a newspaper is structured (with a "Sports Section" that contains articles, which may themselves have different sections).
A typical web page body may thus have a structure similar to:
```html
<!-- Starting from the body tag -->
<body>
<!-- Page header -->
<header>
<nav>
navigation links in here
</nav>
</header>
<!-- Main page content -->
<main>
<section>
content...
</section>
<section>
content...
</section>
</main>
<!-- Page footer -->
<footer>
copyright information here
</footer>
</body>
```
Overall, utilizing these semantic sectioning elements will help organize your content for screen readers (so visually impaired users can easily navigate the page), as well as making your content more clearly structured.
<!-- info on tabIndex and skiplinks here?? -->
### Visual Information (Perceivable) {-}