diff --git a/components/ContentTemplates/ButtonsTemplate.tsx b/components/ContentTemplates/ButtonsTemplate.tsx index e95bcb0..19831b5 100644 --- a/components/ContentTemplates/ButtonsTemplate.tsx +++ b/components/ContentTemplates/ButtonsTemplate.tsx @@ -175,23 +175,23 @@ export const ButtonsTemplate = () => { - - Text + + Text `} languageType={"html"} /> - - Text + + Text `} languageType={"html"} />

- An empty alt attribute has the most wide-spread support so that should - be your go to choice when using icons. However, some icon libraries - don't allow an alt attribute to be passed and that's where aria-hidden - can be useful. + An empty alt attribute has the most wide-spread support, so that + should be your go to choice when using icons. However, some icon + libraries don't allow an alt attribute to be passed and that's where + aria-hidden can be useful.

diff --git a/components/ContentTemplates/LinksTemplate.module.css b/components/ContentTemplates/LinksTemplate.module.css new file mode 100644 index 0000000..c4a7f0c --- /dev/null +++ b/components/ContentTemplates/LinksTemplate.module.css @@ -0,0 +1,10 @@ +.srOnly{ + border: 0; + clip: rect(0,0,0,0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} \ No newline at end of file diff --git a/components/ContentTemplates/LinksTemplate.tsx b/components/ContentTemplates/LinksTemplate.tsx index 98c0b0e..cab5df1 100644 --- a/components/ContentTemplates/LinksTemplate.tsx +++ b/components/ContentTemplates/LinksTemplate.tsx @@ -1,5 +1,346 @@ -import { WorkInProgress } from "../WorkInProgress/WorkInProgress" +import { TemplateSection } from "../TemplateSection/TemplateSection" +import { CodeBlock } from "../CodeBlock/CodeBlock" +import { NavPage } from "../NavPage/NavPage" +import { linkPageNavigation } from "../../data/pageNavigationLists" +import { PageUpdated } from "../PageUpdated/PageUpdated" export const LinksTemplate = () => { - return + return ( + <> + + +

+ Links, also known as hyperlinks, are a fundamental element in HTML. + They connect different pages, or parts of pages, to one another. +

+ +

+ In HTML, links are created using the anchor element + {`${" "}`}. This element allows you to make text + or images clickable, and has inbuilt interactivity allowing users to + activate the link with a mouse click, a touch device or by pressing + Enter on a keyboard. It is also automatically reachable with the tab + key. +

+

+ The accessible name for links created using the anchor element comes + from the content between the opening and closing tag. If the content + between the opening and closing tags is not text, or the text is very + generic the accessible name should be added in another way, for + example with ARIA. +

+

+ An important attribute for accessibility is the href attribute. This + specifies the destination of the link. If the href is not present then + the link is not accessible. +

+ + + + +
+

Non-descriptive Link Text

+

+ If possible, avoid using vague, non-descriptive phrases as link text + such as "Click Here" or "Read More". These phrases are difficult to + understand without surrounding context and can pose problems for + screen reader users and voice input users. It is also common to see + these phrases repeated multiple times on a page, for example on an + e-commerce site listing several product cards, making it more + difficult to differentiate between the different link destinations. +

+

+ If you must use non-descriptive text, you can make it more + accessible by using methods to overwrite the visible text. Two such + methods are using aria-label or hiding additional text with CSS. +

+

Aria-label

+

+ The first method is to use an aria-label. This will overwrite the + visible text and be read out to screen reader users instead. It's + important to keep in mind that the aria-label should start with the + same text as shown in the visible text so that the link still works + for voice input users. If the visible link says "Read more" the + aria-label might be "Read more about accessible buttons" +

+

+ An aria-label can also be used to give an image or icon link an + accessible name when there is no visible link text. +

+ Read more`} + languageType={"html"} + /> +

+ Some downsides to aria-label are that it doesn't always get + translated by in-browser translation tools. It also completely + overwrites the visible text which can be problematic if the two do + not match. +

+

Hiding elements with CSS

+

+ Another solution is to use CSS to hide some extra text. This can be + done by adding a visibly hidden {`${""}`}{" "} + element within the {`${""}`} element to provide + descriptive text that gets read out to screen readers but is not + visible to sighted users. +

+ + Read more + about accessible buttons +`} + languageType={"html"} + /> + + +
+ + + +

+ To improve the accessibility of your website, it's crucial to make + links easy to distinguish from non-interactive elements on a page. +

+ +

Here's how to achieve this:

+ +
    +
  • + Underline links by default: + Links should be underlined by default. This provides a clear visual + indicator that a piece of text or an element is clickable. It's a + universal convention that helps all users understand what's + clickable. +
    • +
  • + Focus state: A focused link should have a focus + indicator which makes it easy to see where focus is on the screen. + This is often a thicker border or outline around the link and should + have a contrast ratio of at least 3:1 with the background. +
    • +
  • + Ensure sufficient color contrast: + Make sure the color of your links contrasts well with the background + color or surrounding text color. This ensures that people with + visual impairments or color vision deficiencies can easily + distinguish the links from the surrounding text. The contrast ratio + should be at least 4.5:1 for WCAG level AA compliance. Color should + not be the only way to distinguish links from surrounding text. +
    • +
  • + Don't rely on hover state to convey links: + Hover is not available on touch devices or for people navigating the + web with keyboard, screen readers or other input devices. Therefore + hover states only, such as underline or color change on hover, + should not be relied upon to convey that something is a link. +
    • +
+ + +

+ You can turn an image or icon into a clickable link that takes you to + another webpage. Since image and icon links don't have a visible link + text, you need to use a different method to give the link an + accessible name. These methods can include adding an aria-label, using + a visibly-hidden class or adding an alt attribute to the image text + wrapped inside the link. +

+

+ The important thing to remember when using images and icons as links + is to describe the link destination rather than the content of the + image. +

+ + + + + + + Google + + + + Google +`} + languageType={"html"} + /> + + + + + + + + + + ) } diff --git a/data/pageNavigationLists.ts b/data/pageNavigationLists.ts index 69a22a5..720005c 100644 --- a/data/pageNavigationLists.ts +++ b/data/pageNavigationLists.ts @@ -35,6 +35,15 @@ export const buttonPageNavigation: IPageNavigationItem[] = [ { linkName: "Other Resources", href: "#otherResources" }, ] +export const linkPageNavigation: IPageNavigationItem[] = [ + { linkName: "Introduction", href: "#introduction" }, + { 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: "Other Resources", href: "#otherResources" }, +] + export const imagePageNavigation: IPageNavigationItem[] = [ { linkName: "Introduction", href: "#introduction" }, { linkName: "Text Alternatives", href: "#textAlternatives" },