Category: Accessible Content Best Practices

ACCESSIBLE CONTENT: How to Localize Language for Screen Readers

Posted on by Mary Gillen

Alt Text phrase spelled out with blocks

According to the WCAG 2.1 Guideline 3.1.1 Language of Page (Level A), “The default human language of each Web page can be programmatically determined.”

The LANG attribute is designed to alert screen readers on the appropriate language to use when announcing page content.

To assign a primary language to an HTML page, add the lang attribute to the <html> tag. Here’s how you would add the language attribute for US English:

<!DOCTYPE>
<html lang=”en-US”>

But what if you use more than one language on your Web page?

Here are some tips that can help.

1) DEFAULT LANGUAGE: When a Web page uses several languages, the default text-processing language is the language which is used most. If several languages are used equally, the first language used should be chosen as the default human language. [SOURCE]

2) ALT TEXT: Alt attribute values should contain text in the primary language of the page. If the main language of the page is French, then the alternative text for images needs to be in French. [SOURCE]

3) LANGUAGE CHANGE ON THE PAGE: According to the WCAG 2.1 – 3.1.2 – Language of Parts (Level AA) Guideline, screen readers need to be notified when the language on a page changes. To do so, add a language attribute to the tag that surrounds the content that is not in the primary language.

EXAMPLES

US English: “The Grapes of Wrath”
French Translation: <p lang=”fra”>”Les raisins de la colère”</p>
German Translation: <div lang=”de”>”Früchte des Zorns”</div>

RESOURCE: Table of Language Codes

===

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: 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

===

HOW TO: Use Google Docs to Convert Image Text to Simple Text

Posted on by Mary Gillen

Google Docs Icons

Web developers and designers…please take note: text content in an image is not accessible to everyone.

According to the WCAG 2.1 – 1.4.5 – Images of Text (Level AA) Guideline:

“If the same visual presentation can be made using text alone, an image is not used to present that text.”

WHY

Users with disabilities need to be able to adjust the size of text as needed.

SOLUTION

Use Google Docs to convert image text to simple text.

NOTE: You need to have a Google account so you can access Google Docs in order to make this work.

EXAMPLE

Let’s say you need to extract the text of a poem that is available only in an image.

Yeats poem The Lake Isle of Innisfree

In order to convert the image content to text, use the following steps:

1. Go to drive.google.com.

2. Upload the poem image file to Google Docs.

Upload Files - Google Drive
3. Once the poem image file is uploaded, right-click on the uploaded poem image thumbnail.

4. Select Open with >> Google Docs.

Open with Google Docs

The image file will be converted to text in a Google Doc.

Google Docs - Conversion of Image Text to Text

The original image appears at the top of the screen. The text you can copy appears in blue (as you highlight the text) in the lower pane.

===

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: 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 SOCIAL MEDIA: 5 Tips for Content Creators

Posted on by Mary Gillen

Illustration of Content Creation Icons

1) CamelCase #HashTags

Capitalize the first letter of each word in hashtags so screen reader software can determine how to pronounce each word separately.

Fail: #socialmediatips
Pass: #SocialMediaTips

2) Twitter Links to Other Media Files

When you tweet a hyperlink to other media files, indicate whether the link leads to [AUDIO], [PIC], or [VIDEO]. This enables screen readers to announce the type of file that the user will discover when he/she clicks the link.

3) The Importance of Color Contrast in Your Social Media CTA Messages

Sufficient color contrast in your social media post call-to-action (CTA) messages helps users who are color blind, have low vision, or other visual issues to comprehend your CTA.

Colors used in the post must meet the WCAG 2.1 – 1.4.11 Non-text Contrast (Level AA) Guideline (text color against background color with a minimum color contrast of 4.5.1) so that folks with visual impairments can understand what to do.

Examples:

Color Contrast Social Media Message

Message #1 on the left (light green #6cbf7e) has a failing contrast ratio of 2.29:1.

Message #2 in the middle (darker green #469156) has a passing contrast ratio of 3.86:1.

Message #3 on the right (even darker green #487651) has a passing contrast ratio of 5.27:1.

Use the free online Accessible Colors Tool to evaluate your color combination using the WCAG 2.1 guidelines for contrast accessibility.

If your combination does not meet the guidelines, the tool suggests the closest accessible combination by modifying the colors.

4) Don’t use decorative fonts in social media posts

Screen readers can be silent when “reading” those words and only announce what is written in native fonts.

5) Avoid using animated GIFs without a text equivalent

Using animated GIFs to push your message out on social media? Be aware that individuals who use screen readers most likely won’t be able to understand the message displayed in the animation, as there is limited or no accessibility support for animated GIFs on most social media platforms. Be sure that the post also includes text content equivalent that conveys the animated GIF message as well.

===

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: 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 DESIGN: How to Make Long-Form Content Easier to Read

Posted on by Mary Gillen

Illustration of Hands on Keyboard

UI & UX designer Marc Andrew offers developers and designers easy ways to improve their work.

Here is one of Marc’s tips that caught my attention:

Lighten up your text if it looks a little on the heavy side

He writes:

“When it comes to long-form content, certain Regular weight Typefaces can still look a little too heavy, and stark.

Easily fix this by opting for something like a Dark Grey (ie; #4F4F4F) to make that text a little easier on the eye.”

Regular text example

The Dark Grey text color (#4F4F4F) against a white background (#FFFFFF) passes the color contrast test for accessibility at Accessible-Colors.com:

Color Contrast Color Test Result at Accessible-Colors.com

Read the rest of Marc’s article: 8 (more) tips to quickly improve your UIs.

===

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: 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: How to Enhance Readability

Posted on by Mary Gillen

Illustration depicting text spacing

When web developers and designers follow the WCAG 2.1 – 1.4.12 Text Spacing (Level AA) Guideline, it ensures that website visitors can override author-specified line height spacing to improve their reading experience.

Some history

In typography, “leading” refers to the distance between adjacent lines of type.

text leading example

When type was set by hand in printing presses, “slugs”, or strips of lead of appropriate thicknesses were inserted between the lines of type to add vertical space that made the content easier to read.

In today’s markup, leading is referred to as “line height” or “line spacing”, which is the amount of space between lines of text within a paragraph.

Design rule to follow for better readability

Set line height to at least 1.5 times the font size. Use the % or ems relative units rather pixels for better scalability.

Sample Code

HTML

<h3>Paragraph displayed: standard line-height</h3>
<p class=”example1″>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h3>Paragraph displayed: line height of 200%</h3>
<p class=”example2″>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

CSS

p.example1 {
width: 30%;
}

p.example2 {
line-height: 200%;
width: 30%;
}

Browser display

Difference between normal paragraph line height and paragraph set to 200% line height

Who benefits

  • People with low vision who require increased space between lines of text so they can read the content.
  • People with dyslexia who need to increase vertical space between lines to speed up reading comprehension.
  • White space between blocks of text helps people with cognitive disabilities discern sections of content.

===

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: 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

===