Accessibility and Performance article contains
  1. Known user impacts
  2. Technical aspects
  3. How performance impacts Accessibility
  4. Optimisations
  5. Conclusion
Two snails on a piece of woodAccessibility and Performance

Accessibility and Performance

Web performance is all about making websites fast: loading, rendering, and interacting. When pages load slowly or have a lot of content to load then the experience can be very clunky and unpleasant for all users. More resources to download mean also more data that needs to be transferred through the network and processed. Let’s explore user and business impact and how this could be improved.

Continue reading “Accessibility and Performance”
Best practices for writing good alt text article contains
  1. Supplemental information
  2. Usage scenarios
  3. Example code
  4. Best practices for writing good alt text
Create custom and accessible tooltip article contains
  1. How do you code tooltips?
  2. Notes
    1. Requirement - reduce motion using CSS prefers-reduced-motion
    2. Toolip without JavaScript
    3. Is our tooltip implementation ideal?
  3. Real code example
    1. How a screen reader works with our tooltip (video)
  4. Questions related to the tooltip
    1. Do screen readers read tooltips?
    2. How does a user access a tooltip?
    3. Why is it called a tooltip?
    4. Should you put links in tooltips?
Why using rule important in CSS is bad? article contains
  1. Traps and how to avoid them following best practices
  2. What can be done instead of using !important?
  3. Exceptions in the !important flag usage
8 tips to speed up image loading article contains
  1. Optimize your images
  2. Responsive images with srcset and sizes
  3. Lazy loading images
    1. Benefits of lazy loading
  4. Preload the image
  5. Priority Hints - fetchpriority (experimental technology)
  6. Use browser cache
  7. Use image-set() for the background images
  8. Use a CDN - content delivery network
  9. Inline svg element replaced with image element
Definitive guide to indeterminate state of a checkbox article contains
  1. What is the indeterminate property of a checkbox?
  2. What is a mixed checkbox?
  3. How do I change the indeterminate state of a checkbox?
  4. Accessibility support
    1. Indeterminate checkboxes
  5. Results
3 checkboxes with following states: unchecked, indeterminate, checkedDefinitive guide to indeterminate state of a checkbox

Definitive guide to indeterminate state of a 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 of a checkbox: 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 article contains
  1. Multi select dropdown with checkbox goals
  2. Example code
  3. Allow user to select only one checkbox
  4. Final notes
"I'm possible" word with jumping person aboveHow to implement multiple selection with check boxes in an HTML without external libraries

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

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.

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 article contains
  1. Set the goals for lazy loading CSS background
  2. The solution
  3. Workable example
  4. Discussions
  5. Update with another approach using CSS variable
    1. Resources
Collection of pictures in frameLazy loading CSS background images for better website loading performance

Lazy loading CSS background images for better website loading performance

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

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