Fixing render-blocking fontsArticle contains
  1. Techniques that can be used to avoid render-blocking fonts
  2. Using system fonts or fonts that are already loaded on the user's device
  3. Using CSS font loading APIs that allow the page to render before the font is loaded
  4. Specifying a fallback font that can be used until the main font is loaded
  5. Load fonts asynchronously using a technique called font loading with a media query hack
  6. Results and testing pages
Virtual keyboard with virtual monitor that presents the code. Image by Gerd Altmann from Pixabay.

Fixing render-blocking fonts

Render-blocking fonts refer to fonts that prevent a web page from rendering or displaying its content until the font has been loaded. This can cause a delay in the page loading, resulting in a slower user experience.

When a web page is loaded, the browser reads the HTML and CSS files to determine the layout and styling of the page. If a font is specified in the CSS, the browser will typically wait for the font to be loaded before rendering the page. This is known as a render-blocking font because it blocks the rendering of the page until the font is available.

Render-blocking fonts can be a problem because they can cause a delay in the page loading, especially if the font is large or takes a long time to load.

To avoid render-blocking fonts, let’s explore techniques to fix the issue.

Continue reading “Fixing render-blocking fonts”
Fixing HTML video autoplay, blank poster, first frame, and improving performance in Safari and iOS devicesArticle contains
  1. Fixing autoplay for Safari on iOS
  2. The first frame is not seen as the poster on iOS Safari
  3. How to get HTML5 video thumbnail without using poster on Safari or iOS
  4. Improving performance
  5. Video examples
iPhone. Image by 3D Animation Production Company from Pixabay.

Fixing HTML video autoplay, blank poster, first frame, and improving performance in Safari and iOS devices

Autoplaying videos on Safari and iOS devices can be tricky due to specific browser policies and behaviors. By default, Safari on iOS devices (including iPhones) plays video content in full-screen mode when the play button is activated. This is a security feature to prevent malicious websites from playing video content without the user’s consent.

Additionally, the blank white box you’re seeing before playing the video is due to the fact that Safari doesn’t display the video poster image or the first frame of the video by default. This is a known issue with Safari on iOS devices.

Continue reading “Fixing HTML video autoplay, blank poster, first frame, and improving performance in Safari and iOS devices”
Making accessible accordionArticle contains
  1. What are the accessibility requirements for accordion?
  2. Changing the default arrow on the summary HTML element
  3. Example implementation
Mobile phone and text on it "Accessible accordion" along with accordion examples

Making accessible accordion

An accessible accordion is a type of interactive component that allows users to expand and collapse content, while also providing a good user experience for people with disabilities.

Accordions reduce the need to scroll when presenting multiple sections of content on a single page. They should be accessible through keyboard navigation and follow WAI-ARIA roles, states, and properties guidelines for accessibility.

An accordion-like interface can be created by using a sequence of <details> elements, which are expanding sections that can reveal or hide content. As we’ll see later, using the name attribute allows these components to simulate the behavior of typical accordions, in which just a single section can be open at a time, with other sections closing themselves when a new one is expanded.

This solution does not involve JavaScript. Only HTML and CSS for styling.

Continue reading “Making accessible accordion”
JavaScript Clipboard API with fallbackArticle contains
  1. Using the Clipboard API
  2. Limitations
  3. JavaScript Clipboard API example
Legacy website accessibility remediation - a step-by-step guide to prioritizing fixesArticle contains
  1. Understanding accessibility remediation
  2. Challenges in remediating legacy websites
  3. Step-by-step remediation process
    1. Step 1: Audit
      1. Use an automatic auditing tool
      2. Manual testing
      3. User feedback
    2. Step 2: Prioritize issues
    3. Step 3: Fix identified issues
    4. Step 4: Verify fixes
  4. Additional considerations for legacy content
  5. Conclusion
Mobile phone and "Digital Accessibility Audit" sentence on it. Image by Markus Winkler from Pixabay.

Legacy website accessibility remediation – a step-by-step guide to prioritizing fixes

Addressing legacy website accessibility issues becomes increasingly important as organizations make an effort to provide inclusive digital experiences while also meeting legal (e.g., ADA Americans with Disabilities Act or EAA European Accessibility Act) online accessibility obligations. This tutorial describes an organized approach for effectively prioritizing and implementing accessibility changes.

Continue reading “Legacy website accessibility remediation – a step-by-step guide to prioritizing fixes”
How to embed YouTube videos while ensuring accessibility WCAG complianceArticle contains
  1. Summary of the key points
  2. Add title attribute
  3. Captions
  4. Audio descriptions
  5. Ensure contrast for text in the video
  6. Manage keyboard shortcuts
  7. Don't use autoplay
  8. Keep YouTube video embed controls
  9. Keep full-screen option available
  10. Retain the YouTube logo for easy access to the video on YouTube or the YouTube app
  11. Manage language
    1. Add subtitles for every used language to the video
    2. Set the interface language to match the language used on the webpage
A person holding a phone with the YouTube app running. Image by Sam riz from Pixabay.

How to embed YouTube videos while ensuring accessibility WCAG compliance

To determine whether embedded YouTube videos are compliant with the Web Content Accessibility Guidelines (WCAG), it’s essential to consider several factors related to accessibility features and best practices.

To make a YouTube embed WCAG (Web Content Accessibility Guidelines) compliant, we need to consider several aspects of accessibility. Here’s a step-by-step guide on how to achieve this:

Continue reading “How to embed YouTube videos while ensuring accessibility WCAG compliance”
EU Digital Accessibility laws apply to all companies operating in the EU, regardless of originArticle contains
  1. Key requirements of the EAA
  2. Key takeaways
  3. How to comply with the European Accessibility Act?
  4. What are the core principles and existing digital accessibility standards?
  5. Which companies are impacted by the European Accessibility Act?
  6. Expected penalties for non-compliance
  7. Will using an overlay widget ensure compliance with the European Accessibility Act (EAA)?
  8. How to achieve compliance with the EAA?
  9. Are automated accessibility tests alone enough?
  10. Final thoughts
There is a group of people with a child in a wheelchair. Image created by Gerd Altmann from Pixabay.

EU Digital Accessibility laws apply to all companies operating in the EU, regardless of origin

Websites are excellent because they can be accessed by almost anyone, anywhere. This allows you to sell your products and services from your country to anywhere in the world. While this is exciting, it also means that your website must adhere to their regulations and web accessibility rules.

The European Accessibility Act (EAA) will take effect in June 2025 and will require companies to comply with WCAG 2.1 Level AA standards for digital products and services sold in the EU.

This guide is intended to give organizations a path to global digital accessibility legislation, with a focus on the laws that expose companies operating on the EU market. What are these laws, what are the requirements, and what are the penalties for noncompliance? In responding to these questions, we explore deeper into the EU’s European Accessibility Act, which businesses must pay special attention to.

Continue reading “EU Digital Accessibility laws apply to all companies operating in the EU, regardless of origin”
Improving link accessibility with clear descriptionsArticle contains
  1. Why inform users that a link will open in a new window?
  2. Best practices for screen reader users
  3. Technical implementation
  4. Conclusion
Preventing multiple HTTP requests to the same endpointArticle contains
  1. Why preventing multiple requests is important
  2. Preventing multiple requests with caching, TypeScript version
    1. Example use case for TypeScript
  3. Preventing multiple requests with caching, Angular version
    1. Example of how to include interceptor in Angular
    2. Execution flow
    3. Benefits
    4. Potential issues
How to get the actual (real) background color of an HTML elementArticle contains
  1. Why does the page have a transparent background color by default, even though browsers display a white background?
  2. Why getComputedStyle returns transparent value?
  3. Demonstrating the behavior
  4. How to get the visible, real background color
  5. Workable example that determines background color for HTML root element
  6. Use cases for finding real background color
  7. Best practices
The example code and the keyboard below it.

How to get the actual (real) background color of an HTML element

In many browsers, when no explicit background color is set for the <html>

or <body> elements, they inherit a transparent background.

However, browsers often render the default background as white for visual consistency, particularly in user interfaces where a clear background is expected. This can lead to confusion when using JavaScript to check computed styles.

Continue reading “How to get the actual (real) background color of an HTML element”