Author: Mary Gillen

ACCESSIBLE IMAGES: Don’t Stutter

Posted on by Mary Gillen

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

Posted on by Mary Gillen

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

Posted on by Mary Gillen

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.

===

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

Posted on by Mary Gillen

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

Posted on by Mary Gillen

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

===

ACCESSIBLE WEB DEVELOPMENT: How to Allow Pinching to Zoom Text

Posted on by Mary Gillen

Illustrations of human hands pinching text on mobile phones to increase the type size

According to the WCAG 2.1 – 1.4.4 Resize text (Level AA) Guideline, a user should be able to resize text to 200% without loss of content or function.

The action of “pinching to zoom” text on a mobile phone or tablet is often used by older individuals or users with low vision.

Question
How can you make sure that users can use the “pinching to zoom” technique when viewing your responsive website content?

Answer
Use the correct viewport META tag within the HTML5 header code.

The viewport is the user’s visible area of a web page. It varies with the device, and will be smaller on a mobile phone than on a desktop monitor screen.

Here is the standard meta tag code for a viewport:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”>


===
width=device-width: width of the screen in CSS pixels at a scale of 100%
initial-scale: Zoom level when the page is first visited.
minimum-scale: Minimum zoom level to which a user can zoom the page.
maximum-scale: Maximum zoom level to which a user can zoom the page.
user-scalable: Flag which allows the device to zoom in or out. (value= yes/no).

===

Here are the attributes NOT to use in the viewport META tag as well as the values to change:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes“>

By eliminating the minimum and maximum scale attributes and setting the user-scalable value to “yes”, the user can then pinch and zoom the text content to a size they can comprehend.

===

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: How to Share Audio on Instagram, YouTube and Facebook

Posted on by Mary Gillen

Five audio icons

Instagram, Facebook and YouTube all have video sharing functionality.

Reality

They don’t offer a quick and efficient way to share sound when you want to upload an audio file.

Question

How do you turn an audio track into a video?

Answer

Combine it with a static image file.

This type of “artwork video” technique has been around every since video on the web existed. But content writers and editors needed a quick and easy way to create this content.

Let me introduce you to Artwork.

This online app allows you to combine images and audio into videos. You can then download and share the files on your social media accounts.

Once you register and sign-up for a free trial, creating a video just takes seconds.

Take Artwork for a free spin right now.

[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

===

ACCESSIBILITY TESTING: Common Keys Used in Keyboard Operation of Web Pages and Apps

Posted on by Mary Gillen

Blue and White Keyboard Tab Key Icons

Web developers serious about accessible design ensure that all web page and app elements — buttons, links, form controls etc. — are reachable by the tab key on the keyboard.

Why?

Many users are physically unable to use a mouse, and need to navigate through the page using only the keyboard.

How can you test a website or app using only the keyboard?

Here are some common key combinations used when testing keyboard operation of web pages and apps:

Tab – move to the next link, form element or button.
Shift+Tab – move to the previous link, form element, or button.
Enter – activate the current link or button.
Space – check or uncheck a checkbox form element. Will also activate a button that currently has focus.
Up/Down arrow keys – move between radio buttons or, in some cases, menu links.
Right/Left arrow keys – in some cases, move between menu links or adjust sliders in audio and video plugins.
Escape – Close the current modal dialog or dropdown menu and return focus to the element that spawned it.

[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 FORMS: Phone Number Fields and Text Labels

Posted on by Mary Gillen

Black Labrador Retriever Looking Up at Telephone Receiver

Many people with visual or cognitive disabilities can recognize phone number fields in HTML forms and usually understand what info needs to be provided to fill in the fields.

Phone numbers are frequently formatted in fixed, distinctive ways, and Web developers may feel that just providing visual formatting of the fields will be sufficient to identify them.

Not so fast

Even if all the fields have programmatically determined names, a text label must also identify the set of fields as a phone number. The label alerts screen reader users about the content necessary to complete the form field correctly.

Best Practice in HTML5

In its most basic form, a telephone form input and text label can be implemented like this:

<label for=”telNo”>Phone number:</label>
<input id=”telNo” name=”telNo” type=”tel”>

===

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

===