Skip to Main Content

Libguide Libguide: Accessibility Basics

Accessibility basics - Font colours

Users who experience accessibility issues will often use browser extensions or other accessibility tools that changes the way the text on a webpage is presented to them. These tools can change fonts, sizes, contrast, brightness, etc to control their experience and make online reading easier.

When we change the colour and style of text, these tools cannot always override this, so the user might not be able to change the colour or make the text larger. 

When you’re building a guide, you might be tempted to use colours and colourful features to make the guide seem visually interesting. But if one of our users is colour-blind or dyslexic, they might find it challenging to read the text.  

SO:

  • Using the default text size and colour will allow users to adjust our guides as much as they need to. (Using bold, italics, and headings tags is ok! DO NOT use underlining.)

Headings

When someone is using a screen reader, the way headings signpost different pieces of information on the page is important. The screen reader will go through headings in consecutive order, and if the heading sizes are out of order, or a heading size is skipped, the screen reader can become disoriented, resulting in a confusing experience for the user.

Our LibGuides templates are set up so that Headings 1 and 2 are used in the page title and box title. That means that any headings in your boxes must start at Heading 3. Then you can use Heading 4, then Heading 5.

If Heading 3 seems too big, you can always use normal-sized text and make it bold/strong. 

Links

When someone is using a screen reader, link text is important. The user needs to be able to make an accurate decision about whether they want to click on the link or not. 

Best practice for linking is to always make sure the link text clearly describes what the user will find on the page they go through to (without going into too much detail!).

For example, if your link will take the user to the Business section of the Databases page, make your link text Business Databases rather than just Business, even if the rest of the page is talking about databases.

Don’t use:

  • Click here
  • More info (unless it’s a link to open a hidden section of text)

It’s also best practice to make sure the link text matches the page or section title the user will arrive at. (A little variation is ok, but make sure it makes sense). For example, if your link says Referencing but the linked page is called Using EndNote with APA 6th, this could be confusing for the user, and they could be uncertain about whether they’ve ended up in the right place. 

Setting link targets:

When linking to CSU pages or guides, makes sure that the link is set to open in same window.  For non-CSU links, you can set the link to open in new window.

A key accessibility issue arises when:

  • Two links on the page have the same link-text, but different URLs
  • Two links on the page have the same URL but different link-text

This causes a problem for people using screen readers. So, for example, if you’re linking to Adobe Digital Editions in two different places, make sure the URLs and the link-text are exactly the same in both places. (Note: The Bridgeman databases are an exception to this: Bridgeman Education and Bridgeman Art Library are accessed through the same portal page, so the URL will be the same even when the link-text is different.)

And make sure you don't give the same link-text to two different URLs on the same page, including the page title.

Lists

Make sure you use the <ul> or <ol> tags for bullet point or numbered lists, and use these tags correctly when formatting your lists. (ul means 'unordered list' and will give you a bullet-point list. ol means 'ordered list' and will give you a numbered list.)

Screen readers tell their users how many items there are in the list, so the user can choose whether to read each item or skip the list. It’s important for users with visual impairments to be able to skip this content if they want to.

Tables

There are two different ways to use tables in web content – for layout, and for data. Consider what the purpose of your table is.

Layout

If you want to use a table for layout – for example, to make the information you’re conveying look a little tidier, or because you’ve already used a lot of bullet-point lists – you need to make the table as simple as possible so a screen reader can essentially ignore the table part and read the information easily.

Default tables in LibGuides are fine to use, but the information in the table must read from left to right. Screen readers go through tables from left to right, across the row, then go to the next row. If you set up your information this way, the reader will receive it in order. If you set up your information in a different way, or you do something unusual with your table, the user will get the information out of order which could be confusing.

For more information, and for some good examples, see WebAIM: Creating Accessible Tables: Layout Tables

Talk to the LibGuides team if you’re not sure how to make your table accessible.

Data

Data tables are used to convey information that really cannot be conveyed in any other way – that is, where it needs to be divided into columns or rows to show the meaning of the information in a grid.

“Sighted users can visually scan a table. They can quickly make visual associations between data in the table and their appropriate row and/or column headers. Someone that cannot see the table cannot make these visual associations, so proper markup must be used to make a programmatic association between elements within the table.” (WebAIM: Creating Accessible Tables, Data Tables) [See link below.]

If you have to use a table for data, please make sure to use the correct code markup, so users with a screen reader can access the information in the correct order.

For more information, and for some good examples, see WebAIM: Creating Accessible Tables: Data Tables.

Talk to the LibGuides team if you’re not sure how to make your table accessible.

Charles Sturt University acknowledges the traditional custodians of the lands on which its campuses are located, paying respect to Elders, both past and present, and extend that respect to all First Nations Peoples.Acknowledgement of Country

Charles Sturt University is an Australian University, TEQSA Provider Identification: PRV12018. CRICOS Provider: 00005F.