Training

Accessible Websites

What is Web Accessibility?

Website Accessibility is the practice of designing and building websites in a way that allows individuals with disabilities to perceive, understand, navigate, and interact with online content and online spaces as effectively as those without disabilities. It ensures that everyone, including users with visual, auditory, motor, speech, cognitive, or neurological impairments, has equal access to web resources. The goal of web accessibility is to foster an environment of digital inclusivity where all users can fully participate and engage.

Digital Accessibility is crucial for people with disabilities, since inaccessible pages and sites can make it difficult to navigate, restrict access to information, and limit participation.

Accessibility is built into each part of website design, so as SOU Members check to see if your site has the following:

• Text alternatives

  • Is there sufficient Alternative text for everything that’s not text?
    • Insufficient alt text: A bird
    • Sufficient alt-text: Rocky the Raider, the SOU Mascot, gives a thumbs up 
  • If you do have an image that is decorative only, such as a line or color box for decoration, mark it as “null.”
    • In WordPress this can be achieved by giving any decorative images an empty alt attribute ( alt=”” ).
  • When writing alt-text, you want to keep in mind whether your students can get all the pertinent information from your video and audio, even if they can’t see or hear them
    • Provide captions, or text transcripts, for audio content such as videos, podcasts, interviews, etc. 

• Headings and structure

  • Check that you used the toolbar to specify headings, lists, tables, and language changes.
    • When information is well-structured, people with disabilities can use assistive technology to effectively navigate and understand the content on your webpage. 
  • Determine if your webpage requires a specific browser version or if your video content requires a particular plug-in to play. Design forms to support alternative input methods like keyboard navigation or voice commands. Additionally, insufficient spacing between sections on a page can create visual and cognitive confusion. 

• Color and contrast

  • Is there enough color contrast between your webpage’s written information and the background?
    • Make sure that the contrast for text and images has a ratio of 4.5:1, you can check using tools such as TPGi’s Colour Contrast Analyser (CCA)

• Functionality and navigation

  • Is your webpage navigable with only a keyboard?
    • By designing a website with well-structured content that can be navigated entirely by keyboard, you can help ensure people with disabilities have equal access to the full website experience. You can test this by disabling your trackpad or disconnecting your mouse. You should be able to interact with every part of the page as you would if you were using a mouse.
  • Does your webpage give enough time to read and use it?
    • Content that times out or disappears before users can engage with it can lead to frustration. Provide a clear warning before any timed events occur, and give users the option to extend the time needed to complete their task.
  • Have you ensured that your content does not include any flashing elements/content?
    • Content that flashes at certain rates can be harmful to people with photosensitive disorders. Best practice is to avoid such content or to present users with a warning of the nature of the content beforehand:
      • Ex “WARNING: This video may potentially trigger seizures for people with photosensitive epilepsy. Viewer discretion is advised.”
  • Does the webpage clearly explain and allow for the correction of users’ mistakes?
    • It’s important to provide ways for users to prevent or correct mistakes. This is especially helpful for individuals who may not be able to see or hear content clearly, or who might miss visual cues, sequences, or implied relationships, particularly in elements such as forms. 

• Clear and understandable content

  • Can users understand and read the information easily?
    • Text should remain clear and understandable across all formats. Aim for a level of comprehension that accommodates the widest possible audience, including individuals with learning disabilities or cognitive limitations.
  • Is your content consistent throughout all pages?
    • Ensure that your website content follows a consistent and predictable layout and interface. Navigation menus, links, and text sections should be easy to find and recognize. Group related form labels and instructions together, and use headers (H1, H2, H3 etc) using the header tags. A consistent design helps users navigate through the site more efficiently and follow familiar patterns to accomplish their goals.