Thoughts on programming, web development and design.

Circuit Board

Category: Accessibility Page 1 of 2

Getting Started with JavaScript Accessibility

Accessibility means making your content as available to as many people as possible. You don’t know who visits your content. What browsers they use or how fast their internet connection is. You can build an accessible website with JavaScript You need to keep these considerations in mind.

Getting Started with JavaScript Accessibility

Image by Daniel Agrelo from Pixabay

JavaScript can be necessary

Sometimes, a no JavaScript solution may work. Other times, you may find that JavaScript helps to improve accessibility. It depends on what you want to do. Sara Soueidan wrote about her experience with building a tooltip without JavaScript. She found that it was harder than she thought.

Many people use a keyboard to surf the web. To navigate by keyboard, you jump from one focusable element to the next. You can start by using the tab key to move from one element to the next.

Which elements are focusable? HTML has interactive elements with built in focusability. Elements like text fields, buttons and select lists. You can navigate them by keyboard automatically.

Sometimes, we use HTML elements like <p>, <h2> or <div> to create custom interactive components. If you don’t make these elements focusable, this creates problems for keyboard users. The tab index attribute solves this problem by making a non-focusable element focusable.

Use the right amount of JavaScript

The problem starts when you rely on too much JavaScript. HTML and CSS can do a lot of things that you used to need JavaScript for. Now, you can use HTML to build your content and supplement with JavaScript.

Use the <button> tag to create buttons. You can use <div> or <span> tags to recreate the functionality of a button. When you choose to do this, you have to write extra code to mimic the behavior of a button. It is easier to use the button tag when you need a button.

Want to know more?

Use the Accessibility Developer Guide for best practices on creating accessible websites. Or JavaScript Accessibility Best Practices.

Image by Daniel Agrelo from Pixabay

Accessibility Resources and Tools for Developers

What is accessibility? It is making your website as usable for as many people as possible. You want to make sure it works on different devices and slow networks. People with changing abilities due to aging, physical issues or situations.

Accessiblity Resources and Tools for Developers

Photo by Sarah Pflug from Burst

To make your website or app usable to as many people as possible, you’ll need to use different accessiblity resources and tools.

Design

Color is one tool that can make or break a design. Choosing the right colors can be hard. Radix Colors helps you to select colors to design beautiful and usable websites and apps.

When you need to check if two colors and the font work well with each, you can use Accessible Colors. Not sure how to choose the right colors? Stephanie Walter has a list of resources, tools and tips on color accessibility.

Many web development teams use style guides or a design system. These tools help to make your website or apps consistent. A11Y Style Guide gives you tips, tools and WCAG guidelines for developing. It includes a pattern library focused on accessibility. You can use their guide as a reference for your own style guide.

Development

You want to build things that people want to use. What do you need to know? You need to understand how people use websites and what you need to know to optimize it. The Accessibility Developer Guide explains what to look for and how to fix it. Many problems can be fixed by looking at how you write HTML.

Testing

As a developer, you need to test your code. You also want to test how use to easy your UI is as well. There are different tools to choose when you test the accessibility of your website or app. Here are a couple to start with:

  • Your keyboard. Many blind users navigate a website using their keyboard. Use the WebAim guide to Keyboard Accessibility.
  • WAVE – a free web accessibility checker
  • Lighthouse – an open source tool for helping you improve the quality of your website.

Where to find more accessiblity resources and tools

Use this short list to learn more about how you can add accessibility to your workflow.

UX for Senior Users

Accessibility helps makes your apps usable to users with different abilities. When you have older users, accessibility matters. You want their user experience with your app to be easy and memorable.

Two seniors using a tablet

Photo by Nicole De Khors from Burst

Many senior users have difficulty using apps and websites. The fonts may be too small, the colors make it hard to read and navigation isn’t obvious. How do you make the UX for older users better?

Make it readable

Start by choosing fonts that are easy to read. Descriptive fonts can be challenging to read. Use them sparingly.

Font sizes are tricky to get right. If you choose a size that is too small, you text becomes too hard to read. Make it too large and users can’t won’t read it as well. What looks good with one font won’t work for another. CSS-Tricks explains how to resize your fonts.

Use color and contrast to help guide your users

Color and contrast can help user perform tasks, keep track of where they are and pick out links from text. Choosing the right colors for you users can be challenging. Some color combinations are difficult for users with vision problems. The Web Accessibility Guidelines v1.0 explains Contrast and Color. Plus, it gives you a sample color palette to choose from.

Make things easy to click

Older users can have trouble clicking on buttons and links. You want to make the big enough so they can click on them.

Use UI patterns that are easy to remember

Establish a design style that is consistent and easy to use. Use icons, fonts, text, photos and other design patterns to help reduce the learning curve. Include breadcrumbs to help users keep track of where they are.

Learn more about UX for Seniors

How to Pick Colors for Better Readability

Have you thought about the readability of your website? The colors you choose can impact how readable people find your website to be. If people can’t read your website, they may become frustrated and go somewhere else. How do you choose the best colors? By testing your color combinations for contrast.

How to Pick Colors For Better Readability

Image by vixrealitum from Pixabay

What is color contrast?

Contrasting colors or complementary colors are from different segments of the color wheel. For example, red is a warm color and blue is a cool color. They appear on different segments of the color wheel which makes them contrasting colors.

By using contrasting colors in web design, you provide enough contrast between content and background so that your website is readable to as many people as possible. You want to make sure your buttons, body text, logos and other content has the right amount of contrast.

1. Choose a color palette

For some projects, you may have a pre-existing color palette to work with. If you don’t, use a tool like Material Palette or Colormind to choose a color palette. Or choose from these 90 Accessible Color Classes to build your palette.

2. Find a color contrast analyzer

You can find many color contrast testing tools on the web. Pick one that works for you. Here are a few to test out:

3. Pick your primary colors

Is your theme light or dark? You want to pick colors that work best with the types of colors for your theme.

4. Choose colors for the body text

You may need more than one color for the body text. Each color can be for a specific task like headers, body and sub-headers.

Buttons and links tell users that you want them to do something. You want to pick colors that draw attention to them and easy to read.

6. Establish color combinations

You may need to add error messages, calls to action or other areas for users to pay attention to.

7. Check your results

After you build your website, use the accessibility checker in the browser for any additional issues. If you find problems, use a contract analyzer and retest.

Learn more about readable colors

Build Code With Accessibility

What is accessibility in web development? It means building websites that as many people as possible can use. Accessibility benefits everyone not only people with special needs. Have you tried to use your phone in outside in the side or with one hand? You may have given up or waited until later to do what you needed. If you have special needs, using an app or website can be a challenge. Accessibility means developing websites that people can use regardless of their physical and cognitive abilities. Or how they access your website.

How do you build software with accessibility in mind?

In her talk at Dot Net Conference 2019, Rachel Appel explained how developers can build accessible websites without greatly changing how they code. People have variety of needs. When you develop, you need to make your code usable for people with a wide range of visual, cognitive, hearing and motor abilities.

Visual

People with visual issues include low vision, blindness and color contrast. Some people may use a screen narrator to help them navigate your website. For people using a screen narrator, use skip links. Skip links allow them to skip over the navigation and go directly to the content.

For making sure that your site is readable by as many people as possible, you can use Color Oracle, a free color blindness simulator. It is available for MacOS, Linux and Windows. You can also use Accessible Colors or WebAim’s Color Contrast Checker to ensure check your color choices.

Cognitive

People with cognitive difficulties includes learning and age-related issues. You want to keep things simple and clear. Write using short sentences, active voice and simple words. Use headings and labels to help people easily find information. See Mozilla’s Cognitive Accessibility for more tips.

Hearing

People have a wide range of hearing abilities. With videos or audio, you want to include transcripts and close captioning. In your software, don’t rely on sounds alone for feedback.

Motor

People with motor issues can have tremors, difficulty moving a mouse and more. Avoid pop-ups if you can. When you can’t, make sure that they can be closed easily. Use alt tags on all images that are not decorative.

By developing for a wide range of people, you make sure that your website is usable no matter how or where they access the web.

Read more

Page 1 of 2

Powered by WordPress & Theme by Anders Norén