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

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

===

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

===

TOOLS: Decaffeinate Accessibility Problems with NoCoffee Vision Simulator

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

===

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

===

WEB DEV ACCESSIBILITY TIP: Using Images in Bulleted Lists

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’);

===

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

===

WEB DEV ACCESSIBILITY TIP: Text Display Direction Switcheroo

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]

===

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

===

WEB DEV ACCESSIBILITY TIP: Underline Those Text Links

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

===

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

===

WEB DEV ACCESSIBILITY TIP: Use Action Phrases in ALT Tags

Download Now Button

Using image buttons rather than the standard form buttons on your website?

BEST PRACTICE: Add an ALT attribute value that describes the input action, which screen readers read aloud.

<input type=”image” alt=”Download the Report Now” src=”/images/download-button.png”>

===

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 CONTENT: A Better “Features and Benefits” Layout

Features and benefits grunge rubber stamp on white background, vector illustrationMake it easy for your Web visitors to easily comprehend your product’s features and benefits. If this information is placed in a long paragraph, prospects may not read it. This longer format can also makes it more difficult for folks who have learning disabilities to comprehend the content.

Check out these examples:

===

MORE DIFFICULT & TIME-CONSUMING TO READ

Features & Benefits

Acme HTML File Pro has a lot of functionality that makes editing HTML files more convenient for you. A lot of this does not sound very impressive or even works behind the scenes, but you will surely appreciate It when you need it. These are only a small number of Acme HTML File Pro’s many little features that make heavy code editing a breeze.

With Acme HTML File Pro you can easily open and edit many HTML files at the same time. There’s no limit. Arrange HTML files into multiple projects to open them at once and edit them together. Open all files in a folder (and its subfolders) into a project. Many of Acme HTML File Pro’s editing commands can work on all files in a given project at once. Quickly switch between files and projects by clicking on their tabs. Move back and forth with the handy “previous editing position” and ’’previously edited file” commands. Manage long lists of HTML files and large projects with the handy file manager sidebar which can rename, move, copy and delete files.

===

EASIER TO COMPREHEND/CAN BE READ QUICKLY

Features and Benefits

Acme HTML File Pro saves you time.

It’s easy to use.
Makes heavy code editing a breeze.

It’s efficient.
Open and edit unlimited HTML files at the same time.

It “remembers.”
Move back and forth with the handy “previous editing position” and “previously edited file” commands.

It’s a file manager.
Manage long lists of HTML files and large projects with the handy file manager sidebar which can rename, move, copy and delete files.

===

SEE BOTH, SIDE BY SIDE

Features and Benefits - Long Copy vs Short Copy

===

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: Click Here…Click Here…and Click Here Again

Four Color Buttons each with the message Click HereWhen you use generic text like “Click Here” or “Read More” as instructions in link text, it is confusing because it says nothing about the content that will appear once the link is clicked.

Remember: link targets are read out loud by screen readers.

Another thing to note: Individuals using screen readers tab from one link to the next.

Tabbing between links labeled “click here” sounds like “click here, tab, click here, tab, click here”.

REMEDIATION: Change the link text so it is an explanation of the target content. This will make more sense when read by a screen reader.

EXAMPLE:

Original Instruction Text: Click here
Revised Instruction Text: Click here to read the latest news

===

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: Don’t Forget to Use Explicit Form Field Labels

Sample HTML form fields with labels

Did you know that most screen readers don’t recognize placeholder values in form fields?

Your website visitors who use screen readers navigate through your forms using the Tab key. The <label> elements are used by screen readers to announce/identify each form control and the type of info to be collected. Placeholder text is bypassed by the screen reader. Plus placeholders are usually more difficult to read by sighted visitors due to color contrast issues.

Example:

White email <label> vs. dark grey “enter your email address” placeholder:

Email form field placeholder text

Use Explicit Form Control Labels

An “explicit” label is created using the HTML label element with a “for” attribute that has the same value as the matching input “id” attribute.

Here is an example:

<label for=”firstname”>First Name: </label>
<input type=”text” name=”first_name” id=firstname”>

The label “for” and the input “id” attributes can be used with any of the form fields: text inputs, text area, select menus, check boxes and radio buttons.

IMPORTANT NOTE: The “id” attribute for each form element in a document must be unique.

[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

===

FORMS: Accessible Select Menu – Get the Code

Select box - website elements - web design UI

Select menus with more than 11 options should be coded with option groups and labels in order to be accessible.

Here’s the code:

<form>
<label for=”favfood”>Choose your favorite food</label>
<select name=”favfood”>
<optgroup label=”Fruit”>
<option value=”1″>Apples</option>
<option value=”2″>Oranges</option>
<option value=”3″>Pears</option>
<option value=”4″>Bananas</option>
</optgroup>
<optgroup label=”Bread”>
<option value=”5″>Sourdough</option>
<option value=”6″>Wheat</option>
<option value=”7″>Rye</option>
<option value=”8″>White</option>
</optgroup>
<optgroup label=”Entree”>
<option value=”9″>Beef</option>
<option value=”10″>Chicken</option>
<option value=”11″>Fish</option>
</optgroup>
<optgroup label=”Cheese”>
<option value=”12″>American</option>
<option value=”13″>Swiss</option>
</optgroup>
</select>
</form>

===

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

===