You can use multiple methods in JavaScript to detect the browser zoom level, depending on the browser and the specific requirements of your application. Here are a few approaches to think about.
Continue reading “Detect browser zoom level”Hiding a text but making it accessible to a screen reader
Accessible hiding allows an element to be visually hidden while remaining accessible to assistive technologies such as screen readers. The approach is to apply a CSS class to the element that should not be shown.
There are several solutions for this type of CSS class, but we recommend following styles that cover hiding elements and optionally giving the ability to show the element when the element receives the focus or contains an element that has received focus. Useful for Skip to the main content
links. See Adding a link at the top of each page that goes directly to the main content area
.
The key to agile accessibility: Effective measurement of what matters
Agile accessibility is the incorporation of accessibility principles and practices into the agile software development methodology.
Ensuring accessibility is an a constant and iterative process throughout the development cycle meaning making sure that software and web applications are designed and developed with accessibility in mind from the very beginning.
Tracking accessibility KPIs is a critical step in ensuring that your digital products are accessible to all users.
Continue reading “The key to agile accessibility: Effective measurement of what matters”Sass with RTL and LTR support: creating multilingual websites
Sass with RTL and LTR support isn’t available out of the box, but it can be done through simple Sass @mixin and @include rules that can be used across all Sass files.
RTL stands for Right-to-Left. It is a writing direction used in languages such as Arabic, Hebrew, and Persian. Supporting both right-to-left (RTL), more often bi-directional (BiDi), and left-to-right (LTR) representations of Web pages can be a challange.
Note that you can also achieve the same with Less (which stands for Leaner Style Sheets).
Continue reading “Sass with RTL and LTR support: creating multilingual websites”WCAG 2.2: New Web Accessibility Guidelines for Improved User Experience
Web Content Accessibility Guidelines (WCAG) 2.2 was published as a W3C Recommendation
web standard on October 5, 2023.
According to the World Wide Web (W3) site:
WCAG 2.2 was initiated with the goal to continue the work of WCAG 2.1: Improving accessibility guidance for three major groups: users with cognitive or learning disabilities, users with low vision, and users with disabilities on mobile devices.
This is huge news for anyone who creates websites, digital services, or mobile applications, or if you simply care about making the internet more accessible in general.
Continue reading “WCAG 2.2: New Web Accessibility Guidelines for Improved User Experience”Solution to “Type ‘FileList’ must have a ‘[Symbol.iterator]()’ method that returns an iterator”
While working with TypeScript and FileList you may get the TypeScript error Type ‘FileList’ must have a ‘[Symbol.iterator]()’ method that returns an iterator
.
European Accessibility Act in questions and answers
A new set of minimum accessibility standards for a variety of products and services has been established across the EU under the European Accessibility Act (EAA), a piece of EU legislation. It aims to make it easier for people with disabilities to access the goods and services that are offered inside the EU’s internal market.
The Act is a Directive, which means it sets binding accessibility goals upon ratifying the United Nations Convention on the Rights of Persons with Disabilities but leaves it to the Member States of the European Union to decide how they want to achieve them. It was implemented in 2019 and completes and complements existing accessibility-related EU laws.
Continue reading “European Accessibility Act in questions and answers”Cache busting in Angular for static assets
Images and other assets you have in your assets folder that you reference in Angular templates are not hashed, and we are going to solve that problem.
Continue reading “Cache busting in Angular for static assets”Fixing layout shifting brought on by custom fonts
Custom fonts impact performance through delayed text rendering and layout shifts. This is because they have to be downloaded and the layout must be repainted again. When a visible element on your website changes size or location, it might have an impact on the position of the content surrounding it. This is known as a layout shift.
Note that if a web font has not loaded, browsers typically delay text rendering.
Continue reading “Fixing layout shifting brought on by custom fonts”How to play YouTube videos in the background in the Brave browser (Android and iOS)
When you go to another app or turn off the screen, YouTube stops playing in the browser. Here are some tips to keep those videos playing in the background. The Brave browser on Android and iOS can play YouTube in the background, with the exception that on Android it plays only audio.
Continue reading “How to play YouTube videos in the background in the Brave browser (Android and iOS)”