Blog

ACCESSIBLE PDFs: How to Set the Document Root

Human hands holding a young green plant

Every PDF document needs a “root.”

I get this question all the time from fellow PDF remediators:

“I am getting this error: ‘”Part” structure element used as root element.’ How can I fix it?”

You need to set the root of the PDF as “Document.”

HERE’S THE FIX

1) In the Acrobat Pro DC Tags pane, create a new Document tag and position it at the root under the Tags tree.

Accessibility Tag Pane Adobe Acrobat Pro DC

2) Select the rest of the tag structure and drag it inside (under) the root Document tag.

3) Save the file.

===

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 TOOLS: Take a Bite Out of Testing with A11ygator

Illustration of Smiling Alligator

Making online content available to every user is the most important requirement for a website. Accessible design takes effort.  You must learn about the specific guidelines and build these rules into your design and content. You must also be prepared to conduct a lot of manual testing.

How can a web developer test a website to get an initial baseline on the items that need to be fixed so they are accessible?

Check out A11ygator, a simplified dashboard where you can type a website URL to check and get an accessibility report.

a11ygator interface

A11ygator uses Pa11y under the hood. You can select the WCAG standard and the wait time – the time to wait before A11ygator actually starts to test, useful for websites that may take some seconds to render the content.

Also, you will get a screenshot of the actual page that A11ygator has tested, plus the ability to download the report in JSON format.

Take A11ygator for a spin.

RESOURCE

===

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: Required Fields and Screen Readers – Two Solutions

Cartoon Illustration of HTML Forms

How can you inform screen reader users that a form field is required? Here are two solutions.

Solution #1:
Include the word “required” in the form <label>.

<label for=”email”>Email (required)</label>
<input id=”email” name=”email” type=”text”>

According to the folks at Deque University:

“Sighted users see the word and screen reader users can hear the word when the label is read to them. Older screen readers that do not support HTML 5 or ARIA may not say ‘required’ if the word is not published in the <label>.”

Find out more about accessible required form fields at Deque University

Solution #2:
Create a CSS class that hides the screen reader message visually (off screen), then include it in a span where the message can be read out loud by the screen reader.

CSS
.screen-reader-only {
position: absolute;
left: -99999px;
height: 1px;
width: 1px;
overflow: hidden;
}

HTML Form Label

<label for=”email”>
Email <span class=”screen-reader-only”>Email address is required</span>
</label>
<input id=”email” name=”email” type=”text”>

===

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

===