Landmarks, or what I call structural elements, help define the structure of a document and help accessibility tools like screen readers describe the content to users. The following table shows the HTML elements used to describe document landmarks, the associated ARIA roles and a description of what the landmark accomplishes. | HTML element | Implicit ARIA Role | Description | | --- | --- | --- | | aside | complementary | Shows complementary content to the main subject of the page | | footer | contentinfo | Displays information about a page. Typically that's things like copyright info, related...
When you use libraries like jQuery from CDN, you will see code like when you get the CDN link: html I've always been curious as to what is the integrity attribute, why is it there and why do we need the crossorigin attribute. This post will look at crossorigin integrity and how it can help secure web applications. Crossorigin integrity According to the Subresource Integrity Specificationhttps://w3c.github.io/webappsec-subresource-integrity/: > Sites and applications on the web are rarely composed of resources from only a single origin. For example, authors pull scripts and styles from a wide variety of services and content delivery networks,...
This post outlines my early thoughts on certifications as they relate to WordPress. I'm coming into the conversation as an instructional designer and curriculum developer and someone who has worked building curricula for certifications. I don't believe it matters if the product we're building a certification program for is open source or not. While there may be some idiosyncracies to open source products the certification should be the same as it is for commercial software in terms of rigor and how it is built. Overview: Why do we need certification In most situations, being certified means that you've mastered a...
In Javascript, the intlhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/Intl object provides several locale-aware tools to work with in Javascript. One of those tools is the segmenterhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/Intl/Segmenter object. The segmenter object enables locale-aware segmentation from a string with selectable granularity grapheme, word and sentence. a grapheme is a single character, regardless of how many codepoints it takes to display it. "🫵" is one grapheme, so is a space " " Words and sentences are self-explanatory. We first create a segmenter object with two parameters: A valid language code and the granularity that we want to use. For this example, we're using word as the granularity. js...
As I was writing my previous post about Playwright and writing tests I came across an articlehttps://www.checklyhq.com/blog/how-playwright-can-monitor-third-party-resources/ that explained how to run performance measurements inside Playwright tests. Core Web Vitals The example runs against your app's local server and will generate the Largest Contentful Painthttps://web.dev/articles/lcp value using performance observershttps://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver combined with Playwright commands. Because the local server will not act like your regular server there are no network requests the results will be significantly faster than they would be against your production site. You should take this into account when evaluating the tests and, if possible, should also test against...
Several times I've found myself working with fonts where I want to know what's available in the font without using tools like Wakmaifonduehttps://wakamaifondue.com/. Recently, I discovered fontkit.jshttps://github.com/foliojs/fontkit/, a tool that will read and manipulate fonts so I decided to use it in a test script to see what a given font has available to use. This is a node script so it assumes one of two things: - there is a package.json where you've installed fontkit - You've installed fontkit globally The script also imports the argvhttps://nodejs.org/docs/latest/api/process.htmlprocessargv from the built-in process module to capture the full path to the font...
Most of the work I've seen done in the console is limited to console.log. There is a lot more that you can do with the console. There's even a living standard hosted at WHATWG. Most of the time we just use console.log to print something to the DevTools console. And that's enough, but sometimes we can do more. I was surprised to find out that there is a specification for the console APIhttps://console.spec.whatwg.org that shows some amazing things you can do with the console. Caveats: The console specification is an early work that documents existing functionality in browsers I will...
A little bit of background. The W3C chartered the Web Accessibility Initiativehttps://www.w3.org/WAI/ as the central place to gather information, research, best practices, and standards recommendations in W3C talk for accessibility on the web. The best-known resource generated by the WAI is the Web Content Accessibility Guidelines WCAGhttps://www.w3.org/WAI/standards-guidelines/wcag/ recommendation. The current version of WCAG is 2.1https://www.w3.org/TR/WCAG/ with a draft of version 2.2https://www.w3.org/TR/WCAG22/ expected to become a recommendation soon and an earlier draft of version 3https://www.w3.org/TR/wcag3/ as an early working draft. The current version of WCAG provides two guidelines regarding accessibility: > Success Criterion 1.4.3 Contrast Minimum The visual presentation of text...
After looking at format and tech discussed in the Updates to @font-facehttps://publishing-project.rivendellweb.net/updates-to-font-face/ I thought it would be good to look at other aspects of the @font-face at-rule that changed or are new since the last time I looked at. font-weight, font-style, and font-stretch These descriptors will still work with a single value. font-weighthttps://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight and font-stretchhttps://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-stretch can take two values to represent the lower and upper boundaries of the variable font range for the descriptor. font-stylehttps://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-style can also use ranges but it's a little more complex than font-weight and font-stretch. The possible values for the descriptor are: normal : Selects the...
@font-face has been around for a while and it works fine for the existing monochrome, one file per style, fonts. CSS Fonts level 4https://w3c.github.io/csswg-drafts/css-fonts/ introduced a new property related to font types tech to the src attribute of @font-face at-rules. I also looked again at the format attribute of the src descriptor; particularly what benefits would we get from using it. We will discuss each of these in turn. format This attribute specifies the font format of the font it is attached to. If the value for format is not supported or invalid, the browser will not download the resource,...
