Learn. Show. Repeat.

Tag: Digital

  • ‘Click here’ is not enough

    Within digital content, hyperlinks (links) are often used to guide users to additional information or resources. Links have two parts:

    • the text used for the link, and
    • the webpage or resource it leads to.

    The way the link text is written and displayed can cause barriers for some people. Examples such as ‘Click here’ or ‘Read more’ are not helpful especially when there are a lot of them on a page. To improve accessibility, it is important that link text is descriptive. Accessible link text benefits all users when well they are clear and well-written.

    Descriptive link text for accessibility

    Using descriptive hyperlink text is essential for making your content accessible, user-friendly, and inclusive. Here’s why:

    • Improves the experience for screen reader users: Screen readers often allow users to scan a list of links on a page. If links are labelled as ‘click here’ or ‘read more, they provide no context about their destination.
    • Enhances the usability for everyone: They save time by allowing users to quickly recognise where a link will take them without guessing or opening unnecessarily.
    • Aligns with accessibility guidelines: there several Web Content Accessibility Guidelines (WCAG) that apply to links. These have been added in the next section about tips.

    Tips for writing descriptive link text

    Here are some tips for writing link text with related guidelines:

    • Be specific: Clearly describe the content or purpose of the link. For example, instead of “Click here,” use “Download the 2025 Accessibility Report.”
    • Related guideline: The purpose of each link should be clear from the link text alone.

    • Make links stand out visually: Use a distinct color and underline to differentiate links from regular text. This helps users with visual impairments or color blindness identify links more easily. I like to bold the link text.
    • Related guidelines: Text (including link text) must have a sufficient contrast ratio against its background; Color should not be the sole means of conveying information; and Components with the same functionality should be identified consistently.

    • Ensure keyboard accessibility: Make sure that links can be navigated and activated using only a keyboard. Test your site to confirm that users can tab through links in a logical order. The enter key should open the link.
    • Related guidelines: All functionality must be operable via a keyboard; and Any interactive component, including links, must have a visible focus indicator when navigated to via keyboard.

    • Use proper HTML markup: Ensure that links are coded properly so assistive technologies (like screen readers) can recognise them as links and convey their purpose to users.
    • Related guideline: All user interface components, including links, have programmatically determinable names, roles, and states.

    • Integrate links naturally: Embed links within the flow of your sentence, so they feel natural and intuitive. For instance, This Links and Hypertext article from WebAIM provides more information.
    • Avoid using URLs as link text: Instead of displaying a raw URL (for example, https://webaim.org/techniques/hypertext/link_text. Raw URLs can be cumbersome for screen readers to interpret as each character is read out.
    • Keep it concise: While being descriptive, avoid overly long link text. Aim for a balance between clarity and brevity.

    Descriptive hyperlink text is a small but powerful way to make your website or content more inclusive. By taking a thoughtful approach to how you create links, you are creating a better, more intuitive experience for everyone.

  • Colour contrast matters

    Contrast is the difference in the perceived brightness between two colours. In the context of digital content, this is the difference between the text colour (also the colour of buttons, links, form fields) and the background colour.

    A contrast ratio is how the difference in brightness is measured. The ratios range from 1:1 (both colours are the same) to 21:1 (black text on a white background or vice versa). A higher ratio means there is more difference between the colours. If the ratio is too low, the colours are too similar and may blend together for some people.

    Here are some examples:

    Examples of different colour contrast ratios - yellow on white is 1.64 to 1, red on white is 3.99 to 1, light blue on white is 4.65 to 1, purple on white is 8.03 to 1 and dark blue on white is 15.26 to 1.

    People who benefit from higher contrast include:

    • those with low vision, colour blindness, or age-related vision decline
    • those in bright sunlight, low-light conditions, or using lower-quality screens

    Guidelines for contrast

    The Web Content Accessibility Guidelines (WCAG) specify the following when it comes to contrast:

    • Normal text (smaller than 18pt regular or 14pt bold) must have a contrast ratio of at least 4.5:1 against its background.
    • Large Text (18pt regular or 14pt bold or larger) must have a contrast ratio of at least 3:1.
    • Non-text elements (buttons, input fields) must have a contrast ratio of 3:1 against adjacent colours.
    • Logos or brand-name text has no contrast requirement.

    I may be oversimplifying it, but if the contrast ratios were on a spectrum, the above guidelines are on the low end:

    Contrast scale showing the lowest contrast 1 to 1 up to 21 to 1. The WCAG requirement of 4.5 to 1 is down the lower end.

    Surely then, at least meeting the above requirements should be easy as it is down the low end of the scale. However, since 2019, the number 1 issue on websites in the WebAIM million has been low contrast text.

    How to check contrast

    There are several tools for checking contrast:

    • I use the WebAIM Contrast Checker.
    • If you are using Microsoft products, contrast issues can be picked up by the built-in Accessibility checker in Outlook, PowerPoint, Word, and Excel.
    • Figma, Adobe XD, and Sketch have built-in or plugin-based contrast checkers.
    • Browser Extensions – WAVE (Web Accessibility Evaluation Tool), axe DevTools – A Chrome/Firefox extension that audits accessibility, including contrast.

    You can also try the built-in “Emulate vision deficiencies” feature within Chrome DevTools:

    1. Right-click on any webpage and select “Inspect”.
    2. Select the three-dot menu (More tools) and then select “Rendering”.
    3. Locate the “Emulate vision deficiencies” option and use the dropdown menu to select the desired colour vision deficiency.
    4. The webpage will now be displayed as it would appear to someone with the selected colour vision deficiency.

  • The Essential Role of Alternative Text

    Alternative (alt) text provides a textual alternative to non-text content, such as photographs, logos and other images. Missing alt text on webpages was the second biggest WCAG failure from the WebAIM Million.

    Alt text serves several functions:

    • People who use a screen reader will hear the alt text in place of the image.
    • If an image fails to load or the user has blocked images, the browser will present the alternative text visually in place of the image.
    • Alt text helps search engines understand the content of images, contributing to better indexing and potentially improving search rankings.

    Alt text tips

    • Be descriptive and concise: Clearly describe the content and function of the image in a concise manner (2 or 3 sentences). Aim for a balance between being descriptive enough to convey the image’s purpose and concise enough to avoid unnecessary detail.
    • Context matters: The alt text should reflect the image’s role in the content. For example, if an image is used to complement a piece of text, the alt text should enhance the understanding of that text.
    • Avoid redundancies: Do not start alt text with phrases like “image of” or “picture of” since screen readers already announce it as an image. Jump straight into the description.
    • Include relevant information: Focus on the important aspects of the image. If the image contains text, include that text in the alt description if it’s essential for understanding.
    • Be mindful of function: If the image is a link, button, or serves a specific function, ensure the alt text describes the function rather than just the visual appearance. For example, “Search button” is more useful than “magnifying glass icon.”
    • Decorative images: For purely decorative images that do not add meaningful content, use an empty alt attribute (alt=””). This allows screen readers to skip over these images.
    • Avoid overloading with keywords: While it might be tempting to stuff alt text with keywords for SEO purposes, this can make the text less useful for users.
    • Test with screen readers: Whenever possible, test your alt text with screen readers to ensure it provides the intended information and enhances the user experience.

    This Alternative Text article from WebAIM, gives a good overview of alt text along with several best practice examples.

    Also, the Accessibility Checker Rules in Microsoft products (Word, Excel, Outlook, OneNote, and PowerPoint) identifies missing alt text as an ‘Error” meaning that it makes the document difficult or impossible to read and understand for people with disabilities.

    Data visualisations

    What about charts?

    When writing alt text for charts, it’s important to convey the key information and insights that the chart is meant to communicate.

    In this article, Writing Alt Text for Data Visualizations, Amy Cesal shares a simple formula (and examples) for writing alt text for data visualisations:

    Alt text = chart type of type of data where reason for including the chart.

    Adding alternative text to images helps to make digital content more inclusive. By thoughtfully crafting descriptions, we ensure that everyone can access and understand visual elements.

  • Keyboard accessibility

    Keyboard accessibility is crucial in ensuring that digital content and interfaces are usable by everyone, including individuals with disabilities. We must ensure that all content can be accessed with the keyboard alone.

    People who benefit from keyboard accessibility include:

    • those who use a screen reader
    • those with limited hand dexterity or strength
    • those with a hand or arm injury

    Additionally, keyboard accessibility can benefit users without disabilities who prefer using the keyboard for faster navigation or those who need to operate devices in environments where using a mouse is impractical.

    General navigation using the keyboard

    Tab to move to the next link, form element or button.
    Shift +Tab to move to the previous link, form element, or button.
    Enter or Space bar to activate the current link or button.
    Arrow keys to navigate within components like dropdown menus or tab lists.

    Visible focus indicator

    A focus indicator is a visual cue that helps users understand which element on a webpage or application is currently selected or “in focus.” When using the keyboard, the focus indicator should clearly highlight the active element (button, link, form field).

    Potential problems

    There are many ways that a webpage can introduce difficulties for users who rely on a keyboard for navigation. This Keyboard Accessibility article from WebAIM, outlines a few of the most common issues and how to test using the keyboard.