Skip to main content

Designing for accessibility is now an intrinsic part of web design for a variety of reasons, such as avoiding discrimination, differences between browsers and improving search engine ranking. In a University context, the Special Educational Needs and Disability Act 2001 and the Disability Discrimination Act make it a legal requirement for websites to be usable irrespective of disability.

In line with these latest requirements and guidelines, the central section of the Queen’s University Website has been designed to meet Level AA (2) of the World Wide Web Consortium’s (W3C-AA) Web Accessibility Initiative (WAI) Web Content Accessibility Guidelines. All new University sites are also designed to conform to W3C-AA standards.

When developing your content you should try, where possible, to make your website accessible to people with disabilities.  Explore the following links to learn more about accessibility issues.

Useful Links

Quick Tips (source: Web Accessibility Initiative)

  1. Images & animations: Use the alt attribute to describe the function of each visual element.
  2. Writing text: Make text as clear as possible. For example, if the content on a page is long, provide a simple summary of the content at the top of the page, break the content down into manageable sections and use anchor links to navigate through the content. Remember that how users read on the web is different to how they read a printed page.
  3. Multimedia. Provide captioning and transcripts of audio, and descriptions of video.
  4. Hypertext links. Use text that makes sense when read out of context. For example, avoid 'click here'
  5. Page organization. Use headings, lists, and consistent structure. 
  6. Scripts, applets, & plug-ins. Provide alternative content in case active features are inaccessible or unsupported. For example, if you are displaying a video on your web page, also provide a text version.
  7. Tables. Make line-by-line reading sensible. Summarise. Avoid using tables to layout content unless it contains tabular data.
  8. Check your work. Validate. Use tools, checklist, and guidelines at http://www.w3.org/TR/WCAG

Assistive Technologies used for Web Browsing

Individuals with a disability often use assistive technologies to enable and assist web browsing, such as:

  • Screen reader software, which can read out, using synthesized speech, either selected elements of what is being displayed on the monitor (helpful for users with reading or learning difficulties), or which can read out everything that is happening on the computer (used by blind and vision impaired users).
  • Braille terminals, consisting of a Refreshable Braille display which renders text as Braille characters (usually by means of raising pegs through holes in a flat surface) and either a QWERTY or Braille keyboard.
  • Screen magnification software, which enlarges what is displayed on the computer monitor, making it easier to read for vision impaired users.
  • Speech recognition software that can accept spoken commands to the computer, or turn dictation into grammatically correct text - useful for those who have difficulty using a mouse or a keyboard.
  • Keyboard overlays, which can make typing easier and more accurate for those who have motor control difficulties.

Any user who experiences difficulty accessing University website resources and who may require access to Assistive Technology such as screen readers, voice recognition software, alternative mice/keyboards, etc. should contact Disability Services (disability.office@qub.ac.uk) who will liaise with colleagues to make appropriate provision.

Your Accessibility Checklist

Have you done the following?

  • Do all the images on your site have alternative text?

    Text alternatives ("alt text") convey the purpose of an image, including pictures, illustrations, charts, etc. Text alternatives are used by people who do not see the image. (For example, people who use screen readers can hear the alt text read out; and people who have turned off images to speed download or save bandwidth can see the alt text.)

    The text should be functional and provide an equivalent user experience (Source: https://www.w3.org/WAI/test-evaluate/preliminary/#images)

    When adding an image description in the Media Library, it should not include:

    • "picture of"
    • "image of"

    Screen readers automatically announce an image as an image. So an alternative text “Image of an apple” would be read aloud by a screen reader as “image, Image of an apple”. (Source: SiteImprove Guides 2020)

    As a Moderator, you add the Alt text to the Description field in the Media Library (see our short video guide).

    Tips and tricks for creating effective image descriptions: https://www.w3.org/WAI/tutorials/images/tips/

  • Do all headings use the proper Heading Format and the correct levels hierarchy?

    Instead of formatting a heading/sub heading in Bold, always use the correct Heading format:

    • Select the Heading
    • Click the Format menu
    • Choose Formats
    • Choose Headings
    • Click on the appropriate heading format for the hierarchical level of the heading you are formatting.


    Heading levels (H1-H6) should always be nested like a document outline. As an example, an H3 would designate a sub-section within an H2 section—meaning you should never come across an H3 that is not preceded by an H2, and so on.

  • Do all data tables have the correct Row and Column Headings?

    Tables can be either vertical or horizontal, with header cells describing either the column that comes below it or the row that comes after it.

    • Click the Table menu
    • Choose either 'Insert table with column headings' or 'Insert table with column and row headings' 
    • Select the relevant table size
    • Ensure that each Column/Row Header cell is filled in


    We advise that all tables are built using the text editor, rather than being pasted from another source, such as Microsoft Word.

    We also advise using tables ONLY for displaying tabular data, not for layout purposes.  There are lots of content types available to enable you to layout your content in a logical and appropriate way.  You don't need to use tables to do this.

  • Are all the links within your content descriptive?

    Screen readers typically have a mode where they can extract all the links from a web page and put them into a list for easy navigation. Therefore, each link needs to be descriptive so that it makes sense out of context.

  • Have you included a title tag in any embedded iFrame code?

    If you are embedding media from sources such as Mediasite and Youtube, the embed code that they generate to enable the media to run on your webpage, must also include a title tag. 

    Here is an example of non-accessible embed code:

    <iframe width="450" height="300" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" src="https://mediasite.qub.ac.uk/Mediasite/Play/0920d80a35624589b75d130c2d12ef121d"></iframe>

    Here is an example of accessible embed code:

    <iframe title="Learn how to create sections within the CMS in our 3 minute long video" width="450" height="300" scrolling="auto" src="https://mediasite.qub.ac.uk/Mediasite/Play/0920d80a35624589b75d130c2d12ef121d"></iframe>

    The above example includes:

    • A descriptive title

    The above example removes:

    • Removal of the frameborder="0"
    • Removal of the marginheight
    • Removal of the marginwidth


    So, once you have added the code to your Embed Video content type, add a descriptive title tag also, based on the above example.

  • Do not apply any formatting to links

    Do not apply any formatting to links. Link formatting is already built into the style of your site and you do not need to apply any additional formatting, such as underlining links, highlighting links in Bold or Italics.

  • Are your PDFs accessible?

    Documents that you upload to your website must also be accessible. Ask yourself is a PDF necessary?  Can it instead be converted into a mobile responsive web page?

    Here are some useful tips on how to make your pdfs accessible:

    • If the document was created the document using a different authoring tool such as Microsoft Word, please use the accessibility features of the program before converting to PDF.
    • When possible, use the Create PDF button from the Acrobat ribbon in Microsoft Word to ensure the resulting document is tagged properly. Never use the Print to PDF option as this results in a PDF that is not accessible.
    • Use the Accessibility Checker built into Adobe Acrobat Pro and fix any issues that it may find.
    • Use the proper tags for each element so that they are identified properly.
    • Check the reading order and make sure all tagged elements are in the intended reading order.
    • Make sure the document’s language is specified.
    • Ensure that the Document Title is specified.
    • Ensure bookmarks parallel the document structure.
    • Use sufficient contrast for text and background colors.
    • Because tabs are often used to navigate a PDF, it’s necessary that the tab order parallels the document structure.
    • Specifying the encoding helps PDF viewers’ present users with readable text.
    • For URLs to be accessible to screen readers, they must be active links that are correctly tagged in the PDF.
    • Ensure all form fields are tagged and are a part of the document structure and ensure that they have proper descriptive text (tool tips).
    • When images are present, use alt text, or descriptive text to describe the image.
    • For tables, make sure they are tagged properly.

    (Source: https://www.hawaii.edu/access/accessible-content/docs/#acrobat)

  • Have all the videos on your site got close captioning?

    Close captions are not just useful for the deaf and hard of hearing, but may also be used by students who may be studying in a quiet environment. 

    We will be making a recommendation on which close captioning software we recommend, when our review is completed.