Best of Accessibility — January 2024

  1. 1
    Article
    Avatar of logrocketLogRocket·2y

    Build an off-canvas menu with <dialog> and web components

    Learn how to build an off-canvas menu using the <dialog> element and web components. Ensure accessibility and enhance user experience by following the steps provided. Style the menu using CSS to achieve desired animations and positioning.

  2. 2
    Article
    Avatar of asayerasayer·2y

    Twelve Rarely Utilized CSS Media Query Features

    Explore twelve rarely utilized CSS media query features that can enhance responsive and accessible design strategies in web applications.

  3. 3
    Article
    Avatar of logrocketLogRocket·2y

    Developing a responsive mega menu in React

    Learn how to create a responsive and accessible mega menu using React. Explore common use cases and implement the mega menu component in a React project.

  4. 4
    Article
    Avatar of communityCommunity Picks·2y

    Is it time for :focus-visible?

    :focus-visible is a CSS pseudo-class that helps improve user experience and accessibility by showing focus on interactive elements. It allows browsers to apply the focus indicator based on user characteristics and interactions. The use of :focus-visible is recommended for better accessibility and personalized experiences.

  5. 5
    Article
    Avatar of codropsCodrops·2y

    The Collective #807

    The post features a tutorial on creating scroll-driven animations with CSS, a tool called Marker.io for collecting website issues, and a discussion on ARIA live regions and their benefits for screen reader users.

  6. 6
    Article
    Avatar of logrocketLogRocket·2y

    Checkbox UI design: Best practices and examples

    Learn the best practices for designing checkbox UI components, including their characteristics, default style, user interaction, and how to effectively use them in your product. Discover tips for designing checkboxes in different scenarios and making them intuitive and accessible.

  7. 7
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    How to Build an Accessible Custom Dropdown Select Element

    Learn how to build an accessible custom dropdown select element in this tutorial. Understand the prerequisites, set up the HTML, CSS, and JavaScript, and enhance the screen reader functionality.

  8. 8
    Article
    Avatar of communityCommunity Picks·2y

    Improving Web Accessibility with Accessibility Insights

    Discover how Accessibility Insights for Web, a set of tools provided by Microsoft, can help developers and designers create more inclusive and accessible web experiences. The toolset includes FastPass for quick checks and Assessment for comprehensive testing based on WCAG standards. With seamless integration, early issue detection, WCAG compliance, and detailed reports, Accessibility Insights empowers developers to prioritize and address accessibility issues efficiently.

  9. 9
    Article
    Avatar of sarasoueidanSara Soueidan·2y

    Accessible notifications with ARIA Live Regions (Part 1)

    This post introduces ARIA live regions, which are a specific type of notification system primarily surfaced for screen reader users. It explains how screen readers parse web content and why an accessible notification system is necessary for screen reader users. The post also discusses the importance of WCAG guidelines and provides different ways to create live regions in web applications.

See all Accessibility archives