Peering through a chainlink fence, you see the foggy outlines of the golden gate bridge.
Peering through a chainlink fence, you see the foggy outlines of the golden gate bridge.

During QA on almost every web project I’ve worked on, a time comes when somebody files a bug report like this:

These links should open in a new window.

I usually try to have a conversation with them about how opening links in a new window is unexpected behavior, it can be jarring, we should let users decide how to use their browser, et cetera, but I have never won that battle and always end up implementing target="_blank".

On one project I inherited though, a bunch of links were already opening in a new window. I was doing an accessibility audit and remediation. In order to keep the links opening in a new window and meet WCAG guidelines, links that opened in a new window…


Image for post
Image for post
Hooks. Get it? Photo by Dave Phillips on Unsplash

Code wise, the coolest thing I’ve learned over the summer is how to implement React hooks. I’ve been using it on a new client Gatsby site, and I think hooks have the potential to really clean up the codebase over what I would write with typical class components.

useState

The simplest implementation I have so far is using the useState hook. This is a really easy way to add state to a component without making it a class.

An example of this is making an input a controlled component. Here’s how simple it can be:

const TextInput = ({ id, label }) => {
const [value, setValue] = useState('');
return (
<>
<label htmlFor={id}>{label}</label>
<input
type="text"
id={id}
onChange={(e) => setValue(e.target.value)} …

Image for post
Image for post

For all its benefits, working remote- as most of our Mediacurrent team does- still has its challenges.

The one that people ask me about the most is, “how do you keep any kind of work / life balance when your work and home are inseparable?” For me, the answer to this has been what I call my “shutdown ritual.” It’s basically just how I try to end my workday every day, but I’ve found putting some thought into a routine has helped a lot to make my evenings more relaxing and my mornings more productive.

In this post, I’m going to…


Image for post
Image for post
Photo by NESA by Makers on Unsplash

On Twitter, in Slack, on Discord, or in IRC, or wherever you hang out on the internet, you may have heard some formulation of the following statements:

  • React doesn’t support accessibility;
  • React makes websites inaccessible;
  • People should write accessible HTML instead of React;
  • React is ruining the internet.

There’s a somewhat common misperception that JavaScript frameworks and web accessibility don’t mix. React, being one of the largest JavaScript libraries, is often the target.

In my career, however, I had the interesting experience of being introduced to accessibility and ReactJS at around the same time. …


Image for post
Image for post
A simple checklist goes a long way. (Photo by Glenn Carstens-Peters on Unsplash)

I’ve said this before, but I remember learning very little about web accessibility when I was first entering the front end developer ranks. And then one day at work, somebody asked me to put together an accessibility audit for a client. The conversation was probably something like this:

Cool agency office, circa 2016:

Project manager:

Hey Ben, can you put together an accessibility audit for the website we built a while back? Our client is asking for it.

Me:

What’s accessibility?

Project manager:

Not sure, but I think it has something to do with Section 508.

Me:

has no idea what that…


A large video hero can be a neat experience when done well — but adding video capability to the homepage is just asking for somebody to go in and add a 25mb video and throw all your performance optimizations out the window.

Image for post
Image for post
Lazy pandas love lazy loading. (Photo by Elena Loshina)

I’ve been on a few teams who wanted to do one of those full-screen background videos on the home page. And I’m usually not too thrilled to do it because how often they turn into performance nightmares. I’m embarrassed to say, there was once a day I put a 40mb background video on a page. 😬

The last time someone asked me to do it, I got curious about how I could treat the background video as a progressive enhancement for users on connections that could handle a potentially large download. I made sure to emphasize to our team the importance of a small, compressed video file, but I also wanted some programmatic magic to happen too. …


Image for post
Image for post
Write an awesome cover letter, get an awesome job.

Some people seem to think that you can skip the cover letter on job applications and it isn’t needed in this day and age. I think they see it as extra work that holds them back from applying for more jobs.

But that’s looking at it all wrong. If a company is asking for a cover letter, that is your chance to wow them with how unique and wonderful you are. Yes, you can be really creative with your resume too. But if they are giving you the opportunity to send a cover letter, why not take advantage of it?

Plus, if you come up with a good cover letter template, you can repurpose it for multiple job applications. And guess what - I’m sharing the exact cover letter I sent when I was looking for remote front end work back in the fall of 2017, so you have no excuse not to include one now. …


Some of the quickest accessibility wins can be simple fixes. But if you don’t know what to look for, they can be hard to spot.

Maybe a key image on your site is missing an alt description. Maybe the headings on a page look right, but actually are in the incorrect order. Or maybe your newsletter sign up form is missing a label. Any of these issues could prevent someone from understanding your web page or completing the actions you want them to take on your site.

Identifying these issues is important, which is why there are a whole slew of web accessibility checkers available to help catch these problems. I want to introduce you to five tools that you might find helpful in identifying accessibility issues. Just remember though, that automated tests can only catch 20–30% of all issues. …


Image for post
Image for post

It’s easy to think about a layout as being a primarily visual concern. The header goes up top, the sidebar is over here, the call to action is in an overlay on top of the content (just kidding). Grids, borders, spacing and color all portray valuable visual data, but if these hints to the structure of a page are only visible, some users may find your content unintelligible.

You can experience this first hand if you try using a screen reader on the web. When I fired up VoiceOver on my Mac and took it out for a test drive, I realized that to a screen reader user, a lot pages are just a big heap of ‘content’, missing helpful organizational cues. …


Image for post
Image for post
Web accessibility doesn’t have to be intimidating.

Web accessibility is getting a lot of attention these days, but it can be intimidating. Here’s a simple introduction to web accessibility: what it is, why it’s important, and the benefits that come along with accessibility.

At the most basic level, web accessibility means building websites that are usable by as many people as possible.

In the US alone, 57 million people report having a disability. That’s one in every five people — equivalent to the entire populations of New York and California combined. And around 30 million of those people report having a severe disability.

How can web developers make sure their sites are accessible to as many users as possible? …

About

Ben Robertson

I write about front end web development, accessibility, and remote work. ✍️ Writing at: https://benrobertson.io. 🛠 Working on: https://frontendremotejobs.com.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store