6 Web Accessibility Course Highlights

Earlier this year, one of our website designers had the opportunity to take a Website Accessibility course offered by the American Graphics Institute. At Opus, our website designers are always continuing to learn more about accessibility best practices so we can offer high quality and accessible web design. The 1-day course covered the basics of accessibility on the web; including the guidelines/laws, the tools used for testing accessibility, and accessible design best practices.

The class covered a lot of important information but here are 6 highlights!

Highlight One

An accessible website benefits everyone, not just people with disabilities

The primary reason we design and build accessible websites is so that everyone, no matter their ability, can access and use your website. However, an accessible website really benefits everyone visiting the website. Below are two lists of how an accessible website benefits all users as well as the website owners.

Benefits of accessibility for website users:

  • Bandwidth issues/slow internet: If someone has a slow internet connection, then the images on a website may not load. If it’s an accessible website, there will be alternative text, “alt text” for each image that describes what the images are depicting even if you can’t see them.
  • Challenging Environment: If someone is browsing a website outside on their phone, and the sun is causing glare on their screen, if the website’s text has enough color contrast, they will still be able to read the text. Another example of this is if someone is watching a video online but they are in a public space and needs to have their volume off, by having closed captions, the person watching the video can still understand what is being said in the video.
  • Eye Fatigue: If the text on a website has enough color contrast against the background for accessibility, this can also be helpful in reducing eye fatigue.
  • Improves Search Engine Optimization: Having accessible content and alt text can help improve a website’s SEO, so users can find what they’re looking for easier.
  • Easy Navigation: If a website has an accessible and easy-to-use layout, it will make it easier for everyone to navigate and find what they need.

Benefits of accessibility for website owners:

  • Improves Search Engine Optimization: This is also helpful for website owners so that users can more easily find your website.
  • Reflects positively on your company: Having an accessible website shows that you care that everyone can access your website.
  • Cost Saving: Having an accessible website means no lawsuits in the future as well as no additional cost for adding accessibility to your website later on.
  • Provide a high-quality user experience: Having an accessible website provides a better experience for everyone visiting your website.

Highlight Two

WCAG is a comprehensive tool for website accessibility

The Web Content Accessibility Guidelines (WCAG) is a compilation of all web accessibility requirements around the world, so if you’re compliant with the WCAG then you are within the requirements of the law.

Did you know?

Different countries have their own laws on accessibility

If you’re a global company, your website will need to meet the requirements of all the countries it will be accessed in. As long as you follow the guidelines in the WCAG, you’ll be compliant everywhere!

Highlight Three

Besides color needing to have enough contrast, color alone cannot be used for context

One of the easiest ways to make your website design more accessible is to make sure that all text on your website has enough color contrast against the background in order for it to be easily read by everyone. Learn more about color contrast.

Another important thing to keep in mind when designing an accessible website is to not use color only to provide context. For example, an in-text link shouldn’t just be indicated by color, it should also have an underline. This way if someone cannot see the color shift, they will still see the underline and know that it is a link. A second example is when indicating a required form field, it would not be accessible to only display the form field label in red. If someone is color blind they will not see the red text, but if you include a red asterisk after the field label, then anyone will be able to see the symbol and know the field is required. See the below for both examples:

Examples of how to use color and another indicator to provide context

 

Highlight Four

SVG files are good for accessibility

For people who use a screen magnifier, when they zoom in on an SVG file the image is still clear. This is very helpful if you have an image that includes text. For example, a JPG or PNG of a chart with important figures and text on a web page, if zoomed in, would appear blurry and not legable. If the chart is saved as an SVG, when someone zooms in on the image they would still be able to read the figures and text. This is because SVG files are Scalable Vector Graphics and will appear clear and vector-like at any size. See the below example of the Opus logo:

SVG vs. JPG for accessibility

 

Highlight Five

""

Accessible PDF’s

If you’re linking to a PDF from your accessible website, the PDF should ideally be accessible as well since it’s a continuation of your site.

Highlight Six

""

What about mobile accessibility?

WCAG is developing updated requirements and more specific guidance on mobile accessibility. So for now adhering to the WCAG guidelines for desktop applies to mobile. But we will be on the lookout for specific guidance in the future!

As website designers, we love expanding our knowledge on accessibility so we can create the best, accessible websites for our clients. Let us know if you’re feeling inspired and want an accessible website, we would be happy to help!

Contact Us

The Devonshire Foundation website and logo

This year we worked with the Devonshire Foundation to design a logo and website that showcase the impact they have in the New England area. The Devonshire Foundation is a private foundation. They create measurable and sustainable impact by supporting “ready-for-growth” programs that address social and environmental change. They give grants to programs that range from focusing on improving opportunities for youths to focusing on bettering the environment.

The logo

For the first step of the process, we were asked to design a logo that speaks to the foundations’ social and environmental focuses. The logo also needed to support the long history of charitable giving behind the foundation. The Devonshire Foundation was created in 1949 by the Howland family and has been giving grants to eligible programs ever since.

We provided the foundation with multiple logo options to choose from. Usually, when we design logos, most of the designers in our studio each take a stab at creating their unique versions. This is based on design success details we established with our client. We then narrow the options down to a (manageable) list of successful ones to review with our clients.  The option the client selected was created by our designer, Kim Lê. The mark she designed includes the first letters in the foundations’ name combined in a single mark with a small leaf shape created from part of the F. The two-toned effect of the blue and green lends itself to the dual interest of the foundation into social and environmental change.

The Devonshire Foundation Logo Design

 

The website

We also designed a website to help explain who they are as a foundation, who they serve and how to apply for grants. If a visitor is qualified, they can apply for a grant directly through the website. The client also wanted to showcase the amazing groups they fund and what they do.

Our art director and UX designer, Ellery Moorey, worked with the foundation on the architecture and wireframing a website that included everything they needed. Ellery and designer Heidi Scammon worked on the design of the website once the architecture phase was complete. The design was inspired by the new logo as well as select keywords that describe the foundation: human, approachable, and collaborative. The website includes bright colors, a friendly sans serif font, and lots of empowering imagery of the programs that the foundation has provided grants to. Once the design phase for the website was complete, Heidi built the website in Webflow, one of our favorite CMSs.

Check out the website

Devonshire Website Mobile

 

Why Webflow is a great design tool

We serve a wide range of clients, from large Higher Ed institutions to small 2-person start-ups. Given the range of clients, we also use a range of tools for websites we design.
Webflow is a CMS that is specifically created for designers. They have made it possible for designers to build websites without needing to know how to code (too much). With a great library of tutorials, Webflow provides all you need in order to start building a website from scratch. We have now built several websites using the tool and have only asked our developer for a small piece of custom code each time. Webflow is a great no-code/low-code tool that we highly recommend and here are four reasons why:

It’s visual

The first and biggest reason why Webflow is easy for designers to use is that it’s all VISUAL. There is little coding, just an intuitive interface. You can view your page as you build it and see the structures you are creating right on the page. It’s better when we can see what we’re doing and have visual confirmation whether something is working or not.

Great content management system

The CMS is super easy to use which is a huge plus. In the end, our clients have to maintain their websites on their own so the CMS is really important. It crops your images for you, posts and news items are super easy to add, copy is added and revised in seconds. The CMS is stripped down and doesn’t have a million features, that’s why it’s so easy. Of course, that’s why it’s best used for smaller websites.

Custom design

Unlike using an online builder that only uses templates, you are fully in control. This means that you are NOT building a templated site! You can design and build a completely custom website and not feel confined to predefined content blocks. All the structure and design is completely up to you.

Test and fix

Designers can test the website AND make the adjustments. That’s right, there is no back and forth with our developer when we can just make changes ourselves. No more asking if they can add just 5 more pixels of margin above a title or image. It speeds up the entire process, so you can cut your own time down by half or more and cut your developers time to practically nothing!

If you are looking for a new website, contact us and we can discuss whether a Webflow website is right for you.

See a Webflow website we designed