Development
Last updated
Modern CSS Upgrades To Improve Accessibility | Modern CSS SolutionsModern CSS SolutionsLast updated
Study the Accessibility Features:
This is a comprehensive guide to understanding accessibility requirements of most common Front-End components.
By coding along with us in the Workshop, you'll:
Discover the field of web accessibility, and how to make websites and applications that everyone can use.
Learn how keyboard shortcuts and navigation can help power users and those with disabilities.
Make sure your website works well with screen readers and learn how to use them yourself!
Discover how using semantic HTML can work wonders in making your website accessible.
Explore how using WAI-ARIA can make even the most complex UI's fully accessible.
Marcy Sutton is a true thought leader in digital accessibility development. Sutton stays on top of the best practices and helps demonstrate that accessibility compliance can still exist while pushing the boundaries of software development.
She has a number of videos and resources available to the community:
In Google Chrome Developers “State of the Web” series, Marcy Sutton in her role of Head of Learning for Gatsby shares the what, why, and how about website accessibility. This is a great starter for anyone getting ready to explore the world of accessible development.
Marcy Sutton put together a 6-part Email Course delivered to your inbox. Participants will understand the testing process, how to document, plan, develop and conduct accessibility testing to ensure compliance. The list below is from one of her emails overviewing the course:
Semantics and ARIA.
Weave accessibility information into your pages and views that can inform assistive technologies and help users who utilize their voice to navigate or can't see the screen.
Interactions and mechanics.
Learn how to build accessible components that respond to user input and work well with keyboards, various screen readers, and other devices.
Design and visual contrast.
Uncover the areas to watch for in design for accessibility, so your CSS styling doesn't unwittingly present barriers to access for people with motion sensitivity, low vision, and more.
Accessibility tools and testing.
Learn common tools and processes for manual and automated testing, and catch accessibility problems before they ship to production.
People skills.
Accessibility is more successful when everyone on the team plays a part. Develop the skills to foster accessibility in a team or organization, and keep productive momentum.
Another gem from Marcy Sutton to support accessible JavaScript development! In her course description, she shares:
“This course will teach you to remove barriers to access that might prevent people with disabilities from using a modern JavaScript web application. We’ll study accessibility in UI components, primarily with React and Gatsby.js, but with knowledge applicable to all JavaScript-heavy web stacks. Debug your sites for accessibility, manage keyboard focus, announce live updates to the page to screen readers, and use manual and automated testing to gain web accessibility superpowers!”
https://frontendmasters.com/courses/javascript-accessibility/
Marcy Sutton does some ‘live coding’ to demonstrate how to integrate accessible development with JavaScrpt, HTML and CSS. Her course summary:
“It’s not a surprise: without a focus on accessibility throughout the web development process, people with disabilities are often left behind. Fortunately, there are techniques and tools that can help kick start the process. In this special live coding presentation from Deque Developer Advocate Marcy Sutton, you’ll learn hands-on skills for developing inclusively with JavaScript, HTML, and CSS.”
This is a great 1.5-hour introduction to Automated and Manual Testing. Marcy Sutton shares tools and techniques for automated testing and manual testing steps.
“Making websites accessible is a great way to make sure we’re always building great experiences for everyone. In this episode, Marcy Sutton (https://twitter.com/marcysutton) teaches us how to automate accessibility (a11y) testing, and walks through tools for manually checking the most critical sections of our apps.”
Gian Wild of Accessible Oz presents on Mobile Accessibility Testing as part of Inclusive Design24 Conference 2020
Accessibility is important to all – not everyone using your mobile app, device or wearable will be fully functioning: either because they have a disability or they are simply engaged elsewhere. Gian Wild, Chair of the Native App and Mobile Site Committees talks about the things that are essential to avoid when designing mobile apps, devices and wearables to ensure that everyone can use them. She talks about specific mobile accessibility features:
pinch zoom,
native screen readers,
haptic keyboard etc, and
system accessibility settings:
font size,
screen rotation,
high contrast etc.
The Native App and Mobile Site Testing Guidelines are provided.
June 2018
Hosted by Google Developer Group, “Accessibility (a11y) has been finding its stride in the web development community — and it’s not hard to figure out why. According to the World Health Organization, there are over one billion people globally who need an assistive device. With these statistics, organizations and open source projects alike realize that they could be unintentionally locking these people out of their products. As a result, they adjust their developer workflows. And it often ends there, at the product. Documentation is left out of the conversation. If documentation is meant to serve as a tool for learning and comprehension, then it must be included in those conversations. After all, we want to write docs that are truly for everyone — regardless of the technology they use to read it. In this talk, we’ll look at how assistive technology consumes documentation and cover some points to consider when building out your docs. Along the way, we’ll touch on quick regulation wins and inclusive writing practices.”
YouTube Channel: A11ycasts with Rob Dodson ~30 short videos that you can jump around
Many of the talks are hosted on the YouTube channel. A real treasure trove of accessibility topics:
Accessibility Linter for VSCode
