DEV Community: Hanna (she/her)

Building (or Rebuilding) a Website with Accessibility in Mind

Hanna (she/her) — Mon, 11 Jul 2022 20:07:29 +0000

Websites have come a long way since HTML and CSS were the only tools available to build them. So has design sense-- companies want to express their brand's identity using the latest technologies to create dynamic content that catches and maintains their users' attention.

To ensure everyone is able to use your website, it is important to make sure the underlying structure of each page is set up in a way that works with the different devices and tools people may be using to interact with them.

Remember this beauty?

Navigating a Modern Website with Accessibility Tools

How do you process the content on this landing page?

A visual flow that may instantly make sense for those of us with normal vision and the ability to navigate the GUI with a mouse or trackpad can be a vastly different experience for someone without those abilities.

Some folks may rely on tools like a screen reader or keyboard to be able to access the digital world. These tools rely on software engineers to create apps with proper DOM structure so their users can to get to the information they need quickly and efficiently.

Generate the DOM Structure First

If you are not visually impaired, chances are likely that your eyes jumped to scan each header on the page, starting at the top left. You might have next read a section of body copy, if the header caught your interest. Though your focus may have been on the text, your eyes concurrently processed the two images of our mascot at work "building" apps, which are opposite each segment of copy. You could likely skim through the buttons made up of tech logos on the bottom right-hand corner of the page.

Someone without those same abilities could have a fairly similar experience if the page is built with their experience in mind. Based on our abilities as developers without a visual disability, our instinct may be to add elements as we see them on a design spec.

When building with accessibility in mind, a good rule of thumb is to start by thinking of what elements should be on the page without any of the design in place. Create the scaffolding for the content first, then add in the creative touches that differentiate your page.

Basic Considerations for A11y

Here are some basics to pay attention to so you can jump-start accessibility for your web application:

Order Elements in Each Section Properly:

Let's take a closer look at this section of our page. Because most languages read left to right, we start our attention on the left side of the page, which this time, is an image and might start coding like so:

<img />
<h1>Title</h1>
<p>some body copy</p>

A header should be the leading element in its section; otherwise it can create confusion for non-GUI users. On shipshape.io, we've used tailwindCSS to help us style something like this easily, using the order utility. order-last forces the div with the header and text to come after the image, like so:

<section class="flex">
  <div class="order-last">
    <h1>Title</h1>
    <p>some body copy</p>
  </div>
  <div>
    <img />
  </div>
</section>

Use Proper H-Tags

Accessibility tools rely on well-organized DOM and content to direct their users to where they want to get on a page. Screen reader users are given the option to listen to a list of headings on a page so they can skip around and get to their desired section for further interaction without going through every single element on the page, line by line.

An anti-pattern for using h-tag's is to set each header level to a certain set of styles and sizes and using them for different text styles through the page. This promotes using headers out of order. Instead, first make sure your content is organized in proper order, then create the CSS styles to meet your design needs.

🚫 Don't do this! 🚫

h1 {
  color: blue;
  font-size: 48px;
}

h2 {
  color: white;
  font-size: 48px;
}

h3 {
  color: white;
  font-size: 20px;
  font-weight: bold;
}

h4 {
  color: blue;
  font-size: 20px;
}

h5 {
  color: white;
  font-size: 20px;
}

In the example above, the intention was not to nest each section within each other, therefore we should not be using multiple levels of h-tags to style these elements of text, and instead create the right classes for each set of styles.

Use Semantic HTML

Is your website suffering from "divitis"? Look for segments of your page that can be converted to semantic HTML, which helps accessibilty tool users differentiate the parts of your page they can navigate. For example, use <button> instead of <div role="button">, which explicitly describes the element's intended interaction.

Use Descriptive Language for Interactive Elements

Generic text like "click this" or "link 1" can negatively impact accessibility - think about how a user would be able to know what clicking "this" does, or to what page a user will be directed to by a link. You can alternatively use aria-label to describe the link with a short descriptor.

Bonus: Using language that clearly communicates what interactive elements like links and buttons do also helps boost your page's SEO rankings. This helps sesarch engines create context for how your content is organized.

Tools to Help You Develop an Accessible App

Depending where you are on your journey with accessibility, it may feel like a lot of additional work to incorporate. Here are also some tools that can help you break things down into more manageable steps:

Lighthouse Chrome Extension

Google Lighthouse is a good starting place to get a general idea of how your current web app scores for accessibility. This developer tool is available for Chrome-based browsers as well as Firefox.

Lighthouse scans through your web app and offers a rundown of what is and isn't considered accessible. It can also measure your app's quality for load speed and search engine optimization. Keep in mind scoring 100% does not necessarily mean your site is perfectly accessible. Manual tests are recommended to fix any gaps the tool may have missed.

Color Contrast Checkers

Lighhouse will let you know about sections of your website that pass/fail color contrast. You can quickly determine at what colors and sizes of text have enough contrast with their background color by using contrast checkers like WCAG Color contrast checker or Colour Contrast Checker.

Your primary text should have enough contrast to be readable by folks with different types of color blindness. Additional text states like hover or active don’t necessarily need to pass the contrast test as long as you have other cues that someone is over a link for example (i.e.: by using semantic html 😉).

HeadingsMap Browser Extension

HeadingsMap is a quick and easy way to check if your headers are following the correct hierarchy for page navigation.

Hands-on Testing Your Web App

Last but not least, try accessing your website in different ways to make sure things are working how you intended. Try going through each of your pages using only your keyboard. Next try with your device’s built-in assistive technology.

Some common unintended scenarios are skipping over elements you can normally click on, or opening a modal and getting sent back to the top of the page when you close it instead of where you last were.

Having accessibility in mind while developing helps keep the web a better experience for a greater set of users online as well as you and your engineering team. Following some basic rules while building new features means less technical debt to fix these important issues down the line.

Handling Objects in React Component State

Hanna (she/her) — Thu, 27 Jan 2022 19:37:41 +0000

Understanding Primitive and Non-Primitive Data Types

Objects are a useful way to store data when you have a set of related values that you will be accessing or updating together within a given component. To understand how they are used in React, taking a deeper dive into its data type can be helpful.

A primitive data type, like a number or string, holds a value and therefore is inherently immutable.

let greeting = 'hello'
let hello = 'hello'
greeting === hello

// Returns true
// These 2 variables hold the same primitive data as values. 
// If a variable is reassigned, it would take on a different value.

Objects are non-primitive data and have a value as well as an identity. When an object is assigned to a variable, that variable acts as a reference point to the object's identity. Each object is unique, even if their properties might be identical.

const greeting = { text: 'hello' }
const hello = { text: 'hello' }
greeting === hello

// Returns false

While primitives can’t change value without changing reference, objects can change value and still hold onto its identity, so two seemingly similar objects are actually two entirely distinct entities to JS.

You can think of an object as a box and its properties as anything you put inside the box. You might put 10 chocolate chip cookies into each box, but they’re still distinct boxes from one another.

Three Ways to Update Objects with `useState`

Data in state should be treated as immutable - the values should not be mutated directly, but instead be replaced with a new one. The corresponding set method is then called with a new object in order for the change to occur.

This may not seem immediately obvious with objects, since properties of an object can technically be updated. However, when you try to handle the change this way with React, it might not update your UI as you’d expect.

const [user, setUser] = useState({ name: '' })
const handleChange = (e) => {
   e.preventDefault()
   user.name = e.target.value
}

return (
  <>
    <label>
      Name: <input type="text" value={user.name} onChange={handleChange} />
    <label>
    <p>{user.name}</p>
  </>
)

This is because re-renders in React are triggered whenever a change in state is detected. React’s virtual dom looks for a new reference and checks if it is the same as the old one. In this scenario, a re-render is not triggered because while the value of the object changes, its identity is still the same.

You have several options to properly update data stored as objects in React state. Your implementation will depend on the complexity of the component you are creating.

Create and Pass a New Object

// Instead try:
const input = {}
input.name = e.target.value
setUser(input)

// Or:
setUser({ name: e.target.value })

Both these solutions create a brand new object that is being passed to replace the current state, instead of directly mutating the existing state. Directly manipulating user.name does not work because it does not trigger a re-render.

Use the Spread Operator

You’re likely using an object because you have multiple pieces of data you want to store and use within state. In the below example, you may only want to manipulate one input at a time in a re-render. The spread operator facilitates this by unpacking existing properties of an object. Any consequent values are updated.

const [user, setUser] = useState({ name: ‘’, age: 0 })
const handleInputChange = (e, prop) => {
  setUser({
    ...user,
    [prop]: e.target.value
  })
}

return (
  <>
    <label>
      Name:
      <input
        value={person.name}
        onChange={(e) => handleInputChange(e, 'name')}
      />
    </label>
    <label>
      Age:
      <input
        value={person.age}
        onChange={(e) => handleInputChange(e, ‘age’)}
      />
    </label>
    <p>
      {user.name}: {user.age}
    </p>
  </>
)

Use a Library

If you find yourself using multiple objects or in your state, it may be worth it to install a library like immer. Immer provides a proxy object, referred to as a draft, so while your code appears similar to a direct mutation of state, a copy is created under the hood when an update when immer is used.

Why Won’t Object.assign() Update State?

The Object.assign() method takes 2 arguments - a target and at least one source and returns the target after copying the sources’ properties. Object.assign() won’t trigger a re-render unless the target provided is a brand new object. When the target is the original object, it still has the same identity, similar to updating a property directly. At this point, the syntax gets clunkier too, so it is likely easier to read without this additional method.

// This would not update state
setUser(Object.assign(user, userName))

// You’d still need a reference to a new object for this to update
setUser(Object.assign({}, user, userName))

So When Should an Object Be Used in State?

Following basic programming principles, break down state into “atoms” and use simpler values (primitives) when possible.

When values in a component are unrelated, it’s also helpful to separate instances of useState to visually signal your intentions. A user altering their name or age probably will not affect one another and therefore it makes more sense to be stored in 2 separate instances of useState. This helps simplify the component logic so that it is easier to read the overall logic as well.

const [name, setName] = useState(‘’)
const [age, setAge] = useState(0)

return (
  <>
    <label>
      Name:
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
    </label>
    <label>
      Age:
      <input
        value={age}
        onChange={(e) => setAge(e.target.value)}
      />
    </label>
    <p>
      {name}: {age}
    </p>
  </>
);

When you have three or more values you need to keep track of, your app can yield better runtime performance with a single object state than numerous instances useState. This approach may be better for something like a form with many inputs. When you have something like a controlled form component with many inputs that will all get saved or updated to one API, it may make visual sense to store these data in one object since they will reuse the same logic.

However, keep in mind that the runtime is still largely efficient, so if there is no problem, it may not be worth optimizing for this. When you have multiple state setters called one after the other in a single synchronous method, React will process them in one tick and run only one re-render.

As you can see, there are numerous ways to solve one problem - the tricky part can be to figure out what makes the most sense for your application. Contact the Ship Shape team to help you find the best solution for your next project.