Blog

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

===

ACCESSIBLE PDFs: How to Correct Typos in Tagged Text

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.

===

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

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

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

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

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

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

===