Keep up to date on the latest web design & SEO Projects

Creating Accessible and Inclusive Websites For Our Community

Creating Accessible and Inclusive Websites For Our Community

How to make your website accessible to anyone, and what are website accessibility standards?

You might be asking yourself: what is website accessibility and inclusion?

Not everyone can access the internet in the same way as a typically developed person does. A huge portion of our society – 20% in Australia – lives with some form of disability. This means that at least 20% of all Australians are less able or unable to consume, access, read, hear or understand internet content, because they are less able to see, hear or cognitively digest content found online. This may be due to a permanent or temporary disability, an injury or a language barrier, or unnecessary complexities with the website being interacted with.

Website accessibility means that websites, tools and technology can be perceived, understood, navigated, interacted with and contributed to, by everyone regardless of who they are. Accessibility supports social inclusion for those who may otherwise be at risk of isolation and, when websites and web tools are designed inclusively, people with disabilities can use them fully.

In this article:

1. Why Should We Make Our Websites More Accessible?

Accessibility is Law

Accessibility is a Human Right

2. Common accessibility problems

Hearing

Seeing

Understanding

Navigating

Speech

3. How Do We Make Our Websites More Accessible?

4. Ways to Write Web Pages that Are Accessible to Everyone

5. Web Content Accessibility Guidelines (WCAG)

6. WCAG Summary – Ways to Make Web Content Accessible to Everyone

7. When is it Justifiable not to be Compliant with WCAG?

8. Testing Web Accessibility

9. 6 Simple Ways to Manually Test Web Accessibility

Back to top

Why Should We Make Our Websites More Accessible?

1. Why Should We Make Our Websites More Accessible?

We should make our websites more accessible for 3 main reasons:

  • It’s good for the reader – Everyone has a right to use the internet in as complete a way as anybody else and when this happens, it adds to the quality of life and happiness of the reader. They feel connected and included because we are making our websites “consistent with society’s obligations to remove discrimination and promote human rights”.
  • It’s good for the business – If more people can access the content that we create for our clients, more people will be exposed to the brand we are creating the website for. Greater exposure means greater sales but further to this, greater accessibility shows that the brand we are creating for has inclusion in mind. This will lead to an increase in positive brand perception.
  • It’s a Human Right and a Requirement of Law – This is extremely important.

Back to top

Accessibility is Law

Under section 24 of the Disability Discrimination act (1992) it is “unlawful for a person who, whether for payment or not, provides goods or services, or makes facilities available, to discriminate against another person on the ground of the other person’s disability:

  1. by refusing to provide the other person with those goods or services or to make those facilities available to the other person;
  2.  in the terms or conditions on which the first-mentioned person provides the other person with those goods or services or makes those facilities available to the other person; or
  3. in the manner in which the first-mentioned person provides the other person with those goods or services or makes those facilities available to the other person.

In plain English, this means that a company can be prosecuted under the Act if they choose not to make facilities available to a person based on their disability, within reason.

Back to top

Accessibility is a Human Right

In addition to the Disability Discrimination Act, accessibility in all forms is a human right. The Convention on the Rights of Persons with Disabilities (CRPD) was adopted by the United Nations in 2006. Article (4)(1)(g) of the Convention calls on parties to “Promote access for persons with disabilities to new information and communications technologies and systems, including the Internet”. Australia was one of the first signatories to The Convention but, as the The Australian Human Rights Commission (AHRC) points out, we all have an obligation to uphold the rights established by the convention.

Back to top

2. Common accessibility problems

Online content is usually comprised of text, audio, video and images, and usually in a non-linear format (in other words, websites are not usually just in a list from top to bottom of the page, there are links, separate sections, buttons and other media dotted around) and various elements of a website will be inaccessible to some people.

Hearing

A person with a hearing impairment or who is d/Deaf will not necessarily understand audio clips or video clips with audio in them. The audio could be music, sounds that convey a message, such as musical scores, or noises that are activated when elements of a web page are clicked, or speech, or even computer warning sounds.

Seeing

Similarly, a person with a visual impairment or partial or total blindness will not necessarily be able to read text, see video clips or navigate around a website efficiently. They may have difficulty reading text with poor contrast or they may be sensitive to flashing images.

Understanding

Understanding a website comes down to website complexity. Many people will have difficulty navigating a website if it has unexplained jargon, small fonts, unobvious places to click and move through the website, bad backlinking systems, lack of headline structure, bad text contrast, hidden portions. A person may have problems in these areas if they have cognitive challenges, lack of experience with technology or be visually impaired. However, anybody can have problems on a website with any of these design flaws.

Navigating

A website becomes hard to navigate with design shortcomings, but a person who lives with a cognitive challenge, or who has visual challenges, will have difficulty navigating a web page. Still more people may have motor function factors affecting their ability to use a mouse or keyboard.

Speech

Some parts of the internet are voice activated and recently, voices are becoming used as a form of password (Centrelink Voice Authentication, for example) but this growing aspect of internet access may not be usable by people with limited speech, or a hearing impairment, or who use English as a second language.

Back to top

How Do We Make Our Websites More Accessible?

3. How Do We Make Our Websites More Accessible? 

It is clear that many people are at risk of being excluded from some, most or all internet content unless web programmers and designers strive to find ways to increase inclusion in their product.

The way to make our websites accessible to as many people as possible is by following international guidelines to keep us within the law as set out by the World Wide Web Consortium (W3C).

Back to top

Ways to Write Web Pages that Are Accessible to Everyone

4. Ways to Write Web Pages that Are Accessible to Everyone

With just a little research, web designers and developers can take a more active hand in creating products that more people can you. There are some fantastic resources available online to assist with this, and help us all do better at making websites that:

  • Provide informative, unique page titles
  • Use headings to convey meaning and structure
  • Make link text meaningful
  • Write meaningful text alternatives for images
  • Create transcripts and captions for multimedia
  • Provide clear instructions
  • Keep content clear and concise

Back to top

5. Web Content Accessibility Guidelines (WCAG)

W3C is an international community where Member organizations, full-time staff, and the public work together to develop Web standards. W3C’s mission is to lead the Web to its full potential and they run the Web Accessibility Initiative (WAI). The WAI guidelines for web accessibility are:

  • Web Content Accessibility Guidelines (WCAG) 2.0 – a guide for making websites accessible to people with disabilities.
  • Mobile Web Best Practices (MWBP) – a guide for making websites usable from a mobile device.
  • Mobile Web Application Best Practices (MWABP) – a guide for developing and delivering web applications on mobile devices.

The full details of the guidelines are very intricate and complex and far beyond the scope of this article. For this reason, this article will summarise and discuss the main points of the articles, as a springboard for your understanding of web accessibility and as a starting point for further reading. Here are the links to the full documents:

WCAG (Web Content Accessibility Guidelines) Full Document

MWBP (Mobile Web Best Practices) Full Document

MWABP (Mobile Web Application Best Practices) Full Document

You might be wondering why there are accessibility guidelines based on making pages, apps or web tools for mobile devices, but W3C and The Australian Human Rights Commission (AHRC) agree that “People with disabilities using computers have similar interaction limitations as people without disabilities who are using mobile devices”. There is so much overlap, in fact, that W3C have created guidelines for Mobiles that suit differently abled as well as typically developed people, because we all face accessibility issues on mobile phones, compared to computers.

Back to top

WCAG Summary – Ways to Make Web Content Accessible to Everyone

6. WCAG Summary – Ways to Make Web Content Accessible to Everyone

Here’s a simple way to look at it, a simple rule of thumb: Strive to use multiple media types to convey each message on a website we work on, to include multiple ways to access an element on a website and to avoid causing aggrievance to any condition.

The WCAG lists these as 4 main principles that can be achieved to a good, very good, or excellent level (noted on the Guidelines as A, AA and AAA respectively). In this document, only A and AA solutions are listed, since all grades ‘pass’ accessibility requirements and some AAA solutions are time or cost prohibitive. The Australian Government website states that it is AA compliant and working towards AAA compliance, for example.

To be complaint to the WCAG, the Information and the operation of the user interface must be:

  1. Perceivable (by sight, sound or both)
  2. Operable (by mouse and keyboard)
  3. Understandable (writing must be easy to understand)
  4. Robust (Interpreted by a wide variety of user agents)

Principal 1 – A Website and its Navigation Must Be Perceivable

Use Text Alternatives for any non-text content, such as:

  • Large print, Braille, Speech
  • Symbols
  • Simpler language

 Use Time-Based Media Alternatives for time-based media such as:

  • Pre-recorded or live captions
  • audio descriptions
  • pre-recorded sign language
  • extended audio descriptions

Make Adaptable Web Content that can be presented in multiple ways without losing information or structure:

  • Use correct reading sequence.
  • Provide text or audio equivalents for instructions that rely solely on shape, color, size, visual location, orientation, or sound.
  • Use portrait AND landscape (unless a specific display orientation is essential).
  • Label input fields.

Make it easier for users to see and hear content:

  • Include sound controls for audio that is more than 3 seconds long.
  • Use low or no background audio.
  • Separate foreground from background.
  • Only use color with words as the visual means of conveying information an action, response, or visual element.
  • Use text to describe visual presentations.
  • Use a contrast ratio in copy of at least 4.5:1
  • Enable copy text resizing up to 200% without loss of content or functionality.
  • Avoid the need for users to scroll in two dimensions.
  • Spacing:
    • Line spacing: 1.5 or more
    • End paragraph spacing: 2 x font size or more
    • Letter spacing: 0.12 or more
    • Word spacing: 0.16 x font or more
  • Make hover content dismissible, hover-able and persistent.

Back to top

Principle 2 – A website and its navigation must be operable

Make web content accessible via mouse and keyboard:

  • Make all content and functionality available using a keyboard as well as a mouse.
  • Allow free movement of keyboard focus using keyboard and mouse.
  • Shortcuts can be enabled or disabled, remapped or active only on focus.

Provide users enough time to read and use content:

  • Have the ability to turn off, adjust or extend each time limit that is set by the content.
  • Give the user a warning about the end of the time limit.
  • Pause, stop or hide moving, blinking, scrolling, or auto-updating information.

Design content that does not cause seizures or physical reactions:

  • Elements flash less than 3 times per second, or ensure the flash is below the general flash and red flash thresholds.
  • Add an option to disable non-essential animations.

Provide ways to help users navigate, find content, and determine where they are:

  • Add an option to bypass blocks of repeated content.
  • Ensure web pages have accurately descriptive titles.
  • Ensure focusable components preserve meaning and operability.
  • Ensure each link can be determined from accurate link text or context.
  • Ensure multiple web page location options exist within a website (except where the Web Page is the result of, or a step in, a process).
  • Ensure keyboard focus indicator is visible.

Make it easier for users to operate functionality through multiple inputs beyond keyboard:

  • Multipoint or path-based pointer gestures can be operated with a single pointer without a path-based gesture.
  • Text labels of text images should contain the text that is presented visually.
  • Device or user motion functionality can also be operated by other user interface components.

Back to top

Principle 3 – Understandable

Information and the operation of the user interface must be understandable.

Make text content readable and understandable:

  • The default human language of each Web page can be changed by the user.
  • The human language of each passage or phrase in the content can be translated (except for names, jargon and slang).

Make Web pages appear and operate in predictable ways:

  • User interface components do not initiate a change of context when they receive focus.
  • Changing element settings does not automatically cause any unspecified change of context.
  • Navigational mechanisms that are repeated on multiple Web pages within a website occur in the same relative order each time, unless a change is initiated by the user.
  • Components that have the same functionality in a website are identified consistently.

Input Assistance: Help users avoid and correct mistakes:

  • Identify and describe to the user all automatically detected errors.
  • Provide Labels or instructions when content requires user input.
  • Input errors are automatically detected, and correction suggestions are provided, unless it would jeopardize the security or purpose of the content.
  • Legal or financial transactions are reversible, checked and confirmed before finalising.

Back to top

Principle 4 – Robust

Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.

Maximize compatibility with current and future user agents, including assistive technologies:

  • Markup elements should –
    • have complete start and end tags;
    • be nested according to their specifications;
    • contain no duplicate attributes;
  • IDs should be unique, except where the specifications allow these features.
  • Form elements, links and components generated by scripts should be able to be auto generated.
  • States, properties, and values should be able to be set programmatically or manually.
  • Notification of changes to these items should be available to user agents, including assistive technologies.
  • In content implemented using markup languages, status messages should be able to be programmatically determined such that they can be presented to the user by assistive technologies without receiving focus.

This is a brief summary of the accessibility options available to us at Jezweb. Some are A level compliant and some are AA, but all area achievable, if they ae written into the web design and copywriting processes early on. It is much quicker and easier to write accessibility in at an early stage than it is to amend existing work.  

Back to top

7. When is it Justifiable not to be Compliant with WCAG?

There are agreed limits to building accessible websites, as set out by the Australian Human Rights Commission. In terms of the Disability Discrimination Act (1992), in some (but not all) circumstances, obligations under the DDA to provide equal access are limited by the concept of unjustifiable hardship.

In other words, if a company cannot afford the time or money to improve some specific accessibility elements, and they can prove it, then there may be a cause not to include those elements. Otherwise, well, its up to us as a company and as individuals to make our content as accessible to all as possible.

For more information on the legal case – bearing in mind, this link is not legal advice, just general information – click on humanrights.gov.au/our-work/disability-rights/world-wide-web-access-disability-discrimination-act-advisory-notes-ver#whatis

Back to top

Testing Web Accessibility

8. Testing Web Accessibility

We can test our web accessibility levels in 2 ways:

  • Web Accessibility Tools (For web accessibility tool processes, just refer to your line manager)
  • Manual Audits (Human Checking- see below)

When developing or redesigning a website or web application, evaluate accessibility early and throughout the development process to identify accessibility problems early, when it is easier to address them. There are evaluation tools that help with evaluation. However, no tool alone can determine if a site meets accessibility standards. Knowledgeable human evaluation is required to determine if a site is accessible”. (W3C website, 9 April 2021)

Back to top

6 Simple Ways to Manually Test Web Accessibility

9. 6 Simple Ways to Manually Test Web Accessibility

Human testing can be done by manually auditing a website for compliance to the WCAG (The Web Accessibility Initiative’s Web Content Accessibility Guidelines, in case you forgot what it means!).

The details of the WCAG are dense. People dedicated entire careers to understanding it, but there are some simple things you can do to test the accessibility of your work:

1. Unplug your mouse and/ or turn off your trackpad

Interact with the site using only TAB or SHIFT+TAB. to navigate and ENTER to follow a link.

  • Can you interact with all controls, links, and menus using only the keyboard?
  • Can you see what item has focus at all times?
  • Does the visual focus order match the intended interaction order?

2. Turn on High Contrast Mode – This also removes colors on the site.

According to WebAIM’s Survey of Users with Low Vision, 30% of respondents state they used High Contrast Modes.

  • Can you easily view each element on the page?
  • Can you navigate around the site?
  • Can you read and understand all copy elements?

3. Turn off Images in browser settings.

  • Does the content make sense?
  • Does the content become harder to understand?
  • Is any content now missing?
  • Do any important controls disappear?

4. Check for Captions or Transcripts

  • Are there captions on the video directly or is there a control in the player that turns on/ off captions?
  • Is there an alternative version with audio description or a control in the player that turns on/ off audio description?
  • For videos with a lot of dialog, is there a text transcript on the page or link close to the video player that goes to a transcript?

Other requirements exist for video-only and audio-only scenarios, but the above will cover most media on most sites.

Note: Not only should the media content itself be accessible but so should the player. Look for a future blog post on media player accessibility.

5. Click on Field Labels

Be aware of missing or incomplete labeling, ineffective error handling, and poor focus control.

Click on the text label adjacent to the field:

  • When you click on the label next to a text input or text area, does the cursor go into the field?
  • When you click on the label next to a radio button or checkbox does that select the adjacent option?
  • When you click on the label next to a SELECT element, does that place focus on the SELECT?

N.B.: There should be a one-to-one relationship between the label and the control.

6. Turn off CSS in browser settings. Background images will disappear

  • Did important content disappear or did any controls, icons, or other actionable elements disappear?
  • Is it now difficult to understand things like error messages or other previously visual cues?
  • Is content still displayed in a reasonable, easy to understand order?
  • Does any color, including background color remain?
  • Do any text presentational styles remain?

Following these simple guidelines is a great springboard but is a very simple overview only. More detailed information, you should always refer to WCAG.

Back to top

How to make sure you’re an ally to those with different abilities

Ask for a website audit and take the recommendations that come out of them on board. Jezweb has a team of highly experienced website developers and designers that have experience in accessible websites and are personally passionate about making them more so as technology develops. For more information about specific website functionalities or questions, get in touch with our team for a conversation.