Digital Web Accessibility: Why Not to Ignore It and How to Implement It

Introduction

The internet is today a fundamental communication platform and source of information for billions of people worldwide. However, many websites remain inaccessible to a significant portion of the population – people with disabilities. According to the World Health Organization (WHO), approximately 1.3 billion people worldwide live with some form of disability, representing more than 16% of the global population.

Despite these numbers, surveys show that more than 70% of websites do not meet basic digital accessibility standards. As a result, millions of people cannot fully utilize digital services, shop online, or access important information. This creates not only an ethical problem but also a significant business opportunity for organizations that decide to address this issue.

"The internet changed the world mainly because it made information accessible to everyone without discrimination. But if we don't create accessible solutions, we're denying this vision," says Tim Berners-Lee, inventor of the World Wide Web and director of the W3C consortium, which is behind the development of accessibility standards.

In this article, you'll learn why digital accessibility is crucial not only from a social responsibility perspective but also from a business strategy viewpoint. We'll guide you through current standards, the latest research, and practical steps you can immediately implement to improve your website's accessibility.

What is digital accessibility and why is it important?

Digital accessibility (web accessibility) means creating websites and applications so that they can be used by all people regardless of their abilities or health limitations. This includes people with visual, hearing, motor, cognitive, or neurological disabilities.

However, it's not just about people with permanent disabilities. Web accessibility is also important for:

• Seniors with age-related limitations
• People with temporary limitations (e.g., broken arm, lost glasses)
• Users in situational limitations (e.g., bright light, noisy environment)
• People with slow internet connections
• Mobile device users
• People with low computer literacy

Accessibility is often incorrectly perceived as concerning only a small portion of the population. In reality, however, each of us may at some point in life experience temporary or situational limitations that affect our ability to use digital technologies. Accessible websites are simply better websites for all users.

Key reasons to address accessibility:

1. Expanding user base – An accessible website can reach up to 20% more potential customers or users. According to a 2023 Accenture study, people with disabilities and their families have a global purchasing power of more than 8 trillion dollars annually.

2. Legal requirements – In many countries including the EU (directive 2016/2102) and USA (Section 508, ADA), legislation exists requiring accessibility of public institution websites and in some cases commercial entities. In the USA alone, over 11,000 lawsuits related to inaccessible websites were filed in 2023.

3. Better SEO – Many accessibility principles overlap with best practices for search engine optimization. Structured headings, text alternatives for images, and video transcripts help search engines better understand your website content.

4. Brand strengthening – Accessibility demonstrates social responsibility and an organization's inclusive approach. According to a Deloitte survey, 78% of consumers prefer brands that demonstrate a commitment to inclusion and diversity.

5. Improved user experience for everyone – Accessibility principles usually improve website usability for all users, not just those with disabilities. Clear headings, consistent navigation, and understandable content improve user experience regardless of abilities.

6. Technological innovation – Many popular technologies, such as voice assistants or automatic transcriptions, originally emerged as assistive technologies for people with disabilities. Accessible design often leads to innovations that everyone eventually uses.

Research and statistics about users with disabilities

Current research clearly confirms the importance of accessibility:

• According to the WebAIM Million study from 2023, 96.3% of homepages of the most visited websites contain at least one accessibility error according to WCAG standards. The average number of errors per homepage is an alarming 50.8.

• The Click-Away Pound research showed that 71% of users with disabilities abandon an inaccessible website and never return. This causes British companies to lose potential revenue of approximately 17.6 billion pounds annually.

• A total of 83% of users with visual impairments use assistive technologies such as screen readers, which require properly structured content. The most used screen readers are JAWS, NVDA, and VoiceOver.

• A Pew Research Center study found that people with disabilities are 40% less likely to be internet users than people without disabilities, with the main barrier being website inaccessibility.

• According to Microsoft data, up to 61.7% of website visitors use some accessibility feature, underlining the fact that accessibility benefits a much broader audience than just people with diagnosed disabilities.

• Google/Fable research from 2023 showed that users with disabilities are 50% more loyal to brands that provide them with fully accessible digital experiences.

Return on investment in accessibility

Economic data shows that investment in accessibility pays off:

• The average cost of implementing accessibility during website development represents only 1-3% of the total project budget.
• Additional modifications to an existing website are 2-3× more expensive than implementing accessibility from the beginning.
• Accessible websites have on average 15-35% better conversion rates across all users.
• Defense costs against one accessibility-related lawsuit in the USA range between $10,000 to $50,000, even in out-of-court settlements.

W3C standards for accessibility

The World Wide Web Consortium (W3C) has developed a comprehensive set of guidelines known as Web Content Accessibility Guidelines (WCAG). The current version WCAG 2.2 (released in 2023) establishes principles and specific success criteria for accessible websites. These guidelines are organized around four basic principles:

1. Perceivable

Information and user interface components must be presented in ways that users can perceive.

Implementation examples:

• Providing text alternatives for non-text content (e.g., alt texts for images)
• Offering captions and transcripts for audio and video content
• Ensuring sufficient contrast between text and background (minimum 4.5:1 for regular text and 3:1 for large text)
• Allowing text resizing without loss of functionality (up to 200%)
• Not using color as the only visual means of conveying information
• Providing alternatives for time-dependent media
• Creating content that can be presented in different ways without losing information or structure

Common mistakes:

• Images without alt texts or with generic descriptions like "image.jpg"
• Videos without captions or audio descriptions
• Low color contrast, especially gray text on white background
• Infographics without text alternatives explaining contained information

2. Operable

User interface components and navigation must be operable.

Implementation examples:

• Ensuring all functionality is accessible from keyboard without specific timing requirements
• Providing sufficient time for reading and using content
• Avoiding content that can cause seizures or physical reactions
• Implementing clear navigation and search
• Using descriptive page titles and links
• Ensuring visible focus indicator when navigating by keyboard
• Implementing multiple ways to find a page within the website
• Organizing headings and labels to describe topic or purpose

Common mistakes:

• Controls responding only to mouse (e.g., dropdown menus working only on hover)
• Form time limits without extension option
• Automatically playing animations or videos with flashing content
• Links with generic texts like "click here" or "more"

3. Understandable

Information and user interface operation must be understandable.

Implementation examples:

• Using clear and simple language (high school level understanding for general content)
• Consistent functionality of website components
• Helping users avoid and correct errors
• Providing context and orientation
• Predictable behavior when interacting with page elements
• Automatic detection and correction suggestions for incorrect input
• Providing descriptive labels, instructions, and help for user input

Common mistakes:

• Using technical jargon without explanation
• Inconsistent navigation between pages
• Error messages that don't identify the problem
• Automatic redirects or context changes without warning

4. Robust

Content must be robust enough to be reliably interpreted by a wide variety of user agents, including assistive technologies.

Implementation examples:

• Using valid HTML with correct semantics
• Ensuring proper labeling of form elements using labels
• Implementing ARIA (Accessible Rich Internet Applications) attributes where needed
• Providing name, role, and value for non-standard user interface components
• Compatibility with current and future user agents including assistive technologies

Common mistakes:

• Invalid HTML code
• Missing or incorrectly connected form labels
• Incorrect use of ARIA attributes, which can cause more problems than benefits
• JavaScript functions without alternatives for users who cannot use JavaScript

WCAG conformance levels

WCAG defines three conformance levels:

• Level A: Basic level of accessibility, minimum requirements
• Level AA: Medium level, removes significant barriers, commonly required by legislation (e.g., in EU)
• Level AAA: Highest level of accessibility, for specialized websites

For most websites, the target level is AA, which provides a good balance between accessibility and implementation complexity.

Practical steps for implementing accessibility

Implementing digital accessibility doesn't have to be complicated or expensive if it's included in the development process from the beginning. The following steps will help you systematically improve your website's accessibility:

1. Accessibility audit of your website

The first step is to determine the current state of your website's accessibility. You can use:

• Automated tools:

  • WAVE - comprehensive accessibility analysis
  • Axe - popular tool for developers
  • Lighthouse - part of Google Chrome developer tools
  • Google Accessibility Scanner - for mobile applications

• Manual checking using WCAG checklist:

  • Navigate the website without a mouse, using only keyboard
  • Try navigation using a screen reader
  • Check heading hierarchy and document structure
  • Verify color contrast of all text elements

• User testing with people using assistive technologies:

  • Recruit real users with various types of disabilities
  • Give them typical tasks on your website
  • Observe where they encounter problems
  • Get feedback on their overall impression

2. Implementing basic accessibility elements

Structured content and semantic HTML

Use proper HTML elements according to their meaning, not visual style:

<!-- Instead of just -->
<div class="heading">Important information</div>

<!-- Use -->
<h2>Important information</h2>

Properly structure the document using heading hierarchy:

<h1>Main page topic</h1>
<section>
  <h2>Subtopic 1</h2>
  <p>Text related to subtopic 1...</p>
  
  <h3>Detail of subtopic 1</h3>
  <p>More details...</p>
</section>

<section>
  <h2>Subtopic 2</h2>
  <p>Text related to subtopic 2...</p>
</section>

Use HTML5 semantic elements:

<header>
  <nav>
    <!-- Navigation menu -->
  </nav>
</header>

<main>
  <article>
    <!-- Main content -->
  </article>
  
  <aside>
    <!-- Supplementary information -->
  </aside>
</main>

<footer>
  <!-- Page footer -->
</footer>

Text alternatives and multimedia

Provide alt texts appropriate to the image's purpose:

<!-- Informational image -->
<img src="results-chart.jpg" alt="Chart showing 30% increase in website traffic in 2025 compared to previous year" />

<!-- Decorative image that carries no informational value -->
<img src="decorative-line.jpg" alt="" />

<!-- Image that is a link -->
<a href="chart-details.html">
  <img src="chart-preview.jpg" alt="Detailed traffic analysis - go to detailed page" />
</a>

For video and audio content:

<video controls>
  <source src="presentation.mp4" type="video/mp4">
  <track kind="captions" src="presentation.vtt" srclang="en" label="English">
  <track kind="descriptions" src="presentation-description.vtt" srclang="en" label="Audio description">
  <p>Your browser doesn't support video. <a href="presentation.mp4">Download the video</a> or read the <a href="transcript.html">text transcript</a>.</p>
</video>

Accessible forms

Basic rules for accessible forms:

<!-- Connecting label with form element -->
<div class="form-group">
  <label for="email">Email address:</label>
  <input type="email" id="email" name="email" aria-required="true" />
  <p id="email-help" class="form-hint">Enter email in format [email protected]</p>
  <p id="email-error" class="error" aria-live="polite"></p>
</div>

<!-- Grouping related elements -->
<fieldset>
  <legend>Contact preferences</legend>
  
  <div>
    <input type="checkbox" id="contact-email" name="contact" value="email">
    <label for="contact-email">Email</label>
  </div>
  
  <div>
    <input type="checkbox" id="contact-phone" name="contact" value="phone">
    <label for="contact-phone">Phone</label>
  </div>
</fieldset>

<!-- Marking required fields -->
<label for="name">Name <span aria-hidden="true">*</span><span class="sr-only">required</span></label>
<input type="text" id="name" name="name" required aria-required="true" />

Keyboard accessibility

Ensure all interactive elements are keyboard operable:

// Ensure all interactive elements are keyboard operable
document.getElementById('toggleButton').addEventListener('keydown', function(e) {
  if (e.key === 'Enter' || e.key === ' ') {
    // Activate button function
    toggleFunction();
    e.preventDefault();
  }
});

// Properly implement custom components with keyboard control
class AccessibleDropdown {
  constructor(element) {
    this.dropdown = element;
    this.button = element.querySelector('.dropdown-toggle');
    this.menu = element.querySelector('.dropdown-menu');
    this.menuItems = element.querySelectorAll('.dropdown-item');
    
    this.button.addEventListener('click', () => this.toggleMenu());
    this.button.addEventListener('keydown', (e) => this.handleButtonKeydown(e));
    
    this.menuItems.forEach(item => {
      item.addEventListener('keydown', (e) => this.handleItemKeydown(e));
    });
    
    // Additional implementation...
  }
  
  // Methods for controlling dropdown menu with keyboard
}

3. Advanced techniques and testing

Testing with screen readers

Learn the basics of working with at least one screen reader:

• NVDA (free, Windows) - uses keyboard shortcuts like Insert+arrows for navigation
• JAWS (paid, Windows) - industry standard used by many professionals
• VoiceOver (free, macOS/iOS) - integrated in Apple products
• TalkBack (free, Android) - for testing mobile pages

When testing, focus on:

• Logical sequence of content when read
• Proper announcement of headings, lists, and tables
• Notification of state changes (e.g., when popup appears)
• Understandability of forms and error messages

Testing without mouse

Navigate the website using only keyboard:

• Tab to move to next element
• Shift+Tab to return to previous element
• Enter or spacebar to activate buttons
• Arrow keys for navigation in dropdown menus

Check:

• Visibility of focus indicator (where you currently are)
• Accessibility of all controls and functions
• Logical navigation order
• Ability to skip repetitive navigation blocks

Testing in high contrast mode

Windows includes a high contrast mode that you can activate using Alt+Shift+PrtScn. Check that:

• All texts remain readable
• Important information is not lost
• Form elements are visible and usable
• Icons and buttons are recognizable

Implementing ARIA patterns for complex components

ARIA (Accessible Rich Internet Applications) is a set of attributes that enables creating accessible advanced components:

<!-- Example of accessible modal dialog -->
<div id="dialog" role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-desc" aria-modal="true">
  <h2 id="dialog-title">Order confirmation</h2>
  <p id="dialog-desc">Please check cart contents before completing the order.</p>
  
  <!-- Dialog content -->
  
  <button id="confirm-button">Confirm</button>
  <button id="cancel-button">Cancel</button>
</div>

For complex interactive components, there are patterns you can follow:

• WAI-ARIA Authoring Practices
• ARIA Design Patterns Examples

4. Creating an accessibility statement

Transparently communicate about your website's accessibility status through a public statement. This statement should include:

• Accessibility commitment: Declaration of your stance on digital accessibility
• Conformance level: What WCAG level (A, AA, AAA) your website aims for or achieves
• Known issues: List of known accessibility barriers you're working on
• Alternative methods: How users can access content or services if they cannot use some parts of the website
• Contact information: How users can report accessibility problems
• Last update date: When the statement was last revised

You can find an accessibility statement template on the W3C website.

Case studies and examples of good practice

Let's look at several organizations that excel in digital accessibility and what results this approach has brought them:

Example 1: Government portal GOV.UK

The British government website GOV.UK is considered the gold standard of web accessibility. It uses:

• Simple, clear, and understandable texts written in "plain English" format
• Consistent navigation and design across all services
• Detailed testing with real users with various disabilities
• Regular accessibility audits and publication of results
• Open documentation on how the team solves accessibility problems

Results:

• 98% higher user satisfaction compared to previous government websites
• Savings of approximately 70 million pounds annually due to process simplification
• 40% reduction in support phone calls

Example 2: Apple.com

Apple implements accessibility as a key value of its brand:

• High contrast and clean interface without visual clutter
• Detailed text alternatives for all product images
• Accessible media players with captions and audio descriptions
• Full keyboard navigation and screen reader support
• Integration of accessibility into all products and services

Results:

• Loyal customer base among people with disabilities
• Positive brand perception as inclusive and progressive
• Innovation in assistive technologies that subsequently became common features (e.g., Siri)

Example 3: BBC.com

BBC developed its own accessibility standards called BBC Accessibility Standards:

• Captions for 100% of video content
• Audio descriptions for most dramatic productions
• Accessible iPlayer with keyboard and screen reader support
• "Easy Read" versions of important news and information
• Extensive user testing with various user groups

Results:

• Audience expansion by millions of users with various needs
• 25% increase in time spent on the website across all demographic groups
• Improved user experience also for mobile users

Example 4: Czech Savings Bank

Czech Savings Bank implemented a comprehensive digital accessibility strategy for its websites and mobile applications:

• Accessible internet banking tested with visually impaired users
• Simple language and understandable instructions for all banking operations
• Barrier-free branches and ATMs with voice output
• Regular staff training in communicating with people with disabilities

Results:

• 43% increase in satisfaction among customers with disabilities
• Award for social responsibility
• Increased customer loyalty across all segments

Conclusion and summary

Digital accessibility is not just a technical requirement or legal necessity – it's the right approach that expands your website's reach and improves user experience for everyone. Implementing accessibility principles from the beginning of a project is significantly more efficient than additional modifications.

A barrier-free web is a fundamental right and also a smart business strategy. In a digital world where competition is just one click away, an accessible website can represent a significant competitive advantage. Moreover, many accessibility solutions improve user experience for all visitors, not just those with disabilities.

Key takeaways:

1. Accessibility has significant business benefits and is not just about meeting legal requirements. It represents access to more than a billion potential customers worldwide.

2. Gradual improvement is better than doing nothing – start with basic accessibility elements like text alternatives, proper heading structure, and keyboard accessibility.

3. Test with real users, not just automated tools. Real users with various disabilities will provide invaluable feedback.

4. Accessibility is a continuous process, not a one-time project. Technology and standards evolve, and so should your approach to accessibility.

5. Document your approach to accessibility through a public statement and communicate your commitment to inclusivity.

6. Educate your team about accessibility principles – every team member, from designers through developers to content specialists, plays an important role.

7. Use semantic HTML code as the foundation of accessibility – proper document structure is the basis on which all other improvements stand.

8. Don't forget mobile devices – many users with disabilities use mobile platforms precisely because of their built-in assistive technologies.

Investment in digital accessibility pays off from both social responsibility and business results perspectives. Start today – your users will appreciate it.

Useful resources

• Web Content Accessibility Guidelines (WCAG) 2.2
• Web Accessibility Initiative (WAI)
• A11Y Project
• WebAIM
• MDN Web Docs: Accessibility
• Axe DevTools - accessibility testing toolkit
• Colour Contrast Analyzer - contrast checking tool
• W3C Web Accessibility Tutorials - practical implementation examples
• Accessible Rich Internet Applications (WAI-ARIA) - specification for accessible web applications
• Inclusive Design Principles - inclusive design principles
• Wave Web Accessibility Evaluation Tool - online accessibility checking tool
• Google Lighthouse - integrated tool for web audit including accessibility