Accessibility Web Content Guide

We design and develop accessible websites

Accessibility Web Content GuideWe design accessible websites that adhere to WCAG 2.1 guidelines. This means that the website navigation, color contrast, font sizes, filters, forms, and the overall website structure are accessible and the website design allows website administrators to create and maintain accessible web pages. Often we go through a detailed accessibility testing phase close to the launch of a new site. For our MIT sites, we work closely with the MIT accessibility team. We leveraged the information they provide on their site as the basis for our guide.

Accessible website content: admin responsibility

To create and maintain an accessible website, there is a lot of responsibility on the website administrators, to write, format and maintain website content to be accessible. Website accessibility is not a “set it once and be done with it” effort. It has to be considered and implemented with every bit of content that is added or revised on the site.

Content accessibility outline

For different types of content, different steps have to be taken to make it accessible:

  • Structure and headings: Allow all users, including users who leverage assistive technologies, to understand the structure and relationships of the content.
  • Images: Ensure all users of your website can access and understand what visual elements are conveying through alternative formats. Differentiate between images that are ornamental and those necessary for content, learning comprehension and retention, to assist with reinforcing learning concepts.
  • Color contrast: Ensure low vision, color blind, and aging persons can access your content.
  • Captions and transcripts: Ensure a diverse audience can view your video, including deaf and hearing impaired, people for whom English is a second language, and in situations where noise is an issue or volume is turned off. Increases comprehension and retention. Seeing text and hearing audio together reinforces learning concepts, fosters understanding and use of unique vocabulary terms, and helps those with learning disabilities. Increases Search Engine Optimization (SEO) by making content in video easier to find.
  • Accessible PDF and Office documents: Ensure all users of PDF and Office documents can use the document successfully. Documents created can be used, viewed, and understood by all audiences and people using assistive technologies.

Accessibility web content guide

To provide you with an outline and resources on making your web content accessible, we have created an accessible PDF for download Accessibility: Web Content Guide.

Ask us accessibility questions

 

Celebrating 10 years of purposeful design



Celebrating 10 years

As we celebrate our first 10 years as a brand strategy and creative services agency, we are reflecting on many amazing experiences, partnerships, and accomplishments. We are also looking ahead to the next 10 years with great optimism and excitement.

Website Redesign

We took the time last year, with our new Brand Strategy Director Levon Kurkjian, to articulate our values and goals as a company. After 10 years, we have a stronger sense for who we are and who we want to serve. Our new website is the expression of our brand and a welcome invitation to view our portfolio, check out ideas here in “Wordcount” and learn more about our fantastic team.

The First Decade

Ten years ago, Julia started Opus with a small handful of trusting clients and a dream of promoting good in the world through purposeful design. Today, we have grown to a team of 10 committed and talented individuals who combine their curiosity and creativity to exceed our clients’ expectations. Today, we are fortunate to serve numerous education, non-profit, and food clients as well as other mission-driven organizations of all different sizes across many industries. Today, through our recent B Corp™ certification we are excited to be recognized officially for using our business as a force for good.

Thank you

To our for-profit and non-profit clients who are all driven by missions that are bettering our world: We are deeply grateful for the important and impactful work you do and for your continued confidence in us to help advance your efforts. And as we celebrate 10 years, we are really celebrating you. Happy New Year and here’s to the next decade of purposeful design!

Julia, Lily, and the entire Opus team



We need you: Web Developer to join our fun and growing team

We have a ton of exciting website projects with many amazing clients in our pipeline and we need a passionate, talented, and funsponsible web developer to help us bring them to life.

Read the job description

Meaningful work

Opus exists to promote good through purposeful design and development. As such, our clients are truly amazing. We are proud to support mission-driven organizations in the education, nonprofit, and food and beverage sectors and beyond. This means that we carefully select our clients and we partner with organizations that are inspiring, well-intentioned, and passionate about making the world better in some way – big or small.

Lead the team

We are a small team which means you have all the opportunity and authority to lead. We are also nimble so your suggestions and ideas will be implemented quickly. We are growing and we need someone with vision, skills, and drive to take our website development work to the next level. If you are a web developer with ideas for improving efficiency, design workflow, or DevOps processes? We are all ears.

Continued learning & development

We are big on professional development. In order to deliver the needs of our diverse and ever-changing website projects, we need to continue developing skills. You need to be resourceful and nimble, able to wear multiple hats, and multi-task. And, we will support you with a professional development budget to take courses and attend conferences or tuition reimbursement to pursue a degree or certificate.

We are a B Corporation

This means we believe in using business as a force for good. It means that we consistently act in support of our sincere care for the well being of our employees, clients, suppliers, community, and the environment. Accordingly, we offer great benefits, a great team culture, and generous compensation. As B Lab puts it “Certified B Corporations are a new kind of business that balances purpose and profit.”  Read about the B corporation certification.

Interested?

We can’t wait to hear from you!
Please apply with a cover letter, resume and portfolio sites to info@opusdesign.us

Read the job description

 

Mural design at Tufts Health Plan

Opus worked with Tufts Health Plan on a mural design for their offices in Watertown. The installation we designed is made up of 35 “tiles” or individual graphics stretching almost 20 feet and includes titles such as “What We Believe,”  “How We Support Members”, and “How We Live It.”  As a whole, it demonstrates the organization’s mission and the proof that they live their values.

Many of the tiles include infographics describing information such as:

  • achievements in health care
  • hours spent in community service
  • ethnic diversity
  • energy efficiency

Designing to scale

Emily began the design in November 2018. The mural design was supposed to be about 12 feet. This seemed like a good size when we started the project. After the holidays, things started to pick back up with some back and forth on the data, but overall things were moving smoothly.

While all of this was happening, construction was going on at the site. One day when I went to visit the space I saw that the old doorway and hall entrance were sheet-rocked and our corridor was twice as long as planned. Our mural was no longer to scale! Luckily the client had no shortage of data. We added more infographics, recomposed the arrangement, and now we have an installation fully in scale with the environment.

Testing print quality

During the project, we worked with a few local printers to see their oversized printing capabilities. We had two companies print the same samples of our mural design for us to compare. One vendor’s prints were shiny and the color was rather dull.  The other vendor produced a matte finish and rich color that work better for a display to minimize reflection. The relatively small investment to do this exercise made a big difference in quality.

Sweat the small stuff

Krysten and Kim also helped during the design phase. Kim, especially, near the end sweat out the details of marking tiny guide measurements for drilling holes for the stand-offs and preparing the artwork for press.

The take away from this project was that no detail was too small to measure twice and test again!

See our projects

InDesign keyboard shortcuts

Given the popularity of our previous post about Illustrator Shortcuts, here is a look at some InDesign keyboard shortcuts that help save time and make you a keyboard ninja.

Edit

  • Cmd + Z : Undo
  • Shift + Cmd + Z : Redo
  • Cmd + A : Select all
  • Opt + Shift + Cmd + V : Past in Place
  • Shift + Cmd + V : Paste without Formatting

Type

  • Shift + Return : Soft return or a Forced Line Break
  • Cmd + Enter : Page Break
  • Shift + Cmd + M : Em Space
  • Shift + Cmd + N : En Space
  • Opt + Cmd + I : Show Hidden Characters
  • Shift + Cmd + T : Tabs

Object

  • Shift + Cmd + ] : Bring to Front
  • Shift + Cmd + [ : Send to Back
  • Opt + Shift + Cmd + C : Fill Frame Proportionally
  • Opt + Shift + Cmd + E : Fit Content Proportionally
  • Opt + Cmd + E : Fit Content to Frame
  • Opt + Cmd + C : Fit Frame to Content
  • Cmd + G : Group
  • Shift + Cmd + G : Ungroup
  • Cmd + L : Lock
  • Opt + Cmd + L : Unlock All on Spread
  • Cmd + B : Text Frame Options

View

  • Shift + W : Presentation Mode
  • W : Preview Mode
  • Cmd + = : Zoom in
  • Cmd + – : Zoom out

Text and Tables

  • Opt + Left Arrow : Decrease kerning
  • Opt + Right Arrow : Increase kerning
  • Opt + Up Arrow : Decrease leading
  • Opt + Down Arrow : Increase leading

Tools

  • I : eyedropper tool
  • V : selection tool
  • T : type tool
  • Shift + T : type on a path
  • Shift + Cmd + Select : override master page

Other Handy Tips

  • To get that squiggly underline to correct your spelling go to Edit > Spelling > Dynamic Spelling.
  • When modifying a value in InDesign, you can type in basic mathematics symbols and the program will calculate it for you. This works across different units (i.e. points and inches etc.)
  • Right clicking on the little corner where the rules meet allows you to change the units throughout your document.
  • To resize both the frame and content, hold down Cmd + Shift and then drag a corner.
  • View or modifying all shortcuts by going to Edit > Keyboard Shortcuts

Color accessibility on the web

At our studio, one of the things we offer our clients is the knowledge and ability to design & build fully accessible websites. In a nutshell, accessible websites are websites that everyone can use, no matter what device or assistive technology they are using. When it comes to the visual design of a website, the way color is used to create accessibility on the web is one of the critical aspects for success.

According to the United States Web Design System, 4.5% of the population has some kind of color insensitivity.

Color accessibility on the web is determined by:

  • Contrast Ratio: The color contrast ratio of the foreground and background, called the luminosity contrast ratio, is the first way to test if a color or color combination is accessible. The WCAG (Web Content Accessibility Guidelines) state that text and interactive elements should have a color contrast ratio of at least 4.5:1 for regular text and 3:1 for large text. Visualization of text sizes and color contrast ratios
  • Colors as indicators: Don’t use color as the only indicator for an action. For example, use an underline to indicate a link.Example of text with a link indicated by underline and color.
  • Considering Color Blindness: Think about avoiding using reds or greens for “bad” and “good” indicators.

So how does this affect your design?

It most importantly affects all text. Any information that someone needs to read has to be accessible. Additionally, any actionable elements that require interaction also need to be accessible. Which means that most of your website’s colors need to be accessible.

Designers don’t panic!

This doesn’t mean you can no longer use bright colors, just do not use them as text or important elements. I have now worked on multiple accessible website designs and know first-hand it does not have to limit your design. With the right tools, it’s easy to check the colors you want to use and modify them if they don’t pass accessibility. Below is an example of a button that most of us may be able to read just fine. However, it will not pass accessibility, which means that some people would not be able to read it. This doesn’t mean you can’t use the teal color, just use your design skills to make some minor changes. By changing the text color to black, the button now passes accessibility.

Where can you use non-accessible colors?

Elements relevant for accessing, using, and understanding the content need to be accessible. Graphic elements that don’t support the functions of a website do not need to be. This can also include icons that are non-interactive and icons that are used adjacent to text that describes what the icon represents. Just make sure to add proper alt text to any image. However, when in doubt, label the element or make it accessible.

Tools we recommend

For testing accessibility, we look for the color contrast to pass the WCAG AA level. We also check normal text vs. large text. Normal text is considered 16px and regular and large text is considered 18px and bold or 24px and regular. These tools are what we have been using and find really helpful:

WEBAIM

Webaim is an online tool where you can enter the Hex codes of the foreground and background colors you want to use and see if they pass.

STARK

Stark is a plugin for the web design programs XD and Sketch. You can install the plugin and use it as you’re designing by simply selecting the element or elements you want to test. Stark will tell you if they pass or not and can identify whether the element is text or an object. They also have a color blindness simulator.

Using accessible colors benefits your website and your users and don’t have to limit your design. Here are a few websites we’ve designed lately that are fully accessible, including the Mcgovern Institute for Brain Research, the MIT Chemistry department, and the Alana Down Syndrome Center.

Our accessibility services

Let’s be kinder to Microsoft programs

Microsoft Office programs are probably the most universal and the most accessible collection of programs used by almost everyone with a computer in a lot of professions. However, when it comes to graphic designers, most of us dread the idea of having to deal with its clunky interface, let alone design in it— and we don’t blame them for feeling that way. A lot of us were not trained or even recommended, to work with these programs in design schools.

Popular Microsoft Office programs like Word, Excel, or Powerpoint are known for their ability to quickly draft documents, compose data and charts, and generate quick-and-easy-to-make presentations. Because of this, most non-design MS Office users glance over or don’t have much notion of whether the “already-made” templates are good, effective or appropriate enough for the contents of their presentations or documents.

While most designers would rather ignore and never want to deal with these programs for the rest of their career, I compel to suggest they may perhaps want to give this matter another thought. Why? Here are the three main reasons:

1. Microsoft Office is here to stay

Take the example of Microsoft Word and Powerpoint. They are by far, from our experience, two of the most popular demands from our clients when it comes to custom presentations, templates, and letterhead design. Though often times designers want to default to the Creative Suite to create all the branding templates for our clients, the reality is that not everyone can or will have access to the Adobe subscription, or want to learn the programs merely for the purpose of syncing up with graphic designer’s flow. Most businesses rely on the Microsoft Office Suite because it often comes with the Microsoft account on the Android computers. This makes it much more convenient and easier to access than the Adobe Suite.

2. You can learn the programs!

As designers, we pride ourselves on always being front and center when it comes to adapting and utilizing new technology—and the history of our field proves that too. Therefore, what is stopping us from learning and mastering the Microsoft programs to assist our clients? Even though the programs are not built to assist design capabilities, but we believe with great patience, and the foundational understanding of good design, we can really hone the underlying potentials of these programs and make them work in both of our favors. It’s a Win-Win really.

3. Your clients will appreciate it

Nobody wants an unhappy and disappointed client. We once heard a story about a freelance graphic designer who refused to create a template in Microsoft Word for a client, because she/he/they preferred using InDesign for the job instead. From a designer’s perspective, we can see why InDesign seems like a more fitting idea. However, from the perspective of a client, this demand could be interpreted as though this designer was not considering the needs and interests of her/his/their clients first. What we learned from this story is that as designers, we need to be thoughtful about what is easy for our clients. Sometimes, that may involve putting a bit of extra effort to work with programs that we may not be used to.

4. Recognize the hidden perks

Like any programs, recognizing their hidden perks and advantages will not only help you to widen your software toolkit but also make it less frustrating to work with them. Here are some of the advantages that our design studio in Boston has found so far working with Microsoft products, especially Word and Powerpoint:

Powerpoint:

  • The master slides setting makes it really easy to create custom templates.
  • You can create and update color palettes and custom themes quickly.
  • The program also has an intuitive auto-alignment feature that is very useful for arranging components on a slide.
  • There are options to adjust the leading and spacing of type manually if necessary.
  • You can copy and paste graphics from Illustrator directly onto the slide, without the hassles of exporting a bunch of JPEGs and PNGs.
  • You can sync and update graphs and pie charts from Excel.

Word:

  • It is fairly easy to use and can be useful for creating simple designs.
  • The text wrapping feature for images or text boxes can easily create and insert graphs into your document.
  • You can create and apply paragraph styles, which is a huge plus.
  • The built-in comment feature is also helpful for multiple people to update the document.

If you are a designer who also learns to appreciate the Microsoft products, let us know what are other perks you’ve come to appreciate!

Contact us

Layer Options in Illustrator

Sorting, organizing, naming, and keeping track of layers is tricky and often gets left behind. Usually, when we first start a project there is some semblance of order. Unfortunately, as it progresses, Adobe Illustrator layers often dissolve into a single chaotic free for all layer. Using Layer Options in Illustrator can help set up a system to manage your layers through the entire project.

To access the Layer Options in Illustrator, double click on the layer and you will see something like this:

1. Name

Name your layers! Yes, really. I like to start out with a couple of layers like “Background” or “Sketch” or “Guides.” More often than not as the project progresses, I add random layers that make sense at the moment. However, I am lost when I open the file up the next time. Proper naming would help solve this problem.

2. Color

There are a good amount of colors (from ochre to olive) you can choose from or you could pick a custom color. The color of the layer corresponds with the color of the bounding box of each object on that layer. This is helpful when trying to distinguish layers without having to open and wade through the layers window.

3. Template

This is a super helpful tool that I wish someone had told me about sooner. It comes in handy when you are drawing over a template or scanned sketch. When you select this option, the Lock, Show, and Preview options are automatically turned on. The Dim Images to option is also automatically selected, but you are able to choose how much the image is dimmed. The Print layer is deselected, so this layer will be visible on screen but will never actually appear in a print.

4. Show

Same as the main layers window, you can only see a layer when this is clicked on.

5. Preview

The best way I can explain this is as that it is the opposite of outline mode. This is what we’re used to seeing most of the time and shows a full rendering of the illustration, not just the vector outlines and points.

6. Lock

This does the same thing as the Toggle Lock checkbox in the main layers window. If a layer is locked, no object within it can be moved.

7. Print

This lets you decide whether this layer will appear in a print. The layer will still appear on your screen as per usual but if it is not checked on, it will not end up printing. This is helpful if you want to leave yourself little notes and references or for initial sketches.

8. Dim Images

This option will fade down all the objects to the percentage specified in the little input box. This is also a great tool for tracing over sketches and you don’t have to manually and individually modify the opacity of each object.

5 tips for designing a report

At Opus, a lot of reports cross our desks. We’ve seen it all; the good, the bad, and the ugly. It’s our job to help our clients construct a clear and compelling narrative through design. Here are five things we consider every time we work on designing a report.

Read your content when designing a report1. Read the content, yes seriously!

You think this sounds obvious but as graphic designers, it’s easy to get caught up in making things look nice. Reading is important before you are designing a report. It can tell you if a callout makes sense, if there’s an opportunity to create an infographic, or maybe those bullets could be icons. Obviously, for longer reports, this may not be practical, but the reality is not all clients are going to give you that information up front. A light skim can go a long way in finding those small opportunities that help create a customized narrative.

White space can be helpful when designing a report2. Hierarchy & the magic of whitespace.

Nothing is scarier than facing down a word doc of unformatted content. If you think you’re scared, just think how scared the reader would be. Creating hierarchy through headers, subheads, callouts, and sidebars goes a long way in making the report easily digestible and scannable. In addition, using wider margins creates whitespace (area around different page elements) and allows a moment of rest for the eye. Whitespace can transform a report from feeling dense to approachable and polished.

Images are helpful when designing a report3. Use Visuals

Again, sounds obvious but you’d be surprised how many clients either don’t have access to an image library or have low quality images. Photos keep readers engaged, communicate your brand, and can add a personal and human element. If photos are not appropriate then infographics are a great way to add a visual element. Pulling numbers or figures out of the text highlights impactful data where it may otherwise get lost.

Choose the right size for the report4. Choose the right size

Consider how the client is going to use the report. Are they being handed out or mailed? Is it long or short? These factors play considerably into deciding a size. If the client is mailing the report, then it should be able to fit into a standard sized envelope. If the report is long, you probably don’t want to choose a small size or something that doesn’t fit on a standard sheet of paper. Small sizes = more pages and a custom size = more paper which means the piece becomes more expensive to produce.

Be smart when you set up your files5. Be smart in your file set up

We take our file set-up seriously here at Opus. Because we share files and work on things as a team, it’s important that the files are set up correctly with paragraph and character styles, an established grid and color palette. Correct file set-up not only allows a team member to pick up where you left off, but it also makes those last-minute style changes from the client easy. If you’ve laid out a 200-page document with zero paragraph styles and the client suddenly wants to change the font, you’re toast. Leveraging the design software properly makes a huge difference in time and energy spent per project.

White space is not wasted space

In our design studio, white space is not wasted space, but arguably the most important design element to any project. It’s our secret weapon that helps achieve goals, draws attention, and when used properly can create a sense of luxury. If Opus Design had a studio mascot, it would be a dancing unicolored creature called White Space.

It doesn’t have to be white

You heard it here first! White space does not have to be white. It can be dark blue, neon pink, metallic…

What white space is, is a space void of content or busyness. Sometimes a photo can act as white space if it is calm and balanced with the content in the composition. When it comes to print design, branding or web design, we challenge ourselves to think about it in new ways.

Macro white space

We’ll let you in on a little secret… white space can also exist within letters, between lines and other elements. What! It’s true.

White space in a web font creates readability. The taller the x-height (height of the lowercase x in a typeface), the more readable a typeface is at smaller sizes. That is because the letters have more white space in their counters (area entirely or partially enclosed by a letter), creating an openness that makes the letter more clear and readable. White space in typography is something to consider when choosing typefaces for your next design project or when evaluating a design from the design agency you’re working with.

Whitespace example in x-height

Good for your soul

Think of white space as de-cluttering. In your home, for example, white space is a clean room. You wouldn’t throw books and clothes and trash all over the floor because there’s space for it, would you? We agree! Let’s think of white space as a clean room… much easier for company to sit and relax and focus on the conversation at hand rather than being distracted by trash.

Overheard crimes against white space 🙁

  • There’s too much dead space
  • There’s all this empty space at the top
  • Can we add more content since there’s space for it?
  • Let’s make everything bigger to fill up space

Whitespace in text layouts

White space is not wasted space when used to give lines of text leading

Example of whitespace between letters in a sentence

White space in action