Web Accessibility: Ensuring Inclusivity for Everyone

An astonishing 20% of Australians have some kind of disability, whether it be visual, auditory, physical, intellectual or neurological. This statistic is concerning when applied to web usage and the number of websites set up to be accessible. When websites and web tools are thoughtfully designed and crafted, individuals with disabilities can navigate them seamlessly. Yet, today, numerous sites pose accessibility challenges, rendering them inaccessible or challenging for some people to use.

Ensuring web accessibility not only enhances the online experience for everyone, but also brings advantages to individuals, businesses and society as a whole. International web standards define the standards for achieving accessibility, serving as a guiding framework for inclusive digital experiences. In this article I will be exploring these guidelines and how we can utilise them to create ethical and inclusive websites.

Understanding Accessibility

Web Accessibility is not only an ethical thing to do, it also has a wide range of benefits ranging from improved SEO, improved usability and improved conversions.

Accessibility isn’t necessarily exclusive for people with disabilities, it is also important for users who are of an older demographic, due to their deteriorating eyesight. If a website is accessible, users should be able to control text size easily and the default text size should be large. If you have a business with an older target audience, catering to their needs will be beneficial and will likely lead to more conversions.

<incoming developer speak>

One of the easiest ways to ensure good accessibility is to use good, semantic HTML. This means using appropriate headings and structure elements such as <section>’s to map out your document and using correct elements for whatever purpose said element has. For example, a button should be an <a> if it is linking to another page or website, or a <button> if it is performing an action on the page (e.g. opening a menu). Using a <div> for purposeful elements is never acceptable.

</developer speak done>

Web accessibility encompasses a wide range range of disabilities including:

• Auditory
• Cognitive
• Neurological
• Physical
• Speech
• Visual

To go into more depth, I’m going to go into more detail about the WCAG 2.1 guidelines, or Web Content Accessibility Guidelines.

WCAG 2.1

The Web Content Accessibility Guidelines (2.1) is a range of recommendations for making web content more accessible. By following these guidelines, we can make web content more accessible to a wider range of people with disabilities, including people with vision impairment, audio impairment, limited movement, speech impairment, photosensitivity, learning disabilities and cognitive limitations.

A, AA & AAA

WCAG 2.1 uses a rating system to score guidelines on their level of conformity. The rating system consists of Level A, Level AA and Level AAA. They represent different levels that a criterion has to meet to be successful. Each level raises the minimum standard for success, with Level A representing the absolute minimum standard for accessibility.

Level A – Minimum Compliance

Level A essentially prohibits elements that would make a website inaccessible. Websites that do not meet Level A are exceedingly difficult for people with disabilities to use.

• No keyboard traps
• Navigable with a keyboard
• Non text alternatives

Level AA – Acceptable Compliance

Level AA is the most widely used conformance level in most accessibility rules and regulations around the world. Websites that meet Level AA are usable and understandable for most users with disabilities.

• Sufficient colour contrast
• Sufficient navigation
• Semantic headings

Level AAA – Optimal Compliance

Level AAA is the highest conformance level, making your site accessible to the max number of users. Meeting AAA is not advised unless your target audience is older or have disabilities.

• High colour contrast
• Sign language interpretation

PDF Accessibility

Before going more in depth into WCAG, I wanted to quickly mention PDF/UA.

PDF’s in general are not very accessible. To improve PDF accessibility, researchers came up with a set of guidelines called PDF/UA.

PDF/UA is a set of guidelines for PDF development which suggest that everyone should be equally able to independently access and use the information within a PDF document.

Content is categorised in two ways: meaningful content and artefacts. Artefacts are generally decorative imagery, and does not need to be tagged. All meaningful content needs to be tagged and integrated into the structure tree of tags.

Requirements

• Meaningful content must be marked with tags and create a complete structure tree.
• Meaningful content must be marked with the appropriate semantic tag.
• The structure tree made by the tags must reflect the document’s logical reading order.
• Only the standard tags defined in PDF 1.7 may be used; if other tags are used, assign a role.
• Information may not be conveyed using visual means alone (E.g. contrast, colour or position).
• No flickering, blinking or flashing content is permitted.
• A document title must be given, and the window title must display this rather than file name.

How to use PDF/UA

I may go into more detail on the topic of PDF/UA at a later stage, but for now I will say that using Adobe InDesign is a great way of achieving PDF/UA standards.

Assistive Technology

Assistive Technology is often used to improve the experience of users with issues relating to all criterion. Some of these technologies include:

• Screen Magnifiers
  • Used by people with visual, perceptual and physical disabilities to change text size, screen zoom, spacing, colour, etc, to improve the visual readability of rendered text and images.
• Screen Readers
  • Used by people who are blind to read textual information through speech or braille.
• Text to speech software
• Speech recognition software
• Alternative Keyboards
  • Head Pointers
    • Uses eye tracking and head movement tracking to move a cursor
  • Single Switches
    • Using single buttons or joysticks to simulate a mouse or keyboard. Examples include head switches, foot switches and muscle activation switches.
• Alternative Pointing Devices

When designing or developing a website, it is advisable to be aware of these technologies, and if needed, cater to them.

Key Principles of WCAG 2.1

WCAG 2.1 is built upon four core principles: Perceivable, Operable, Understandable and Robust (POUR). These principles outline the key aspects that contribute to a truly accessible web experience, guiding designers and developers in creating content that is accessible to all users.

Without going into too much detail, I will go over some of the core criterion for each principle and summarise the principle.

Perceivable

The perceivable principle of WCAG 2.1 emphasizes the importance of making digital content perceivable to all users, including those with visual or auditory impairments. This involves providing alternatives for non-text content, ensuring content can be presented in different ways, and making it easy to distinguish foreground information from background.

Important criterion

Some important criterion to be aware of include:

• 1.1.1 Non-text content (Level A) – Make all non-text content accessible to users with text alternatives.
• 1.4.1 Use of Colour (Level A) – Ensure all users can access information that is conveyed through colour differences.
• 1.4.3 Contrast (Level AA) – Provide enough contrast between text and it’s background.
• 1.4.4 Resize Text (Level AA) – Ensure rendered text can be scaled successfully. Content should scale to 200% – 300%.
• 1.4.9 Images of Text (Level AAA) – Enable people who require a particular representation of text to be able to adjust the text.
• 1.4.13 Content on Hover or Focus (Level AA) – Content that appears and disappears in coordination with keyboard focus or pointer hover is dismissible.

Operable

The operable principle focuses on ensuring that digital content is operable by all users, including those with mobility impairments. This involves designing interfaces that can be navigated using various input methods, providing clear and consistent navigation, and avoiding content that may cause seizures or physical reactions.

Important criterion

Some important criterion to be aware of include:

• 2.1 Keyboard Accessible (Level A) – 4 Success Criteria
  • 2.1.1 Keyboard (Level A) – All website functionality should be operable through a keyboard interface without requiring specific timings for keystrokes, except where the underlying function requires input that depends on users movement.
  • 2.1.2 No Keyboard Trap (Level A) – If keyboard focus can be moved to a component on the page using a keyboard, then focus can be moved away using only the keyboard.
  • 2.1.3 Keyboard (No exception) (Level AAA) – All website functionality should be operable through a keyboard interface, without requiring specific timings for individual keystrokes.
  • 2.1.4 Character Key Shortcuts (Level A) – If a keyboard shortcut is implemented in content using only letter, punctuation, number or symbols, then it should be able to be turned off, remapped or active only on focus.

Understandable

The understandable principle highlights the need for digital content to be understandable to all users, regardless of cognitive or language barriers. This involves using clear and concise language, organising content in a logical manner, and providing assistance and guidance when needed.

Important criterion

Some important criterion to be aware of include:

• 3.1.1 Language of the Page (Level A) – The default human language can be programmatically determined.
• 3.1.2 Language of Parts (Level AA) – The human language of each passage or phrase in the content can be programmatically determined except for names, technical terms and other miscellaneous jargon.
• 3.1.3 Unusual Words (Level AAA) – A mechanism is available for identifying specific definitions of words or phrases used in an unusual or restricted way, including idioms and jargon.
• 3.1.4 Abbreviations (Level AAA) – A mechanism for identifying the expanded form or meaning of abbreviations is available.
• 3.1.5 Reading Level (Level AAA) – When text requires reading ability more advanced than the lower secondary education level after removal of proper names and titles, supplemental content, or a version that does not require reading ability more advanced than the lower secondary education level, is available.
• 3.1.6 Pronunciation (Level AAA) – A mechanism is available for identifying specific pronunciation of words where meaning of the words, in context, is ambiguous without knowing the pronunciation.

Robust

The robust principle underscores the importance of creating digital content that is robust and compatible with a wide range of user agents and assistive technologies. This involves using technologies that are supported across different platforms, ensuring compatibility with assistive technologies, and avoiding deprecated or obsolete features.

Important criterion

Some important criterion to be aware of include:

• 4.1.1 Parsing (Level A) – In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features.
• 4.1.3 Name, Role Value (Level A) – For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

Implementing WCAG 2.1

Implementing WCAG 2.1 involves incorporating the guidelines and principles into the design and development process of digital products. This may include conducting accessibility audits, training team members on accessibility best practices, and using tools and resources to ensure compliance with WCAG 2.1 standards.

Good accessibility should be ingrained into the website process from the beginning, during the strategy and wire-framing stage. It will become more prominent during the design phase and will come into full effect during development.

Implementing these standards is not difficult, but we still recommend getting an expert involved. At Mintyy we strive to meet AA accessibility standards on all our websites. Get in touch today to find out more.

Testing and Evaluation

Testing and evaluation are crucial steps in ensuring the accessibility of digital content. This involves conducting thorough accessibility tests using assistive technologies and automated testing tools, as well as engaging users with disabilities in usability testing to gather feedback and identify areas for improvement.

At Mintyy we use accessibility audit tools like WAVE or Lighthouse to judge the level of accessibility on a website. We also use our expertise in accessibility to judge the level of accessibility when using an audit tool is not necessarily the best option. All our projects include a testing phase, where we test browser, device and accessibility compliance.

The Impact of Accessibility

The impact of accessibility extends far beyond individual users, benefiting businesses, organisations, and society as a whole. Accessible digital content improves user satisfaction, expands audience reach, enhances brand reputation, and fosters inclusivity and diversity in the digital space.

If you are a business that finds business through your website and consider conversions to be of importance, remember the high percentage of users who have a disability that I mentioned in the introduction. If 20% of users require accessible websites, you may be missing out on 20% of conversions, or 20% of revenue.

The Future of Accessibility

As technology continues to evolve, so too will the landscape of accessibility. The future of accessibility will likely involve advancements in assistive technologies, greater awareness and adoption of accessibility standards, and continued efforts to promote inclusivity and accessibility in all digital experiences.

With WCAG 2.2 released, it is advisable to stay on top of the latest standards to ensure you’re complying to a wide range of audiences. If you’re interested, I recommend checking out WCAG 3.0, which is currently a working draft.

To Conclude

In conclusion, prioritising accessibility in web design is not only a legal and ethical imperative but also a strategic investment in creating digital experiences that are inclusive, user-friendly, and impactful. By adhering to WCAG 2.1 standards and embracing the principles of accessibility, we can ensure that the web remains a space that is accessible and welcoming to all.

If you’re interested in learning more about accessibility or want to take a step towards making your website accessible, please don’t hesitate to reach out.