Why this matters
A digital application is a conversation between the customer and the product.
Anything that interrupts that conversation or makes it inefficient hurts the customer experience. We communicate the vast majority of information through written words, so those words need to work for everyone.
Team commitment KPIs
What commitments must the team agree to meet if your organization is going to be successful?
What obstacles must be acknowledged and removed for your content strategists to create inclusive experiences?
What’s covered
Core responsibilities
While most of these are essential competencies for content designers, they are all must-haves for accessibility.
Can explain why accessibility is a requirement
Team members can possess varying levels of technical understanding, but all should be alert to the basic reasons accessibility is a requirement.
Accessibility target policies
At a minimum, any team needs to understand accessibility targets exist, are defined by enterprise policy and enforced by leadership.
This bare minimum adoption achieves some level of compliance, even when it’s begrudging.
However, if the reasons for accessibility policies are taken to heart in service of the customer, products can dramatically improve.
Living your organization’s values
Accessibility isn’t just the right thing to do, it’s the smartest thing to do.
Every organization has a set of values, often including core ethical tenets like treating people with respect and doing the right thing.
How does accessibility fit those values? How does ignoring accessibility breach them?
A tool for innovation
Accessible design and development builds better products for everyone. When teams put accessibility at the beginning of their processes, they create more valuable products for your enterprise.
Competitive advantage
26% of the US population has a disability that requires accommodation, making people with disabilities the largest minority in the United States. This adds up to billions of dollars in combined purchasing power.
Avoiding legal risk
Accessibility is the law. Designing and building accessibility into products also helps the enterprise avoid legal risk and liability due to a customer complaint.
Write with logical headings
Content strategists are well placed to define heading structure.
Headings are more than bigger, bolder text. They contain meaning that forms an outline of the page.
- Start with a single
<h1>per page. There must be only one. <h1>is the meaningful title of the page.- Title major sections with
<h2> - Subsections of the
<h2>should be an<h3>. - It should be rare that
<h4>and beyond is required. - Only exceedingly long or extremely complex pages will need
<h5>or<h6>.
Headings example
<h1>Taco salad recipe</h1>
<h2>Ingredients</h2>
<h2>Steps</h2>
<h3>Vegetable preparation</h3>
<h3>Grilling the protein</h3>
<h3>Plating and serving</h3>
<h2>Nutrition information</h2>
<h2>Related receipes</h2>Use plain language
Not everyone understands content the same way. Emphasize being clear before being clever in your style guides. Plain language makes content easier for all customers to consume and understand.
- Avoid using idioms or implying jokes. This can be difficult for people who don’t speak english as a first language.
- Avoid technical jargon if a simpler explanation will do
Follow alt text conventions
Precise alt text conventions should be fine-tuned in your copywriting style guide.
Each image should have alt text for screen readers, unless including it would be annoyingly repetitive.
- Define alt text for images or icons when the image adds editorial meaning to the page.
- Good alt text allows anyone who can’t see the screen to describe it to someone else.
- Leave the alt attribute empty if an icon doesn’t add meaning or would be repetitive.
More of an art than a science
The copywriting style guide should determine a consistent voice for writing alt text and when to leave alt text undefined.
For instance, questions of when to call out gender, race, sexual orientation, etc., can be difficult to answer.
Practical examples
- Describe a banner image of a model using your product.
- Describe an image of your product in a specific color or configuration.
- Don’t describe a generic shoe icon next to a headline that says “Shoes”.
Use aria-label for unclear interactions
Adding context with aria-label can help a customer using a screen reader understand the action of ambiguous links, buttons and inputs.
Practical examples
- A link to purchase coffee has the visible text “Shop today”. An appropriate aria-label might be “Shop today for coffee”
- A geolocation button features a map pin icon, but no visible text. An appropriate aria-label might be “Find my location”
- A site search input’s only visible label is a button with a magnifying glass. An appropriate aria-label for the search input might be, “Search this site” and the search button could use an aria-label of “Submit search”
Assistive technology basics
Content strategists should be able to perform basic actions with a keyboard and screen reader.
Can navigate a page using only the keyboard
Content strategists should be able to perform basic functions using only a keyboard like using the arrow keys to browse, tab key to focus and spacebar/enter key to activate.
Use screenreader shortcuts to hear headings
Heading structure can be really difficult to comprehend in a practical way. Seeing a web page broken down into headings (h1, h2, h3) helps them understand the utility.
Use screenreader shortcuts to hear links and buttons
Name calls to action according to their purpose. It’s common to use generic link and button names like, “Learn more” or “Get details,” but those kinds of generic elements often repeat. The purpose of a “Learn more” button requires careful reading of the surrounding content.