Global Accessibility Awareness Day (GAAD) is May 16, 2024! GAAD was created to help bring attention and awareness to digital inclusivity. No matter your role on a project team, digital accessibility should always be a priority from start to finish. Why is accessibility so important?

• Over 1 billion people worldwide have a disability, and that number is growing every day
• 15% of people with disabilities say they never go online, compared to 5% of people without disabilities, according to Pew Research Center
• According to a survey by Click-Away Pound, 71% of disabled users are forced to leave a website if they find it difficult to use

Digital accessibility directly impacts people’s ability to access information, buy products, apply for jobs, engage in discussion, and everything else that people do online that is becoming critical for modern life. Accessible spaces even benefit people without disabilities, as it allows anyone to take in content though their preferred method (reading the captions on a video instead of listening in a noisy environment, for example), and often breeds innovation as engineers work to find the best way to be sure everyone can access information equally.

The World Wide Web Consortium (W3C) has developed the Web Content Accessibility Guidelines (WCAG) in an effort to standardize digital accessibility. However, many websites unfortunately fail to meet these standards, leading to a lesser-quality user experience. WebAIM’s yearly report has highlighted some surprising statistics about WCAG across the top 1,000,000 home pages:

• The most common accessibility failure across home pages is low contrast text
• 98.1% of home pages have at least one WCAG 2.0 failure
• On average, there are 56.8 accessibility errors per page (this increased 13.6% from 2023!) 
• 16.8% of home pages had more than one <h1> tag

As you can see, there is still a lot of work that needs to be done to create a more accessible web for everyone. If you’re interested in learning more about digital accessibility and how to improve accessibility on your own projects, there are plenty of resources and online courses available. Resources range from free, to paid courses, to professional certifications. Below are some courses and resources that we recommend.

Free Courses and Resources

If you’re looking to introduce yourself to digital accessibility, these free resources are a great place to start:  

• A11ycasts with Rob Dodson - A series of video tutorials on YouTube that highlights topics including semantics, focus, the correct way to use a button, and a11y testing
• The Beginner’s Guide to Web Accessibility - An article by Dequeue University that summarizes why digital accessibility should be a priority, and how to determine if your website is accessible
• Common Mistakes with Using Colour in Accessibility - Digital designer Andrée Lange provides insights into how to take color contrast into consideration when designing for the web
• Deque Accessibility Resources - Dequeue offers a variety of free accessibility resources, including webinars, blog posts, and their accessibility testing browser extension, axe DevTools
• HTML Semantics and Accessibility Cheat Sheet - WebAIM provides a list of the most common HTML tags that have an impact on digital accessibility
• MDN Accessibility Tutorials - MDN is an open-source project documenting web technologies, which also includes an informative section on web accessibility documentation and best practices
• Section 508 ICT Testing Baseline - Outlines minimal accessibility testing requirements for federal agencies subject to Section 508
• WCAG 2.2 Quick Reference - WCAG are a series of web accessibility guidelines released and maintained by the W3C, with 2.2 being the current version of the guidelines. This page provides a reference to standards that websites should meet in order to meet current accessibility standards
• Web.dev Learn Accessibility Course - A series of informative articles ranging from beginning a11y topics, to more advanced topics including animation and motion

Deep Dives with Paid Tutorials

If you’re a developer who has experience in accessibility and want to dig more into the topic, these comprehensive tutorials will help you improve your a11y knowledge:

• Accessible Web Academy - Accessible Web Academy includes more focused a11y courses for designers, developers, content creators, and marketers looking to target specific topics 
• Inclusive Components - There is a free online summary of Heydon Pickering’s Inclusive Components, but you can also purchase an eBook on the topic. Heydon’s blog provides examples of a pattern library that bakes accessibility into each component
• Practical Accessibility by Sara Soueidan - Sara Souedien is a prolific front-end developer who specializes in accessibility. Her course, Practical Accessibility, is a comprehensive guide for all developers, from those looking to familiarize themselves with accessibility, to experienced developers looking to expand their a11y knowledge.

Advanced Knowledge with Certifications

• If you want to take the next step and become a certified professional in accessibility, IAAP offers professional certifications in digital accessibility:
  • IAAP offers five certification options, CPACC, WAS, CPWA, ADS, and CPABE
  • Deque University offers a curriculum to help prepare for IAAP certification exams
• The Department of Homeland Security also offers a “Trusted Tester” certification for Section 508 compliance
• W3C offers a free Digital Accessibility Foundations course, with an optional verified certificate ($99) upon course completion

As the world’s population and number of disabled users continues to grow, it’s clear that implementing digital accessibility in your products is more important than ever. By implementing the information from these lists, you can help users of all abilities access the content that you share, ensuring a better internet for everyone.

Users expect a website to load fast. An average web page loads in about 2.5 seconds. The longer the user has to wait, the higher the user bounce rate. There are a lot of factors that go into site speed, but images account for about 75% of the page weight on an application or website. Google’s Core Web Vitals uses several metrics to rank sites. Visual site speed or largest contentful paint affects ROI as slower sites have fewer repeat users and fewer sales.

Without properly sized images, both site speed and image quality are affected. Accordingly, we use several methods to deliver properly sized images. Our primary solution is imgix because it is easy to implement and saves managers and clients time and effort. 

Imgix Key Features

Imgix provides a lot of features — some we consistently use on projects, and others we use in very specific situations. 

Responsive Images

Setting up responsive images can be complex. As the variety of devices and their screen resolutions continue to expand, managing all the different image requirements is increasingly challenging.

Consider this scenario: a website’s images look crisp and clear on a high-resolution monitor. When that same page is viewed on a mobile device, the images are so large the page takes forever to load. A solution could be to upload a smaller image for mobile, right? It's not quite that simple. We need eight or more different sizes of the same image to account for different screen sizes and retina screens. Keeping track of all the image sizes and saving each size gets complex and would be nearly impossible to do manually on a site that has hundreds or thousands of images. 

One of our clients, National Park Foundation (NPF), wanted to clarify its message to better target major donors. Their gorgeous, large scenic images are essential to their website strategy.  NPF needed the images throughout their site to be crisp and clear at all screen sizes. Using imgix, NPF content managers can load high-resolution images to the CMS and not worry about the site's speed or performance. They rely on imgix to deliver the correctly resized image for any user's screen.

Imgix does this with their Device Pixel Ratio and Client Hints which automatically sets the pixel density for the image based on the user's device. Those API parameters can be easily set in the URLs for the image’s `srcset`. This allows developers to set an image width for an image `srcset` and then imgix delivers the right pixel ratio image to the user. We use `srcset` with imgix on other client sites like Bezos Earth Fund and Human Rights Campaign as well.

Resize and Cropping

Imgix allows you to crop images in addition to setting an image’s focal point. So, only one image needs to be uploaded and it can be used at multiple sizes and croppings throughout the site. Let's say we upload a large landscape image, but on some pages we only need to use a portion of the image cropped as a square. Imgix will crop the image and deliver the smaller versions on the pages we need while persisting the larger versions on other pages.

At Viget we use resizing and cropping on our own website, including our articles, to crop the staff photo to a smaller size at the top of the articles. This makes it possible for us to upload the staff photo once and the article image gets created automatically. 

Color Palette 

Another feature that we've used on client sites is the Color Palette API which allows you as many colors as you want from an image. For example, the Shedd Aquarium website that we built uses this feature by pulling a vibrant color from the image and setting it as the background color for the page hero. Aside from taking the manual work out of closely aligning photography with a page’s design, there’s an additional benefit: if you are on a slow connection, you will see a dynamic colored banner at the top before the image loads.

Image Upscaling

Another valuable feature is the ability to upscale images. Even if you upload an image that is low resolution, it can still be used at a higher resolution. This is especially useful for e-commerce sites or applications where users are uploading their images.  The upscale feature uses Generative AI to take a pixelated image and create a higher-resolution image. The final image will not be perfect, but it looks more professional. See the upscale demo on imgix.

PDF Preview Images

There is also a PDF page to image option in imgix. The API enables the generation of a page-specific image preview from the PDF, which can serve as both a thumbnail and a full-size preview. When we built AHIP.org, they had a resources section for their members containing quite a few PDFs. To help with clarity and findability, we used imgix to show previews of the PDF documents to non-members. This feature allows AHIP to upload resource PDFs without having to also upload any thumbnail images. 

Face Detection

Another nice feature is a face detection parameter that you can pass to the API. This allows you to upload a photo and no matter the cropping or size it will keep the face as the focal point of the image. We used this feature on NEA for their team member page. It's great for user profile images that are used in different contexts throughout the site. 

Video Streaming

Videos have become a key design element on websites. However, determining which service to use for embedding those videos is an ongoing topic of discussion. Video platforms enable you to integrate the video onto the page, yet they introduce scripts that may impede page loading speed. Imgix offers a video embed service that allows content managers to keep all the images and videos in one place. The videos are automatically encoded to Adaptive Bitrate Streaming to get the best compression and video quality. So, videos load fast and look great on mobile and desktop. 

Performance 

A lot of CMSs have image transformations built in. An image transformation encompasses everything for that image including responsive sizes, cropping, resizing, and face detection from the original. This is great for small sets of images, but transformations quickly get out of hand the more images there are on a site. For example, the homepage of the National Park Foundation has a minimum of 96 image transformations. 

Processing all of those image transformations uses a lot of server resources. Imgix saves the images and delivers them through their CDN. The imgix image CDN has an average of 0.15 milliseconds return on requests which enables images to load as quickly as possible. The CDN also caches the images on CDN edge nodes making them immediately available for future requests. 

Flexibility

Imgix is flexible enough to work with almost any site structure; including WordPress, Craft CMS, Shopify, React, Ruby on Rails, Python, and more (see the full list). So, whether a site is a WordPress site or a Rails application, imgix fits right into the ecosystem. And, even better: you don’t have to rebuild your web app or website to gain the benefits of image performance, which can save you a lot of time and money.

Setting up imgix on an existing website is easy. Imgix can connect to existing asset storage sources like AWS, Azure, or a web folder on the same domain. Once the image source is set up, a developer can start passing parameters to the API. 

Cost

Imgix is free for 1,000 images which makes it easy to integrate and grow with your site. Pricing goes to $750/yr for 5,000 images and $3,000/yr for 25,000 images. In their pricing structure, “images” are categorized as origin images, so the count only includes original images and not transformed ones. So, you could have hundreds of images and thousands of image transformations all being delivered through a CDN for free.

Conclusion

Ensuring fast site speed isn't just important. It is vital. It's the cornerstone of a successful online presence, directly influencing search engine rankings, user satisfaction, and ultimately, your return on investment. Properly sized and optimized images are key to ensuring your site loads quickly and displays correctly for users across various devices.

We have found that imgix enables our team to efficiently create projects with diverse image options, saving managers and developers valuable time. Our clients benefit from reduced server space and an increased site speed. Imgix’s API is comprehensive, so you can use one tool for all features and options around site images — from cropping and resizing to face detection and automated color palettes, to video and beyond. Having used imgix for the past five years to support the wide-ranging needs of our clients, we feel confident recommending it and using it again and again. 

Users expect a website to load fast, and imgix is a reliable way to make sure that happens.