Why you should take Web Accessibility seriously

Is your website optimized for Web Accessibility?

Imagine a world where you're limited to accessing only 10% of the entire internet. While this might sound like a distant scenario, it's the reality faced by 1.3 billion people worldwide (and more than 800k in Norway) who live with disabilities. For these users, accessing online content remains a challenge, largely due to the lack of web accessibility practices adopted by businesses and individuals alike.

In this article, our focus turns to understanding why accessibility is so important. It should help you to ensure your website is accessible to all as it's not just a moral imperative but also a strategic business decision. We'll explore the standards, principles, and tools that underpin web accessibility, while also providing practical steps you can take to make your website welcoming and functional for everyone.

What is Web Accessibility?

Web accessibility refers to the practice of designing and developing digital content - including websites, applications, and other online resources - in a way that ensures people with disabilities can perceive, interact with, and navigate them effectively.

This includes individuals with visual impairments who might use screen readers, those with mobility impairments who rely on keyboard navigation, and people with various cognitive disabilities who might require simplified interfaces.

In essence, web accessibility strives to ensure that the online experience is equally enriching and seamless for all users. Next to that, it promotes equal access, equal opportunity, and a more inclusive internet landscape.

Why is Web Accessibility important?

Web accessibility is far more than an ethical obligation, it carries legal weight and strategic advantages. 

If you are a private company operating in Norway, making your website accessible it's not just an option, but a legal mandate overseen by DIFI, represented by the Authority for Universal Design of ICT, which makes random controls, typically at large companies. 

Normally the report is published on the DIFI website, and the company gets a fix-list with a deadline. Failing to comply with their norms can finally lead to high fines. 

It was the case of SAS in 2018: DIFI identified numerous accessibility issues on their website. Given a ten-day deadline, not fixing these issues would result in fines of approximately 150,000 NOK per day.

From a competitive point of view, according to a study conducted by LevelAccess in 2021, 38.6% of employees reported that their product’s level of accessibility was called out as a reason for purchase by customers. At the same time, Gartner Research confirms that Digital products in full Web Content Accessibility Guidelines (WCAG) Level 2 compliance are expected to outperform their market competitors by 50% by 2023.

Nowadays, brands with inaccessible websites are failing to accommodate a growing portion of the population. The number of people living with disabilities is expected to grow considerably over the coming decades which will only give rise to more guidelines, legislation, and enforcement.

Accessibility Standards and Principles

So, what are the guidelines for a website to be accessible enough?

The Web Accessibility Initiative (WIP) of The World Wide Web Consortium (W3C) is responsible for publishing the Web Content Accessibility Guidelines (WCAG), a document that covers a wide range of recommendations for making Web content more accessible. These are organized under 4 principles, known as POUR, which include:

• Perceivable
  Most people use their eyes to look at things on the internet, but for those who can't, they might use their ears to listen or their hands to feel. Information must be detectable by users in ways they can perceive them.
  
  
• Operable
  All visitors must be able to utilize every part of the site’s functionality, from navigating a page to selecting a link from a menu, and more. These buttons and actions should work for everyone, including some people who might use their voice or special devices to make them work.
  
  
• Understandable
  Make it easy. Everything should be clear and consistent in the presentation and format, with predictable patterns of usage and design.
  
  
• Robust
  Content must be robust enough that it can be reliably interpreted by a wide variety of user agents, including assistive technologies.

Then, for each guideline, there are success criteria or standards which will tell you how much impact it has on accessibility.

Those are categorized into three levels: 

• A, it covers the most basic requirements of accessibility, failure to conform to this level will result in a completely inaccessible website.
  
  
• AA, in this level the biggest accessibility barriers are removed, normally it is the minimum level of conformance required by law,
  
  
• AAA, the highest and most difficult level for accessibility to reach by most sites.

How to Make Your Website Accessible

Creating an accessible website involves a series of practical steps, aimed at ensuring usability for everyone, regardless of their abilities. While these guidelines do not encompass every legal requirement, they offer a robust starting point for enhancing accessibility.

Keyboard Navigation, mainly for users relying on keyboards or screen readers.

• Press the Tab key repeatedly in order to test the functionality.
• Insert a shortcut link to the main content, like a “Skip to main content” hidden button.
• Ensure clear focus marking for all steps, especially during interface changes.
• Verify to have a logical Tab order and access to every link and form field.

Magnification and Responsive Design

• Enlarge content step by step (up to 200% or 400%) and check if it still is working and readable.
• Change browser window width to assess layout across all sizes.
• Test magnification on mobile devices with responsive layout.
  
  

Colors and Contrast

• Use tools like Colour Contrast Analyser (CCA) or the Inspect Element tool from your browser to check contrast ratios. The minimum requirement is 3:1 for large text and 4.5:1 for regular text.
• Confirm links are distinguishable regardless of color or lighting.
  
  

Headings

• Use proper headings, ordered and unordered list elements, and bold and italic text convey information, where needed.
• Ensure heading levels progress logically without skipping (from <h1> to <h6>).

Links, essentials for navigation and interaction.

• Links should be discernible regardless of color, lighting, or browser settings.
• Verify if links change appearance when hovered over with a mouse, confirming clickability.
• Ensure link text is descriptive and clearly indicates destination.
• Confirm that clicking the link takes users to a page with a matching heading.

Images and Videos

• Confirm images have alt attributes for context comprehension.
• Review the alt texts for all linked images and check whether they provide a good description of where the link leads.
• Avoid autoplay on videos

Forms

• Ensure form fields, radio buttons and checkboxes have visible labels.
• Validate proper linkage between form labels and fields.

Page Titles

• Confirm browser tabs display relevant content descriptions.
• Incorporate website/organization name in page titles.

Code Validation, crucial for compatibility across browsers and devices. Ensure:

• That all elements are correctly nested.
• That all elements are started and terminated correctly.
• That no elements have duplicate attributes.
• That no elements have identical values in their ID attribute.

How to test your website accessibility’s level

Even if evaluating your website's accessibility could involve in-depth expertise, there are effective tools and methods that can provide valuable insights into your site's accessibility level.

• Automated Testing Tools 
  Leverage automated tools like WAVE,  W3C HTML Validator and AChecker. These tools analyze your website and generate reports highlighting potential accessibility issues. Maybe they will not identify all issues, but they serve as a useful starting point.
  
  
• Manual Testing
  Navigate through your website using assistive technologies like screen readers (JAWS, NVDA) or VoiceOver to experience the user journey from a different perspective. If possible, involve individuals with disabilities in your testing process. Their feedback provides invaluable real-world insights, helping you address user-specific challenges.
  
  
• Browser Extensions
  Utilize browser extensions such as Axe DevTools and Lighthouse Accessibility Audit to assess specific elements like headings, links, and forms.
  
  

Conclusion

The journey to web accessibility begins with awareness, extends through action, and transforms into inclusion.

A key factor in achieving this transformation lies in choosing the right CMS. HubSpot stands out as a prime example, seamlessly integrating accessibility features like responsive design, alt text, structured content, and more. With HubSpot, creating an inclusive website becomes streamlined, aligning technology with inclusivity goals. Similar approaches can also be found in other CMS platforms, such as WordPress and Wix.

By understanding the importance of web accessibility and taking effective steps, you're not just improving your website, you're also contributing to a digital landscape where everyone is welcomed.