Gatsby A11y Workshop

screenshot of Gatsby A11y Workshop
gatsby
react
scss

Workshop on Building Accessible Sites with Gatsby

Overview

Building inclusive web applications is more important than ever, and with Gatsby and React.js, you have the tools necessary to create accessible digital experiences. This workshop, led by Marcy Sutton, the Head of Learning at Gatsby, equips participants with the knowledge and skills to seamlessly integrate accessibility into their web development workflow. Whether you're a seasoned developer or just getting started, you'll learn how to ensure that your sites are usable for everyone, including those with disabilities.

Throughout the workshop, you'll gain insights into various techniques, tools, and best practices to debug and enhance accessibility. Enabling a better user experience not only strengthens your application but also broadens your audience. Don't miss the chance to elevate your web development skills with a focus on accessibility!

Features

  • Accessibility Integration: Learn how to incorporate accessibility right from the start of your development workflow, ensuring that every aspect of your site is user-friendly.

  • Debugging Tools: Discover the latest tools to debug your applications for accessibility, helping you identify and fix issues effectively.

  • React Accessibility Techniques: Get hands-on experience applying accessibility best practices specifically tailored for React web applications with Gatsby.

  • Manual and Automated Testing: Understand the benefits of different testing methods to enhance your web accessibility skills, boosting your confidence in delivering accessible sites.

  • Focus Management: Implement focus management techniques within your applications, which are crucial for keyboard and screen reader interactions.

  • Dynamic Announcements: Practice coding techniques that allow for notifying screen reader users about changes in the view, ensuring they stay informed.

  • Semantic Markup and Progressive Enhancement: Achieve a well-structured site using semantic markup and unobtrusive animations that conform to principles of progressive enhancement.

gatsby
Gatsby

GatsbyJS is a free and open-source static site generator based on React. It uses a modern development stack including Webpack, GraphQL, and modern JavaScript and CSS frameworks. It also provides a rich set of plugins, starters, and themes.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

github-pages
GitHub Pages

Gridsome is a Vue.js-based static site generator that makes it easy to build fast and flexible websites and applications by leveraging modern web technologies like GraphQL, Webpack, and hot reloading