LibGuidance

Crafting content for the web requires a unique approach. Unlike traditional writing, web content needs to be clear, concise, and engaging to capture a user's attention amidst the vast online landscape.

Key principles

• Clear and concise language: Write clear and concise content that is easy for users to understand. Avoid jargon and technical terms whenever possible.
• Proper headings and structure: Structure your content with clear headings and subheadings to help users navigate and understand the information.
• Scannability: Format your content for easy scanning. Use bullet points and white space to break up text and make it visually appealing.
• Alternative text for images: Provide alternative text descriptions for images to ensure users with visual impairments can understand the content.
• Consistency: Maintain a consistent brand voice and tone throughout your content to create a recognisable and trustworthy experience.

Headings are essential for accessibility, providing a structural hierarchy and supporting screen reader navigation of titles.

The prescribed heading hierarchy is as follows:

• Heading 1 - designates the page title.
• Heading 2 - denotes box titles.
• Heading 3 - indicates subheadings.
• Headings 4 to 6 - are available for use below this level, but they are rarely necessary.

Helpful tip

When using the style template, the heading structure is largely automated. The page title is already set as Heading 1, and each box title is Heading 2. Simply select Heading 3 in the text editor when creating subtitles.

The style sheet is designed to use 16px text as the standard.The default font family is sans-serif (without decorative strokes), which enhances readability.

This is represented as Normal in the text editor. Changing the font within the text editor is not recommended.

Text decoration

• Limit Emphasis: Use bolding, italicising, and colour changes sparingly. Overuse can hinder readability.
• Avoid All Caps: Do not use all capital letters for emphasis. This negatively impacts screen reader usability.
• No Underlines: Refrain from using underlines for emphasis, as they are commonly associated with hyperlinks.
• Use Headings: Employ headings rather than directly changing the font size.
• Colour Contrast: Do not rely on colour changes for emphasis.
• Colour as an enhancement: If you do change font colour, ensure that there is a strong contrast between the font and the background.

Helpful tip

When pasting text into the text editor, use the Remove Format button to clear any existing formatting.

There are two types of lists: ordered and unordered. Ordered lists are used when items must be in a specific sequence, while unordered lists are used when sequence is not important.

Ingredients

• Flour
• Sugar
• Eggs
• Butter

Instructions

1. Preheat your oven to 175°C. Grease and flour a cake pan.
2. Cream together the butter and sugar.
3. Beat in the eggs.
4. Gradually add the flour.
5. Pour the batter into the prepared cake pan.
6. Bake for 25-30 minutes.

Imagine you're using a screen reader. You need to find the location of the Biology 205 class online.

This is the information you'd hear on the webpage:

After listening to this information, do you have any idea where biology 205 is supposed to be held?

WebAIM: Creating Accessible Tables

Use tables

• to display data that fits well into rows and columns.
• organise tabular data with appropriate table headers.
• when there is a small amount of content

Avoid using tables

• for layout purposes.
• to organise images.
• for an overwhelming amount of content

Top tips

• Add table caption and summary to provide more information about the table for screen reader to pick it up.
• Avoid spanned rows as screen readers may not properly parse them.

Providing access to all viewers is essential when conveying crucial information through an infographic. It can be challenging for people with visual impairments and cognitive disabilities, as complex designs and distracting design elements can hinder their ability to understand the information.

Key considerations

• Ensure that the infographic adheres to WCAG 2 AA for accessibility standards.
• Provide a detailed alternative text or transcript that effectively communicates the content.
• Use a contrast checker.
• Produce a video or audio recording with narration that covers the essential concepts.
• Limit the use of visuals to only those that are necessary.

Images should be used to enhance content, not as the sole means of conveying important information. Users who are unable to view the image should still be able to understand the content through alternative means.

Screen readers

Screen readers are essential tools for individuals with visual impairments, allowing them to perceive and navigate websites through auditory cues. By creating screen reader-friendly websites, we ensure that this segment of the population can access the same information and services as everyone else.

Accordions are beneficial for displaying text because they:

• Conserve screen space by collapsing large amounts of information into smaller, expandable sections.
• Improve user experience by allowing readers to focus on relevant content and avoid information overload.
• Enhance website organisation, particularly on mobile devices, by presenting information in a clear and structured way.

Use the code

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
 

/*Number one*/

<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Insert heading text here
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Insert body text here
      </div>
    </div>
  </div>
 

/*Number two*/

<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Insert heading text here
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Insert body text here
      </div>
    </div>
  </div>
 

/*Number three*/

<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Insert heading text here
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
      Insert body text here
      </div>
    </div>
  </div>

/*Add additional accordions here and continue the naming sequence. For example the next accordion will be "four". Don't forget to close the div below*/

</div>

The following sites are useful when checking the usability of your webpages.

• WAVE - Web accessibility evaluation tool by WebAIM.
• Silktide - Tests website against 200+ accessibility checks.
• Image Alt Text Viewer - Displays and checks image alt text.
• SEO Checker - Meta title, description, alt tags, anchor text checker.
• HTML Tidy - Cleans and improves HTML code, identifies accessibility issues.
• Accessibility Insights for Web - Finds and fixes accessibility issues.
• tota11y - User-friendly accessibility checker, bookmarklet.
• WAVE Web Accessibility Tool - Free accessibility evaluation service by WebAIM.
• HTML_CodeSniffer - Checks HTML for coding standard violations.
• Web Accessibility Evaluation Tools List (W3C) - Filterable list of accessibility tools.

• Web Content Accessibility Guidelines (WCAG) 2.1 - Recommended by W3C, the Web Accessibility guidelines for making web content more accessible.
• WCAG 2 at a Glance (W3C) - Provides a succinct overview of key elements of web accessibility.
• Digital Skills Hub - is part of the University's Equality, Diversity and Inclusion training. The Introduction to Digital Accessibility module provides an insight into the barriers caused by poor accessibility.
• Laws of UX - is a collection of best practices that designers can consider when building user interfaces.