Definitive guide to indeterminate state of a checkbox

    What are the three states of checkbox?

    <input /> elements of type checkbox represents a state or option that can be toggled. A well known states are called checked and unchecked. However, in addition to the checked and unchecked states, there is a third state a checkbox can be in: indeterminate. In most cases, it is represented by a horizontal line in the box instead of a check/tick.

    Continue reading “Definitive guide to indeterminate state of a checkbox”

    How to implement multiple selection with check boxes in an HTML without external libraries

      What <select> HTML element is?

      The <select> HTML element represents a control that provides a menu of options. When used with an attribute multiple then it allows selecting multiple options at once. However, the current implementation for multiple selections is not optimal on a desktop device so we need to find a different way. The goal would be to build multiple selections that are accessible to everyone.

      Note that <select> HTML element used with an attribute multiple on the mobile works quite conveniently, at least what’s implemented in Chrome and Firefox browsers. You can test it on the following example code.

      Select multiple selections on mobile device

      Continue reading “How to implement multiple selection with check boxes in an HTML without external libraries”

      Lazy loading CSS background images for better website loading performance

        People at work

        Every single HTTP request decreases loading performance. For simple image attribute loading="lazy" can be used in order to defer loading of off-screen images until image appear on screen. Using lazy-loading we achieve the following benefits over the traditional embedding in HTML:

        1. Loading speed – with lazy-loading, page is loaded faster because only images that are visible on the screen are being loaded.
        2. Rendering performance – less loading images reduces time for page rendering.

        That sounds good. However, while images can be lazy-loaded today then images loaded through CSS can’t. That doesn’t sound like we should give up at this point.

        Continue reading “Lazy loading CSS background images for better website loading performance”

        4 simple things you should do in optimising website loading performance

          Table of contents

          1. Before everything

          Stopwatch

          Before everything

          Everyone wants their site to be loaded fast. It’s not only good from the SEO perspective, but also from the user experience perspective. However, achieving fast loading website it’s that easy quite often. Some use a one-click solution to magically resolve all loading performance issues. Use that with caution as those won’t resolve all issues you may have.

          Based on our experience let’s look into 4 simple things you can do in order to increase your site loading performance.

          Continue reading “4 simple things you should do in optimising website loading performance”

          Tech tip: how to set the focus on element and prevent from scrolling

            The HTMLElement.focus() method sets focus on the specified element. The focused element will receive keyboard and similar events by default. However, sometimes you would like to prevent from scrolling the document to bring the newly-focused element into view. This could be useful when you want to check if the element is capable to receive focus.

            Here is a simple example. Note: open developer console to see which element got focus state after activating each action. See a live example of how to set the focus and prevent from scrolling.

            Continue reading “Tech tip: how to set the focus on element and prevent from scrolling”

            Why was SiteLint founded?

              Keeping a website or application at the high-quality level is a challenge. No matter what type of business you own, you will need software that is fully accessible, usable, and without issues, as it has a high impact on the way customers reach out to you and buy your products or services.

              The common model today’s day is to run the crawler on the server-side, crawl the site and then analyze the content. SiteLint Audits works in a next-generation model – all audits are running on your site when visitors arrive on your site. This gives more precise results because audits are running on the user environment. What’s working on one configuration of Device/OS/Browser doesn’t have to work on the other configuration. Hence running audits on the client-side brings better results of testing across all combinations of Device/OS/Browser.

              Continue reading “Why was SiteLint founded?”