Examples of Digital Accessibility

Some basic elements that accessible digital content should include, in accordance with WCAG 2.1 and 2.2 Guidelines, adapted from Webaim:

Alternative Text 🖼️

• Every non-text element requires a text equivalent, often provided in the alt attribute, to offer an alternative to the image content.
• The alt attribute should convey the content and function of the image, but does not need to provide a detailed description.
• If the image is decorative or redundant to nearby text, it should have empty alternative text (alt="").
• If the image is a link or an interactive area (hotspot), the alt text must describe the function of the link.
• Phrases such as "image of", "photo of", or "link to" are redundant, as screen readers already identify images and links by default.
• Alternative text should be as concise as possible.

Readability 📖

• Using the simplest language appropriate for the content and users.
• Using white space, such as shorter line lengths and increased text spacing, to improve readability.
• Supplementing text with images and icons.
• Checking spelling, grammar, and reading level.

Content Navigation 🧭

• Creating a semantic structure using regions, headings, and lists.
• Ensuring a skip link so that users can go directly to the main content of the page.

Data Tables 📊

• Mark data table headers with <th scope="col"> for column headers and <th scope="row"> for row headers.
• If appropriate, add a<caption> for the data table.

Color 🎨

• Colour can enhance understanding, but it is not advisable to use colour exclusively to convey information. Red and green colour combinations should be used with particular caution.
• Text, icons, and user interface elements must have strong luminance contrast.

Forms 📝

• Form labels should be placed next to or near their controls so that the labels are visually associated.
• Use the<label> element to programmatically associate labels with controls.
• Use<fieldset> and<legend> to group related controls, such as radio buttons, with a higher-level label.
• Clearly mark required form elements.
• Ensure that all instructions and guidance are easily accessible.
• Ensure that validation errors are obvious to screen reader users, and that users can easily make corrections and resubmit the form.

Links and Buttons 🔗

• Ensure that links and buttons use descriptive text.
• Avoid generic phrases such as "click here", "here", "more", "more information", "read more", or "continue".
• Ensure that links are visually distinct from other page content.

Multimedia 📹

• Live video and audio must include captions and a transcript.
• Captions must be synchronised, equivalent, and accessible.
• Archived audio must include a transcript.

Documents 📄

• For the most robust accessibility, use HTML.
• When a document is the only solution, PDF, Word, PowerPoint, and Excel offer basic accessibility features.
• If the document content cannot be made fully accessible, an accessible alternative must be provided.
• Test the document's accessibility with a screen reader.

Razno ✨

• Content should reflow without breaking the layout when zoomed to 400% from a viewport width of 1280 pixels.
• Responsive layouts and structures must be accessible via the keyboard.
• Ensure the page is descriptive.
• Ensure that all functionality is available to mouse users and is also accessible via the keyboard.

Akinyemi (2023) provides a comprehensive overview of poor and good digital content that is aligned with WCAG guidelines.