#accessibility

Subscribe
Accessibility in JavaScript refers to the ability of a website or application to be used by people with disabilities. This includes providing features such as support for keyboard navigation, alternative text for images, and high-contrast color schemes. Accessible JavaScript also means that code is written in a way that can be understood and used by all users, regardless of their disability.
Accessibility at Discord
React Advanced Conference 2021React Advanced Conference 2021
22 min
Accessibility at Discord
This Talk discusses the accessibility efforts at Discord, focusing on keyboard navigation and the challenges faced with implementing focus rings and outlines. The speaker showcases a unified focus ring system and a saturation slider to address accessibility concerns. They also highlight the implementation of role colors and the use of CSS filters for accessibility improvements. The Talk concludes with insights on runtime accessibility checking and the development of a performant core runtime system for checking accessibility issues.
Accessibility in 2024
React Summit 2024React Summit 2024
23 min
Accessibility in 2024
Chandra Carney discusses accessibility in 2024, highlighting the importance of equal access for disabled people and the evolving view of disabilities as civil rights. The talk covers the global accessibility standard WCAG, with versions 2.0, 2.1, and 2.2, and the European standard EN 301549. Updates to laws such as the ADA in the US and the Web Accessibility Directive and European Accessibility Act in the EU are also discussed. The EU reinforces the importance of inclusion and holds businesses accountable for accessibility. Proactive accessibility is emphasized as a requirement and everyone's responsibility.
Nested Interactive Elements: A Nightmare in Accessibility
React Summit 2024React Summit 2024
9 min
Nested Interactive Elements: A Nightmare in Accessibility
Nested Interactive Elements in Nightmare Accessibility can cause issues with screen readers and other assistive tools, making it difficult for users to interact with websites. Mitigation strategies include unnesting elements, using CSS overlay, and being cautious when modifying roles. It is recommended to involve users of assistive tools in focus groups and share solutions online.
Ethically Wired: Computer Ethics for Technologists
JSNation 2024JSNation 2024
9 min
Ethically Wired: Computer Ethics for Technologists
Computer ethics is the set of agreed upon principles that govern the use of technology, and integrating ethical frameworks into the decision-making process reflects a commitment to fostering a compassionate technological landscape. Incorporating ethics early in the product development cycle can avoid exclusions and financial losses, and can be done through premortems and check-ins. Promoting proactive inclusivity involves validating and prioritizing goals, conducting user testing, and following the Association for Computing Machinery's Code of Ethics. Additional resources include books on computer ethics and the Design Justice Network.
Explain Like I’m Your Manager: Digital Accessibility
JSNation 2024JSNation 2024
20 min
Explain Like I’m Your Manager: Digital Accessibility
Experience the challenges faced by visually impaired people and optimize user experiences for different viewports. Understand the importance of digital accessibility and its benefits for businesses. Learn about the obligations for businesses to deliver accessible features and the correlation between accessibility and organic reach in search engines. Discover the three fundamental steps to work on accessibility and the concept of continuous accessibility. Find out how to test, fix, and mentor accessibility issues and how to get people on board by gathering champions and incorporating accessibility into workflows.
What Is the Accessibility Tree, Really?
JSNation 2024JSNation 2024
19 min
What Is the Accessibility Tree, Really?
This is a presentation on accessibility and screen readers. The speaker discusses the evolution of screen readers and how they adapted to graphical user interfaces. Accessibility APIs and the accessibility tree are introduced, allowing programs to construct a text database used by assistive technologies. The accessibility tree may vary across browsers and platforms, excluding elements that are not relevant to assistive technologies. The ARIA hidden state and element properties play a role in determining the accessibility of elements, and the accessible name can be derived from text content or specified using ARIA attributes.
More Secure Vue & Nuxt Apps - By Default
Vue.js Live 2024Vue.js Live 2024
21 min
More Secure Vue & Nuxt Apps - By Default
Handling security in front-end development is crucial, and the OWASP Top 10 is a valuable resource for secure coding. The list of security risks is constantly evolving, and the Nuxt security module provides features like security headers, rate limiting, and cross-site request forgery protection. Frontend developers should prioritize security to avoid information leaks and mitigate risks. Understanding the difference between public and private tokens is important for secure token handling.
Accessible CI/CD
DevOps.js Conf 2024DevOps.js Conf 2024
24 min
Accessible CI/CD
Maya Min, a senior software engineer at Microsoft Industry AI, discusses the importance of accessibility testing and its relation to CIDI. WCAG provides guidelines for accessibility compliance, covering various aspects such as color contrast, navigation, and content layout. Maya explores automating accessibility testing through UI components and different testing levels. They recommend xCore and Playwright for end-to-end browser testing and integrating accessibility testing into CI/CD workflows using tools like GitLab and Azure Pipeline.
A11y Beyond the Theory: Integrating Accessibility Testing Into Your Workflow
React Summit US 2023React Summit US 2023
24 min
A11y Beyond the Theory: Integrating Accessibility Testing Into Your Workflow
Watch video: A11y Beyond the Theory: Integrating Accessibility Testing Into Your Workflow
Ntandala Kengose, a software developer, emphasizes the importance of accessibility in software development and the responsibility it carries. The Web Content Accessibility Guidelines (WCAG) provide technical guidelines for making web content more accessible. Ntandala shares various accessibility testing tools and highlights the need for automation in testing. Tools like Pelly CI and GitHub Actions can be used for automated accessibility testing and CI integration. The X-Accessibility Ginter and Husky are tools that provide insights and ensure accessibility in development.
Design Systems Carnival! One Accessible Component, Many Pretty Masks
React Summit US 2023React Summit US 2023
27 min
Design Systems Carnival! One Accessible Component, Many Pretty Masks
Watch video: Design Systems Carnival! One Accessible Component, Many Pretty Masks
The Talk discusses the concept of design system Carnival and its relation to masks. It emphasizes the importance of accessibility in design systems and provides guidelines for implementing the Disclosure So Hide pattern. The Talk also covers topics like focus management, mouse interactions, and extending the disclosure widget. It warns against mixing different roles and complexity in design systems, using the example of a carousel. Overall, the Talk highlights the challenges and considerations in creating effective design systems.
Automating Accessibility Testing for Your Component Library
React Advanced Conference 2023React Advanced Conference 2023
41 min
Automating Accessibility Testing for Your Component Library
Watch video: Automating Accessibility Testing for Your Component Library
Today's Talk focused on automating accessibility testing for component libraries using Storybook. The importance of web accessibility was emphasized, along with the benefits of incorporating accessibility from the start. Storybook was highlighted as a valuable tool for component-driven development, testing, and identifying accessibility issues. The integration of the accessibility add-on in Storybook allows for component-level insights, efficient feedback loops, and automated accessibility testing. Manual testing and addressing complex issues with screen readers were also discussed.
Nested Interactive Elements: An Nightmare in Accessibility
React Advanced Conference 2023React Advanced Conference 2023
23 min
Nested Interactive Elements: An Nightmare in Accessibility
Watch video: Nested Interactive Elements: An Nightmare in Accessibility
Nested interactive elements can cause accessibility issues on websites, and the speaker shares a personal experience with an accessibility bug involving a list component. Mitigating nested interactive structures involves limiting these patterns during development and restructuring existing elements. The speaker provides recommendations for improving accessibility, such as adjusting role properties and gathering user feedback. The conclusion emphasizes the importance of accessible solutions and encourages sharing resources to build more inclusive experiences.
Thinking Differently About a11y – Accessible Website Design for the Neurospicy
React Advanced Conference 2023React Advanced Conference 2023
30 min
Thinking Differently About a11y – Accessible Website Design for the Neurospicy
Watch video: Thinking Differently About a11y – Accessible Website Design for the Neurospicy
Accessibility goes beyond screen readers and semantic HTML, and it's important to consider the needs of neurodivergent individuals. Cognitive impairments pose unique challenges, and COGA provides valuable guidelines for designing for cognitive accessibility. Customization, error tolerance, and compatibility with browser extensions are crucial in improving user experience. The NHS design system prioritizes functionality and has proven effective in handling emergencies. Understanding user needs and advocating for change within the tech industry are essential for creating a more accessible web.
How Popovers Are About to Become a Whole Lot Easier to Build
React Advanced Conference 2023React Advanced Conference 2023
28 min
How Popovers Are About to Become a Whole Lot Easier to Build
Watch video: How Popovers Are About to Become a Whole Lot Easier to Build
This talk explores the challenges and guidance for building well-designed popovers and dialogues in HTML. It discusses the differences between dialogues and popovers, their use cases, and the importance of semantics in differentiating them. The talk also covers UI considerations, implementation, and positioning of popovers. Additionally, it highlights the use of modals for blocking access to the rest of the page and the role of semantics in making accessible dialogues and popovers.
Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications
React Summit 2023React Summit 2023
109 min
Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications
Workshop
Asaf Shochet Avida
Eitan Noy
2 authors
In this hands-on workshop, we’ll equip you with the tools and techniques you need to create accessible web applications. We’ll explore the principles of inclusive design and learn how to test our websites using assistive technology to ensure that they work for everyone.
We’ll cover topics such as semantic markup, ARIA roles, accessible forms, and navigation, and then dive into coding exercises where you’ll get to apply what you’ve learned. We’ll use automated testing tools to validate our work and ensure that we meet accessibility standards.
By the end of this workshop, you’ll be equipped with the knowledge and skills to create accessible websites that work for everyone, and you’ll have hands-on experience using the latest techniques and tools for inclusive design and testing. Join us for this awesome coding workshop and become a ninja in web accessibility and inclusive design!
WHOA, I Wrote This React App With My Voice!
React Summit 2023React Summit 2023
9 min
WHOA, I Wrote This React App With My Voice!
Watch video: WHOA, I Wrote This React App With My Voice!
Today we're going to build a React application with just our voice using GitHub Copilot, an AI peer programmer powered by OpenAI Codecs. It's important to be specific in your comments to get accurate suggestions from Copilot. Prompt engineering tips can be used to create different applications, such as a basic markdown editor and a simple to-do app. The application was tested successfully by adding and deleting to-do items using voice commands.
Making Interactions Accessible to All Users
React Summit 2023React Summit 2023
30 min
Making Interactions Accessible to All Users
Watch video: Making Interactions Accessible to All Users
Today's Talk explores making web interactions accessible to all users. It emphasizes the importance of accessibility and the various ways users interact with the web. The Talk covers common accessibility issues with buttons, links, forms, and dynamic information. It also discusses the use of ARIA labels, error handling, and models. The importance of convincing upper management for accessibility and the limitations of automated testing are highlighted. The Talk concludes with recommendations for screen readers and considerations for icon buttons.
Accessible Component System Through Customization
JSNation 2023JSNation 2023
30 min
Accessible Component System Through Customization
The Talk discusses the importance of building an accessible UI component library, focusing on reusability, customizability, and responsiveness. It emphasizes the need for visual and functional consistency when developing components and highlights the key aspects of accessibility, including keyboard navigation, contrast, and content structure. The Talk also covers the building of accessible dialogues and provides tips for enhancing user experience. It emphasizes the significance of documentation, scalability, and customization in component planning. The Talk concludes by discussing the use of ARIA, accessibility testing, and strategies for persuading organizations to prioritize accessibility.
Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups
JSNation 2023JSNation 2023
10 min
Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups
The Talk discusses the use of dialogues and popovers in web development. Dialogues can be modal or non-modal and are now accessibility-supported. Popovers are versatile and can be added to any element without JavaScript. They provide suggestions, pickers, teaching UI, list boxes, and action menus. Modal and non-modal dialogues and popovers have different behaviors and dismissal methods. Browser support for these features is expanding, but there are still open questions about positioning, semantics, and other use cases.
Conquering Forms in Vue
Vue.js London 2023Vue.js London 2023
24 min
Conquering Forms in Vue
Today's Talk focused on building forms in Vue using FormKit. The speaker highlighted the simplicity of forms in Vue and the importance of adding buttons, labels, and help text for a better user experience. They also discussed handling form data and errors, refactoring form components, and implementing inline validation. The introduction to FormKit showcased its features such as a single component approach, automatic data collection, and simplified form building. The talk also covered applying validation and form generation using the FormKit schema, which allows for easy form representation and rendering.
How to Start Your Journey Into Mobile Accessibility?
React Day Berlin 2022React Day Berlin 2022
24 min
How to Start Your Journey Into Mobile Accessibility?
This talk explores mobile accessibility, including the different types of disabilities and how they affect app usage. It emphasizes the importance of making apps usable for as many people as possible and highlights the challenges faced by individuals with visual impairments. The talk also covers the principles of mobile accessibility, such as scaling the font size, supporting dark mode, and ensuring readable text. External tools and resources, like the Accessibility Inspector and Accessibility Scanner, are recommended for analyzing app accessibility. Various platforms and communities, such as Mobile Ally, Twitter, and React Native AMA, provide valuable resources for learning about mobile accessibility.
Demystifying Web Accessibility
Remix Conf Europe 2022Remix Conf Europe 2022
11 min
Demystifying Web Accessibility
Web accessibility ensures that people with disabilities can use and participate equally on the web. Over 15% of the global population has some form of disability. Improving web accessibility can be done using tools like ex-DEV tools and the web disability simulator. Color contrast plays a crucial role in readability, and semantic HTML and tab order help with functionality and user flow. There are additional tools and extensions available for further exploration.
My Accessibility Journey: the Quest for an Accessible Component Library
React Advanced Conference 2022React Advanced Conference 2022
23 min
My Accessibility Journey: the Quest for an Accessible Component Library
The Talk discusses the speaker's journey in making applications accessible and the importance of preventing inaccessible code from being shipped. It explores the process of building and creating accessible components, emphasizing the use of appropriate HTML tags and conducting functional and accessibility testing. The Talk also highlights the benefits of automation in testing and fixing accessibility issues. Overall, it emphasizes the importance of accessibility and provides practical tips for incorporating it into software development.
How Time-Consuming Is It to Build an Accessible Mobile App?
React Advanced Conference 2022React Advanced Conference 2022
21 min
How Time-Consuming Is It to Build an Accessible Mobile App?
Building an accessible app can be time-consuming but can be divided into two parts: making an existing app accessible and starting an accessible app from scratch. React Native Armour can help with accessibility fixes, but manual checks are still necessary. Accessibility best practices include focusing elements in the correct order, announcing UI changes to screen reader users, and ensuring consistency in behavior and appearance. Building accessible components can streamline the process of making an app accessible.
Creating an Accessible Web Together in 5 Simple Steps
React Advanced Conference 2022React Advanced Conference 2022
31 min
Creating an Accessible Web Together in 5 Simple Steps
The Talk covers the importance of accessibility in web development and provides practical tips for building accessible web applications. It discusses the basic principles of accessibility, WCAG guidelines, and the use of assistive technologies. The Talk emphasizes the use of semantic HTML, tab index, ARIA attributes, and keyboard navigation for app accessibility. It also highlights the importance of testing and debugging for accessibility issues and recommends the use of accessibility tools. Overall, the Talk aims to raise awareness about accessibility and provide developers with the knowledge and tools to create inclusive web applications.
Web Accessibility in JavaScript Apps
React Summit 2022React Summit 2022
161 min
Web Accessibility in JavaScript Apps
Workshop
Sandrina Pereira
Sandrina Pereira
Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps!
In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!
Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!
By the end, you will:- Understand WCAG principles and how they're organized- Know common cases where JavaScript is essential to accessibility- Create inclusive links, buttons and toggleble elements- Use live regions for errors and loading states- Integrate accessibility into your team workflow right away- Realize that creating accessible websites isn’t as hard as it sounds ;)
Lifting Privacy and Accessibility Up
React Summit 2022React Summit 2022
25 min
Lifting Privacy and Accessibility Up
In this talk, the speaker discusses the creation of a component library that prioritizes accessibility and privacy. They highlight the importance of building applications that cater to users' devices and network limitations. The speaker shares their experience of solving performance issues with a YouTube iframe and introduces Light YouTube, a performance-focused web component. They emphasize the need to prioritize accessibility and privacy in applications and provide insights on how to address common problems. The talk concludes with a call to prioritize accessibility and create sensible defaults in libraries to improve user experiences.
Building UIs - By the People, for the People!
JSNation 2022JSNation 2022
22 min
Building UIs - By the People, for the People!
This talk focuses on the importance of accessibility in building user interfaces, discussing WCAG and WAI. It emphasizes the use of correct HTML tags for accessibility and provides practical tips for improving accessibility in apps. The talk also highlights the significance of keyword accessibility and the use of semantic HTML. It covers navigation techniques, such as ARIA tags and breadcrumbs, and emphasizes the importance of internationalization. The demo showcases the improvements made to a login app after applying accessibility practices.
Accessibility Credit and How to Pay it
JSNation 2022JSNation 2022
21 min
Accessibility Credit and How to Pay it
The Talk discusses technical debt and its relationship with bad code and lack of caring. It emphasizes the importance of repaying technical debt, particularly in terms of accessibility. The low number of websites passing basic accessibility tests is highlighted. The Talk provides strategies for repaying accessibility technical debt, promoting accessibility, and incorporating design systems. It emphasizes that accessibility is everyone's responsibility and should not be overlooked.
a11y and TDD: A Perfect Match
JSNation 2022JSNation 2022
24 min
a11y and TDD: A Perfect Match
This Talk explores the intersection of accessibility and test-driven development (TDD) in software development. TDD is a process that involves writing tests before writing production code, providing a safety net for code changes. The Talk demonstrates how to apply TDD principles to real-life examples, such as filling out a form, and emphasizes the importance of user-centric testing. By using atomic design principles, code can be organized in a clean and easy way. The Talk also discusses the use of labels and test IDs in tests for improved accessibility.
Automated accessibility testing with jest-axe and Lighthouse CI
TestJS Summit 2021TestJS Summit 2021
85 min
Automated accessibility testing with jest-axe and Lighthouse CI
Workshop
Bonnie Schulkin
Bonnie Schulkin
Do your automated tests include a11y checks? This workshop will cover how to get started with jest-axe to detect code-based accessibility violations, and Lighthouse CI to validate the accessibility of fully rendered pages. No amount of automated tests can replace manual accessibility testing, but these checks will make sure that your manual testers aren't doing more work than they need to.
Configuring Axe Accessibility Tests
TestJS Summit 2021TestJS Summit 2021
30 min
Configuring Axe Accessibility Tests
Top Content
AXe is an accessibility engine for automated web UI testing that runs a set of rules to test for accessibility problems. It can be configured to disable or enable specific rules and run based on tags. Axe provides various options, but axe linter does not support all options. The importance of investing time and resources in accessibility is emphasized, as it benefits not only those with disabilities but improves the web for everyone. Manual testing is also highlighted as a necessary complement to automated tests for addressing accessibility issues.
How to Catch a11y Defects During Unit and E2E Testing
TestJS Summit 2021TestJS Summit 2021
7 min
How to Catch a11y Defects During Unit and E2E Testing
This Talk provides ways to catch accessibility defects during testing, including adding accessibility testing to a website for Studio Ghibli using React, NX, Jazz, JazzX, Cypress, and CypressX. The importance of unitizing components and conducting end-to-end testing with Cypress and CypressX is emphasized to ensure accessibility. The process of setting up CypressX testing is explained, highlighting the use of typings and the CypressX support file. These tools make it easier for developers to avoid accessibility bugs during development.
How to do Good Without Doing Anything
React Advanced Conference 2021React Advanced Conference 2021
32 min
How to do Good Without Doing Anything
Accessibility is about making sure everyone can participate on the web, regardless of disability. Automated tools like Lighthouse and React Axe help identify accessibility errors and provide guidance on fixing them. Unit tests validate ARIA attributes and keyboard navigation, while integration and end-to-end tests focus on outcomes and simulate user experiences. Cypress.io is an open-source testing framework with excellent accessibility support. Implementing small changes leads to a deep understanding of web accessibility and bug resilience.
The Digital Accessibility Legal Landscape – why it matters for developers
React Finland 2021React Finland 2021
32 min
The Digital Accessibility Legal Landscape – why it matters for developers
Digital accessibility is a human right of people with disabilities around the globe. That means developers have an important role to play in advancing human rights! Join U.S. disability rights lawyer Lainey Feingold for a practical interactive discussion about laws and policies around the globe that impact digital accessibility. Come learn best practices for digital accessibility and how we all can “put the law in our pocket” to help make the digital world inclusive for everyone.
Button vs Div: What's the Big Deal Anyway?
React Summit Remote Edition 2020React Summit Remote Edition 2020
12 min
Button vs Div: What's the Big Deal Anyway?
Today's Talk discussed the preference of accessibility advocates for using the platform over divs, highlighting the ease of converting divs into buttons. The CSS for making divs look like buttons was also discussed, but it was concluded that using the platform is easier and more accessible. The Q&A session covered topics such as target market and using divs as buttons for specific cases. The Talk also briefly mentioned the tapping feature of Match and the support for native apps in Ionic. The closing remarks concluded the Talk.
Accessibility as a First Class Citizen
React Summit 2020React Summit 2020
24 min
Accessibility as a First Class Citizen
TypeScript and React are popular languages for software development. Accessibility is important for inclusivity and preventing lawsuits. Building accessibility from the start is crucial, considering design and engineering aspects. Tooling for React Native accessibility is limited. Setting the accessible prop and role in components is essential for screen reader users. The React Native documentation is helpful, but some accessibility needs may require additional attention.
React Accessibility: Beyond the Basics
React Summit 2020React Summit 2020
32 min
React Accessibility: Beyond the Basics
Today's Talk on React Accessibility covers the importance of manual testing, the challenges faced in addressing accessibility, the impact of accessibility on user experience, and the use of subtitles and user settings for accessibility. It emphasizes the need for manual testing in addition to automated testing, the role of empathy training in understanding accessibility challenges, and the significance of addressing accessibility issues for all users. The Talk also highlights the benefits of implementing accessibility features, such as increasing website accessibility for disabled markets and improving user experience for all.
Achieving A11y Automation Testing
TestJS Summit - January, 2021TestJS Summit - January, 2021
27 min
Achieving A11y Automation Testing
This Talk discusses automation testing tools and strategies for accessibility. It highlights EmberJS's approach to accessibility and the efforts of the developer community. The importance of prioritizing accessibility and using tools like Ember A11y testing and Axe-Core is emphasized. Integration with React, Vue, and other frameworks is made easy with NPM packages. The Talk also emphasizes the value of manual testing and user evaluation alongside automation testing.
Building Accessible React Components
React Summit Remote Edition 2021React Summit Remote Edition 2021
34 min
Building Accessible React Components
Today's Talk focused on accessibility in web apps, covering topics such as WCAG guidelines, handling required fields and field formats, error handling and disabled buttons, and the importance of DOM and visual order. The Talk also discussed the accessibility of hidden elements and links, the impact of animations on accessibility, and the use of development tools for accessibility testing. The Q&A session addressed questions about asterisks in required fields, date inputs, and automated testing tools. Overall, the Talk emphasized the importance of building web apps that are accessible to all users.