Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications

Rate this content
Bookmark

In this hands-on workshop, we’ll equip you with the tools and techniques you need to create accessible web applications. We’ll explore the principles of inclusive design and learn how to test our websites using assistive technology to ensure that they work for everyone.


We’ll cover topics such as semantic markup, ARIA roles, accessible forms, and navigation, and then dive into coding exercises where you’ll get to apply what you’ve learned. We’ll use automated testing tools to validate our work and ensure that we meet accessibility standards.


By the end of this workshop, you’ll be equipped with the knowledge and skills to create accessible websites that work for everyone, and you’ll have hands-on experience using the latest techniques and tools for inclusive design and testing. Join us for this awesome coding workshop and become a ninja in web accessibility and inclusive design!

This workshop has been presented at React Summit 2023, check out the latest edition of this React Conference.

FAQ

Web accessibility ensures that everyone, including people with disabilities, can use web applications and websites. It promotes equal opportunities and prevents exclusion in our increasingly digital world.

You can test your website for accessibility issues using tools like screen readers, keyboard navigation, and automated testing tools such as Google Lighthouse. Manual testing by navigating your site without a mouse is also recommended.

A screen reader reads out loud the content of a website, helping users with vision impairments to navigate and interact with the site. It can describe elements on the page and provide instructions for interacting with them.

Keyboard navigation is crucial for users who cannot use a mouse due to physical disabilities. Ensuring that all interactive elements can be accessed and operated using a keyboard is a key aspect of web accessibility.

Good color contrast ensures that text and interactive elements are distinguishable for users with vision impairments, including color blindness. Poor contrast can make content difficult to read and interact with.

To make a button accessible, ensure it can be focused using the keyboard, has a clear and visible focus indication, and can be activated using both the Enter and Space keys. Use semantic HTML elements like <button> whenever possible.

The aria-label attribute provides an accessible name for elements, helping screen readers convey the purpose of elements that might not have visible text, such as icons or custom controls.

Semantic HTML provides built-in accessibility features. For example, using <button> instead of a generic <div> ensures that the element is recognized as a button by assistive technologies and supports keyboard interactions by default.

To ensure ongoing accessibility, use accessible component libraries, integrate automated accessibility testing into your CI/CD pipeline, and regularly review and update your site for accessibility compliance. Incorporate accessibility considerations in all phases of development.

In many regions, including the EU and the US, there are legal requirements for web accessibility. Non-compliance can result in lawsuits and significant financial penalties, along with damage to reputation.

Asaf Shochet Avida
Asaf Shochet Avida
Eitan Noy
Eitan Noy
109 min
20 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This workshop focuses on web accessibility and the importance of making digital products accessible. It covers topics such as testing tools, identifying focus in web development, fixing focus indication issues, and making buttons accessible. The workshop also explores zoom and accessibility, using Lighthouse for accessibility testing, and fixing accessibility issues with screen readers. It emphasizes the importance of incorporating accessibility into the development process and the benefits of team diversity in improving accessibility.
Video transcription and chapters available for users with access.