Accessibility with GitHub Copilot Chat

Introduction

GitHub Copilot Chat is a powerful tool that can assist developers in achieving better accessibility in their web applications. By providing specific prompts and questions, developers can leverage the AI assistant to learn about accessibility, write code that adheres to accessibility standards, and gain insights into best practices for creating accessible elements such as tables and forms. This guide outlines the foundational prompt for using GitHub Copilot Chat for accessibility and provides examples of accessibility-related questions and results.

Foundational Accessibility Prompt

You can copy and paste the following prompt into GitHub Copilot Chat for Visual Studio Code:

"I need to learn about accessibility and need to write code that conforms with the WCAG 2.1 level A and AA success criteria defined at https://www.w3.org/TR/WCAG21/. When possible, please provide links and references for additional learning. This helps provide feedback to GitHub Copilot. Note: At any time you can ask GitHub Copilot if it’s still referencing the foundation prompt you provided, and it will inform you of its scope. I will use reputable sources for references and additional learning and ensure that the code suggestions I provide use semantic HTML, are operable using the keyboard, follow WCAG 2.1 sufficient techniques, and follow the ARIA Authoring Practices Guide and related design patterns. Repeating these prompts in your codebase may produce different results as GitHub Copilot can use context provided from open tabs and existing files in the codebase."

Accessibility Testing

Query input: "How can I test for web accessibility?"

GitHub Copilot response: Testing for web accessibility involves various methods and techniques. One important aspect is screen reader testing, which involves testing your website using a screen reader tool. Screen reader tests help evaluate the accessibility of your content for users who rely on assistive technologies. Additionally, you can refer to resources such as WebAIM's guide on testing, Mozilla's guide on accessibility testing, and IBM's Accessibility Checklist for more information on comprehensive accessibility testing.

Accessible Tables in HTML

Query input: "What are some best practices for creating accessible tables in HTML?"

GitHub Copilot response: Creating accessible tables in HTML involves several best practices. To start, use the <th> element for table headers. This allows screen readers to identify and announce the headers correctly. Additionally, use <caption>, <thead>, <tbody>, and <tfoot> elements to group different sections of the table. These elements can improve accessibility and provide structure to the table. Remember to use appropriate attributes such as scope and headers to establish relationships between table cells and headers.

Accessible Forms in HTML

Query input: "What are some best practices for creating accessible forms in HTML?"

GitHub Copilot response: Creating accessible forms in HTML requires following certain best practices. First, ensure that each form control has a corresponding <label> element to provide a clear label for users. This helps users understand the purpose of each form control. Additionally, make sure that all form controls and buttons can be accessed and used with the keyboard. This means adding appropriate tabindex values and handling keyboard events for navigation and interaction. It's also recommended to provide error messages and descriptions for form validation using ARIA attributes like aria-invalid and aria-describedby.

Keyboard Support in HTML

Query input: "What are some best practices for creating proper keyboard support in HTML?"

GitHub Copilot response: To create proper keyboard support in HTML, it's essential to use semantic HTML elements whenever possible. Semantic elements, such as <button>, <input>, and <a>, have built-in keyboard accessibility. They can receive focus and be interacted with using the keyboard without additional JavaScript or ARIA attributes. When adding custom interactive elements, ensure that they are focusable using the tabindex attribute and handle keyboard events for navigation and interaction. Remember to test your application using keyboard navigation to ensure a seamless user experience for keyboard-only users.

---

These examples demonstrate the effectiveness of using GitHub Copilot Chat as an AI assistant for accessibility. By providing specific prompts and questions, developers can rely on Copilot Chat to deliver code suggestions, best practices, and references for learning about accessibility. However, it's important to review and verify the information provided by Copilot Chat and ensure it aligns with reputable sources and standards.