BCS - Web Accessibility and WCAG

What is Web Accessibility?

Web accessibility refers to the inclusive practice of designing and developing websites and web applications in a way that ensures equal access and usability for people of all abilities, including those with disabilities. The goal of web accessibility is to make online content and services accessible to everyone, regardless of their physical or cognitive abilities.

Why is it important?

The Ethical Angle

The BCS Code of Conduct emphasizes the ethical responsibilities of IT professionals. In the context of web accessibility, it aligns with the ethical principle of ensuring the well-being of individuals and promoting inclusivity. By adhering to web accessibility standards, IT professionals contribute to creating a digital environment that is accessible to all, irrespective of their abilities. Failing to prioritize accessibility could be considered a violation of the BCS Code of Conduct, specifically in relation to promoting the public good, avoiding harm, and respecting the rights of others.

Example: Suppose a software developer is tasked with creating a website for a government agency. Ignoring web accessibility guidelines would hinder citizens with disabilities from accessing crucial information or services online, potentially violating the ethical principles outlined in the BCS Code of Conduct.

The Legal Perspective

The UK Equality Act 2010 prohibits discrimination on the grounds of disability, and this extends to digital services. From a legal standpoint, organizations must ensure their websites and online services are accessible to individuals with disabilities. Failure to comply may result in legal consequences, including fines and reputational damage. Internationally, several laws such as the Americans with Disabilities Act (ADA) in the United States emphasize web accessibility.

Example: A retail company operating in the UK that maintains an e-commerce website must ensure the site is accessible to customers with disabilities. Failure to do so could lead to legal action under the UK Equality Act, potentially resulting in financial penalties and damage to the company’s reputation.

Business Point of View

From a business perspective, web accessibility is a strategic advantage. Accessible websites cater to a broader audience, including individuals with disabilities, who represent a significant market. Moreover, accessible websites enhance the user experience for all users, potentially increasing customer satisfaction and loyalty. Failure to prioritize web accessibility may lead to missed business opportunities, negative publicity, and a diminished brand image.

Example: An online streaming service that ensures its platform is accessible to users with visual or hearing impairments not only complies with legal requirements but also attracts a larger customer base. This inclusivity can positively impact the company’s brand perception and financial success.

How web accessibility can be achieved?

  • Use clear and simple language in your website content.
  • Provide detailed and meaningful descriptions for images, so people using screen readers can understand them.
  • Organize your website in a logical and consistent manner. Use headings and subheadings to create a clear hierarchy of information. Ensure that users can navigate through your website using only a keyboard.
  • Use a readable font and ensure there is enough contrast between the text and background colors. Allow users to resize text without losing functionality or readability.
  • Design forms that are easy to understand and fill out. Provide clear instructions and error messages. Ensure users can navigate and complete forms using only a keyboard.
  • Provide captions and transcripts for videos to make content accessible to users with hearing impairments. Ensure that any interactive elements, like sliders or buttons, are usable with a keyboard.
  • Keep a consistent layout throughout your website to help users understand how to navigate.
  • Regularly test your website with people who have different abilities. Collect feedback and make necessary improvements based on their experiences.

WCAG (Web Content Accessibility Guidelines)

WCAG, or Web Content Accessibility Guidelines, is a set of guidelines developed by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C). They are designed to make web content more accessible to people with disabilities. WCAG is organized around four core principles, often referred to as POUR:

  • Perceivable: Information and user interface components must be presentable to users in ways they can perceive.
  • Operable: User interface components and navigation must be operable.
  • Understandable: Information and the operation of the user interface must be understandable.
  • Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

Achieving WCAG

Provide Text Alternatives (Perceivable):

Add descriptive alt text to images. Use the alt attribute in HTML for images.

<img src=”example.jpg” alt=”A descriptive text about the image”>

Keyboard Accessibility (Operable):

Ensure all interactive elements can be operated using a keyboard. Use the tabindex attribute to specify the order in which elements receive focus.

<button tabindex=”0″>Click me</button>

Use Semantic HTML (Understandable):

Use proper HTML elements to convey the structure of your content. For headings, use <h1>, <h2>, etc.

<h1>Main Heading</h1>


Provide Captions and Transcripts (Perceivable):

Include captions for multimedia content. Provide transcripts for audio content.

<video controls>

   <source src=”example.mp4″ type=”video/mp4″>

   <track kind=”captions” label=”English” src=”captions.vtt” default>


Ensure Color Contrast (Perceivable):

Maintain sufficient contrast between text and background colors.

body {   color: #333;   background-color: #fff; }

Responsive Design (Operable):

Design your website to be responsive and work on various devices. Use media queries in CSS for responsive design.

@media screen and (max-width: 600px) {

   /* Styles for smaller screens */


Avoid Flashing Content (Operable):

Minimize or eliminate content that flashes or moves excessively.

@keyframes flash {

   0% { opacity: 1; }

   50% { opacity: 0; }

   100% { opacity: 1; }


.flashing-element {   animation: flash 2s infinite;}

WCAG for Visually Impaired/Blind Users:

Text Alternatives (Guideline 1.1): Provide text alternatives for non-text content. This is crucial for users who rely on screen readers.

<img src=”example.jpg” alt=”A person using a screen reader to access web content”>

Semantic Structure (Guideline 1.3): Use proper HTML elements to convey the structure of content. Screen readers rely on these to provide a meaningful reading order.

<h1>Main Heading</h1>

<p>This is a paragraph of text.</p>

WCAG for Users with Hearing Difficulties

Captions and Transcripts (Guideline 1.2): Provide captions for multimedia content to assist users who are deaf or hard of hearing. Transcripts offer an alternative for understanding audio content.

<video controls>

<source src=”example.mp4″ type=”video/mp4″>

<track kind=”captions” label=”English” src=”captions.vtt” default>


Users with Motion Problems:

Operable with Keyboard (Guideline 2.1): Ensure that all interactive elements can be operated using a keyboard. This helps users with motion impairments who may use alternative input methods.

<button tabindex=”0″>Click me</button>

Avoiding Time Limits (Guideline 2.2): Provide options for users to adjust or disable time limits on content. Some users with motion difficulties may require more time to complete tasks.

Users with Cognitive or Neurological Disabilities:

Readable Text (Guideline 1.4): Ensure text is readable and can be resized without losing functionality. Users with cognitive disabilities may benefit from clear and simple language.

body {

font-size: 16px;

line-height: 1.5;


Consistent Navigation (Guideline 2.4): Maintain a consistent layout and navigation structure. Predictable navigation aids users with cognitive disabilities in understanding and interacting with the content.

Conclusion and Future Developments

In conclusion, web accessibility is a critical aspect of designing and developing digital content that ensures equal access and usability for people of all abilities. From ethical and legal perspectives, adherence to accessibility standards, such as the Web Content Accessibility Guidelines (WCAG), is not only a moral obligation but also a legal requirement in many jurisdictions. Businesses benefit by reaching a wider audience and enhancing user satisfaction, contributing to a more inclusive online environment.

Looking ahead, the future developments in web accessibility may witness advancements driven by emerging technologies, including AI. Artificial Intelligence has the potential to play a transformative role in automating certain aspects of accessibility testing, offering more efficient and accurate solutions. Machine learning algorithms can aid in the identification and resolution of accessibility issues, making the web more inclusive.

Moreover, the integration of voice interfaces, natural language processing, and AI-driven personalization could enhance the accessibility of digital interfaces for users with various disabilities. Ultimately, the future of web accessibility lies in leveraging innovative technologies to create a more equitable online experience for users of all abilities.


Active Learning Team, Jan 2024