Jeremi Lashua

Got a web site? Get to know the ADA.

April 7, 2023 by Jeremi Lashua

What’s the ADA and why should you care?

The Americans with Disabilities Act (ADA) is a law that prohibits discrimination against those who have disabilities. Signed into law on July 26, 1990 by President George H.W. Bush, the ADA protects the rights of those with disabilities to be employed, use government resources, use public amenities, commercial facilities, communications and transportation. ADA compliance is not an option; it is a responsibility to make services and products available to everyone.

ADA & WWW

The Web Content Accessibility Content, or WCAG, provides website developers and Web content creators with the best practices for ensuring that websites are accessible to those with disabilities. WCAG addresses visual, auditory, cognitive, physical, speech, learning, language and neurological disabilities. With the growth of technology and variations in disabilities, it is nearly impossible to create a perfect solution. The WCAG is always working to update and expand the guidelines to provide the best possible solution for those with disabilities.

WCAG 2.1 has expanded WCAG 2.0 to include new success criteria which can be found here. Items like orientation, text spacing, and identify input purpose have been on web developers’ radar for a long time. These days, most websites you visit are easy to navigate no matter the orientation of your cell phone. The text on those websites is at a readable size, and you know what information you are submitting when completing a form.

New topics like animation from interactions, concurrent input mechanisms and timeouts are more challenging to address for those with disabilities, due to their complex nature.

A, AA, AAA…what is this, baseball?

There are three different levels of ADA compliance which developers aim to reach. Each level has a set of guidelines and recommendations for compliance, but reaching compliance can be challenging based on the content you are displaying.

Level A is the minimum level of compliance. It means you’ve implemented the most basic and easiest of the recommendations.
Level AA compliance means that all level A & AA recommendations are met, or that you have provided an alternative version of the web page which does comply. This is the level of compliance we are always looking to achieve.
Level AAA means that you have complied with all the recommendations provides by the WCAG for levels A & AA and are continually working to improve your website compliance.

Your website & the ADA

So at this point you are probably asking… Is my website ADA-compliant?

Chances are, your website is not fully ADA-compliant. You are probably doing some good things toward compliance, and some bad things that you can easily fix to get close to full ADA compliance. Let’s start with some simple things that will help you reach Level AA ADA compliance.

Provide alt-text for all your images!
Provide captions for any video or audio on your website.
Ensure that audio can be paused, stopped, and has volume control.
Ensure the code structure of your website has a consistent template structure and passes the validation markup tool.
Ensure that forms are fully accessible to screen readers

Any time you update the content of your website, you can work on your ADA compliance. The Web Accessibility Evaluation Tool allows you to review any website for what improvements are needed to reach ADA compliance. Like many aspects of the web, ADA is an ever-moving target to work toward, and it takes teamwork and collaboration to reach this target.

For more information on ADA compliance and how you can take your website to the next level, feel free to reach out to us at Stride.

How to add a video to your WordPress website

April 7, 2023 by Jeremi Lashua

Videos can tell an impactful story, and add dynamic, enriching content to your site, which can do more for your brand than words and photos on a page. If done properly, videos can also do wonders for your SEO by helping your page rank higher in a Google search.

Adding videos to your WordPress website doesn’t have to be tricky; we’ll explain the basic steps to easily embed videos so you can get the most out of your web presence.

First, upload your video to your company’s Youtube channel.

Most WordPress plug-ins pull video content directly from YouTube, so make sure that your video is properly uploaded to your own channel. Take care to name the video in a way that you would want your audience to see, as this information will most likely show up in multiple places, including your website.

While YouTube is the most commonly used social media platform for videos, WordPress supports videos from a list of other common channels, like Cloudup, Vimeo, TikTok, Tumblr, and more. Click here for the full list of embeds supported by WordPress.

Using the simple oEmbed method to embed a video

oEmbed is probably the easiest way to embed videos into your WordPress site, and you don’t need any coding knowledge to do it. Here are the steps:

Go to YouTube.
Find the video you wish to embed on your site.
Hover your mouse over the URL bar and copy the video’s URL.
Next, go to your WordPress visual editor.
Paste the video’s URL and WordPress will automatically embed the video.

video displayed on website — A video embed on one of our website designs for Encore Renewable Energy

That’s it! It’s just that easy. Now get ready for more traffic, visibility, and shares!

WordPress website image upload guidelines

April 7, 2023 by Jeremi Lashua

WordPress makes it easy to upload and place images into your website, but there are some common issues and simple guidelines that will help keep your images looking great, and your WordPress website running well.

Whenever an image is uploaded into your WordPress website media gallery, the site will generate additional sizes of this image that can be used throughout the site. Default sizes include “thumbnail,” “medium,” and “large” image sizes. These images are typically sized 150x150px, 300x300px, and 1024x1024px, respectively. You can view and edit these default crop sizes for your site by visiting the Settings > Media page in your dashboard. Your site may also utilize additional custom image sizes; for example, a large “hero” image sized 1920 x 1280 pixels may be added to your site. A hero is an image typically used at the top of your web page that’s large and extends full-width.

File dimensions (measured in pixels)

WordPress websites will only generate alternate images that are smaller than your original upload. In order for all image crops to be generated, the uploaded original image needs to be at least as wide and tall as the crop dimensions. So if you upload a 75 x 75 pixel image, no alternate sizes will be generated because the original is smaller than all of the crop sizes. A 1024×1024 image will be cropped into all the image sizes specified above except the “hero” sized image.

What are the ideal image dimensions for WordPress websites?

If you upload a small image into a location on your site that calls for a larger crop – for example, a featured “hero” image – the image will either not appear, or it will appear blurry and pixelated. For this reason, we recommend uploading images that are as large as possible, but not more than 2560 pixels wide or tall. WordPress websites will not generate additional sizes for images that are larger than 2560px wide or tall.

File sizes (measured in kilobytes)

Not only do the dimensions of your image matter, but so does the size. Large images may look nice on your website once they load, but they can slow down your page load times dramatically, especially for people with slower connection speeds. We strongly suggest first optimizing your images using photo editing software like Adobe Photoshop, Lightroom, GIMP, or a similar online optimization tool. We recommend keeping your images under 300-400k for large images and considerably smaller for simpler images, logos, and illustrations. Make them as small as you can without noticing substantial image quality degradation.

What file types does WordPress support?

There are lots of file types out there, with more coming onto the scene every year. But generally speaking, the JPG file format is your go-to for photos, logos, and illustrations that don’t require transparency. PNGs are great for logos, and any images that require transparency, but typically result in larger file sizes. GIFs are usable for logos, simple animations and illustrations with limited colors, but they don’t scale well and animations can result in very large file sizes. SVGs are excellent for placing scalable vector logos and illustrations at small file sizes. Special vector-based illustration software like Adobe Illustrator is required to generate scalable SVG graphics. PDFs are used for downloadable documents and should not be used for images on a website.

Image file types that are NOT supported by WordPress by default include .tif, .eps, .ai, .bmp, .psd, and .pages, to name a few.

Common image issues:

My image appears blurry on the site

This is typically caused by uploading a small or poor quality original image and then making it larger than its original size. With the exception of SVGs, scaling an image above its original size will degrade its clarity.

I get an error when uploading an image into my media library

This typically happens when an image is either too large, or in a file format that is not allowed on your site. Try downsizing and/or optimizing your image.

My SVG shows up in my media library but isn’t showing up on my page when placed

This may be caused by having no dimensions added to the SVG, to fix, adding an image size in the WordPress admin screen should solve this issue.

I get an error message when I upload an SVG

Not all WordPress websites allow SVGs. Ask your web developer to enable secure SVG uploads.

Most of the images in my photo gallery/archive page are of the same shape, but a few are different.

This happens when an image doesn’t meet the minimum dimension requirements for a particular page on the site. To solve this problem, upload an image that is at least as large as is required. Check with your web developer for minimum dimensions, as every site is different.

My image has a white background and I want it to be transparent

In order to have a transparent background on an image it will need to be a PNG, SVG, or GIF file that is created properly with a transparent background. JPGs always have a background color, usually white.

Contact us today to talk about our web design and development services. We’d love to chat with you about what a WordPress website can do!

How to make your website ADA compliant

April 7, 2023 by Jeremi Lashua

As the world becomes more aware of how people with differing abilities access products and services, web accessibility has become a priority for many of our clients. Many of them have a legal obligation to ensure people with disabilities can access their websites, and they’ve leaned on Stride to apply our expertise to make their sites ADA compliant.

What is ADA compliance?

ADA compliance refers to website accessibility standards set by the Americans With Disabilities Act (ADA). ADA requirements apply to state and local government agencies, private employers with 15 or more employees, and businesses that operate for the benefit of the public.

Even if your business or organization doesn’t fall under the above criteria, you may still care about making your website as accessible as possible. We’ve applied our web design and development experience to create this handy tip sheet to address the most common errors in website accessibility and how to fix them.

Write ALT text for every image

ALT text (or ALT tags) help people with visual impairments have equal access to web content. Web visitors who are visually impaired sometimes use screen reading software that reads content on a page out loud to them. Writing ALT text for your website’s images that describe the images and their purpose helps users understand your content when they can’t see it.

Example: Man wearing a plaid shirt who uses a wheelchair smiles as he plays the guitar

Man wearing plaid shirt who uses a wheelchair smiles as he plays guitar

Best practices in writing image ALT tags have changed over time. Read our recent blog post to get up-to-speed on how to write them.

Colors and fonts matter

There should be a high level of contrast between the color of your text and the background it’s on. If the text is difficult for a sighted person to read, imagine what it’s like for someone with a visual impairment. White paired with black, dark blue, or dark gray is best. Also, be sure to use color for design purposes only, and not as a prompt or to convey information. For example, don’t say “Click the red button to continue.”

Website fonts should be a minimum of 16 pixels, and it’s preferable to build in the option for the user to make the text larger if they wish. Most browsers do this, but it’s best to be sure your site is compatible with browser scaling features and software that expands text size for users with visual impairments.

Use headings and subheads as often as possible

Headings are good for organizing content. Well, headings are good for a lot of things, actually. They’re good for SEO, they make a page easier to scan, and they help people who use screen readers navigate a page’s content more easily.

Remember that making text bold or large won’t be recognized by a screen reader as a heading, so it’s important to use proper headings and heading structure. H1 should be the page title, and H2 should be your first heading. A further subhead should be H3, and so on. Screen readers will read these headings in order, so the content of each header should be written accordingly.

Fix your empty links, buttons, and forms

Another common mistake in website accessibility is inadvertently making links, buttons, and forms difficult to use. If your website has forms, make sure to use form labels instead of placeholder text in the form fields, as placeholder text disappears as soon as someone starts typing into the form field.

As for buttons and links, make sure they’re descriptive and use text that describes where they’re taking the user. Buttons that read “Click here” to “Learn more” aren’t very helpful to a screen reader. Instead, use language like, “Learn more about web accessibility.” If a link opens another document, like a PDF, make sure to name the document and the link using a descriptive name that says exactly what the document is about.

While this isn’t an exhaustive list of everything that makes a website accessible and/or ADA compliant, this tip sheet describes some of the most common mistakes and how to address them. For additional help, there are many website accessibility testing tools out there to try. There are also several great accessibility plug-ins for WordPress websites that help solve many of the technical accessibility issues easily, and they’ve worked great for many of our clients.

We’re here to support all your web design and development needs. If you h