Move and edit touch target sections in links and buttons

AccessibleForAll · Feb 3, 2024 · 94a8889 · 94a8889
1 parent ab8c914
commit 94a8889
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 19 deletions.
diff --git a/components/ContentTemplates/ButtonsTemplate.tsx b/components/ContentTemplates/ButtonsTemplate.tsx
@@ -386,6 +386,18 @@ export const ButtonsTemplate = () => {
 					should probably be a link.
 				</p>
 			</TemplateSection>
+			<TemplateSection
+				sectionName="touchTargetMinimum"
+				title="Touch Target Minimum">
+				<p>
+					When it comes to creating accessible buttons for your websites and
+					applications, it's important that they are easy to activate. To
+					achieve this goal, WCAG suggests that buttons have a minimum target
+					size of at least 24 by 24 CSS pixels. In doing so, users, especially
+					those who suffer from mobility impairments like hand tremors or are
+					amputees, have an easier time clicking on them.
+				</p>
+			</TemplateSection>
 			<TemplateSection sectionName="WCAGCriteria" title="WCAG Criteria">
 				<ul className="list">
 					<li>
@@ -453,9 +465,16 @@ export const ButtonsTemplate = () => {
 					</li>
 					<li>
 						<a
-							href="https://www.w3.org/TR/WCAG21/#target-size"
+							href="https://www.w3.org/TR/WCAG22/#target-size-enhanced"
+							className="blockLink">
+							2.5.5 Target Size (Enhanced)
+						</a>
+					</li>
+					<li>
+						<a
+							href="https://www.w3.org/TR/WCAG22/#target-size-minimum"
 							className="blockLink">
-							2.5.5 Target Size
+							2.5.8 Target Size (Minimum)
 						</a>
 					</li>
 					<li>
@@ -467,13 +486,7 @@ export const ButtonsTemplate = () => {
 					</li>
 				</ul>
 			</TemplateSection>
-			<TemplateSection sectionName="touchTargetMinimum" title="Touch Target Minimum">
-				<p>
-					When it comes to creating accessible buttons for your websites and applications, it's important that they
-					are easy to activate. To achieve this goal, WCAG suggests to avoid putting the buttons together. Consider make their size at least 24 by 24 CSS pixels. In doing so, users, especially those who suffer from mobility impairments like hand tremors or are amputees, have an easier time clicking on them.
-				</p>
 
-			</TemplateSection>
 			<TemplateSection sectionName="otherResources" title="Other Resources">
 				<ul className="list">
 					<li>

diff --git a/components/ContentTemplates/LinksTemplate.tsx b/components/ContentTemplates/LinksTemplate.tsx
@@ -199,6 +199,17 @@ other places on the web */`}
 					languageType={"html"}
 				/>
 			</TemplateSection>
+			<TemplateSection
+				sectionName="touchTargetMinimum"
+				title="Touch Target Minimum">
+				<p>
+					When it comes to creating accessible links, it's important that they
+					are easy to activate. To do this, WCAG recommends that links that are
+					not within text have a target size of at least 24 x 24 CSS pixels.
+					Doing this makes it easier for users who have motor dexterity issues
+					to click them.
+				</p>
+			</TemplateSection>
 			<TemplateSection sectionName="WCAGCriteria" title="WCAG Criteria">
 				<ul className="list">
 					<li>
@@ -340,15 +351,7 @@ other places on the web */`}
 					</li>
 				</ul>
 			</TemplateSection>
-			<TemplateSection
-					sectionName="touchTargetMinimum"
-					title="Touch Target Minimum">
-					<p>
-						When it comes to creating accessible links, it's important that they
-						are easy to activate. To do this, WCAG recommends spacing the link's text so that users can understand its context. Doing this would also make it
-							easier for users who have motor dexterity issues to read them.
-					</p>
-					</TemplateSection>
+
 			<PageUpdated date="5th January 2024" />
 		</>
 	)

diff --git a/data/pageNavigationLists.ts b/data/pageNavigationLists.ts
@@ -31,8 +31,8 @@ export const buttonPageNavigation: IPageNavigationItem[] = [
 	{ linkName: "Icon-only Buttons", href: "#iconOnlyButtons" },
 	{ linkName: "Button States", href: "#buttonStates" },
 	{ linkName: "Button or Link?", href: "#buttonOrLink" },
+	{ linkName: "Touch Target Minimum", href: "#touchTargetMinimum" },
 	{ linkName: "WCAG Criteria", href: "#WCAGCriteria" },
-	{ linkName: "Touch Target Minimum", href: "#touchTargetMinimum" },}
 	{ linkName: "Other Resources", href: "#otherResources" },
 ]
 
@@ -41,8 +41,8 @@ export const linkPageNavigation: IPageNavigationItem[] = [
 	{ linkName: "Accessible Link Names", href: "#accessibleLinkNames" },
 	{ linkName: "Link State and Style", href: "#linkStates" },
 	{ linkName: "Image and Icon Links", href: "#linkImage" },
-	{ linkName: "WCAG Criteria", href: "#WCAGCriteria" },
 	{ linkName: "Touch Target Minimum", href: "#touchTargetMinimum" },
+	{ linkName: "WCAG Criteria", href: "#WCAGCriteria" },
 	{ linkName: "Other Resources", href: "#otherResources" },
 ]