Blog

ACCESSIBLE PDFs: How to Make Math Formulas Accessible to Screen Readers

Four Adobe PDF Icons in a row

NOTE: Have been receiving lots of questions concerning the accessibility of math and scientific formulas in PDF documents. This post is the first in a series of how to make STEM content accessible in different document content.

===

Sometimes just complying with basic standards is not enough if you want your PDF document content to be accessible to all assistive technologies.

Case in point: consider STEM (Science, Technology, Engineering, and Mathematics) formulas.

According to PDF/UA accessibility guidelines, “All mathematical expressions shall be enclosed within a Formula tag and shall have an ALT attribute.”

How to Describe an Equation

Have a look at this math equation:

m equals begin fraction m sub 0 over begin square root 1 minus begin fraction v sup 2 over c sup 2 end fraction end square root end fraction

You have to remember that the screen reader user is listening to the equation, so its ALT text description would be set to:

ALT=”m equals begin fraction m sub 0 over begin square root 1 minus begin fraction v sup 2 over c sup 2 end fraction end square root end fraction” [SOURCE]

Advice from Adobe

“Because speech software may handle Formula tags differently from normal text, it may be necessary to add a description using alternate text.”

However…

…according to Ted Page of Accessible Digital Documents, if you do so, the content may not be read by some earlier versions of the NVDA screen reader, with or without an ALT attribute.

Solutions That You Should Test

  1. Nest a <P> tag in the Formula tag that has a text alternative in an Actual Text attribute. This content can be accessed by NVDA.

    P tag nested in Formula tag
    ===

    Actual Text option in PDF file

  2. The Formula tag is an inline level element. If it is used as a block level element, the attribute “Placement: Block” is required. Otherwise some assistive technologies are not able to present it correctly. Follow these steps:

    1. In the Acrobat Pro Tags pane, right click the Formula tag.
    2. Select Properties.
    3. On the Tag tab of the Object Properties dialog, click the Edit Attribute Objects button.
    4. In the Attributes dialog, if there is not a “/Attribute Object # <<Dictionary>>” item, click the New Item button.
    5. Select “/Attribute Object # <<Dictionary>>” and click the New Item button.
    6. In the Add Key and Value dialog, enter Placement in the Key field, and Block in the Value field. Leave Name as the Value Type.
    7. Click OK.

===

Instant Download!

PDF Accessibility Remediation How to Fix 40 Common Errors

Whether you have limited experience with the PDF remediation process, are expanding your knowledge on how to remediate PDFs, or simply need a resource that can help remind you how to fix a frustrating error, the info provided in this e-book can help.

Download now.

 

===

ACCESSIBLE SOCIAL MEDIA: How to Add/Edit Alt Text for Instagram Photos

Instagram Logos

Instagram uses Automatic alt text object recognition technology to provide a visual description of photos for people with visual impairments. You can replace this text to provide a better description of a photo. Keep in mind that this description will only be read if someone is using a screen reader to access Instagram.

To see and edit alt text for a photo before you post it on Instagram:

  1. Start by taking a photo or uploading an existing photo to Instagram.
  2. Choose a filter and edit the image, then tap Next.
  3. Tap Advanced Settings at the bottom of the screen.
  4. Tap Write Alt Text.
  5. Write your alt text in the box and tap Done (iPhone) or Save (Android).

To change the alt text of a photo after you’ve already posted it on Instagram:

  1. Go to the photo and tap (iPhone) or(Android).
  2. Tap Edit.
  3. Tap Edit Alt Text in the bottom right.
  4. Write the alt text in the box and tap Done (iPhone) or (Android).

[SOURCE]

===

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: Check Out Coolors, the Color Schemes Generator

Color Palettes

Need color palette ideas for a new website project?

Coolors to the rescue!

Created during a weekend as a personal project by Italian web designer/developer Fabrizio Bianchi, Coolors is an online tool that allows you to generate new palettes or view trending palettes created by others.

Coolors is also available as an iOS app, an Adobe add-on and a Chrome extension.

For accessibility testing, Coolors has a color contrast checker and a tool that checks your proposed palette against eight types of color vision deficiencies experienced by users who are color blind.

Eight Types of Color Blindness

Your palettes can also be exported eight different ways:

Export Palette Types of Files

Try it yourself at https://coolors.co/

===

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 Localize Language for Screen Readers

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

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

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

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 VIDEO: Use the Able Player Plugin for WordPress

Illustration of hands holding tablet while viewing videos

Need a fully-accessible cross-browser HTML5 media player for your WordPress website? Download the Able Player plugin by Terrill Thompson to embed audio or video within your WordPress page or post.

There are currently two ways to add an Able Player instance to a WordPress site:

  1. Enter or paste any valid HTML5 Able Player code into your web page. Full documentation is available on the Able Player project page on GitHub.
  2. Enter an [ableplayer] shortcode. The shortcode is intended for adding videos hosted on YouTube or Vimeo, with captions and subtitles hosted on these services. For anything more complex, use HTML.

The [ableplayer] shortcode

The [ableplayer] shortcode supports the following attributes.

Required attributes (one of these)

  • youtube-id – 11-character YouTube ID
  • vimeo-id – Vimeo ID

Optional attributes

  • youtube-desc-id – YouTube ID of a described version of the video
  • vimeo-desc-id – Vimeo ID of a described version of the video
  • youtube-nocookie => “true” or “false” (use “true” to embed YouTube untracked, for added privacy)
  • id – a unique id for the player (if omitted, one will be automatically assigned)
  • autoplay – “true” or “false” (default is “false”)
  • loop’ – “true” or “false” (default is “false”)
  • playsinline – “true” or “false” (default is “true”). By setting to “false”, some devices (e.g., iPhones) will play the video in their own media player rather than in Able Player.
  • hidecontrols – “true” or “false” (default is “false”). Set to “true” to enable the player controls to fade away during playback. They will appear again if the user hovers over the player or pressing a key, and they are always accessible to screen reader users.
  • poster – the URL of a poster image, displayed before the user presses Play
  • width – a value in pixels (by default, the player will be sized to fit its container)
  • height – a value in pixels (by default, the height of the player will be in proportion to the width)
  • heading – The HTML heading level (1-6) of the visually hidden “Media Player” heading that precedes the player (for the benefit of screen reader users). If omitted, a heading level will be intelligently assigned based on context.
  • speed – “animals” or “arrows” (default is “animals”)
  • start – start time at which to start playing the media, in seconds. Some browsers do not support this.
  • volume – “0” to “10” (default is “7” to avoid overpowering screen reader audio). Some browsers do not support this.
  • seekinterval – number of seconds to forward/rewind with the Forward and Rewind buttons. If omitted, the interval will be intelligently assigned based on length of the video.
  • nowplaying – “true” or “false” to include a “Selected Track” section within the media player (default is “false”).

See code examples at the Able Player download page.

===

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 Remediate a PDF Document with NVDA for Accessibility

Five PDF icons in a row

Watch as Certified Accessibility Professional Dax Castro remediates a PDF using NDVA (screen reader) to test and ensure a good user experience. You can also learn NVDA shortcuts while creating an accessible PDF document.

Video Dax Castro Remediate PDF with NVDA

Learn more about Dax at section5oh8.com

===

Instant Download!

PDF Accessibility Remediation How to Fix 40 Common Errors

Whether you have limited experience with the PDF remediation process, are expanding your knowledge on how to remediate PDFs, or simply need a resource that can help remind you how to fix a frustrating error, the info provided in this e-book can help.

Download now.

ACCESSIBLE PDFs: How to Fix Nested Alternate Text Failed Error

Four Adobe PDF Icons in a row

Screen readers don’t read alternate text for nested elements.

If alternate text does exist in your PDF’s nested elements, you will see the Nested alternate text -failed error when using the Accessibility Checker in Adobe Acrobat Pro DC.

Adobe Acrobat Nested alternate text - Failed error

Here’s how to fix the problem:

1) In Adobe Acrobat Pro DC Accessibility Checker sidebar, right-click (Windows) or Ctrl-click (Mac OS) on the error, then select Show in Tags panel.

Adobe Acrobat Show in Tags Panel

2) In the Tags panel, Right-click (Windows) or Ctrl-click (Mac OS) on the  nested element and choose Properties from the context menu.

3) Remove the Alternate Text from the Object Properties dialog box, and then click the Close button.

Remove alternate text

4) Save the PDF file.

5) Test the PDF again in using the Adobe Acrobat DC Pro Accessibility Checker.

===

Instant Download!

PDF Accessibility Remediation How to Fix 40 Common Errors

Whether you have limited experience with the PDF remediation process, are expanding your knowledge on how to remediate PDFs, or simply need a resource that can help remind you how to fix a frustrating error, the info provided in this e-book can help.

Download now.

===