Essential Tools for Inclusive Coding
Hello everyone, I'm Scott Vinkle, a front end developer and accessibility advocate at Shopify.
During this 1-day workshop we'll be covering quite a few different topics. All of which will be focused on usability, accessibility, and inclusive thinking in design and development.
Essentially what we'll be discussing is common accessibility issues found in design and development, how they affect different user groups, and ways to overcome the barriers introduced for people with disabilities.
We'll also be fixing up a small blog website that is ripe full of accessibility issues! Throughout the day we'll be looking at various issues and ways to make sure the site is accessible and inclusive for everyone!
The topics we will discuss include:
- What is accessibility?
- Understanding Disabilities
- The four principles of accessibility
- Keyboard
- Semantic HTML
- Testing with screen readers
- Page title
- Page structure
- Image alt text
- Links vs Buttons
- Skip links
- Color contrast
- Forms
- Proximity/text zoom
- Responsive design
- Offscreen content
- Animation
- ARIA
- Dynamic components
For the workshop you'll need:
- A laptop running the latest macOS or Windows with your favorite browser and text editor installed
- If you are using a Windows computer, please install NVDA screen reader
- The demo site source files – unzipped and loaded in your editor
Some of the exercises will require:
- Knowledge of HTML and CSS
- Experience with JavaScript and jQuery
Before we get started, let's review this video on digital inclusion to help set the tone for the forthcoming content.
The key takeaway here is when we design and develop with an inclusive mindset, we can make any product work well for everyone, including people with disabilities.
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
— Tim Berners-Lee, W3C Director and inventor of the World Wide Web
This project and its source code is licensed under the MIT license.