Accessible Website Content |

ACCESSIBLE CONTENT: Don’t Use Color As Part of Your Instructional Content

Posted on April 9, 2019April 9, 2019 by Mary Gillen

Color Blindness - Illustration of Glasses

Are you using color as a way of instructing visitors about the next action to take on your Web site?

Think again.

Let’s say you have images of two buttons on your Web page.

If you instruct folks to click on the red button, you may be confusing the over 108 million Web users who are color blind.

WCAG 2.0 Guideline 1.4.1 warns Web designers, developers and content creators about depending solely on color when conveying instructions.

There are a number of color blindness conditions. Here are three you should learn about:

Protanopia: People with protanopia lack the long-wavelength sensitive retinal cones that are required to distinguish between colors in the green-yellow-red section of the spectrum. It is a more common form of color blindness, occurring in between 1% and 5% of males (varying by race) and in approximately 0.1% of females.

Here’s how individuals with protanopia see the red & green buttons:

Image of how a person with protanopia views red and green colors

Deuteranopia: People with deuteranopia lack medium-wavelength retinal cones and are therefore also unable to distinguish between colors in the green-yellow-red section of the spectrum. Deuteranopia is a more common form of color blindness, occurring in between 1% and 5% of males (varying by race) and in approximately 0.1% of females.

Here’s how people with deuteranopia see the red & green buttons:

Image of how people with deuteranopia view red and green buttons

Tritanopia: People with color blindness involving the inactivation of the short-wavelength sensitive cone system have tritanopia, a very rare blue-yellow color blindness. Tritanopia is a very rare form of color blindness, occurring in less than 0.003% of males and females.

Here’s how people with tritanopia see the red & green buttons:

Image that depicts how a person with tritanopia views red and green buttons on a Web page

Accessible Best Practice: Don’t use color as part of your instructional content. It will confuse and frustrate your site’s color blind visitors and is considered inaccessible according to WCAG 2.0 Guidelines.

WCAG 2.0 Guidelines covered in this post:

Level A Guideline 1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Level AAA Guideline 3.3.5 Help: Provide detailed help and instructions.

===

WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:

WCAG 2.1: 118 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 55 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===

ACCESSIBLE WEBSITE CONTENT: Five Steps to Plain Language

Posted on February 10, 2019February 13, 2019 by Mary Gillen

Communications illustration two men talking and not communicating well

Plain language benefits all website visitors, especially people with cognitive disabilities, low reading literacy, and individuals who speak English as a second language.

According to the folks at The Center for Plain Language: “A communication is in plain language if its wording, structure, and design are so clear that the intended readers can easily find what they need, understand what they find, and use that information.”

Check out The Center’s five-step checklist that can guide you through the plain language process and help you develop content that’s accessible for all.

Read the checklist now.

===

WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===

TOOL: Identify Seizure Risks in Your Website Content

Posted on February 6, 2019February 6, 2019 by Mary Gillen

a medical background with a man and epilepsy waves

The Trace Center’s Photosensitive Epilepsy Analysis Tool (PEAT) is a free, downloadable resource for developers to identify seizure risks in their web content and software. The evaluation used by PEAT is based on an analysis engine developed specifically for web and computer applications.

PEAT can help authors determine whether animations or video in their content are likely to cause seizures. Not all content needs to be evaluated by PEAT, but content that contains video or animation should be evaluated, especially if that content contains flashing or rapid transitions between light and dark background colors.

Download the PEAT tool now.

===

WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===

ACCESSIBLE WEBSITES: Test Your Content for Readability

Posted on February 3, 2019February 3, 2019 by Mary Gillen

Happy smiling little girl reading interesting book in the park.

How readable is your website?

Users with learning disabilities, reading disorders, or who speak English as a second language may have a difficult time understanding your content.

Typical factors that affect readability include:

Average sentence length
Syllable count
Percentage of multi-syllable words
Average word length
Familiarity of words
Complexity of sentences

For better readability, follow these basic tips:

One idea.
Be sure each paragraph focuses on one idea. This makes content easier to remember and digest.

Shorter line length.
Design for a line length between 45 and 75 characters. This makes the text easier to read on the screen. If the line is too long, folks with cognitive issues may lose focus and stop reading.

Simple language. Complex language can pose problems for users, especially those with cognitive disabilities or who aren’t fluent in the language.

Tools for testing readability

Hemingway Editor
>> http://www.hemingwayapp.com

Screenshot of Hemingway Editor Home Page

The Hemingway Editor is like a spellchecker, but for style and readability. This free online tool reports your content readability issues by highlighting content sections in different colors.

Readable
>> https://readable.io

Readable.io uses tried and tested readability algorithms, as well as proprietary scoring systems, to analyze the readability of your website or text and recommend ways to improve upon it. This is a paid service, but you can take the tool for a test drive by requesting a demo of how it works.

===

WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===

ACCESSIBLE CONTENT: Use a Time Stamp to Quickly Direct Users to a Section of Your Video

Posted on January 20, 2019January 20, 2019 by Mary Gillen

Close-up of waving flag with YouTube logo, editorial 3D rendering United States

Have a long demo video on YouTube? Need to direct users to a certain section of the video so no one has to sit through the whole presentation?

Make use of YouTube’s Time Stamps.

Simply add a time code to the end of the YouTube URL link for your video. When the prospect clicks the link, he/she will be taken to a timed point in the presentation.

EXAMPLE:

Let’s say your YouTube video URL is https://www.youtube.com/watch?v=20SHvU2PKsM [launch the video]

Introduction to Web Accessibility and W3C Standards Video

You want to direct the prospect to the 1 minute 10 second mark in the video.

The Time Stamp code for this would be #t=1m10s

Change the URL to https://www.youtube.com/watch?v=20SHvU2PKsM#t=1m10s [launch the video]

Shadi Abou-Zahra, Accessibility Strategy and Technology Specialist at W3C

===

WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===

ACCESSIBLE CONTENT: Use the Inverted Pyramid Style for Quicker Info Access

Posted on January 19, 2019January 19, 2019 by Mary Gillen

triangles in abstract vector background

Think like a journalist when writing accessible website content. Use the “inverted pyramid style” by including the who, what, when, where, why and how information in the first paragraph of the page. Why is this style important for accessibility? Sighted users can visually scan or skip over content they don’t consider important. Individuals using screen readers must listen to the content of the page, one paragraph at a time. Presenting the most important facts first allows for quicker info access for those using assistive technology.

How to Write in the Inverted Pyramid Style

Journalists use the “inverted pyramid style” when composing news stories. The reader has immediate access to the most important facts, in case there isn’t enough time to finish the entire article. The supporting information is then included in the subsequent paragraphs.

Tips for Writing in the Inverted Pyramid Style

In the article Inverted Pyramid: Writing for Comprehension, author Amy Schade shares tips on how to write in the inverted pyramid style:

“1. Identify your key points. What piece of information is the key fact you want your readers to know, even if they only read a single paragraph or sentence on the page? What effectively summarizes all the information that will follow?

2. Rank secondary information. Outline the story details and supporting information, prioritizing the information that is most likely to be of interest to the broadest audience, and moving down the list to the smaller and more nuanced details.

3. Write well and concisely. The structure only helps readers if the content is strong. Cut unnecessary information. Get to the point quickly. Use straightforward language. Use short paragraphs and bulleted lists.

4. Frontload all elements of content with important information. The main headline should be descriptive. The story should start with the main point. Each heading or subheading should be descriptive. The first sentence of every paragraph should be the most important. The first words in each sentence should be information-carrying and indicate what content will follow.

5. Consider adding a summary or list of highlights. Some sites go a step beyond and add a summary or a bulleted list of key points to further emphasize the main takeaways of the content.”

===

WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===

ACCESSIBLE WEB CONTENT: A Better “Features and Benefits” Layout

Posted on January 12, 2019January 12, 2019 by Mary Gillen

Features and benefits grunge rubber stamp on white background, vector illustration Make it easy for your Web visitors to easily comprehend your product’s features and benefits. If this information is placed in a long paragraph, prospects may not read it. This longer format can also makes it more difficult for folks who have learning disabilities to comprehend the content.

Check out these examples:

===

MORE DIFFICULT & TIME-CONSUMING TO READ

Features & Benefits

Acme HTML File Pro has a lot of functionality that makes editing HTML files more convenient for you. A lot of this does not sound very impressive or even works behind the scenes, but you will surely appreciate It when you need it. These are only a small number of Acme HTML File Pro’s many little features that make heavy code editing a breeze.

With Acme HTML File Pro you can easily open and edit many HTML files at the same time. There’s no limit. Arrange HTML files into multiple projects to open them at once and edit them together. Open all files in a folder (and its subfolders) into a project. Many of Acme HTML File Pro’s editing commands can work on all files in a given project at once. Quickly switch between files and projects by clicking on their tabs. Move back and forth with the handy “previous editing position” and ’’previously edited file” commands. Manage long lists of HTML files and large projects with the handy file manager sidebar which can rename, move, copy and delete files.

===

EASIER TO COMPREHEND/CAN BE READ QUICKLY

Features and Benefits

Acme HTML File Pro saves you time.

It’s easy to use.
Makes heavy code editing a breeze.

It’s efficient.
Open and edit unlimited HTML files at the same time.

It “remembers.”
Move back and forth with the handy “previous editing position” and “previously edited file” commands.

It’s a file manager.
Manage long lists of HTML files and large projects with the handy file manager sidebar which can rename, move, copy and delete files.

===

SEE BOTH, SIDE BY SIDE

===

WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===

<accessible-website-services>

Category: Accessible Website Content

ACCESSIBLE CONTENT: Don’t Use Color As Part of Your Instructional Content

ACCESSIBLE WEBSITE CONTENT: Five Steps to Plain Language

TOOL: Identify Seizure Risks in Your Website Content

ACCESSIBLE WEBSITES: Test Your Content for Readability

ACCESSIBLE CONTENT: Use a Time Stamp to Quickly Direct Users to a Section of Your Video

ACCESSIBLE CONTENT: Use the Inverted Pyramid Style for Quicker Info Access

ACCESSIBLE WEB CONTENT: A Better “Features and Benefits” Layout

MORE DIFFICULT & TIME-CONSUMING TO READ

EASIER TO COMPREHEND/CAN BE READ QUICKLY

===

SEE BOTH, SIDE BY SIDE

MORE DIFFICULT & TIME-CONSUMING TO READ

EASIER TO COMPREHEND/CAN BE READ QUICKLY

=== SEE BOTH, SIDE BY SIDE

===

SEE BOTH, SIDE BY SIDE