Blog

ACCESSIBLE FILE NAMES: Please…No Spaces and/or Special Characters

Brick wall displaying dash pattern of bricks

Folks who use screen readers download documents so they can read them. The first piece of information they encounter is the file name. A unique, descriptive file name helps the user understand the information contained in the document.

Best Practice: To be accessible to screen readers, file names should not contain spaces and/or special characters.

File naming conventions are important for web pages and directories, as well as for downloadable files such as PDFs, Word documents, and Excel spreadsheets.

Here are some tips to remember when naming your files:

  • Don’t start or end your filename with a space, period, hyphen, or underline.
  • Keep your filenames to a reasonable length and be sure they are under 31 characters.
  • Always use lowercase.
  • Don’t use spaces and underscores; use a hyphen instead.

Don’t use the following special characters in your file names:

# pound
% percent
& ampersand
{ left curly bracket
} right curly bracket
\ back slash
< left angle bracket
> right angle bracket
* asterisk
? question mark
/ forward slash
blank spaces
$ dollar sign
! explanation point
‘ single quotes
” double quotes
: colon
@ at sign

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

===

WEB ACCESSIBILITY: The Problem with Popups

Vintage Jack-in-the-box toy isolated on a white background

Do you have a survey popup window on your home page that automatically opens?

This disorients low vision users who cannot see the new window appearing.

WCAG 2.1 bans all popup windows without explicit alert beforehand (On Focus 3.2.1 A).

New windows take the focus away from what the user is reading or doing. This is fine when the user has interacted with a piece of user interface and expects to get a new window, such as an options dialogue. The failure comes when pop-ups appear unexpectedly.

===

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 Prevent Security Settings from Interfering with Screen Readers

Five PDF icons in a row

When creating a PDF file using Adobe Acrobat DC Pro, a document author can specify that no part of an accessible PDF is to be copied, printed, extracted, commented on, or edited.

Problem is this security setting can interfere with a screen reader’s ability to read the document, because screen readers must be able to copy or extract the document’s text to convert it to speech.

How to fix accessibility permissions manually

1. Open the PDF in Adobe Acrobat DC Pro
2. Choose File > Properties > Security.
3. Choose No Security from the Security Method drop-down list.
4. Click OK and close the Document Properties dialog box.

Is your screen reader a Trusted Agent?

From Adobe: “If your assistive technology product is registered with Adobe as a Trusted Agent, you can read PDFs that might be inaccessible to another assistive technology product. Acrobat recognizes when a screen reader or other product is a Trusted Agent and overrides security settings that would typically limit access to the content for accessibility purposes. However, the security settings remain in effect for all other purposes, such as to prevent printing, copying, extracting, commenting, or editing text.”

[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 IMAGES: How to Handle ALT Text Acronyms

How to code ALT text acroymns

IMG ALT text with acronyms can cause problems when read by screenreaders.

FAIL: <img src=”mit-it-logo.jpg” alt=”ITS at MIT” />
(read by a screen reader as “It’s at Mit”).

SOLUTION: Include spaces in between acronym letters in the IMG ALT attribute

PASS: <img src=”mit-it-logo.jpg” alt=”I T S at M I T” />
(read by a screen reader as “ITS at EM EYE TEE”).

===

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: Don’t Use Color As Part of Your Instructional Content

Color Blindness - Illustration of Glasses

Are you using color as a way of instructing visitors about the next action to take on your Web site?

Think again.

Let’s say you have images of two buttons on your Web page.

Image of a red button and a green button

If you instruct folks to click on the red button, you may be confusing the over 108 million Web users who are color blind.

WCAG 2.0 Guideline 1.4.1 warns Web designers, developers and content creators about depending solely on color when conveying instructions.

There are a number of color blindness conditions. Here are three you should learn about:

Protanopia: People with protanopia lack the long-wavelength sensitive retinal cones that are required to distinguish between colors in the green-yellow-red section of the spectrum. It is a more common form of color blindness, occurring in between 1% and 5% of males (varying by race) and in approximately 0.1% of females.

Here’s how individuals with protanopia see the red & green buttons:

Image of how a person with protanopia views red and green colors

Deuteranopia: People with deuteranopia lack medium-wavelength retinal cones and are therefore also unable to distinguish between colors in the green-yellow-red section of the spectrum. Deuteranopia is a more common form of color blindness, occurring in between 1% and 5% of males (varying by race) and in approximately 0.1% of females.

Here’s how people with deuteranopia see the red & green buttons:

Image of how people with deuteranopia view red and green buttons

Tritanopia: People with color blindness involving the inactivation of the short-wavelength sensitive cone system have tritanopia, a very rare blue-yellow color blindness. Tritanopia is a very rare form of color blindness, occurring in less than 0.003% of males and females.

Here’s how people with tritanopia see the red & green buttons:

Image that depicts how a person with tritanopia views red and green buttons on a Web page

Accessible Best Practice: Don’t use color as part of your instructional content. It will confuse and frustrate your site’s color blind visitors and is considered inaccessible according to WCAG 2.0 Guidelines.

WCAG 2.0 Guidelines covered in this post:

Level A Guideline 1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Level AAA Guideline 3.3.5 Help: Provide detailed help and 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: 118 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 55 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===

ACCESSIBLE PDFs: How to Add a PDF/UA Identifier

Four Adobe PDF Icons in a row

Is your PDF document really technically accessible? Have you checked to see if the PDF/UA identifier has been set? This enables reader applications and assistive technologies to fully process PDF/UA conforming files to maximize accessibility.

By adding the PDF/UA identifier, you are claiming that the PDF document conforms to the structure elements as stated in ISO 14289, the informal name for the International Standard for accessible PDF technology.

NOTE: If PDFs were created in Microsoft Word 2013 for Windows or in any version of Adobe InDesign, you definitely need to add the PDF/UA identifier.

How can you tell if the PDF/UA identifier has been set in a PDF?

Download PAC 3, one of the most comprehensive free testing tools that checks PDF documents for compatibility with the PDF/UA standard. Distributed by the Swiss organization Access for all and only available for Windows, PAC 3 evaluates the failure conditions that should be tested by other software apps. It also includes a screen reader preview tool to check the failure conditions which need to be tested manually.

How to test a PDF for its PDF/UA identifier with PAC 3

1. Download and launch PAC 3.
2. Click the Upload button to select the PDF you want to test.

PAC 3 Upload Button

3. In the Summary Report, if you see a red X to the left of Metadata, this means the PDF/UA identifier is missing.

PAC 3 Metadata Line in Summary Report
4. Click the Results in Detail button

PAC 3 Results in Detail Button

5. On the Report screen, click the arrow to the left of Metadata and Settings, then the arrow to the left of Metadata, then the arrow to the left of PDF/UA Identifier.

PAC 3 Report Detail PDF UA Identifier Missing

If you see a red X to the left of the option PDF/UA identifier missing, this means the PDF/UA identifier needs to be added to the document. You can fix this using Adobe Acrobat DC.

How to add the PDF/UA identifier using Adobe Acrobat DC

1. Open the PDF document in Adobe Acrobat DC.
2. Select More Tools > Print Production > Preflight
3. In the Preflight dialog, be sure PDF Standards is selected from the dropdown.
4. Activate the wrench icon above the list of Preflight checks. This should open the Document info and Metadata settings.

Adobe Acrobat Pro Preflight Wrench icon
5. Select the Set PDF/UA-1 entry option, then click the Fix button.

Adobe Acrobat Preflight Set PDF-UA-1
6. In the next dialog box, you will need to re-save your file with a different name.

Save the PDF file as a different name to set the PDF/UA identifier

To check to see if the PDF has been updated with the PDF/UA identifier, return to the PAC 3 app.

1. Go back to the PAC 3 app.
2. Click the Upload button to select the revised PDF you want to test.
3. In the Summary Report, if you see a friendly green check mark to the left of Metadata, this mean the PDF/UA identifier is now part of the PDF document.

PAC 3 Summary Report Successful Update of PDF/UA identifier

===

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

===

RESOURCE TOOL: Use PDFsam to Count Pages in Multiple PDF Files

Five PDF icons in a row

Need to count the pages in multiple PDFs without tediously opening each file and counting the pages manually?

Welcome to PDFsam, the free, open source tool designed to help you count PDF pages, as well as split and merge PDF files.

Available for Windows, Mac and Linux, PDFsam allows you to drag and drop multiple PDFs to its interface. The app then generates a spreadsheet-like report on the number of pages and info of each file. You can then copy and paste the report into Excel or other spreadsheet programs.

Download PDFsam for free 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

===

ACCESSIBLE FORMS: Avoid the Automatic Submit

Cartoon Illustration of HTML Forms

Forms are frequently designed so that they submit automatically when the user has filled in all the fields, or when focus leaves the last field.

From an accessibility standpoint, this causes two problems:

1) A disabled user who needs more context may move focus away from the field to the directions on how to fill in the form, or to other text, accidentally submitting the form.

2) With some form elements (such as a select menu), the value of the field changes as each item is navigated with the keyboard, again accidentally submitting the form.

Best Practice

Better to rely on the standard form behavior of the submit button and enter key.

Form Submit Code That Is Not Accessible

<form method=”get” id=”form1″>
<input type=”text” name=”text1″ size=”3″ maxlength=”3″>
<input type=”text” name=”text2″ size=”3″ maxlength=”3″>
<input type=”text” name=”text3″ size=”4″ maxlength=”4″ onchange=”form1.submit();”>
</form>

Form Select Menu Code That Is Not Accessible

<form method=”get” id=”form2″>
<input type=”text” name=”text1″>
<select name=”select1″ onchange=”form2.submit();”>
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
</select>
</form>

[SOURCE]

===

Read More Accessible Website Design Advice: Accessible Best Practice: Don’t Use Color As Part of Your Instructional 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

===

WEB DESIGN: Be Sure To Accommodate the Dyslexic Reader

''Dyslexia'' word with wooden letters on dark background

Dyslexia is a general term for disorders that involve difficulty in learning to read or interpret words, letters, and other symbols, but that do not affect general intelligence. It is the most common cause of reading, writing, and spelling difficulties.

Of people with reading difficulties, 70-80% are likely to have some form of dyslexia. It is estimated that between 5-10% of the population has dyslexia, but this number can also be as high as 17%.

Here are some CSS tips to consider when designing web content to accommodate the dyslexic reader.

Beware Italics
Italicized characters can be difficult for dyslexics to read.

Column Widths
Use narrow column widths (60 to 80 characters). Tracking lines of unbroken text across a page can be difficult.

No Justification
Never use justified text. It causes “rivers” that make text difficult for dyslexics to read.

River Effect in Justified Text

Use Sans-serif Fonts
Serif fonts (like Times Roman) have “feet” at the end of the letter strokes. This can be a nightmare for dyslexics to read because the letters look like they are all connected. Use sans-serif fonts.

See the difference between Serif vs Sans-serif typefaces

===

Resource:  OpenDyslexic

OpenDyslexic is a new open source font created to increase readability for readers with dyslexia. The typeface includes regular, bold, italic, and bold-italic styles. It is being updated continually and improved based on input from dyslexic users. OpenDyslexic is free for Commercial and Personal use.
Download: http://opendyslexic.org/

===

Read More Accessible Website Design Advice: Accessible Best Practice: Don’t Use Color As Part of Your Instructional 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

===

WEB DEV: Free Zip Code Distance, Radius and Location API

Hand drawn U.S. Map

Need to pull dynamic U.S. zip code data for your website? Check out ZipCodeAPI.com, the easy way to calculate distances, radius, and locations for U.S. zip codes.

ZipCodeAPI.com allows you to:

– Convert zip code to city/town or city/town to zip code
– Pull zip codes from a nearby radius
– Create a custom SQL search
– Pull related zip codes from a surrounding area
– Find the distance between two zip codes
– Organize a list of zips ordered closest to each other

Free Plan

With the free plan (registration required), you are allowed 1,200 API requests per day, which should offer enough functionality for a simple application. Note that the free account allows up to 10 API requests per hour. You also receive a free trial period of 50 API requests per hour for 2 weeks. Paid plans are also available for more robust applications.

Find out more about ZipCodeAPI.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

===