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

===

FYI: Accessibility Problem with Popup Windows

Vintage Jack-in-the-box toy isolated on a white background

Do you have a survey popup window on your home page that automatically opens?

WCAG 2.1 bans all popup windows without explicit alert beforehand (On Focus 3.2.1 A). New windows take the focus away from what the user is reading or doing. This is fine when the user has interacted with a piece of user interface and expects to get a new window, such as an options dialogue. The failure comes when pop-ups appear unexpectedly.

===

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

===

17 Website Adjustments You Can Make Today for Better Accessibility

Hand writing the word Accessibility

Here are 17 adjustments you can make to your website now to make it more accessible:

Images

1. IMG ALT text must not be the same as the image file name.

The ALT text should summarize the purpose of an image. The source filename of the image should not be included because generally it is just not useful to the visually-impaired user.

Black Labrador Retriever puppy named Gracie

FAIL: <img src=”gracie.jpg” alt=”gracie.jpg” />

SOLUTION: Change the ALT text to a description of the image.

PASS: <img src=”gracie.jpg” alt=”Black Labrador Retriever puppy named Gracie” />

===

2. IMG ALT text with acronyms can cause problems when read by screenreaders.

FAIL: <img src=”mit-it-logo.jpg” alt=”ITS at MIT” />
(read by a screen reader as “It’s at Mit”).

SOLUTION: Include spaces in between acronym letters in the IMG ALT attribute

PASS: <img src=”mit-it-logo.jpg” alt=”I T S at M I T” />
(read by a screen reader as “ITS at MIT”).

Links

3. Website 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 stylesheet to activate all link underlines throughout your website:

a {text-decoration:underline;}

CSS: Here is the basic declaration to add to your CSS stylesheet 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;}

===

4. Links that use general text like can cause problems for folks using screen readers.

FAIL: <a href=”instructions.html”>Click here</a>

When a screen reader comes across a link that reads as “click here” or “learn more,” the visually-impaired person listening to the content may not have sufficient information to determine if the link is worth following or not.

SOLUTION: Use an “action” phrase that alerts the user what to expect if he/she follows the link.

<a href=”instructions.html”>How to use the new accessible web tool</a>.

===

5. Provide a Skip Navigation link that allows keyboard and screen reader users to skip over groups of links.

FAIL: The inability to skip repetitive links can be a problem for those with mobility disabilities who use the keyboard to navigate instead of a mouse.

SOLUTION: Add a simple hyperlink at the very beginning of your HTML page:

<a class=”skiptomain” href=”#main-content”>Skip to main content</a>

To prevent sighted users from seeing the Skip to main content link at the top of the page, add this declaration to your CSS file:

.skiptomain {
position: absolute;
top: -1000px;
left: -1000px;
height: 1px;
width: 1px;
text-align: left;
overflow: hidden;
}
a.skiptomain:active,
a.skiptomain:focus,
a.skiptomain:hover {
left: 0;
top: 0;
width: auto;
height: auto;
overflow: visible;
}

This will position the Skip to main content link 1000px off the screen for sighted users, without hiding it from screen readers. When you hit the tab key the first time, the link will receive focus and be visible at the top left corner of the page.

Color

6. Don’t Use Color As Part of Your Instructional Content

Image of a red button and a green button

FAIL: If you instruct folks to click on the red button, you may be confusing the over 108 million Web users who are color blind.

One color blindness condition is called protanopia. People with protanopia lack the long-wavelength sensitive retinal cones that are required to distinguish between colors in the green-yellow-red section of the spectrum. It is a more common form of color blindness, occurring in between 1% and 5% of males (varying by race) and in approximately 0.1% of females.

Here’s how individuals with protanopia see the red & green buttons:

protanopia-color-example

SOLUTION: Change the instruction so it does not make use of color.

PASS:

Press the button on the left for more information

Learn about the different types of color blindness affecting some users.

===

7. Ensure that foreground and background colors have enough contrast.

Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.

FAIL:

color-contrast

SOLUTION: Use the WebAIM Color Contrast Checker to ensure the colors you are using are accessible.

PASS:
The contrast ratio should be 3.0 or more for 18 point text, or larger
The contrast ratio should be 3.0 or more for 14 point bold text, or larger
The contrast ratio should be 4.5 or more for all other text

CSS

8. Justified text causes “rivers” that make text difficult for dyslexics to read

FAIL:

River Effect in Justified Text

IMAGE SOURCE

SOLUTION: Align all text to the left

===

9. Use relative rather than absolute units in CSS property values.

Absolute units are CM, MM, IN, PC and PT. When used with fonts PX is also considered an absolute unit, because it isn’t relative the user’s preferred font size. Low-vision users, and a lot of people over 50, increase the browser default font size to make text easier to read. Absolute units ignore this user choice.

FAIL:
p {font-size: 16px;}

SOLUTION:
Relative units like EM and percentages re-size according to the screen size and/or user’s preferred font size, and work on a large range of devices.

PASS:
p {font-size: 1.000em;}

Convert pixels to EMs with online converter at PXtoEM.com

===

10. Use semantic markup like STRONG instead of using the CSS font-weight property.

FAIL:
<span style=”font-weight: bold;”>This is text</span>

SOLUTION: Use the STRONG element instead of the SPAN element for bold text.

PASS:
<strong>This is text</strong>

===

11. Use italics sparingly.

FAIL: People who are dyslexic have a difficult time reading italicized characters.

SOLUTION: Use the STRONG element for emphasis instead .

PASS:
<strong>This is text</strong>

===

Data Tables

12. Identify row and column headers in data tables using TH elements.
Data tables allow screen reader users to understand column and row relationships.

FAIL: Without TH, screen readers apply heuristics to decide whether a table is a layout table or data table. These heuristics vary greatly between screen readers, and are affected by browser being used, window size, and font size (so the outcome is very unpredictable without TH).

SOLUTION: If a data table has headers marked up using TD, then change these to TH. If a data table has no headers, add TH elements describing each row and/or column. What does scope attribute do? This attribute specifies the set of data cells for which the current header cell provides header information.

PASS:

employee-table

<table class=” alignleft”>
<tbody>
<tr>
<th scope=”col”>Employee Name</th>
<th scope=”col”>Employee Code</th>
<th scope=”col”>Project Code</th>
<th scope=”col”>Employee Designation</th>
</tr>
<tr>
<td>Mary Smith</td>
<td>31454</td>
<td>453781</td>
<td>Web Developer</td>
</tr>
<tr>
<td>Bob Jones</td>
<td>76901</td>
<td>454489</td>
<td>Copywriter</td>
</tr>
</tbody>
</table>

===

Lists

13. Mark up lists and list items properly.

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

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

PASS:

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

===

Forms

14. Avoid using select menus that allow the user to choose multiple items.

FAIL: Not all browsers provide intuitive keyboard navigation for multiple select menus.

SOLUTION: Long select menus with more than 11 options should be coded with option groups and labels.

PASS:

<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>
</select>
<select name=”favfood”><optgroup label=”Bread”>
<option value=”5″>Sourdough</option>
<option value=”6″>Wheat</option>
<option value=”7″>Rye</option>
<option value=”8″>White</option></optgroup>
</select>
<select name=”favfood”><optgroup label=”Entree”>
<option value=”9″>Beef</option>
<option value=”10″>Chicken</option>
<option value=”11″>Fish</option></optgroup>
</select>
<select name=”favfood”><optgroup label=”Cheese”>
<option value=”12″>American</option>
<option value=”13″>Swiss</option></optgroup>
</select>

===

15. Don’t use a select list if it contains less than 5 options

SOLUTION: Select lists with less than 5 options should be coded as radio buttons.

PASS:

Radio button choices for a purchase

<fieldset>
<legend>Choose a purchase method:</legend>
<input id=”creditcard” name=”purchase” type=”radio” value=”creditcard” />
<label for=”creditcard”>Credit Card</label>
<input id=”check” name=”purchase” type=”radio” value=”check” />
<label for=”check”>Check</label>
<input id=”cash” name=”purchase” type=”radio” value=”cash” />
<label for=”cash”>Cash</label>
</fieldset>

===

Content Design

16. Long paragraphs of text are difficult for some users with disabilities to read and comprehend

SOLUTION: Keep your sentence length down to an average of 15 to 20 words. Don’t start a new sentence at the end of a line, as that makes it more difficult to follow.

===

Keyboard-only Access

17. Test to be sure all your Web content is accessible using only the keyboard.

FAIL: Users with visual disabilities and limited movement cannot use a mouse to navigate a Web page, as this requires hand and eye coordination.

SOLUTION: Be sure your website is coded so that users can navigate all content on a page via keyboard “tabbing”.

===

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: 59 tests covering 15 guidelines.

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===

WEB DEV ACCESSIBILITY TIP: Use Relative Rather Than Absolute Units in CSS Property Values

abstract pixel art design wallpaper background backdrop

Low-vision users, and a lot of people over 50, need to increase the browser default font size to make text easier to read.

If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text.

Relative units like EM and percentages “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

Using relative units helps satisfy the WCAG 2.1 Guideline 1.4.4 Resize text Level AA.

Need to convert pixels to EMs?

Use this handy online tool, developed by Brian Cray: http://pxtoem.com

===

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

===

Dyslexia Style Guide 2018: Creating Dyslexia Friendly Content

''Dyslexia'' word with wooden letters on dark background

Download the British Dyslexia Association’s Dyslexia Style Guide 2018.

The Style Guide “provides 32 principles that can help ensure that written material considers the difficulties experienced by some dyslexic people and allows for the use of text to speech to facilitate ease of reading.

Note: Adopting best practice for dyslexic readers has the advantage of making all written communication easier on the eye for everyone.

When making changes consider all the ways that you use written communications, such as emails, presentations, web pages and printed materials. Consider these principles in combination with other accessibility guidance such as the Web Accessibility Content Guidelines (WCAG).”

Download the Guide now:

Dyslexia Style Guide 2018 (PDF)
Dyslexia Style Guide 2018 (DOCX)

===

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 EQUATIONS: Use MathML Rather Than Images

Mathematics background with formulas

In order to create semantically accurate math equations that are accessible to all, use MathML, the markup language that provides semantic understanding and proper syntax to assistive technologies like screen readers.

Why Not Use an Image With Alt Text?

According to info included in Princeton University’s MathML for Accessible Math Markup Tutorial, there is a good reason not to use images to display math equations:

“Whereas an alternative text description on an image of a math equation is better than nothing, it still a violation of Success Criterion 1.4.5 Images of Text. Presenting an equation as an image denies the ability of the non-sighted user to derive the understanding through semantics in an equivalent fashion to a sighted user.”

MathML Tutorials

W3C MathML Guide
Mozilla Guide to MathML
Princeton University’s MathML for Accessible Math Markup Tutorial
Daniel Scully’s Beginner’s Guide to MathML
The Connexions Guide to MathML.

===

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 WEBSITE DESIGN TIP: Always Include a Skip Navigation Link

FAIL: The inability to skip repetitive links (such as a navigation menu) can be a problem for those with mobility disabilities who use the keyboard to navigate instead of a mouse.

SOLUTION: Add a simple hyperlink at the very beginning of your HTML page that allows keyboard users to skip to the main section of page content:

Accessible Web Design Tip: Add a Skip to Main Content Link

<a class=”skiptomain” href=”#main-content”>To Skip to Main Content – Press Enter</a>

To prevent sighted users from seeing the Skip to Main Content – Press Enter link at the top of the page, add these declarations to your CSS file:

.skiptomain {
position: absolute;
top: -1000px;
left: -1000px;
height: 1px;
width: 1px;
text-align: left;
overflow: hidden;
}
a.skiptomain:active,
a.skiptomain:focus,
a.skiptomain:hover {
left: 0;
top: 0;
width: auto;
height: auto;
overflow: visible;
}

This will position the Skip to main content link 1000px off the screen for sighted users, without hiding it from screen readers. When keyboard users hit the tab key the first time, the link will receive focus and be visible at the top left corner of the page.

===

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: 118 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 55 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===

META TAGS: How Not to Use Them When Coding for Compliance

Hello I Am Waiting words on a nametag sticker to illustrate being patient, late, tardy or delayed for a trip, appointment, meeting or event

FAIL: Do not use the META tag to automatically refresh a page as this can be disorientating for users.

PASS: If the time interval is too short, people who are blind will not have enough time to make their screen readers read the page before the page refreshes unexpectedly and causes the screen reader to begin reading at the top.

Section 508 (2000) 1194.22 (p)
WCAG 2.0 F58 (Success Criteria: 2.2.1 level A)
Section 508 (2017) F58 (Success Criteria: 2.2.1 level A)

===

FAIL: Do not use META REFRESH with a non-zero timeout to automatically refresh the page, since it causes an unexpected interruption for screen reader users.

PASS: If you cannot avoid using META REFRESH, change the refresh time to zero, since the redirect is instant and will not be perceived as a change of context.

Section 508 (2000) 1194.22 (p)
WCAG 1.0 7.5
WCAG 2.0 F40 (Success Criteria: 2.2.1 level A, 2.2.4 level AAA, 3.2.5 level AAA)
Section 508 (2017) F40 (Success Criteria: 2.2.1 level A, 2.2.4 level AAA, 3.2.5 level AAA)

===

FAIL: Do not use the Refresh HTTP header to automatically refresh a page as this can be disorientating for users.

People who are blind will not have enough time to make their screen readers read the page before the page refreshes unexpectedly and causes the screen reader to begin reading at the top.

Section 508 (2000) 1194.22 (p)
WCAG 2.0 F58 (Success Criteria: 2.2.1 level A)
Section 508 (2017) F58 (Success Criteria: 2.2.1 level A)

===

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: 118 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 55 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===

32 Ways to Test PowerPoint Presentations for Compliance

Powerpoint Presentation Background

Making content accessible to people with disabilities online begins with making all types of files compliant from the start. Do you have links to PowerPoint presentations on your website? If so, be sure these documents are compliant.

Here are 32 items to test:

1. Does the document file name not contain spaces and/or special characters?

2. Is the document file name concise, generally limited to 20–30 characters, and does it make the contents of the file clear?

3. Have the Document Properties for Title, Author, Subject (AKA Description), Keywords, Language, and Copyright Status been applied?

4. Does the document utilize recommended fonts (i.e., Times New Roman, Verdana, Arial, Tahoma, Helvetica, or Calibri)?

5. Have track changes been accepted or rejected and turned off?

6. Have comments been removed and formatting marks been turned off?

7. Does the document refrain from using flashing/flickering text and/or animated text?

8. Is the document free of background images or watermarks?

9. Do all images, grouped images, and non-text elements that convey information have meaningful alternative-text descriptions?

10. Do complex images (i.e., charts and graphs) have descriptive text near the image (perhaps as a caption)?

11. Do all URLs contain descriptive hyperlinks (i.e., avoid generic phrases like “Click here” and, instead, use phrases that let users know about the content of the linked page prior to selecting it

12. Are all URLs linked to correct Web destinations?

13. Are e-mail links accessible?

14. Has a separate accessible version of the document been provided when there is no other way to make the content accessible?

15. If there are tables, are blank cells avoided?

16. Is all of the text easy to read in comparison to the background of the document (i.e., has a color-contrast ratio of 4.5:1)?

17. Can all slide text be viewed in the Outline View?

18. Do all of the slides avoid using flickering/flashing text and/or animated text?

19. Do all of the slides avoid using text boxes or graphics with text within them?

20. Is the list style being used as opposed to manually typed characters (e.g. Hyphens, numbers, or graphics)?

21. If multimedia is present, did the multimedia pass the Multimedia Checklist?

22. Is the presentation free of SmartArt?

23. Are multiple associated images on the same page (e.g., boxes in an organizational chart) grouped as one object?

24. Have all multilayered objects been flattened into one image and does that image use one alternative text description for the image?

25. Do images/graphics appear crisp and legible?

26. If the document (or a section of the document) has a tabular appearance, is the tabular structure made using the table option (as opposed to manual tabs and/or spaces)?

27. Do all tables have a logical reading order from left to right, top to bottom?

28. Do data tables have the entire first row designated as a ‘Header Row’ in table properties?

29. Is the table free of merged cells?

30. Are all tables described and labeled (where appropriate)? Note: In some cases naming/numbering of tables may not be appropriate. For example, a small data table in a presentation may not need a reference.

31. In table properties, is “Allow row to break across pages” unchecked?

32. Has the document been reviewed in Print Preview for a final visual check?

[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: 118 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 55 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===

8 Ways to Make Excel Worksheets Compliant

Microsift Excel Logo

Making content accessible to people with disabilities online begins with making all types of files compliant from the start. Do you have links to Excel worksheets or spreadsheets on your website? If so, be sure your these documents are compliant.

To get you started, here are eight items to test:

FAIL: Excel worksheet images, charts and graphics are published without ALT text. PASS: To add alternative text (Alt text) to an image, chart or graphic: Right Click (Shift+F10) on the image, click Format, choose Alt Text. Type a descriptive name that describes the content of the image, chart or graphic.

FAIL: Excel file name contains spaces.
PASS: Use dashes (-) to separate words in your Excel file name. Keep the total number of characters in the file name between 20-30.

FAIL: Excel file info is not complete.
PASS: Fill in the Document Properties for Title, Author, Subject (AKA Description), Keywords, Language, and Copyright Status.

FAIL: Document contains background images and watermarks.
PASS: Be sure the document is free of background images or watermarks.

FAIL: Tables contain blank spaces.
PASS: If there are tables, avoid using blank cells.

FAIL: If there are merged or split cells contained in a data table, these will not be correctly interpreted by assistive technology.
PASS: Do not use merged or split cells.

FAIL: Track changes have not been accepted or rejected and turned off.
PASS: Turn track changes off before publishing your Excel document to the Web.

FAIL: Sheet tabs do not have unique names.
PASS: Sheet names in an Excel file should be unique and provide information about what can be found on the worksheet.
To rename a sheet: Right-click (Shift+F10) the sheet tab, and then click Rename. Type a brief, unique name that is descriptive of the sheet contents.

===

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: 118 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 55 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===