ACCESSIBLE CONTENT: Letter Spacing and Screen Readers

Colorful wooden blocks showing letters A through E

Did you know that screen readers cannot pronounce words correctly if there are spaces between letters in a word?

Solution

Remove spaces between letters in the same word.

Example

apple instead of  a p p l e

===

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 DEV: Designing to Accommodate Folks with Hand Tremors

Illustration of Human Hands Holding Mobile Phones

There is an accessibility design flaw on most responsive websites that affects users who experience hand tremors.

Problem: There is not enough space between touch targets on mobile devices for folks who suffer hand tremor issues. These users need some un-clickable screen space between touch targets…an area where they can place a finger to steady their hand so they can successfully scroll the screen without activating a link by mistake.

Why is this important?

According to UX and accessibility specialist Hampus Sethfors of axess lab:

“For a lot of people with hand tremors – caused by for instance Parkinson’s disease or essential tremor – unintentional clicks happen all the time. Especially while scrolling on a touch screen. If you think about it, touch screen scrolling requires a lot of fine motor control. You need to place your finger on the correct part of the screen, flick it at the right speed and in the right direction, and most importantly: keep it on the screen at all times during this gesture. Many web and app interfaces are designed in a way that causes big problems for users who have a hard time with this scroll gesture.”

Advice to all website designers and developers of responsive websites from a user with Parkinson’s disease

“Add some space between the different objects so that I can put my finger down without activating something.”

Solution: Add a bit of unclickable space between each touch target on the page.

Example that fails: Difficult mobile layout for user with hand tremors to navigate

Mobile phone screen layout that is difficult for user with hand tremors to navigate

Example that passes: 60 pixels of vertical space between content objects makes it easier for the user with hand tremors to anchor a finger so they can scroll the mobile screen.

Mobile screen layout that's easier for the user with hand tremors to navigate

[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 PDFs: When Bookmarks Are Required

Five PDF icons in a row

If you have a PDF document that has 21 or more pages, you need to include bookmarks that parallel the accessible document structure. This allows folks who use assistive technology an easier way to navigate a PDF document.

NOTE: Bookmarks are best added after the document structure tags are finalized.

How to add bookmarks based on a document’s structure via Adobe Acrobat Pro DC:

1. Select Bookmarks icon on the Accessibility Checker panel
2. Select the Options icon
3. Select New Bookmarks from Structure

Adobe Acrobat Bookmark Menu
4. In the Structure Elements dialog box, select the element(s) that you want to use as bookmarks.

5. Click OK.

[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 WEB DEV: Beware the Automatic Refresh

Four multi-colored refresh buttons

Do you have a web page that uses a script to periodically refresh the entire page so the latest news articles can display?

If so, you are out of compliance with WCAG 2.1 3.2.5 Change on Request (Level AAA).

Why? A script like this causes screen readers to re-read the entire page with every refresh.

SOLUTION: Remove the script causing the automatic refresh. Provide an “Update now” button that the web page visitor can use to request a refresh of the 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 FORMS: A Select “Jump Menu” Tip

Illustration of HTML Select Menus

“Jump menus” are select drop down menus that automatically submit once an option is selected. This occurs due to use of the JavaScript onchange event handler.

Problem is these types of select lists cannot be operated from the keyboard if they have an onchange handler that performs navigation. Why? Because the handler fires as the user moves the selection up and down using the keyboard. Moving through list items using the arrow keys will jump to another page or website location unexpectedly. This does not comply with WCAG 2.1 Guideline 3.2.2 – On Input (Level A).

SOLUTION: To make the select menu keyboard accessible, allow the user to trigger the navigation via a Submit button. This way the user has access to all the options in the menu using the up/down arrow keys, and, when ready, can press the Go (Submit) button that will trigger a processing script for successful navigation.

Select Jump Menu with Go Button

===

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 Embed Missing Fonts

Five PDF icons in a row

I have written about the importance of adding a PDF/UA identifier to your PDF files to help with accessibility.

The PDF/UA flag in the document informs screen readers and AT software that the PDF’s structure elements are logically ordered and semantically correct. This enables the AT apps on different devices (desktop, mobile, tablets) to process correctly-tagged PDF content consistently for a multitude of users.

Let’s talk about why you should embed missing fonts

Embedding missing fonts ensures reliable presentation of the PDF document’s text because the AT viewer is not forced to substitute fonts that may not match the usage specified in the document.

Fonts that are embedded can also help speed up the editing process. Let’s say you discover a typo and need to fix it via Adobe Acrobat Pro DC. You should be able to fix the text in the document using the original font.

How to embed missing fonts

1. Open the PDF document in Adobe Acrobat Pro DC.
2. Go to Print Production > Preflight.
3. Make sure the Adobe Acrobat Pro DC 2015 Profiles is selected.
4. Select PDF fixups.

Adobe Acrobat Pro DC screen shot how to embed fonts
5. Select Embed missing fonts.
6. Press the Analyze & Fix button.
7. Save and replace the file.
8. Test in PAC 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 CSS: Don’t float:right

Illustration of text layout aligned to the right

Careful when using float:right.

Why?

Used to place content on the right side of a Web page layout, it can be an accessibility mistake!

It can leave screen readers in the dust.

When text is floated to the right, the code is often placed BEFORE other text to its left in the HTML code. The visual order may look correct left to right (with the floated item second) while a screen reader will read the floated item first. Screen readers read files in code order, not in layout order.

Exceptions

You can use float:right if the text is still understandable in the HTML order. Or if you are positioning a decorative image to the right of the text in the layout.

===

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

===