Blog

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

===

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 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 exists 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.

===

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 E-COMMERCE: The Strikethrough Strikes Out

Pencil Drawing of Shopping Cart

So many e-commerce websites use the strikethrough style to indicate a discounted price, like this:

Display:
Price: $12.99 $9.99

Code:
Price: <span style=”text-decoration: line-through;”>$12.99</span> $9.99

For the sighted user, the strikethrough text remains readable.

But for those individuals who use screen readers, it’s a strike out.

Screen readers, such as NVDA, ignore the strikethrough text. NVDA reads the price example above as:

Price: $12.99 $9.99

What is the actual price? Very confusing.

Solution

Be sure to deliver the complete info so all shoppers can understand.

Display:
Price: $12.99 now $9.99. You save $3.

Code:
Price: <span style=”text-decoration: line-through;”>$12.99</span> now $9.99. You save $3.

===

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 EDUCATION: How to Create Accessible Crossword Puzzles

Crossword Puzzles

Since 1858, The American Printing House for the Blind has operated in Louisville, Kentucky as the world’s largest nonprofit organization creating accessible learning experiences through educational, workplace, and independent living products and services for people who are blind and visually impaired.

APH has created a web-based app for digital accessible crossword puzzles. These puzzles are fully accessible and can be navigated and solved using a screen reader. There are existing puzzles with academic content for 5th – 12th grade covering topics such as Science, Social Studies, Literature, Math, The Arts, Us History and World History. There are currently over a 100 existing puzzles available.

Need to create accessible crossword puzzles? Here are some resources that can help.

1) APH Accessible Crossword Puzzle App Review

2) Crossword Puzzle User Guide
This User Guide offers information on how to create new puzzles. This is a fantastic opportunity for teachers to take those crossword puzzle worksheets and make them accessible! These digital crossword puzzles also teach and provide opportunities to strengthen tech skills and digital grid math skills.

3) Sample Accessible Crossword Puzzles

===

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 LINKS: When to Use aria-label

Click here orange buttons

When website designers and developers use generic text like “Click Here” or “Read More” as instructions in anchor text, it is confusing to screen reader users because it announces nothing about the specific content that will appear once the link is clicked.

This type of link content fails to meet the WCAG 2.4.4 Link Purpose (In Context) (Level A) guideline:

“The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.”

Wait a minute

What happens when the website designer has space constraints (especially on mobile devices) and doesn’t have room to display long link text explanations.

EXAMPLE:

<h3>Local News</h3>
<p>Marlborough tax hike: Marlborough city managers are proposing a 75% increase in property taxes for the coming fiscal year.</p>
<p><a href=”taxhike.html”>Read more about Marlborough tax hike</a></p>

REMEDIATION:

Use an aria-label attribute in the link code that provides specific information to the screen reader user.

<h3>Local News</h3>
<p>Marlborough tax hike: Marlborough city managers are proposing a 75% increase in property taxes for the coming fiscal year.</p>
<p><a href=”taxhike.html” aria-label=”Read more about Marlborough tax hike”>Read more…</a></p>

When screen readers discover the aria-label in the link code, its value is read (Read more about Marlborough tax hike) instead of the anchor text  Read more….

I have found this to be consistent when the screen reader is used on the Windows 10 platform and on iOS and Android mobile devices.

===

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 “F” or “UF” Key Missing in File Specification Error

Four Adobe PDF Icons in a row

Using InDesign to export a PDF file?

Sometimes you will find the error “‘F’ or ‘UF’ key missing in file specification” when checking the accessibility of the PDF in PAC 3.

PAC 3 Error F or UF

Here’s how to fix it, using Adobe Acrobat Pro:

1) Open the PDF in Adobe Acrobat Pro DC.

2) Select More Tools > Print Production >Preflight.

3) Select the Acrobat Pro DC 2015 Profiles from the drop-down within the Preflight dialog box.

How to correct F or UF key using Preflight Tool in Adobe Acrobat Pro

4) Click the blue wrench icon.

5) Under the Document category, select the Insert missing F and UF entries for embedded files option.

6) Press the Fix button in the bottom right corner of the dialog.

7) Save the PDF file.

8) Test the PDF again in PAC 3.

PAC 3 F or UF Key Error Corrected

9) The original error should now “pass” as accessible.

===

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

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

===