HEADINGS: Two Accessibility Tips You May Not Know

HTML Heading 1 Tag on Blue Background

TIP #1: <h1> headings should not contain other <h1> 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>

===

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: Add Title Attributes to iframe Tags

Illustration of iframe

Using an iframe to hold content on a web page? Be aware that iframe elements must have title attributes in order to meet accessibility guidelines (WCAG 2 2.4.1 Level A and Section 508 1194.22 (i)).

Without a title attribute, some screen readers read out the iframe filename, which usually does not provide a meaningful description, and is meaningless to the individual who is listening to the content.

FAIL: <iframe src=”acme.html”></iframe>

SOLUTION: Add a title that describes the kind of content the user will discover.

PASS: <iframe title=”Go to the Acme Company FAQ Page” src=”acme.html”></iframe>

===

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: How to Handle ALT Text Acronyms

KEY acronym - KEEP EDUCATING YOURSELF. Educational concept with different color sticky notes and white chalk handwriting on a blackboard.

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 EM EYE TEE”).

===

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: Don’t Lock the Screen Orientation on Mobile Devices

Wheelchair on tablet,isolated on white background

WCAG 2.1 – 1.3.4 Orientation AA:
“Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.”

When it comes to accessibility, locking a mobile phone or tablet screen orientation doesn’t help folks who need to use a device with a fixed orientation.

EXAMPLE 1: Users with dexterity impairments. An individual who has a mounted device bolted to the arm of a wheelchair needs to be able to use the website page content in their fixed orientation.

EXAMPLE 2: Users with low-vision. These individuals need to be able to view content in the orientation that works best for them. Example: a person who needs to increase the text size by viewing content in landscape orientation.

===

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

===

HEADINGS: Two Accessibility Tips You May Not Know

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>

===

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

===

LINKS: Click Here…Click Here…and Click Here Again

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

===

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

===

Do-It-Yourself Video Captioning Tools

closed-captionAdding captions to videos definitely adds a bit of time on to a project, and is so important for accessibility. But remember that captions can also help other folks who may not be deaf or hard of hearing.

According to Penn State University’s Accessibility Website, non-deaf beneficiaries of captions include:

  • anyone with defective computer audio
  • students needing to learn new terminology or
  • those whose first language is not English
  • viewers in a noisy room or with a sleeping roommate

Free Video Captioning Tools

Here are some free tools that can help you get the video captioning job done:

Amara >> Free, open source, online captioning tool

YouTube Captioning

MovieCaptioner >> Free 14-day, fully-functional demo version available – closed captioning software for Mac and Windows (works offline)

Caption Format Converter Tool >> Free tool that converts SRT or SBV to various caption formats

Veed’s Caption Generator >> Free tool that works on Windows or Mac computers. No software download or plugin required.

===

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

===