Writing for the web

Aims and objectives

This module will:

  • explain how to write for online audiences
  • explore different ways to produce online content

After completing this module, you will be able to:

  • write effectively for online platforms
  • implement techniques to make online content accessible to all
  • select appropriate online platforms to publish web content

4. Web accessibility

All users should have equivalent access to your web content, regardless of their situation. Your content is accessible if all users can access, use and understand it.

Online users may have visual, hearing, motor, cognitive or other disabilities.  It is essential that your web content is accessible. Everyone, regardless of their abilities, is likely to benefit from well-structured, accessible content. 

Techniques for accessible content

The techniques in this section build on the techniques we have recommended in the previous sections, including using:

  • headings
  • descriptive links
  • plain language.

Language used for instructions

Directions or instructions should not rely on colour, screen location or other visual cues. If a user can't see the screen, they can't follow the instructions. They may be blind or have low vision and use assistive technology, such as screen readers to listen to web content.

Don't write:

  • Click the green button to apply
  • Click the top right link to apply. 

Write Click Apply. Then make sure to add the text label Apply to the green button or the top right link.

Text

When adding text to a webpage use:

  • a standard font, in an adequate size, that is easy to read
  • sentence case.  Avoid writing phrases or sentences in ALL CAPITAL LETTERS. They are harder to read. Use bold or italics for emphasis instead
  • enough contrast between the text and the background.

Try this colour contrast checker:

  1. Use the sliders to see the contrast change
  2. Enter the HEX (Hexadecimal) colour value code of your font and background colour

e.g. Try a light grey font —  #919191 and a white background — #FFFFFF

Does it pass the contrast test?

Colour

Colorbrewer2.org allows you to select a Colorblind safe option. It is designed for creating map colours but you can use the colour information for your website. You can change the number of colours and there are different export formats.

Images

Write informative alternative text (alt text) for any images that are not just decorative. All users should have equitable access to information contained in images. If the information is not in the surrounding text, it must be in the alt text.

Writing alt text

The alt text should be simple and as short as possible. The alt text does not show visibly on the page but can be read by screen readers or viewed using browser tools. Most web building platforms should have an alternative text field for images. If you are writing HTML code, give alternative text for images by adding alt="description of the image" within the image tag. Images that have no function or are purely decorative must still have alt=" ". Many platforms require you to enter a space in the alternative text field to produce alt=" " in the source code.

This alt text field has an option to select "decorative image".
Screenshot of an alt text field to add your image description

Don't put text instructions in an image. If you can't avoid having an image containing complex instructions or content, you should provide an extended description. You can add a link to your extended description.

Image size

Keep image file sizes as small as possible, to reduce download times. Tools for reducing image sizes:

You have a Star Wars Lego webpage. What would be a good alt text description for this image?

The AT-ST Walker has 2 legs and the AT-AP Walker has 3 legs and longer guns
Example caption: Star Wars Lego AT-ST Walker (left) and AT-AP Walker (right). Both have spring-loaded shooters.

A. This image shows a wood floor with, on the left, an AT-ST Walker with 2 legs and, on the right, an AT-AP Walker with 3 legs and longer guns
B. The AT-ST Walker has 2 legs and the AT-AP Walker has 3 legs and longer guns
C. No alt text is needed

Answer:

  • B is the better alt text to use. It provides information that is not given in the caption text.
  • A provides too much unnecessary detail. Avoid starting alt text with "this image ...."  or "image of..." etc. 
  • C is not right. Alt text is needed for this image. Some of your users may not be able to see what is different between each Walker

Tables

Use tables for presenting data that needs to be in tabular format but don't use tables just to control the layout of your page.  Add column and row headings and a summary. Sighted users can use visual cues to make sense of tables but screen reader users need the correct HTML markup to understand the data. See Creating Accessible Tables to find out why the HTML markup is so important.

Video and audio

Video used in your web content should have captions and a transcript. The audio for the video should fully describe the visual content. If it doesn't, an audio description would be required. Audio descriptions provide information about the visual content. Find out more about using captions, transcripts and audio descriptions.

If you make a video, plan your script so that you fully explain any visual content. YouTube provides captions and transcripts for videos that have spoken audio. The Types of assignments module has tips on creating video and audio.

Audio-only content, such as a podcast, should have a transcript. 

PDFs and other documents

Make sure any documents you attach are accessible. The PDF format can be difficult for people to use if they are not designed to be accessible.

Find out more about creating accessible content:

Duration:   Approximately 20 minutes


Graduate attributes

Knowledge and skills you can gain to contribute to your Graduate attributes:

Effective communication Effective communication

 Independence and creativity

 Ethical and social understanding


Check your knowledge

Check what you know about this topic:

Take the quiz

Support at UQ

Access UQ services to assist you with personal or study-related issues.