Mary Gillen | - Part 12

ACCESSIBLE FORMS: Calling All Radio Buttons

Posted on January 23, 2019February 5, 2019 by Mary Gillen

To be recognized by screen readers, radio button groups need: 1) a fieldset, 2) a legend, and 3) labels.

Legend text is announced along with the label text for radio buttons inside a fieldset, which makes it easier for a screen reader user to understand each radio button choice.

CODE EXAMPLE:

<form>

<fieldset>
<legend>Choose the sandwich you want to order:</legend>

<input type=”radio” name=”sandwich” value=”cheese” id=”sandwich_cheese”>
<label for=”sandwich_cheese”>Cheese</label>

</fieldset>

</form>

BROWSER VIEW

===

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 HTML TABLES: Is Your Data Hidden from Screen Readers?

Posted on January 21, 2019January 21, 2019 by Mary Gillen

Computer Code HTML on monitor

Using role=‘presentation’ on HTML data tables prevents information from being read out correctly by screen readers.

If your HTML table contains data you want to make accessible to all visitors, be sure to remove the attribute role=‘presentation’ from the TABLE element.

If you are using the HTML table for layout purposes, add the attribute role=”presentation” to the TABLE element. You then need to change all TH elements to TD elements and remove semantic elements like CAPTION.

Screen readers interpret TH and CAPTION elements as part of a data table. If these elements are part of a presentation HTML table, the results can be very confusing to individuals using assistive technology.

===

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: Use a Time Stamp to Quickly Direct Users to a Section of Your Video

Posted on January 20, 2019January 20, 2019 by Mary Gillen

Close-up of waving flag with YouTube logo, editorial 3D rendering United States

Have a long demo video on YouTube? Need to direct users to a certain section of the video so no one has to sit through the whole presentation?

Make use of YouTube’s Time Stamps.

Simply add a time code to the end of the YouTube URL link for your video. When the prospect clicks the link, he/she will be taken to a timed point in the presentation.

EXAMPLE:

Let’s say your YouTube video URL is https://www.youtube.com/watch?v=20SHvU2PKsM [launch the video]

Introduction to Web Accessibility and W3C Standards Video

You want to direct the prospect to the 1 minute 10 second mark in the video.

The Time Stamp code for this would be #t=1m10s

Change the URL to https://www.youtube.com/watch?v=20SHvU2PKsM#t=1m10s [launch the video]

Shadi Abou-Zahra, Accessibility Strategy and Technology Specialist at W3C

===

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: Use the Inverted Pyramid Style for Quicker Info Access

Posted on January 19, 2019January 19, 2019 by Mary Gillen

triangles in abstract vector background

Think like a journalist when writing accessible website content. Use the “inverted pyramid style” by including the who, what, when, where, why and how information in the first paragraph of the page. Why is this style important for accessibility? Sighted users can visually scan or skip over content they don’t consider important. Individuals using screen readers must listen to the content of the page, one paragraph at a time. Presenting the most important facts first allows for quicker info access for those using assistive technology.

How to Write in the Inverted Pyramid Style

Journalists use the “inverted pyramid style” when composing news stories. The reader has immediate access to the most important facts, in case there isn’t enough time to finish the entire article. The supporting information is then included in the subsequent paragraphs.

Tips for Writing in the Inverted Pyramid Style

In the article Inverted Pyramid: Writing for Comprehension, author Amy Schade shares tips on how to write in the inverted pyramid style:

“1. Identify your key points. What piece of information is the key fact you want your readers to know, even if they only read a single paragraph or sentence on the page? What effectively summarizes all the information that will follow?

2. Rank secondary information. Outline the story details and supporting information, prioritizing the information that is most likely to be of interest to the broadest audience, and moving down the list to the smaller and more nuanced details.

3. Write well and concisely. The structure only helps readers if the content is strong. Cut unnecessary information. Get to the point quickly. Use straightforward language. Use short paragraphs and bulleted lists.

4. Frontload all elements of content with important information. The main headline should be descriptive. The story should start with the main point. Each heading or subheading should be descriptive. The first sentence of every paragraph should be the most important. The first words in each sentence should be information-carrying and indicate what content will follow.

5. Consider adding a summary or list of highlights. Some sites go a step beyond and add a summary or a bulleted list of key points to further emphasize the main takeaways of the content.”

===

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

===

TOOLS: Decaffeinate Accessibility Problems with NoCoffee Vision Simulator

Posted on January 18, 2019January 18, 2019 by Mary Gillen

Five hot coffee drink with steam icons

NoCoffee is a Chrome extension that helps web developers, designers and content creators get a better understanding of the difficulties visually impaired users experience when viewing website pages.

This useful tool can help you see the problems faced by people with slight-to-extreme vision issues. These include:

– Low Acuity
– Low Contrast Sensitivity
– Colorblindness
– Visual snow, glare, ghosting and cataracts.
– Nystagmus (rapid, involuntary, oscillatory movement of the eyes).
– Obstructed visual field

Download it today and start making better design decisions that accommodate the needs of the visually-impaired.

Download NoCoffee Chrome Extension now

===

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 ACCESSIBILITY TIP: Using Images in Bulleted Lists

Posted on January 17, 2019January 17, 2019 by Mary Gillen

A bulleted list is written by hand

In order for customized list items to be accessible, they must be marked up correctly.

FAIL: Avoid using images as bullets in lists in the HTML file.

SOLUTION: Remove the image bullets from the HTML and use CSS to generate the bullets

PASS:

list-style-image:url(‘images/bullet.png’);

===

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 ACCESSIBILITY TIP: Text Display Direction Switcheroo

Posted on January 16, 2019January 16, 2019 by Mary Gillen

Multi-colored arrows pointing right to left

The dir attribute is used to set the base direction of text for display. It is essential for enabling HTML in right-to-left scripts such as Arabic, Hebrew, Syriac, and Thaana. Numerous different languages are written with these scripts, including Arabic, Hebrew, Pashto, Persian, Sindhi, Syriac, Dhivehi, Urdu, Yiddish, etc.

The lang attribute specifies a language written right-to-left, so dir=rtl is needed to change the text layout direction.

SOLUTION: Add dir=”rtl” to the html tag any time the overall document direction is right-to-left. This sets the base direction for the whole document.

EXAMPLE FOR CONTENT DISPLAYED IN ARABIC:

<!doctype html>
<html dir=”rtl” lang=”ar”>

[SOURCE]

===

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 ACCESSIBILITY TIP: Underline Those Text Links

Posted on January 15, 2019January 15, 2019 by Mary Gillen

Sign with word necessary

Hypertext links that are not underlined can cause problems for some users.

FAIL: Removing the underline from links makes it difficult for color blind users to see them.

SOLUTION: Remove the text-decoration:none property from your link styles, or introduce the link underline style on both mouse hover and keyboard focus actions.

PASS:

CSS: Here is the basic declaration to add to your CSS style sheet to activate all link underlines throughout your website:

a {text-decoration:underline;}

CSS: Here is the basic declaration to add to your CSS style sheet to underline the link when a user hovers over a link with a mouse or activates keyboard focus when “tabbing” to the link:

a:hover, a:focus {text-decoration:underline;}

===

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

===

TOOLS: Testing for Color Blindness Accessibility

Posted on January 6, 2019January 6, 2019 by Mary Gillen

Types of color blindness. Eye color perception. Vector illustration on isolated background.

According to the National Eye Institute, there are three main kinds of color blindness, based on photopigment defects in the three different kinds of cones that respond to blue, green, and red light. Red-green color blindness is the most common, followed by blue-yellow color blindness. A complete absence of color vision —total color blindness – is rare.

Most Common: Red-Green Color Blindness

The most common types of hereditary color blindness are due to the loss or limited function of red cone (known as protan) or green cone (deutran) photopigments. This kind of color blindness is commonly referred to as red-green color blindness.

Protanopia: In males with protanopia, there are no working red cone cells. Red appears as black. Certain shades of orange, yellow, and green all appear as yellow. Protanopia is an X-linked disorder that is estimated to affect 1 percent of males.

Deuteranopia: In males with deuteranopia, there are no working green cone cells. They tend to see reds as brownish-yellow and greens as beige. Deuteranopia is an X-linked disorder that affects about 1 percent of males.

Photoshop Testing Resource

Adobe Photoshop allows you to view protanopia and deuteranopia versions of your images. With the image to be tested open in Photoshop, select View → Proof Setup > Color Blindness – Protanopia-type to activate the Protanopia test. Select View → Proof Setup > Color Blindness – Deuteranopia-type to activate the Deuteranopia test.

Photoshop menu open to View → Proof Setup to test an image for color blindness

Make Use of This Excellent Online Tool

Take the Corblindor Coblis (Color Blind Simulator) for a spin to see how an individual with a color vision handicap will visually interpret your images.

As all the calculations are made on your local machine, no images are uploaded to the server. Therefore you can use images as big as you like, there are no restrictions. Be aware, there are some issues for the “Lens feature” on Edge and Internet Explorer. All others should support everything just fine.

Screenshot of Corblindor Coblis (Color Blind Simulator)

Additional Resource:

Read Alex O’Neal’s excellent article Beautiful, accessible traffic light colors

===

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

===

ONLINE TOOL: Export Microsoft Excel Data to Accessible Responsive HTML Tables

Posted on January 5, 2019January 5, 2019 by Mary Gillen

Excel - preparation of a balance sheet

Need to export Excel data to accessible HTML tables?

Make use of the Penn State College of Agricultural Sciences’ Convert Excel Tables to HTML tool.

Simply cut and paste data from Excel, add captions and summary text, then convert it all to accessible HTML table code.

===

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

Category: Mary Gillen

ACCESSIBLE FORMS: Calling All Radio Buttons

ACCESSIBLE HTML TABLES: Is Your Data Hidden from Screen Readers?

ACCESSIBLE CONTENT: Use a Time Stamp to Quickly Direct Users to a Section of Your Video

ACCESSIBLE CONTENT: Use the Inverted Pyramid Style for Quicker Info Access

TOOLS: Decaffeinate Accessibility Problems with NoCoffee Vision Simulator

WEB DEV ACCESSIBILITY TIP: Using Images in Bulleted Lists

WEB DEV ACCESSIBILITY TIP: Text Display Direction Switcheroo

WEB DEV ACCESSIBILITY TIP: Underline Those Text Links

TOOLS: Testing for Color Blindness Accessibility

ONLINE TOOL: Export Microsoft Excel Data to Accessible Responsive HTML Tables