InteractAble

Preface

This site serves as a proof-of-concept learning resource for web accessibility principles, created during a web design course. It may not adhere to best practices and could contain outdated or potentially invalid information.

If you'd like to contribute to developing this project beyond a proof of concept, please get in touch or open a pull request on GitHub.

Learn Web Accessibility with InteractAble

Welcome to InteractAble, a resource focused on introducing web accessibility concepts. InteractAble is designed to help people intuitively understand web accessibility principles. The four key web accessibility principles set out by the World Wide Web Consortium’s Web Accessibility Initiative are Perceivable, Operable, Understandable, and Robust. Following these principles serve as the foundation for creating inclusive websites. See below for a summary of the key considerations under each principle and links to interactive examples.

Perceivable explores the impact of text size and contrast on the readability of text-based content on websites. We also introduce alternative text, which enables defining a written description of graphical content on webpages, allowing users who cannot see the content to still understand its purpose.

Operable focuses on enabling a diverse range of interaction methods. One consideration is tab order and keyboard shortcuts, accommodating users who might require or prefer interacting with page content without the use of a mouse cursor. The idea of motion sensitivity and the importance of reduced motion options is also introduced.

Understandable covers the importance of conveying information in a clear and concise way, such that it is inclusive of the widest audience possible. The need for consistency in webpage structure and user interface interactions is also addressed.

Robust highlights the importance of ensuring compatibility with a variety of web browsers and alternative user agents. We also demonstrate a basic screen reader and show the importance of correct page structure and metadata when supporting screen readers.