Blog

ACCESSIBLE CONTENT: How to Enhance Readability

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

===

ACCESSIBLE IMAGES: How to Describe Complex Images

Complex mathematical formulas and graphs illustration

The WCAG 2.1 Guideline 1.1.1 Non-text Content (Level A) calls for all images to contain descriptive, meaningful alt text.

It is recommended that ALT attribute values be kept to no more than 125 characters. Yet complex images (such as charts and graphs) may require a longer description within a LONGDESC attribute or via a link to a separate HTML document that holds a full description accessible to screen readers.

Need to see examples of how to create long descriptions of complex images?

Visit the DIAGRAM Center.

Established in 2010, the DIAGRAM Center is a research and development center whose goal is to dramatically change the way digital content for Accessible Educational Materials (AEM) is produced and accessed, so that students with disabilities are provided equal access to the general education curriculum, especially science, technology, engineering, and math (STEM).

You will find specific image description guidelines for:

  • Art, Photos & Cartoons
  • Photographs
  • Cartoons & Comics
  • Chemical Elements
  • Illustrated Diagrams
  • Object Comparison
  • Comparing Events Over Time
  • Relational Diagrams
  • Venn Diagrams
  • Radial/Web Diagrams
  • Hierarchy/Tree Diagrams
  • Flow Charts
  • Cycles
  • Bar Graphs
  • Line Graphs
  • Pie Graphs
  • Scatter Plots
  • Maps
  • Math Graphs and Diagrams
  • Geometry
  • Equations & Expressions
  • Simple and Complex Tables
  • Timelines

Visit the DIAGRAM Center now.

===

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

===

ACCESSIBILITY RESOURCES: Useful WAI Info in 23 Different Languages

Illustration of Web Development Tools

The Web Accessibility Initiative (WAI) brings together individuals and organizations from around the world to develop strategies, guidelines, and resources to help make the Web accessible to people with disabilities.

Visit the WAI Translations page to gain access to the translations of current accessibility standards and other resources in 23 different languages:

Arabic, Belarusian, Catalan, Danish, German, Greek, Spanish, Estonian, Finnish, French, Hebrew, Hungarian, Italian, Japanese, Korean, Dutch, Norwegian, Polish, European Portuguese, Brazilian Portuguese, Russian, Swedish and Simplified Chinese.

===

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 CSS: Focus on the Outline

Square focus on one button in a row of buttons

Visible focus is an integral part of website accessibility.

Note the WCAG 2.1 Guideline:

2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

Who Does Visible Focus Help?

  • People who navigate by keyboard only.
  • People with visual or cognitive impairments who need a clear indication of where they are on a web page, regardless if they use a keyboard or mouse.

Visible focus should always be active, and is indicated via a visible border that surrounds web page objects, such as links, form fields, etc.

How to Test

To check your website’s current visible focus indicators, use the tab key to navigate to all page elements. As each element receives focus, there should be a clearly visible outline around the element.

Solution:

1) Adjust your CSS

Go through your CSS files and delete all declarations that shut off outlines:

{outline: none;} or {outline: 0;}

2) Re-style the focus declarations in your CSS.

Here is an example on how to add visible focus to your website links:

a:focus { outline: thin dotted; }

===

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 SEARCH: Using aria-label to Identify Site Search for Screen Reader Users

A Row of Magnifying Glasses

As website designers and developers, we should always plan on using the native HTML methods of labeling items on a page.

Consider the humble website search form, seen on so many websites:

Website Search Form

It is easy for sighted users to understand that they can use the form to conduct a site search.

But what about visually-impaired folks who use screen readers to navigate a website? We have to provide them with a recognizable label for the search field that can be announced by a screen reader since the user cannot see the interface.

 Search form with Label

Issue

What if the designer doesn’t wants to place a visual label in the search form area in order to save space, yet still inform the screen reader users about the functionality of the search function?

Enter the aria-label.

ARIA (Accessible Rich Internet Applications), is a specification from the W3C and created to improve accessibility of applications by providing extra information to assistive technologies, such as screen readers, via attributes which could be added to HTML. [SOURCE]

Solution

Here’s how to add an aria-label as an explicit invisible label to the search form code that can accommodate screen reader users:

<input role=”search” aria-label=”Search the site here” name=”Search”>
<input type=”submit” value=”Search”>

===

One-on-One Online Training: Learn How to Test Websites and Online Content for Accessibility: Are you a web developer, designer or content creator who needs to get up and running quickly on the basic rules of website accessibility and how it all relates to your website and its content?

Or maybe you already know the web design accessibility basics, but are stumped on how to fix your website and content so all is compliant.

Wouldn’t it be more practical if you could “learn by doing”…as in figuring out what needs to be fixed on your own website/content while you learn the WCAG 2.1 A, AA & AAA Guidelines?

Now you can through one-on-one online training with Mary Gillen.

Find out more about Mary Gillen’s “Learn How to Test Websites and Online Content for Accessibility” online training.

===

ACCESSIBLE IMAGES: Don’t Stutter

Different Color Buttons

Problem

Did you know that using the same ALT text on adjacent images on a web page causes screen readers to stutter when the same text is read out twice?

Solution

If a subsequent adjacent image is “decorative”, use the ALT=” attribute. For other non-decorative images, change the redundant ALT text to a unique phrase.

===

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 BANNER ADS: Don’t Forget the Alt Text

Cartoon of human hand holding a megaphone reaching out from a cellphone screen

If you are not prepending the word “Ad” or “Advertisement” at the beginning of the Alt text value in your banner image call code, you are losing business.

Why?

Folks who use screen readers that convert text-to-voice need to be alerted that they are accessing an advertisement…as well as the sales offer and call-to-action instruction so they can buy.

Example

<img src=”banner.jpg” alt=”Advertisement – Click here to purchase the latest Samsung Galaxy Smartphone for 40% off – Buy before Sept 16 2019″>

This satisfies the WCAG 2.1 – 1.1.1 Non-text Content Guideline:

“All non-text content that is presented to the user has a text alternative that serves the equivalent purpose…(Level A)”

Tip: Most screen readers cut off alt text if the content is too long. Best to keep the alt text value character count to 125 characters (including spaces) or less.

===

WEBINAR: Web developers and designers! Refresh your skills! Register now for Learn 60 Website Design Accessibility Tips You May Not Know…in 60 Minutes.

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 PDFs: How to Correct Typos in Tagged Text

Four Adobe PDF Icons in a row

What happens when your tagged text doesn’t match visual text?

Even though the text in your PDF looks correct, there may be typos or extra spacing behind the scenes that causes screen readers to announce the content incorrectly.

Tagged text must be free from line breaks and split words. The Adobe Accessibility Checker does not alert you to these issues.

Here’s how you can determine the back-end content issues and fix them, using Adobe Acrobat Pro DC.


How to Figure Out What is Wrong with the Content

1) Open the PDF in Adobe Acrobat Pro DC.

2) Select File > Save as > Text (Plain).

3) Save the file to your computer.

4) Open the text file in Microsoft Word.

5) Use the grammar and spell check tools to find typos or spacing issues.


How to Fix These Problems in the PDF File

1) With the PDF open in Adobe Acrobat Pro DC, select the Tags Tree

Tags Tree Icon in Adobe Acrobat Pro DC

2) Locate the tag containing the typo or spacing issue.

3) Right click and select Copy Contents to Clipboard

Copy Contents to Clipboard Command in Adobe Acrobat Pro DC

4) Right click the tag again and select Properties

Properties option in Adobe Acrobat Pro

5) Paste the copied content into the “Actual Text” field and make the corrections.

Actual Text field in Object Properties of Adobe Acrobat Pro DC

6) Save the PDF file.

===

WEBINAR: Web developers and designers! Refresh your skills! Register now for Learn 60 Website Design Accessibility Tips You May Not Know…in 60 Minutes.

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 EXCEL: Brrrr! Freeze Those Row and Column Headings

Microsoft Excel Icons

Need to make your Excel spreadsheets more accessible?

Start by “freezing” column or row headings.

Why is this helpful?

According to the folks at the University of Minnesota’s Accessible U:

“Long lists of data are much easier to read if you freeze column or row headings to allow users to keep both the heading and the data visible. Freezing data aids usability by minimizing cognitive load, and it doesn’t interfere with a screen reader’s ability to read the data.”

Here’s how to freeze rows or columns in an Excel spreadsheet

NOTE: You can only freeze rows at the top and columns on the left side of the worksheet. Freezing rows and columns in the middle of the worksheet will not work.

1) To lock one row only, choose the View tab, and then click Freeze Top Row.

2) To lock one column only, choose the View tab, and then click Freeze First Column.

3) To lock more than one row or column, or to lock both rows and columns at the same time, choose the View tab, and then click Freeze Panes. You will want your cursor to be below the row(s) you want to freeze and to the right of any column(s) you want to freeze.

4) To lock multiple rows (starting with row 1), select the row below the last row you want frozen, choose the View tab, and then click Freeze Panes.

5) To lock multiple columns, select the column to the right of the last column you want frozen, choose the View tab, and then click Freeze Panes.

Find more instructions for freezing Excel spreadsheet rows and columns at the New Mexico State University website.

==

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 EPUBS: Use the Ace by DAISY App Testing Tool

Epub Icons

Are the EPUB files you are creating really accessible?

Ace by DAISY is a free, open source EPUB accessibility checking tool which has been created to assist in the evaluation of conformance to the EPUB Accessibility Specification.

Available for Windows, MacOS and Linux

The Ace by DAISY App is a desktop application for Windows, MacOS and Linux, allowing EPUB accessibility testing directly from your desktop, helping to ensure your EPUB content conforms with the EPUB Accessibility 1.0 specification.

Download the Ace by DAISY App and find further developer’s notes, along with installation 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: 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

===