MDL-72674 componentlibrary: Remove whitespaces
[moodle.git] / admin / tool / componentlibrary / content / moodle / accessibility / links.md
CommitLineData
f0b22d17
JP
1---
2layout: docs
3title: "Links"
4description: "Designing links that lead to a change in context"
5date: 2021-10-03T20:00:00+08:00
6draft: false
7---
8## Links that open in a new window
9
3369faa6 10Links that open in a new window or tab should indicate that they open in a new window or tab. This is especially helpful for screen reader users to let them know that clicking on the link will open a new window or tab. This helps eliminate confusion caused by changes in context such as opening a web page in a new window or tab.
f0b22d17
JP
11
12There are several techniques that we can use when creating links that open in a new window.
13
3369faa6 14### Using an image icon with alt text to indicate that the link opens in a new window
f0b22d17
JP
15
16{{< example >}}
17<a href="https://moodle.org" target="_blank">
18 Moodle.org <i class="fa fa-external-link" aria-label="Opens in new window" title="Opens in new window"></i>
19</a>
20{{< /example >}}
21
22The core/userfeedback_footer_link is also good example for this one.
23
24{{< mustache template="core/userfeedback_footer_link" >}}
25{{< /mustache >}}
26
3369faa6 27### Text that indicates that the link opens in a new window
f0b22d17 28
3369faa6 29This may be the most straightforward way of indicating that links open in a new window. The potential downside of this approach is that it can be quite distracting, especially when the page has a lot of links that open in a new window.
f0b22d17
JP
30
31{{< example >}}
32<a href="https://moodle.org" target="_blank">
33 Moodle.org (Opens in new window)
34</a>
35{{< /example >}}
36
37## Links to a file
38
3369faa6 39A link to a file such as a PDF file or Word document will usually open the relevant application associated to the file type and will cause a change in context. It would be helpful to let users know when a link will open a file.
f0b22d17
JP
40
41### File type indicated in the link text
42{{< example >}}
43<a href="https://www.w3.org/WAI/WCAG20/versions/guidelines/wcag20-guidelines-20081211-a4.pdf">
44 PDF version of the Web Content Accessibility Guidelines (WCAG) 2.0
45</a>
46{{< /example >}}
47
48### File type indicated via an icon/image's alt text
49{{< example >}}
50<a href="https://www.w3.org/WAI/WCAG20/versions/guidelines/wcag20-guidelines-20081211-a4.pdf">
51 Web Content Accessibility Guidelines (WCAG) 2.0 <i class="fa fa-file-pdf-o" aria-label="PDF document" title="PDF document"></i>
52</a>
53{{< /example >}}
54
55## Links that lead to an external site
56
57Similar to links that open in a new window, links that redirect to an external site may also have an indication that they lead to an external site to let users know that clicking on the link will take them away from Moodle.
58
3369faa6 59The example link below opens in the same browser window and lets the user know that they will be redirected to Moodle.org, which is an external site.
f0b22d17
JP
60
61{{< example >}}
62<a href="https://moodle.org">
63 Moodle.org <i class="fa fa-external-link" aria-label="Link leads to external site" title="Link leads to external site"></i>
64</a>
65{{< /example >}}
66
67## More information
68
69* [Understanding Success Criterion 3.2.5](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/consistent-behavior-no-extreme-changes-context.html)
70* [Opening new windows and tabs from a link only when necessary](https://www.w3.org/TR/WCAG20-TECHS/G200.html)