WCAG-Focused Accessible Web Development Training

Making the digital world more accessible for everyone has become one of the key agendas with the strengthening of legal standards and the vision of being more inclusive. At Binclusive, in addition to developing accessibility tools, we aim to train professionals who are experts in accessibility.This training provides a starting point for anyone who wants to develop accessible websites and applications.
‍
‍

What Will You Learn?

In this training, you will learn step by step the core principles of web accessibility and how to apply them. The content is based on the Web Content Accessibility Guidelines (WCAG) and is supported with practical exercises. The training modules include:

Introduction to Accessibility and Basic HTML Structures: We will discuss what accessibility means and why it matters. You will learn the WCAG principles and how to use semantic HTML effectively.
Text and Media Accessibility: Discover what you can do to make the texts, images, and videos on your website usable for everyone.
Interactive Components and Keyboard Accessibility: Learn how to ensure that interactive elements like forms, buttons, and menus work smoothly with a keyboard.
Color, Contrast, and ARIA Implementation: Understand the impact of color and contrast on accessibility, meet WCAG’s contrast requirements, and learn when and how to use ARIA.
Accessibility Testing and Advanced Topics: Explore how to test your pages with various tools, the importance of manual testing, and how responsive design contributes to accessibility.

Who Is This Training For?

This training is designed for professionals who want to enhance the accessibility of digital products. It will be particularly beneficial for:

Web Developers
Designers (UI/UX)
Product Designers
Product Managers

What Will You Gain?

By completing this training, you will not only expand your technical knowledge but also gain confidence in designing and developing more inclusive digital experiences for everyone. You will be able to create projects that comply with WCAG standards and easily identify and resolve accessibility issues.

Meet Our Trainers:

Our experienced trainers will guide you through this journey:

Bora Fırlangeç: Visually Impaired Web Developer, Accessibility Expert
Atakan Nalbant: Web Accessibility Expert, Binclusive Co-founder

Training Details:

Start Date: August 25
‍Fee: 18,000 TL
‍Early Bird Discount: 12,000 TL for registrations made before August 5.
We will contact you shortly regarding the payment details.
Students will be able to benefit from this training free of charge.

Hands-On Practices and Q&A Sessions:

At the end of each session, you will have the opportunity to practice what you have learned with hands-on exercises. Additionally, you can attend optional Q&A sessions at the end of each session to get answers to all your questions.

Training Content

Module 1: Introduction to Accessibility and Basic HTML Structures (4 Hours)

Introduction and Why Accessibility? What is Accessibility?
Why Should We Develop Accessible Web? (Legal, Ethical, Economic Benefits)
Disability Models (Medical, Social, Human Rights) and Web Accessibility
What is WCAG? (Overview of Principles: Perceivable, Operable, Understandable, Robust)*Introduction to HTML and Semantic Structure
What is HTML?
Basic HTML Document Structure (<html>, <head>, <body>)
Semantic HTML Usage (<header>, <footer>, <nav>, <main>, <article>, <section>, <aside>)
Heading Tags (<h1> to <h6>) and Hierarchy
Paragraph (<p>) and Text Formatting (<strong>, <em>)
Final Exercise: Participants will be asked to create a simple "About Us" and "Contact" page using semantic HTML tags (<header>, <main>, <footer>, <p>, <h1>–<h6>) with proper heading hierarchy.

Module 2: Text and Media Accessibility (4 Hours)

Text Accessibility, Link Texts (<a>) and Accessibility
List Elements (<ul>, <ol>, <li>), Tables (<table>, <thead>, <tbody>, <tr>, <th>, <td>) and Accessibility (Basic Tables)
Abbreviations (<abbr>) and Blockquotes (<blockquote>)
Visual and Auditory Media Accessibility
Alternative Texts (Alt Text) for Images (<img>)
Difference Between Informative and Decorative Images
Accessibility of Complex Images (e.g., charts)
Video and Audio Accessibility (Captions, Transcripts, Audio Descriptions)
Final Exercise: Participants will enhance the page created in Module 1 by adding meaningful links, lists (e.g., list of services), and at least one image with proper alt text and explanatory link descriptions.

Module 3: Interactive Elements and Keyboard Accessibility (4 Hours)

Introduction to Keyboard Accessibility
Why Keyboard Accessibility is Important?
Focus Management (tabindex usage and risks)
Focus Visibility (Focus Indicators)
Logical Tab Order
Skip Links
Form Accessibility
Form Labels (<label>) and Associations (for, id)
Buttons (<button>, <input type="submit">)
Validation and Error Messages
Field Groups (<fieldset>, <legend>)
Final Exercise: Participants will enhance the page from Module 2 by adding a contact form (name, email, message fields, and submit button). All fields must be correctly labeled and fully operable via keyboard with a logical focus order.

Module 4: Color, Contrast, and ARIA Implementations (4 Hours)

Color and Contrast Accessibility
Importance of Color Usage (Do not convey information by color alone)
WCAG Contrast Ratios (AA and AAA Levels)
Contrast Checking Tools
Awareness for Color Blindness in Visual Content
Introduction to ARIA and Basic Usage
What is ARIA? (Purpose and When to Use)
ARIA Roles (Examples: role="navigation", role="button")
ARIA Attributes (aria-label, aria-labelledby, aria-describedby, aria-haspopup)
ARIA States (aria-expanded, aria-hidden, aria-current)
“No ARIA is Better than Bad ARIA” Principle
Final Exercise: Participants will improve the Module 3 page for color and contrast accessibility, and add an interactive element (e.g., dropdown menu or tooltip) using proper ARIA attributes (aria-hidden, aria-expanded).

Module 5: Accessibility Testing and Advanced Topics (4 Hours)

Accessibility Testing Methods
Automated Tools like Binclusive
Manual Testing (Keyboard Navigation, Screen Reader Basics)
User Testing (Working with People with Disabilities)
Developer Tools for Accessibility Checks
Responsive Design and Accessibility
Impact of Responsive Design on Accessibility
Mobile Accessibility Considerations
Content Layout and Readability
Accessibility Trends and Future Directions
Final Exercise: Participants will review their entire page for accessibility from start to finish. They will use automated tools and manual testing (keyboard, screen readers) to identify and fix issues. Responsive design principles must also be applied to ensure mobile accessibility.

Your Cart