Skip to content

Commit 2c645e2

Browse files
EmmaDawsonDevEmmaDawsonDev
authored
Merge pull request #401 from AccessibleForAll/feat/icons_page
Feat/icons page
2 parents 6eb2cb9 + 292adef commit 2c645e2

File tree

3 files changed

+283
-13
lines changed

3 files changed

+283
-13
lines changed

‎components/ContentTemplates/IconsTemplate.tsx

Lines changed: 272 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,275 @@
1-
import { WorkInProgress } from "../WorkInProgress/WorkInProgress"
1+
import Link from "next/link"
2+
3+
import { CodeBlock } from "../CodeBlock/CodeBlock"
4+
import { NavPage } from "../NavPage/NavPage"
5+
import { PageUpdated } from "../PageUpdated/PageUpdated"
6+
import { TemplateSection } from "../TemplateSection/TemplateSection"
7+
import { IPageNavigationItem } from "../../data/pageNavigationLists"
8+
9+
export const iconsPageNavigation: IPageNavigationItem[] = [
10+
{ linkName: "Introduction", href: "#introduction" },
11+
{ linkName: "Decorative Icons", href: "#decorativeIcons" },
12+
{ linkName: "Informative Icons", href: "#informativeIcons" },
13+
{ linkName: "Text Alternatives", href: "#textAlternatives" },
14+
{ linkName: "Icon Links", href: "#iconLinks" },
15+
{ linkName: "Icon Buttons", href: "#iconButtons" },
16+
{ linkName: "Use of Colour", href: "#useOfColour" },
17+
{ linkName: "Target Size", href: "#targetSize" },
18+
{ linkName: "WCAG Criteria", href: "#WCAGCriteria" },
19+
// { linkName: "Other Resources", href: "#otherResources" },
20+
]
221

322
export const IconsTemplate = () => {
4-
return <WorkInProgress />
23+
return (
24+
<>
25+
<NavPage pageNavigation={iconsPageNavigation} />
26+
<article>
27+
<TemplateSection sectionName="introduction" title="Introduction">
28+
<p>
29+
Icons are small stylized graphical images that are often used on
30+
webpages to complement text. They are also often used alone instead
31+
of text in order to save space. They are commonly included in
32+
buttons and links.
33+
</p>
34+
<p>
35+
Icons should be added to a page using the inbuilt HTML img element
36+
or as an svg. This way, alternative text can be added to the icon if
37+
needed.
38+
</p>
39+
</TemplateSection>
40+
<TemplateSection sectionName="decorativeIcons" title="Decorative Icons">
41+
<p>
42+
An icon is decorative if it doesn't add any information to a page.
43+
This is often the case when icons are used to complement text,
44+
especially as part of links and buttons. If a SAVE button included
45+
both the text "Save" and an icon of a floppy disk the icon is
46+
decorative. It should have an empty alternative text to avoid the
47+
word "Save" being announced twice by screen readers.
48+
</p>
49+
</TemplateSection>
50+
<TemplateSection
51+
sectionName="informativeIcons"
52+
title="Informative and Functional Icons">
53+
<p>
54+
If an icon is informative or functional it needs to have alternative
55+
text. Examples could include an envelope icon next to an email
56+
address, a magnifying glass used as a search button or a cog to
57+
stand for settings. In each case, the alternative text should
58+
describe the function, for example "search" rather than "magnifying
59+
glass".
60+
</p>
61+
</TemplateSection>
62+
<TemplateSection
63+
sectionName="textAlternatives"
64+
title="Text Alternatives">
65+
<p>
66+
The text alternative for an icon depends upon its purpose. Is the
67+
icon purely decorative? Or does it serve a functional role like an
68+
icon pointing to the homepage?
69+
</p>
70+
<p>
71+
In HTML the text alternative is added to the img element which takes
72+
an alt attribute. The alt attribute should be present on every img
73+
element even if the icon is decorative. If the icon is an svg it
74+
must be given the role of img and a title to make it accessible.
75+
</p>
76+
<p>
77+
The alternative text can be read out by screen readers or converted
78+
into braille for refreshable braille displays. Without it, screen
79+
reader users may hear the whole image url instead, which can often
80+
be a string of incomprehensible letters and numbers.
81+
</p>
82+
<p>
83+
An icon may need different alternative text depending on where it is
84+
placed on a webpage. For example, an icon button of a magnifying
85+
glass may serve as a search button in one place and as a zoom button
86+
in another.
87+
</p>
88+
<CodeBlock
89+
codeSnippet={`<img src="url" alt="The text alternative goes here" />`}
90+
languageType="html"
91+
/>
92+
93+
<CodeBlock
94+
codeSnippet={`<svg role="img" height="210" width="400">
95+
<title>The text alternative goes here</title>
96+
<path d="M120 10 L55 200 L265 180 Z" />
97+
</svg>`}
98+
languageType="html"
99+
/>
100+
</TemplateSection>
101+
<TemplateSection sectionName="iconLinks" title="Icon Links">
102+
<p>
103+
You can turn an icon into a clickable link that takes you to another
104+
webpage. Since icon links don't have a visible link text, you need
105+
to use a different method to give the link an accessible name. These
106+
methods can include adding an aria-label, using a visibly-hidden
107+
class or adding an alt attribute to the image wrapped inside the
108+
link. See the <Link href={"/links"}>Links Page</Link> for detail of
109+
how to use these techniques.
110+
</p>
111+
<p>
112+
The important thing to remember when using icons as links is to
113+
describe the link destination rather than the content of the image.
114+
</p>
115+
<CodeBlock
116+
codeSnippet={`<a href="https://google.com" aria-label="Google">
117+
<FaGoogle />
118+
</a>
119+
120+
<a href="https://google.com">
121+
<FaGoogle />
122+
<span class="visibly-hidden">Google</span>
123+
</a>
124+
125+
<a href="https://google.com">
126+
<img src="url" alt="Google" />
127+
</a>`}
128+
languageType={"html"}
129+
/>
130+
</TemplateSection>
131+
<TemplateSection sectionName="iconButtons" title="Icon Buttons">
132+
<p>
133+
Some buttons use only an icon to convey their function. In this case
134+
it's important to choose icons that are widely recognised and
135+
understood, otherwise it can be difficult to know their function.
136+
The icons should also have a suitable label. This can be done with
137+
the alt attribute or the aria-label attribute on the button.
138+
</p>
139+
140+
<CodeBlock
141+
codeSnippet={`<button type="button" onclick="handleClick()">
142+
<img src="icon-url.png" alt="Save" />
143+
</button>`}
144+
languageType={"html"}
145+
/>
146+
<CodeBlock
147+
codeSnippet={`<button type="button" onclick="handleClick()">
148+
<i class="fa-solid fa-floppy-disk" aria-label="Save"></i>
149+
</button>`}
150+
languageType={"html"}
151+
/>
152+
</TemplateSection>
153+
<TemplateSection sectionName={"useOfColour"} title={"Use of Colour"}>
154+
<p>
155+
Icons are often used to communicate status. The colour of the icon
156+
should not be the only way to do this. Instead, use different icons
157+
or complement the icon with text. For example, if you have an icon
158+
to indicate online status, avoid green for online and red for
159+
offline as people with red-green colour vision deficiencies will
160+
have difficulty telling the two colours apart.
161+
</p>
162+
</TemplateSection>
163+
<TemplateSection sectionName={"targetSize"} title={"Target Size"}>
164+
<p>
165+
Icons are often quite small and if used as icon buttons they can be
166+
difficult to press. Therefore, they should have a minimum target
167+
size to make sure they can be activated even for users with
168+
dexterity limitations.
169+
</p>
170+
<p>
171+
The minimum target size should be at least 24 x 24 CSS pixels unless
172+
the interactive element has enough space so that it does not
173+
intersect another element, it has an equivalent larger control
174+
elsewhere on the same page, it is inline, or the presentation is
175+
considered essential.
176+
</p>
177+
<p>
178+
Ideally, the target size is even larger than 24 CSS pixels, making
179+
it easier to press. On mobile devices, 44 x 44 CSS pixels is the
180+
recommended size. This allows for the reduced accuracy of touch.
181+
</p>
182+
</TemplateSection>
183+
<TemplateSection sectionName="WCAGCriteria" title="WCAG Criteria">
184+
<ul className="list">
185+
<li>
186+
<a
187+
href="https://www.w3.org/TR/WCAG21/#non-text-content"
188+
className="blockLink">
189+
1.1.1 Non-text content
190+
</a>
191+
</li>
192+
<li>
193+
<a
194+
href="https://www.w3.org/TR/WCAG21/#info-and-relationships"
195+
className="blockLink">
196+
1.3.1 Info and Relationships
197+
</a>
198+
</li>
199+
<li>
200+
<a
201+
href="https://www.w3.org/TR/WCAG21/#identify-purpose"
202+
className="blockLink">
203+
1.3.6 Identify Purpose
204+
</a>
205+
</li>
206+
<li>
207+
<a
208+
href="https://www.w3.org/TR/WCAG21/#use-of-color"
209+
className="blockLink">
210+
1.4.1 Use of Color
211+
</a>
212+
</li>
213+
<li>
214+
<a
215+
href="https://www.w3.org/TR/WCAG21/#non-text-contrast"
216+
className="blockLink">
217+
1.4.11 Non-text Contrast
218+
</a>
219+
</li>
220+
221+
<li>
222+
<a
223+
href="https://www.w3.org/TR/WCAG22/#link-purpose-in-context"
224+
className="blockLink">
225+
2.4.4 Link Purpose (in Context)
226+
</a>
227+
</li>
228+
229+
<li>
230+
<a
231+
href="https://www.w3.org/TR/WCAG22/#link-purpose-link-only"
232+
className="blockLink">
233+
2.4.9 Link Purpose (Link Only)
234+
</a>
235+
</li>
236+
237+
<li>
238+
<a
239+
href="https://www.w3.org/TR/WCAG21/#label-in-name"
240+
className="blockLink">
241+
2.5.3 Label in Name
242+
</a>
243+
</li>
244+
<li>
245+
<a
246+
href="https://www.w3.org/TR/WCAG22/#target-size-enhanced"
247+
className="blockLink">
248+
2.5.5 Target Size (Enhanced)
249+
</a>
250+
</li>
251+
<li>
252+
<a
253+
href="https://www.w3.org/TR/WCAG22/#target-size-minimum"
254+
className="blockLink">
255+
2.5.8 Target Size (Minimum)
256+
</a>
257+
</li>
258+
</ul>
259+
</TemplateSection>
260+
{/* <TemplateSection sectionName="otherResources" title="Other Resources">
261+
<ul className="list">
262+
<li>
263+
<a
264+
href="https://www.w3.org/WAI/tutorials/images/"
265+
className="blockLink">
266+
W3C Images Tutorial
267+
</a>
268+
</li>
269+
</ul>
270+
</TemplateSection> */}
271+
</article>
272+
<PageUpdated date="8th July 2024" />
273+
</>
274+
)
5275
}

‎data/pageNavigationLists.ts

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -36,16 +36,6 @@ export const buttonPageNavigation: IPageNavigationItem[] = [
3636
{ linkName: "Other Resources", href: "#otherResources" },
3737
]
3838

39-
export const linkPageNavigation: IPageNavigationItem[] = [
40-
{ linkName: "Introduction", href: "#introduction" },
41-
{ linkName: "Accessible Link Names", href: "#accessibleLinkNames" },
42-
{ linkName: "Link State and Style", href: "#linkStates" },
43-
{ linkName: "Image and Icon Links", href: "#linkImage" },
44-
{ linkName: "Touch Target Minimum", href: "#touchTargetMinimum" },
45-
{ linkName: "WCAG Criteria", href: "#WCAGCriteria" },
46-
{ linkName: "Other Resources", href: "#otherResources" },
47-
]
48-
4939
export const captchasPageNavigation: IPageNavigationItem[] = [
5040
{
5141
linkName: "Introduction",
@@ -106,6 +96,16 @@ export const formsPageNavigation: IPageNavigationItem[] = [
10696
{ linkName: "WCAG Criteria", href: "#WCAGCriteria" },
10797
]
10898

99+
export const linkPageNavigation: IPageNavigationItem[] = [
100+
{ linkName: "Introduction", href: "#introduction" },
101+
{ linkName: "Accessible Link Names", href: "#accessibleLinkNames" },
102+
{ linkName: "Link State and Style", href: "#linkStates" },
103+
{ linkName: "Image and Icon Links", href: "#linkImage" },
104+
{ linkName: "Touch Target Minimum", href: "#touchTargetMinimum" },
105+
{ linkName: "WCAG Criteria", href: "#WCAGCriteria" },
106+
{ linkName: "Other Resources", href: "#otherResources" },
107+
]
108+
109109
export const modalPageNavigation: IPageNavigationItem[] = [
110110
{ linkName: "Introduction", href: "#introduction" },
111111
{ linkName: "How a modal should work", href: "#howAModalShouldWork" },

‎data/pages.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const pages: IPage[] = [
2727
// },
2828
{ name: "Forms", href: "/forms", content: "forms" },
2929
{ name: "Headings", href: "/headings", content: "headings" },
30-
// { name: "Icons", href: "/icons", content: "icons" },
30+
{ name: "Icons", href: "/icons", content: "icons" },
3131
{ name: "Images", href: "/images", content: "images" },
3232
{ name: "Links", href: "/links", content: "links" },
3333
// { name: "Lists", href: "/lists", content: "lists" },

0 commit comments

Comments
 (0)