Web Content

Implementing proper heading structures is a vital aspect of keyboard accessibility.

A heading describes the content that follows, much like a news headline. When arriving at a new page, sighted users move toward headings to quickly find what they want on the page. Screen readers and other assistive technology users can also skip from heading to heading.

Headings create an outline for the page, like a report outline or table of contents. The <h1> describes the pages as a whole (and should be similar to the page <title>). A page should typically have only one <h1>.

Headings <h2> through <h6> represent increasing degrees of "indentation" in our conceptual "outline". As such, it does not make sense to skip heading levels, such as from <h2> to <h4>, going down the page.

Here is an example of content hierarchy with corresponding heading levels:

• Heading 1 <h1>
  • Heading 2 <h2>
    • Heading <3>
    • Heading <3>
  • Heading 2 <h2>
    • Heading 3 <h3>
    • Heading 3 <h3>
      • Heading 4 <h4>
        • Heading 5 <h5>

Headings must use heading tags. Screen reader and assistive technologies rely on heading tags (<h1> to <h6>) to identify headings. Text that is merely large, bold, or emphasised is not interpreted as a heading unless the <h1> to <h6> markup is used. Only use headings when they represent the following content.

Selectable text ensures it's accessible by screen reader software. To check, see if you can select, copy and paste your text into another location.

Links are one of the most important aspects of how you communicate online as they are used to:

• guide people around your content
• view or download documents and other files
• access applications or other website to complete a task
• go to other related pages or websites for additional information
• provide a quick way to email someone or get other contact details

Poorly constructed links can negatively impact someone's experience of your website and can even make it inaccessible for certain people. Creating clear and effective links that improve the accessibility and usability of your pages is easy, there are just a few simple rules you should follow.

These rules do not only apply to websites; they also apply to emails, documents blogs, wikis and social media.

Use descriptive link text that makes sense when read out of context

The link text you use should clearly indicate where the link goes to or what will happen when you click it, without needing context.

Link text must not be vague, for example, 'click here' and where possible, shouldn't use the web address as the link text, for example, ulster.ac.uk/accessibility-standards

The same applies to email addresses, as it is recommended to use the name of the recipient as the link text (such as, the person or team rather than the email address).

Provide document type and size

If you are linking to a document, state the file type and, if possible, the file size. This will indicate to the user that they are about to download something. This is particularly important for people using phones where device storage or data plans may be limited.

Best practice example: Download the University's Equality, Diversity and Inclusion (EDI) Strategy (PDF 3.7KB)

Bad practice example: Download the EDI Strategy

Why is accessible link text important?

For visually impaired users who rely on screen reading tools such as JAWS or NVDA to tell them what is on the page, having descriptive web links is vital. Screen reader users often configure the tools to read out all the links to them first. If a link doesn't describe either what will happen (such as call to action), where it leads when clicked or if there are multiple links called 'click here' on a page, this means a person using a screen reader will be unable to navigate quickly through the content to find the link they need.

Most people scan web pages rather than reading every word. They look for links to help guide them to where they need to go next. Have non-descriptive link text means they need to read the text around the link to get the content. This will really frustrate people who have come to your pages for a specific reason.

Use unique link test for each destination

You should not use the same link text to go to different locations.

If screen readers are set up to read out all the links to them first, then they will hear a list of the same link text, but if each version of that link goes to a different page, then they will not know which one they want.

Links to Anchors on the Same Page

Links are often used to jump to another location on the present page. In-page links can provide great accessibility functionality, particularly with "Skip" links to bypass page navigation or links to jump over lengthy lists of links or other complex or potentially confusing information.

"Skip" navigation links

Because the main content is not usually the first thing on a web page, keyboard and screen reader uses often must navigate a long list of navigation links and other elements before ever arriving at the main content. This can be particularly difficult for users with some forms of motor disabilities. Consider users with no or limited arm movement who navigate a web page by tapping their heads on a switch or that use a stick in their mouth to press keyboard keys. Requiring users to perform any action numerous times before reaching the main content poses an accessibility barrier.

Of course, sighted people who use their mouse do not have any trouble with web pages like this. Then can almost immediately scan over the page and identify where the main content is. In effect, sighted users have a built-in "skip navigation" mechanism; their eyes. "Skip navigation" links are useful to give screen reader and keyboard users the same capability of navigating directly to the main content.

Creating "Skip Navigation" Links

The idea is simple enough: provide a link at the top of the page that, when activated, jumps the user to the beginning of the main content.

Visible "Skip" links

The easiest method of creating a "skip navigation" link is to put it at or near the top of the page in regular text. The horizontal location of the link doesn't matter much. The key is to make sure the link is one of the first items that screen readers hear and that keyboard users navigate to using the keyboard (typically by pressing the TAB key). Otherwise users may not realise there is a "skip navigation" link there at all and may waste time navigating through irrelevant links.

The link must also be visually apparent to be optimally usable. A very small or hidden link does not benefit the audience that most needs "skip" links - sighted keyboard users.

Hidden "Skip" links

Many designers worry about the aesthetic impact of visible "skip navigation" links. They may think these links don't look particularly attractive, that they get in the way of artistic expression, or that they may be confusing to some users that do not need them - especially because they are one of the first things within a page. While a visible "skip" link asserts a type of distinct commitment of accessibility, to address these concerns, the link can be visually hidden until it is navigated to.

To be usable by all keyboard users, particularly sighted keyboard users, they must:

• be hidden by default
• be accessible to keyboard navigation
• become prominently visible when it is focused
• properly set focus to the main content area when activated

Probably the most accessible method for visually hiding a skip link is to hide it off screen with CSS, then cause it to be positioned on screen when it receives keyboard focus.

Because the link is still part of the accessible content on the page, keyboard and screen reader users can navigate it, and the link will become visible when accessed.

Which wording is best?

There are multiple ways that the "skip" link could be worded:

• Skip navigation
• Skip main navigation
• Skip navigation links
• Skip to main content
• Skip to content

Any of these may be sufficient so long as the purpose of the link is clearly described. In general, "Skip to main content" is preferred as it explains where the user is navigating to rather than what they are navigating past.

Multiple "Skip" Links

In most cases, a single "skip" link is sufficient. For pages that have very few navigable items preceding the main content, a "skip" link may not be necessary at all. On the other hand, a very complex page with several repeated elements may necessitate additional "skip" links.

Remember, the purpose of "skip navigation" links is to reduce the clutter of numerous links.

Skip link or other in-page links can also be used to allow users to jump to or jump over other types of page content. A "skip" link could also be used to allow the user to quickly bypass confusing or potentially inaccessible content, such as complex tables, or complex social media feeds.

Links to New Windows, Pop-ups, Other Frames or External Websites

The user ought to be alerted when a link does not open in the current window or frame. The accessibility issue is that some users can get confused with the new windows or tabs.

Newer screen readers alert the user when a link opens a new window, though only after the user clicks on the link. Older screen readers do not alert the user at all.

Sighted users can see the new window open, but users with cognitive disabilities may have difficulty interpreting what just happened, then when they try to click on the 'Back' button in the browser, nothing happens, because there is no previous link to go back to in a new window or tab.

Current web browsers do not alert users; it is up the the authors to alert the users. Authors can add this information to links by placing it in brackets at the end of the link, for example by saying "Biographical sketch (opens new window)".

Some sites use icons to convey the same message. Sometimes these icons are used to indicate that a link is to an external site, rather than that it opens a new window, so there's potential for some confusion.

Adjacent links

When using a screen reader, it can sometimes be difficult to tell when one link ends and where an adjacent link begins. JAWS software says "link" before each link, which minimises this problem, but it can be a little more difficult with other screen readers.

A solution is to put the links in an ordered or numbered list. Screen readers tend to pause between list items, helping the user to audially distinguish between separate links.

Long lists of links

Long lists of links may be cumbersome to listen to if the person is interested in narrative content rather than navigational content. One method to get around this potential problem is to provide a "skip link" at the top that allows users to skip over the list of links. On pages where the main content is navigational content (such as a table of contents), such a solution is probably unnecessary.

In many cases, users will have less trouble understanding long lists of links if the lists are broken into smaller chunks with descriptive headings. The smaller chunks present less of a cognitive load on all users, which can especially benefit users with cognitive disabilities.

Use the bullet and numbered list functionality offered by the software. Don't use spaces or dashes manually, as screen reader users won't know it's a list.

'Alt text' describes what an image is about and is entered in the image description field in the Site Editor.

You first need to decide if your image is decorative or not. Often marketing 'eye-candy' or background imagery is decorative and does not need alt text.

There is no perfect answer, but you'll need to decided if an image adds necessary context to the content or not.

Decorative imagery might be:

1. background images used on panels and below headings
2. a card image where the image description would duplicate what's in the linked heading
3. a card image which adds a purely visual enhancement to a linked heading
4. an icon image which accompanies a linked heading

People using the website, often those with visual impairments, may be using a screen reader because they prefer to hear the content, therefore the image needs to be described to the user to understand it.

Describing the image also improves search engine optimisation creating content that is more informative, searchable and useful.

How much details should I describe?

There is no perfect description. Try to capture the concept of the image in a sentence or two.

A good explanation from Moz.com website:

"The best format for alt text is sufficiently descriptive but doesn't contain any spam attempts at keyword stuffing. If you can close your eyes, have someone read the alt text to you, and imagine a reasonable accurate version of the image, you're on the right track".

I have a complex image, what should I do?

This should be rare for marketing and general information pages.

If your image shows complicated information (for example a map, chart or graph) which cannot be described in a sentence or two, then provide a basic overview and describe the detail within the content of the page or on a separate page.

Is alt text different from captions?

A caption is optional text that can appear below an image to provide additional context. Sometimes there is overlap with the image description, but it intends to provide additional relevant information that compliments the image whereas at text (image description) is a literal description of the image contents.

Avoid adding text on images

Text on images can make content inaccessible to screen readers and search engines.

Where including images of text is unavoidable, ensure that the text is either included in full in the web page text or in an alt text description.

Ulster University's  'Images' webpage provides more information on accessible images.

The purpose of data tables is to present tabular information in a grid or matrix, and to have columns or rows that show the meaning of the information in the grid.

Sighted users can visually scan a table. They can quickly make visual associations between data in the table and their appropriate row 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. When the proper HTML markup is in place, users of screen readers can navigate through data tables one cell at a time, and they will hear the column and row headers spoken to them.

A critical step towards creating an accessible data table is to designate row or column headers. Screen reader software reads a table from top to bottom and left to right. It can't interpret tables with no heading or with complex structures.

Keep the structure simple: don't split cells, merge cells or use nested tables.

To create a header row:

• select the top row
• right-click and choose 'table properties'
• in the row section, choose 'read as header row at the top of each page'
• deselect 'Allow row' to break across pages

• Left-align text (do not justify and avoid centring)
• Don't use colour alone to show meaning; use text or symbols in addition. For example: red, amber and green could be a cross, question mark and tick.
• Make sure there's enough contrast between text and background.

• Avoid underlining text unless it's a link
• Avoid italics or all capitals: they are both harder to read if you have dyslexia
• Use bold text sparingly: Bold text can be used to emphasise certain words in the flow of paragraphs and to highlight critical information that users need to refer to our you've seen them miss. For example, "Your reference number is ABC12345678. Use this to track your application. Updates will be sent to name@example.com".