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

===

ACCESSIBLE IMAGES: How to Describe Complex Images

Complex mathematical formulas and graphs illustration

The WCAG 2.1 Guideline 1.1.1 Non-text Content (Level A) calls for all images to contain descriptive, meaningful alt text.

It is recommended that ALT attribute values be kept to no more than 125 characters. Yet complex images (such as charts and graphs) may require a longer description within a LONGDESC attribute or via a link to a separate HTML document that holds a full description accessible to screen readers.

Need to see examples of how to create long descriptions of complex images?

Visit the DIAGRAM Center.

Established in 2010, the DIAGRAM Center is a research and development center whose goal is to dramatically change the way digital content for Accessible Educational Materials (AEM) is produced and accessed, so that students with disabilities are provided equal access to the general education curriculum, especially science, technology, engineering, and math (STEM).

You will find specific image description guidelines for:

  • Art, Photos & Cartoons
  • Photographs
  • Cartoons & Comics
  • Chemical Elements
  • Illustrated Diagrams
  • Object Comparison
  • Comparing Events Over Time
  • Relational Diagrams
  • Venn Diagrams
  • Radial/Web Diagrams
  • Hierarchy/Tree Diagrams
  • Flow Charts
  • Cycles
  • Bar Graphs
  • Line Graphs
  • Pie Graphs
  • Scatter Plots
  • Maps
  • Math Graphs and Diagrams
  • Geometry
  • Equations & Expressions
  • Simple and Complex Tables
  • Timelines

Visit the DIAGRAM Center 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

===

ACCESSIBILITY RESOURCES: Useful WAI Info in 23 Different Languages

Illustration of Web Development Tools

The Web Accessibility Initiative (WAI) brings together individuals and organizations from around the world to develop strategies, guidelines, and resources to help make the Web accessible to people with disabilities.

Visit the WAI Translations page to gain access to the translations of current accessibility standards and other resources in 23 different languages:

Arabic, Belarusian, Catalan, Danish, German, Greek, Spanish, Estonian, Finnish, French, Hebrew, Hungarian, Italian, Japanese, Korean, Dutch, Norwegian, Polish, European Portuguese, Brazilian Portuguese, Russian, Swedish and Simplified Chinese.

===

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: Focus on the Outline

Square focus on one button in a row of buttons

Visible focus is an integral part of website accessibility.

Note the WCAG 2.1 Guideline:

2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

Who Does Visible Focus Help?

  • People who navigate by keyboard only.
  • People with visual or cognitive impairments who need a clear indication of where they are on a web page, regardless if they use a keyboard or mouse.

Visible focus should always be active, and is indicated via a visible border that surrounds web page objects, such as links, form fields, etc.

How to Test

To check your website’s current visible focus indicators, use the tab key to navigate to all page elements. As each element receives focus, there should be a clearly visible outline around the element.

Solution:

1) Adjust your CSS

Go through your CSS files and delete all declarations that shut off outlines:

{outline: none;} or {outline: 0;}

2) Re-style the focus declarations in your CSS.

Here is an example on how to add visible focus to your website links:

a:focus { outline: thin dotted; }

===

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 SEARCH: Using aria-label to Identify Site Search for Screen Reader Users

A Row of Magnifying Glasses

As website designers and developers, we should always plan on using the native HTML methods of labeling items on a page.

Consider the humble website search form, seen on so many websites:

Website Search Form

It is easy for sighted users to understand that they can use the form to conduct a site search.

But what about visually-impaired folks who use screen readers to navigate a website? We have to provide them with a recognizable label for the search field that can be announced by a screen reader since the user cannot see the interface.

 Search form with Label

Issue

What if the designer doesn’t wants to place a visual label in the search form area in order to save space, yet still inform the screen reader users about the functionality of the search function?

Enter the aria-label.

ARIA (Accessible Rich Internet Applications), is a specification from the W3C and created to improve accessibility of applications by providing extra information to assistive technologies, such as screen readers, via attributes which could be added to HTML. [SOURCE]

Solution

Here’s how to add an aria-label as an explicit invisible label to the search form code that can accommodate screen reader users:

<input role=”search” aria-label=”Search the site here” name=”Search”>
<input type=”submit” value=”Search”>

===

One-on-One Online Training: Learn How to Test Websites and Online Content for Accessibility: Are you a web developer, designer or content creator who needs to get up and running quickly on the basic rules of website accessibility and how it all relates to your website and its content?

Or maybe you already know the web design accessibility basics, but are stumped on how to fix your website and content so all is compliant.

Wouldn’t it be more practical if you could “learn by doing”…as in figuring out what needs to be fixed on your own website/content while you learn the WCAG 2.1 A, AA & AAA Guidelines?

Now you can through one-on-one online training with Mary Gillen.

Find out more about Mary Gillen’s “Learn How to Test Websites and Online Content for Accessibility” online training.

===

ACCESSIBLE IMAGES: Don’t Stutter

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

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

===