This report made a big splash last year. It’s a large chunk of research that shows just how terribly the web does with accessibility. It’s been updated this year and (drumroll…) we got a little worse. I’ll use their blockquote:
The number of errors increased 2.1% between February 2019 and February 2020.
From the choir:
Over the last year websites got **checks notes** LESS accessible?!?1 Jesus, my dudes. https://t.co/zvwb2wQxsH
Last year I wrote about @webaim’s analysis of one million home pages, and how it painted an *incredibly* bleak picture of the web’s accessibility: https://t.co/yLG9poTSMf
#Accessibility The WebAIM report is out and it's apparently getting worse. Seriously, it's about time we start making the web more accessible, people rely now more than even on a lot of online services for security, health, information, etc. https://t.co/7n0zxtUuyZ
Web accessibility is getting statistically worse. This is going to keep happening – and we’re going to keep being surprised about it – until we get honest about ableism. These cold, hard numbers are a human problem. https://t.co/gplKhUKQLy
Part of me thinks: it’s time for browsers to step up and auto-fix the things they can. But I also think that’s dangerous territory. AMP is a browser vendor’s version of “enough is enough” with poor web performance and I’m not loving how that’s turned out to date. That said, evangelism doesn’t seem to be working.
You can fix your site though. My favorite tool is axe.
I’ve written up my advice (sprinkled with great advice from others), but this is way more straightforward nuts-and-bolts training on technical writing. It’s structured like an actual course, with exercises along the way.
I’m far from an expert here. But between Geoff and I, we end up doing a lot of technical article editing for the sake of clarity.
Comedy writers seek the funniest results, horror writers strive for the scariest, and technical writers aim for the clearest. In technical writing, clarity takes precedence over all other rules.
It can be tricky to get right. Read the section on Active voice. That’s easy for anyone to get wrong.
Essentially every single rule is just an extension of “make it more clear.”
Scott Turner, who has an entire blog "Exploring procedural generation and display of fantasy maps", gets into why vector graphics seems on these surface why it would be bad for the look of a pencil stroke:
Something like this pencil stroke would require many tens of thousands of different elements. Basically each little blob of gray in that image would be separately defined.
Nada Rifki demonstrates the scroll-snap-type and scroll-snap-alignCSS properties. I like that the demo shows that the items in the scrolling container can be different sizes. It is the edges of those children that matter, not some fixed snapping distance.
I, Dave Rupert, a person who cares about web performance, a person who reads web performance blogs, a person who spends lots of hours trying to keep up on best practices, a person who co-hosts a weekly podcast about making websites and speak with web performance professionals… somehow goofed and added 33 SECONDS to their page load.
This stuff is hard even when you care a lot. The 33 seconds came from font preloading rather than the one-line wonder of font-display.
I also care about making fast websites, but mine aren't winning any speed awards because I'll take practical and maintainable over peak performance any day. (Sorry, world)
I get bunches of emails asking what happened to the "Custom Fields" meta box on the "Edit Posts" screen. They're hidden by default with the new Block Editor, so questions like, "do I need to install a plugin to get them back again?" No you don't. To view the Custom Fields for any post click the three dots in the upper-right corner of the screen, and then go to Options. There you will find a checkbox to enable Custom Fields (under "Advanced Panels"). Scroll down the page and you will see the Custom Fields meta box.
Bram covers how frustrating .bar:nth-child(2) is. It's not "select the second element of class .bar." It's "select the second element if it also has the class .bar." The good news? There is a real selector that does the former:
Tyler Gaw reminds us that mask-image can repeat, resize, and move just like background-image does, which is fun to combine and play with. I could see it being a fun option for an <hr>, like Sara is doing.
Creating child pages in WordPress is simple to do. The only problem is, creating a child page doesn’t do anything for the front end of your blog and your viewers. You can’t just easily check a box or two and display child pages automatically on the parent page. This leaves your homepage, well… childless. Read on for the simple solution.
Parental Guidance Recommended
This article is rated PG, meaning that — like a parent — I’ll be offering some guidance on how you can better index your child pages with the help of some free WordPress plugins.
More specifically, showing you how to get a list of Child Pages to appear both on a Parent Page, and also in your sidebar.
By the time you read this article, you’ll have a nice idea of several options to set up your WordPress site and child pages.
From there you’ll be able to make a grown-up decision on what works best.
Having an option to showcase your child pages on your website is important if you have some vital information that you want prominently displayed.
Why?
If you don’t, many viewers might not realize a lot of what you want them to see is accessible.
If child pages are in the future for you, your life, er — website — is about to change.
Is a super child (page) in Dev Man’s future?
Good Parenting Means Good Plugins
Like a good parent, a good plugin can raise your child pages to be well-displayed.
Not only that, but they can also simplify the process, assist with customization, and – as you’ll see – much more.
These free child page plugins each have various features and benefits. I’ll be going over all of them in detail.
Plus, I have a “bonus” plugin that I’ll mention that deals with a child of a different magnitude.
It’s so easy to use, even a child can add child pages to their WordPress website.
Everything is achieved by using a shortcode. The shortcode is relatively simple and can be used wherever you’d like the child pages to appear (e.g. the homepage).
Example of child pages shortcode.
The child pages are displayed in responsive boxes, which include a page title, excerpt, and even a “Read more…” link.
I like how you can choose your layout with this plugin. It can be 1, 2, 3 or 4 columns.
If you choose to go with a three or four-column layout, it will resize to two columns on mobile devices, which makes them easy to read when viewing on the go.
Example of a one-column layout.
You can also choose the depth of pages to be displayed. All of this can be configured as a widget in the Sidebar area.
As you can see, there are a lot of options. This is where you can add the shortcode, exclude pages, show siblings pages, and choose the depth.
Once you have edited it how you’d like, it’s ready to go! You just paste the shortcode wherever you want to display it on your site.
Another example of what it can look like on your website.
Though there’s not a ton of customization options, the simplicity of this plugin makes it efficient and does the job.
With over 10,000 downloads and a solid 5-star review, this plugin has what it takes to add your child pages to your WordPress site.
It uses the parent and child relationship of your WordPress pages or categories and generates menus in specific areas.
You just assign a page or category to a parent and the plugin does the rest for you.
This plugin has solid reviews along with good support.
Let’s check it out!
To set it up, it’s all located in the widgets area from your dashboard.
Advanced categories menu.
Here you can add a title, display the highest level parent category, display menu, and use built-in styling.
Everything is located here and there are no additional places to customize.
Once you have configured it the way you want, it’s ready to go.
Example of what the child pages on your website can look like.
It is as simple as that.
There’s not much when it comes to additional customization, but like our previous plugin, it might not be necessary to suit your needs.
They have an option to Go Pro, which features advanced styling, priority support, custom link text, excluding pages, and more.
However, for just the basics, the free version does the trick.
Though there are not many advanced options, if you have some CSS knowledge, you can customize as much as you’d like in your theme’s style sheet.
This plugin is great when it comes to including a clean and usable menu for child pages.
It’s nice to be able to feature only what you want and have full control over your options. Plus, the ease of use makes for a quick fix when adjusting your website.
It’s a well-updated plugin that’s 100% responsive and mobile-friendly. I love how you can customize almost every Aspect of the pages; including arranging by keyword, images, recent pages, and more.
The layout of this plugin in your dashboard is a breeze to figure out.
It gives you an option for either a page or post right in the dashboard under Content Type.
Everything is clearly labeled and you can quickly set up your child pages however you’d like.
From the dashboard, you can choose what to include, exclude, and limit. There are also more advanced options for sorting and display.
The dashboard for adding a new view for a child page or post.
The Display Settings has all the options you need for setting it up the way you want it to look.
You have options for layout, format, and field settings. It also goes as far as allowing you to set up excerpts, HTML tags, pagination, opening child pages in the current tab or a new tab, and more.
The display settings area.
Once you have your child pages display all set up — you’re all set!
There’s a simple shortcode to embed it into your website. You can use it in a widget or for a theme file. They give you both options.
Code options.
When you save your new view, it’s listed on the dashboard. You can easily retrieve the code from there, too.
Views from the dashboard.
Want to see it in action? Here is a quick set up I created from a basic WordPress website.
The child pages featured below the parent page.
Like a lot of the other plugins, there is a Pro option. If you upgrade, you can get advanced customization options, more layouts, and options for Google Adsense.
I found the free version suitable as-is. The clean layout, design, and ease of functionality make this a pretty amazing free plugin for child pages.
I think it’s worth including because sometimes users want to edit a child theme. Or, you might not even be aware that this is an option for your WordPress site.
And since we’re talking about child stuff, well…why not include it?
Let’s dive in and take a look.
Once uploaded into your dashboard, you have four options to choose from:
Creating a new child theme.
Configuring an existing child theme.
Duplicating an existing child theme.
Resetting an existing child theme.
The child theme configurator.
One great quality of this plugin is how it’s step-by-step. There’s no overly complicated language or confusion, making configuring very simple.
The next step is setting up a theme.
You can customize however you’d like.
This includes where to save the stylesheet, ensuring plugins work with specific themes, and verifying the theme directory.
Selecting parent theme stylesheet handling.
This plugin has a lot to offer and it’s worth exploring for yourself if you’re interested in child themes.
The child theme example I set up.
There is an upgrade option that includes customizable plugin stylesheets, quick preview, color palettes, new styles, adding child theme files, and tutorials.
Depending on your skill level, it might be worth the upgrade. The free version is quite impressive as is.
Prefer To Take The Coding Route?
Now even though we’re mostly talking plugins in this article, with a little bit of coding knowledge, you don’t need a plugin to create child pages that are displayed on your homepage.
An example of this is adding the below code to your theme’s sidebar.php file.
Code for setting up child pages.
From there, you can edit accordingly by resizing, adding fonts, colors, etc.
Plus, a plugin can give you more options for functionality, displays, and features.
(No) Problem Child
To avoid problems with your site’s viewers seeing your content, a great child page plugin will do the trick. As you can see, you have a lot of options.
Each plugin is uniquely different, but they all make setting up child pages on a parent page much easier than, let’s say, parenting.
And if you need babysitting, we have 24/7 support, hosting, and security to keep your WordPress site and child plugins in good hands.
User groups not well served by use of the title attribute
• Mobile phone users. • Keyboard only users. • Screen magnifier users. • Screen reader users. • Users with fine motor skill impairments. • Users with cognitive impairments.
Sounds like in 2020, the only useful thing the title attribute can do is label an <iframe title="Contact Form"></iframe>.
From Adam and Una at Google, a podcast just about CSS. I believe I'm contractually obliged to link to that! Just one episode out so far, a shorty about the box model.
PPK digs into the subject, which he found woefully undercovered in web tech documentation. Our entry doesn't mention them at all, which I'll aim to fix.
Agree on this situation:
This is by far the most common use case for negative margins. You give a container a padding so that its contents have some breathing space. However, you want the header to span the entire container, ignoring the padding. Negative margins are the way to go.
Like this:
Anecdotally, I find negative margins fairly intuitive. Although that's surprising since there are so many oddities, like how they sometimes affect the element applied to itself (e.g. move itself to the left) and sometimes affect other elements (e.g. move other elements upward) — plus the fact that it affects margin collapsing which is weird anyway.
Eventually, I settled on a list of questions I would ask myself for each problem as it arose. I found that asking these questions, in order, helped me make the best decision possible:
1) Is this really a problem? 2) Does the problem need to be solved? 3) Does the problem need to be solved now? 4) Does the problem need to be solved by me? 5) Is there a simpler problem I can solve instead?
We've talked about what it takes to be a senior developer before, and I'd say this kind of thinking should be on that list as well.
Have you ever found yourself either writing a CSS selector that winds up looking confusing as heck, or seen one while reading through someone's code? That happened to me the other day.
At the end of it, I honestly couldn't even explain what it does to myself. LOL, that probably means there was a better way to write it.
But Hugo Giraudel has this handy new tool that will explain any selector you throw at it.
Here's how it explained mine:
An <ellipse> element provided it is the first child of its parent somewhere … within a <svg> element … itself directly within an <a> element provided it is hovered … itself somewhere … within an element with class site-footer__nav.
Bravo! It even spits out the specificity of the selector to boot. 👏
One particular pattern [for loading non-critical CSS] I’ve seen is the preload/polyfill pattern. With this approach, you load any stylesheets as preloads instead, and then use their onload events to change them back to a stylesheet once the browser has them ready.
So you're trying to make your stylesheet more async, but it causes two big problems:
You've kicked up the priority of the downloading higher than any other asset.
You've blocked the HTML parser too (because of the polyfill as an inline script).
Firefox does something fancy to avoid problem #2 in this particular case, but it affects every other browser.
I've never had good luck with fancy techniques to trick the browser into theoretically better downloading/rendering patterns. I'm kind of a stylesheets in the head, scripts at the end of the body kinda guy, but I know the web is a complicated place. In fact, in a quick peek, I see that Jetpack is inserting an inline script into my <head>, so that would affect my loading too, except they load it with an obfuscated type until later scripts execute and change it, probably to avoid this exact problem.
Anyway, Tim's advice:
• If you’re using loadCSS with the preload/polyfill pattern, switch to the print stylesheet pattern instead.
• If you have any external stylesheets that you’re loading normally (that is, as a regular stylesheet link), move any and all inline scripts that you can above it in the markup
• Inline your critical CSS for the fastest possible start render times.
Nice demo from Sebastiano Guerriero. When a fixed-position header moves from overlapping differently-colored backgrounds, the colors flop out to be appropriate for that background. Sebastiano's technique is very clever, involving multiple copies of the header within each section (where the copies are hidden from screenreaders) which are all positioned on top of each other and then revealed as the new section comes, thanks to each section having a clip-path around it.
A bonafide CSS trick if I've ever seen one.
It makes me wish there was an easier way of doing it. Like, what if there was some magical value of mix-blend-mode that would handle it? I got close enough that it gives me hope.
Here’s a neat idea from Tim Kadlec. He uses the Modheader extension to toggle custom headers in his browser. It also lets him see when images are too big and need to be optimized in some way. This is a great way to catch issues like this in a local environment because browsers will throw an error and won’t display them at all!
As Tim mentions, the trick is with the Feature Policy header with the oversized-images policy, and he toggles it on like this:
Feature-Policy: oversized-images ‘none’;
Tim writes:
By default, if you provide the browser an image in a format it supports, it will display it. It even helpful scales those images so they look great, even if you’ve provided a massive file. Because of this, it’s not immediately obvious when you’ve provided an image that is larger than the site needs.
The oversized-images policy tells the browser not to allow any images that are more than some predefined factor of their container size. The recommended default threshold is 2x, but you are able to override that if you would like.
I love this idea of using the browser to do linting work for us! I wonder what other ways we could use the browser to place guard rails around our work to prevent future mistakes...
The problem: you click a jump link like <a href="#header-3">Jump</a> which links to something like <h3 id="header-3">Header</h3>. That's totally fine, until you have a position: fixed; header at the top of the page obscuring the header you're trying to link to!
Fixed headers have a nasty habit of hiding the element you're trying to link to.
There used to be all kinds of wild hacks to get around this problem. In fact, in the design of CSS-Tricks as I write, I was like, "Screw it, I'll just have a big generous padding-top on my in-article headers because I don't mind that look anyway."
But there is actually a really straightforward way of handling this in CSS now.
h3 {
scroll-margin-top: 5rem; /* whatever is a nice number that gets you past the header */
}
We have an Almanac article on it, which includes browser support, which is essentially everywhere. It's often talked about in conjunction with scroll snapping, but I find this use case even more practical.
Here's a simple demo:
In a related vein, that weird (but cool) "text fragments" link that Chrome shipped takes you to the middle of the page instead, which I think is nice.
