Blog

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 can test your website to determine if it meets accessibility standards:

WCAG 2.0: 110 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 47 accessibility checkpoints

Find out more about Mary Gillen's Accessibility Testing and Remediation Services

===

Mathematics background with formulas

In order to create semantically accurate math equations that are accessible to all, check out 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 can test your website to determine if it meets accessibility standards:

WCAG 2.0: 110 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 47 accessibility checkpoints

Find out more about Mary Gillen's Accessibility Testing and Remediation Services

===

An HTML H1 Tag against a purple background

TIP #1: Headings should not contain other headings.

EXAMPLE CODE:

<h1>Sample Heading Text<h1>Subtext</h1></h1>

REMEDIATION:

Remove the nested headings, or replace them with SPAN elements.

<h1>Sample Heading Text<span>Subtext</span></h1>

====

TIP #2: Use HTML headings instead of applying CSS heading styles to non-headings.

EXAMPLE CODE:

<div style="font-size:1.5em; color:#cc0000;">Sample Heading Text</div>

REMEDIATION:

Change the element to an appropriate heading element (H1, H2, H3, etc) and apply CSS styles if necessary.

<h1 style="color:#cc0000;">Sample Heading Text</h1>

To be accessible to screen readers, figures and images in PDF documents should not have blank ALT text, except for decorative images which should be marked as artifacts.

Each image should have an ALT attribute describing the picture, which screen readers can read aloud.

EXAMPLE:

Still life with colorful tulips

ALT="Still life photo of colorful tulips in a glass vase"

ADDITIONAL NOTE: When an image contains words that are important to understanding the content, the text alternative should include those words. This will allow the alternative to accurately represent the image.

Read more about PDF Techniques for WCAG: Text Alternatives.

Blue html Code BackgroundFACT: Web pages that contain duplicate IDs can cause problems in screen readers.

If two or more elements on the same page share the same ID, this can cause problems in screen readers which use IDs for labeling controls and table headings.

It can also cause problems in JavaScript methods like getElementById and querySelector, which behave inconsistently when duplicate IDs are present.

Change the IDs so all are unique for each element.

Click Here Buttons. 4 icons shownWhen 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: screen readers often 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

scary Jack-in-the-box toy isolated on a white backgroundDo you have a survey popup on your home page that automatically opens?

WCAG 2.0 bans all popup windows without explicit alert beforehand (WCAG 2.0 through Level AAA - 3.2.1 On Focus). 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.

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

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

FAIL: Word document contains a graphic without ALT text.
PASS: Use the 'Format Picture' command in Word to add ALT text

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

FAIL: Word 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: Color is used as a way to instruct. Colorblind visitors may not able to follow the instructions when reading your Word document.
PASS: Use an instruction description that does not depend on color.

FAIL: Table data created using manual tabs and/or spaces.
PASS: Use the Insert Table option to create tables.

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

Dyslexia a general term for disorders that involve difficulty in learning to read or interpret words, letters, and other symbols, but that do not affect general intelligence. It is the most common cause of reading, writing, and spelling difficulties.

Of people with reading difficulties, 70-80% are likely to have some form of dyslexia. It is estimated that between 5-10% of the population has dyslexia, but this number can also be as high as 17%.

Here are some CSS tips to consider when designing web content for dyslexics.

Beware Italics
Italicized characters can be difficult for dyslexics to read.

Column Widths
Use narrow column widths (60 to 80 characters). Tracking lines of unbroken text across a page can be difficult.

No Justification
Never use justified text. It causes "rivers" that make text difficult for dyslexics to read.

River Effect in Justified Text

Use Sans-serif Fonts
Serif fonts (like Times Roman) have "feet" at the end of the letter strokes. This can be a nightmare for dyslexics to read because the letters look like they are all connected. Use sans-serif fonts.

See the difference between Serif vs Sans-serif typefaces

===

Resource:  OpenDyslexic

OpenDyslexic is a new open source font created to increase readability for readers with dyslexia. The typeface includes regular, bold, italic, and bold-italic styles. It is being updated continually and improved based on input from dyslexic users. OpenDyslexic is free for Commercial and Personal use.
Download: http://opendyslexic.org/

===

Read More Accessible Website Design Advice: Accessible Best Practice: Don’t Use Color As Part of Your Instructional Content

===

Website Accessibility Testing Service: Mary Gillen can test your website to determine if it meets accessibility standards:

WCAG 2.0: 110 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 47 accessibility checkpoints

You will receive a full report and checklists of items on your website that need to be fixed in order to be compliant.

Mary is also available to implement the changes on your website so your organization will be compliant.

Contact Mary today at 508-768-8418 or via email at mary@accessiblewebsiteservices.com to schedule your test.