Is Your Website Accessible?

If not, practical ways to make it so.

Do fonts matter?
Will color and contrast help?
Should you have tables in a web standards world?
Is page language important?
How's your search form?
What about your other forms?
Can you listen to a web page?

Hopefully I can help with these questions and more.

John F Croston III

Overview

Web Content Accessibility Guidelines (WCAG) 2.0
Valid and Semantic HTML and CSS
Page Language
Skip Navigation
Text and Fonts
Color and Contrast
a:hover, a:focus, and a:active (older IE)
click here, read more, etc.
Headings (h1, h2, h3, etc.)
Tables
Forms
Search (use skip nav anchor)
ARIA Landmark Roles
Screen Readers

Washington, DC

The Greatest Show on Earth - Ringling Brothers and Barnum and Bailey Circus trailer

Web Content Accessibility Guidelines (WCAG) 2.0

Valid and Semantic HTML and CSS

4.1.1 Parsing: In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features. (Level A)
4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)

Page Language

3.1.1 Language of Page: The default human language of each Web page can be programmatically determined. (Level A)

WCAG 2.0 - cont.

Skip Navigation

2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)

Text and Fonts

1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)

Color and Contrast

1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, with exceptions. (Level AA)

a:hover, a:focus, and :active (older IE)

2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

WCAG 2.0 - cont.

“click here”, “read more”, etc.

2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A)
2.4.9 Link Purpose (Link Only): A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general. (Level AAA)

Headings (h1, h2, h3, etc.)

2.4.6 Headings and Labels: Headings and labels describe topic or purpose. (Level AA)

Tables

1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)

WCAG 2.0 - cont.

Forms

1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)

Input elements must be explicitly labeled

1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)

Search (use skip nav anchor)

4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)

M. E. Swing Co. - Coffee Roasters

Cheese Danish and cup of hot chocolate at M. E. Swing Coffee Roasters

Valid Semantic HTML and CSS - 4.1.1 and 4.1.2

Validators

When running accessibility tests make sure to use more than one validator, since not all errors or issues will be found by all of them.

HTML and XHTML - W3C Markup Validator
CSS - W3C CSS Validator
Links - W3C Link Checker
RSS - W3C Feed Validator for RSS and Atom

Usability and Accessibility should come before validation.

Accessibility Checkers

Free Checkers

WAVE WebAIM.org
WebAIM WAVE Toolbar's
- Firefox WAVE Toolbar by WebAIM
- Chrome WAVE Toolbar by WebAIM
ANDI (Accessible Name & Description Inspector)

aXe by Deque - Chrome, Firefox, and Edge extensions. Look for them farther down the page.
Chrome Lighthouse - part of DEV Tools in Chrome
Tenon Tools
- Tenon Home page
- Tenon Code and plug-ins

Accessibility Checkers - Cont.

Free Checkers

Functional Accessibility Evaluator - (University of Illinois at Urbana-Champaign) Please sign up for a free account you get so much more.
No Coffee - Chrome extension
Paul J. Adam Bookmarklets

Page Language - 3.1.1

Explanation

Each page needs to have the language set so Assistive technologies know which voice and tone the screen reader should read the content. If your screen reader is set to Spanish and the page language is in English without a language set the text will be read quickly in a Spanish accent.

You also need to set the text that is in a different language than the main page language. An example would be an English page with a quote in French.

Example Code

The pages language attribute needs to be part of the HTML tag.

Additional Resources

For more details read Adrian Roselli's article "On Use of the Lang Attribute".

Blue Moon Cafe in Baltimore, MD

Skip Nav - 2.4.1

WebAIM article on how to implement skip navigation.

Reasons for skip nav:

Main content is not usually the first thing on the page
People using screen readers are forced to listen to a long list of navigation links, sub-lists of links, and other elements before arriving at the main content.
Keyboard users are forced to tab through all of the top links in order to reach the main content.

<body>
<div class="hide"> <a href="#maincontent">Skip to Main Content</a> </div>
<ul>
<li>First Link</li>
…
</ul>
<h2 id="maincontent" tabindex="-1">Heading - H2</h2>
<p>This is the first paragraph</p>

Skip Nav - cont.

CSS

.hide a, .hide a:hover, .hide a:visited {
display: block;
position: absolute;
left:-10000px;
top:auto;
width: 100%;
height: 3em;
font-weight: bold;
text-align: center;
}
.hide a:active, .hide a:focus {
background: #BEFF9E;
position: static;
width: auto;
height: auto;
padding: 1em;
margin: auto;
}

Gourdoughs Speciality Doughnuts in Austin, TX

Heavenly Hash doughnut with marshmallow and chocalate fudge icing topped with fudge brownie from Gourdoughs Speciality Doughnuts

Text and Font Size - 1.4.4

The text and font size on a website can make it difficult for visual people. If the text is too small, in poor color contrast and all jammed together, it makes sites inaccessible.

The more vertical rhythm and letter spacing a page has the easier it is to read.

Items to think about:

Size
Color
Leading - space between lines of text
Kerning - character spacing
Measure - number of characters to a line should be between two or three alphabets (52 - 78 characters)

Text and Font Size - cont.

Rich Rutter reviewed his logs and noticed that 95% of the people visiting his website had their font size set at the default of “MEDIUM”, which is 16px.

body { font-size: 75%;} - 12px
h1 { font-size: 3em;} - 36px
h2 { font-size: 2em;} - 24px
…
h6 { font-size: 1.125em;} - 14px
p, a, li, … { font-size: 1em;} - 12px
… { line-height: 1.5em; letter-spacing: .125em;} - line height - 18px

Web Typography Articles

Wedding Reception outside Philly

Color - 1.4.3

Color Contrast

W3C Checkpoint 2.2 - Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.

Two colors provide good color visibility if the brightness difference and the color difference between the two colors are greater than a set range.

The color contrast ratio needs to be 4.5:1 or higher to pass.

Tools

Color Contrast Tool - Jonathan Snook
The Paciello Group Color Contrast Analyzer
Color Oracle

Color - cont.

Types of Color Blindness

Examples:

Deuteranope (a form of red/green color deficit)
Protanope (another form of red/green color deficit)
Tritanope (a blue/yellow deficit- very rare)

Pho Viet on 14th St. NW

Bowl of spicey lemongrass Pho with thin sliced rib eye steeak and meatballs

a:hover, a:focus, and a:active (older IE) - 2.4.7

Where ever you have “hover” (a:hover) you should also have “focus” (a:focus), along with “active” for older IE browsers.

CSS Example

#nav a {
background: #ACC7FF;
text-decoration: none;
}

#nav a:hover, #nav a:focus, #nav a:active {
background: #BEFF9E;
text-decoration: underline;
}

An example of a:“hover”, a:“focus”, and a:“active” in action.

Toki Underground on H St. NE

Curry Ramen with tempura chicken, double noodles, and Asian veggies from Toki Underground H St. NE

“Click here”, “Read more”, etc. - 2.4.4 and 2.4.9

Don't do it!

Individuals using screen readers can look at a list of all the links on a page out of context. So if they keep hearing “click here” over and over again it makes no sense to them.

Another good reason is that your not getting added Google juice as they say by making the link text relevant to the link.

Poor example

Click here to review the Acme TNT company's annual report.

Good example

Please review the Acme TNT companies annual report.

On the Bay Seafood in Ocean City, MD

Crabs with wedge of lemon from Ocean City, MD

Headings - 2.4.6

Use the following heading levels - H1, H2, H3, H4, H5, and H6.

This will allow people using screen readers to skip around to the important parts of the page using key combinations.

Book Title - h1

Chapter 1 - h2
Chapter 2 - h2
- Title 2.1 - h3
- Title 2.2 - h3
Chapter 3 - h2

Impala on H St. NE - Opening Soon

Steak and pork tacos from Impala on H St. NE

Tables - 1.3.1

<caption>List of Libraries Fiscal Record Information</caption>

<tr>
<th scope="col">Library Name</th>
<th scope="col">Fiscal Year</th>
<th scope="col">Quarter</th>
</tr>

<tr>
<th scope="row">Anacostia Interim Library</th>
<td>2007</td>
<td>4</td>
</tr>

There are other ways to use “TH” in Roger Johansson's article about creating accessible tables.

Tables - cont.

<caption>List of Libraries Fiscal Record Information</caption>

<tr>
<th id="library-name">Library Name</th>
<th id="fiscal-year">Fiscal Year</th>
<th id="quarter">Quarter</th>
</tr>

<tr>
<th id="library" headers="library-name">Anacostia Interim Library</th>
<td headers="fiscal-year library-name">2007</td>
<td headers="quarter fiscal-year library-name">4</td>
</tr>

Here is the table example for the code above and another table example that is easier to read.

Taqueria Mexicana at Shenandoah Flea Market

What makes a form accessible and useable? - 1.3.1

Proper thought about the function you need to perform.
Good mark up:
- Fieldset(s)
- Legend(s)
- Labels on input fields
- Good examples of information you want in the field, meaning
Use the right wording for questions needing to be answered
Keep instructions to only enough information to explain what you want
Don't use marketing speak or industry jargon

Franklin's BBQ in Austin, Texas

FIELDSET and LEGEND

FIELDSET - element used to group related fields

<fieldset></fieldset>

LEGEND - element used to provide a caption for a FIELDSET

<legend>Address Information</legend>

Address Information

Address Line 1

Address Line 2

City

State

Postal Code

Thurman's Cafe in Columbus, OH

LABEL - 1.3.1

Where should labels be? Top, Left justified, or Right justified.

Luke W. article about where labels should go and an Eye Scan article that shows data and examples of forms.

Older IE's does not understand the implicit association of a label and a form field

LABEL - cont.

“LABEL” associates content with a form control, either implicit association by wrapping the “LABEL” with form control and the text explicit association

<label>Address Line 1 <input name="address1"></label>

LABELs “FOR” attribute is an “ID” reference to the form control

<label for="address1">Address Line 1</label>
<input name="address1" id="address1" />

Example

Address Line 1

Schmidt's Sausage Haus in Columbus, OH

Radio Buttons and Check Boxes

Hide my information.

Yes
No

<fieldset class="form_choices">
<legend>Hide my information.</legend>
<label for="visible_1" >Yes</label>
<input type="radio" id="visible_1" value="Yes" checked="checked" />
<label for="visible_2" >No</label>
<input type="radio" id="visible_2" value="No" />
</fieldset>

By applying a bit of CSS in my example form you can make this look like it's just a question and your choices.

San Diego farmer's market

SEARCH - 4.1.2

Need label on search box for screen readers to know what they are looking at.

Add an HREF anchor to the search results page and the form to skip all the navigation etc.

<div class="SEARCH">
<form name="Skills_Search" action="searchResults.html#MAINCONTENT">
<label for="search2">Search</label>
<input name="search2" id="search2" />
<input type="submit" value="Search" />
</form>
</div>
<h2 id="MAINCONTENT" tabindex="-1">Search Results</h2>
<p>Search results go here.</p>

To hide the word “Search” just add to the CSS class used for the skip navigation.

Please review the search box and search results example.

Roadside stand Front Royal, VA

REQUIRED Fields

All FORMs have at least one required field. You need to have your page look good and still be accessible to screen readers.

To do that we just have to add a few things to the label and a bit of CSS.

<li>
<label for="first_name"><em aria-hidden="true">Required</em>First Name</label>
<input name="first_name" id="first_name" aria-required="true" size="25" maxlength="25" /><span class="req"> *</span>
</li>

CSS

.hide_info a, .hide_info a:hover, .hide_info a:visited, .search label, label em {
position: absolute;
…
overflow: hidden;
}

Please review the required field example.

Chaps Pit Beef in Baltimore, MD

ARIA - Landmark Roles

Type of Landmark Roles

application
banner - only one per page
complementary
contentinfo
form
main - only one per page
navigation - add aria-label to notify user which navigation
they are located at. Ex. aria-label="Main Menu"
search

ARIA - Landmark Roles - cont.

I am the main content.

<ul role="navigation" aria-label="Main Menu">
<li>Products</li>
</ul>

</div>

<p>I am the main content.</p>

</div>

<label for="search">Search</label>
<input id="search" />
<input type="button" value="Search" />

</form>

Go Fish in Rehobooth Beach, DE

SIZE and MAXLENGTH

Use “SIZE” to show a given amount of characters.
Use “MAXLENGTH” to only allow X number of characters.
This will only allow people to type the same number of characters in the database field.

Date of Birth
Birth City

Usually the MAXLENGTH field is a lot larger than the SIZE.

You could use CSS to replace the SIZE attribute.

Wedding reception outside Philly

FORM Controls in ‘OL’ or ‘UL’

Most people (myself included) place input field(s) in ‘P’ or “DIV’ - sensible choice (except in certain instances).

Use ‘OL’ or ‘UL’ since most forms are lists of questions or form controls anyway.

<ul>
<li> <label>Address Line 1</label> <input /> </li>
<li> <label>Address Line 2</label> <input /> </li>
<li> <label>City</label> <input /> </li>
<li> <label>State</label> <input /> </li>
<li> <label>Postal Code</label> <input /> </li>
</ul>

Address Line 1
Address Line 2
City
State
Postal Code

Roadside stand Front Royal, VA

Assitive Technology Software

Screen Readers

NVDA (NonVisual Desktop Access) - FREE
Voice Over - FREE on iPhones, iPads, Macbooks, etc.
JAWS - FREE trial (shuts off machine every 40 minutes) or $900 - $1100 to purchase with three free upgrades.
TalkBack - FREE on Android phones and tablets.
ChromeVox

Assitive Technology Software - cont.

Voice Recognition

Dragon Naturally Speaking - $99 or $199

Fire Vox

Free reader extension for Firefox that acts like screen reader - created by Charles L. Chen.

Uses

Listen to your page to hear (SEE) how it sounds to someone with visual issues.
Close your eyes and listen to your website. Can you navigate and find information? You should be able to, since you created the website.

Toki Undergound on H St. NE

Miscellaneous

For FORMs write clear and simple directions of what should be done and what information you are looking for.
List all errors at once, instead of one at a time and FOCUS on first field with an error.
Show errors early so they can be corrected right away.
By doing a “FOCUS onLoad” you will put a screen reader in the middle of a page without any knowledge of what the form is about.
Finally, ALT text should be written so that it provides useful alternative information about an image. Not every image needs to have text but they should all have the alt attribute.
Example: don't do <img alt="bullet image" /> instead do <img alt="" />

Metro 29 Diner in Arlington, VA

Chocolate layer cake with chocolate curls on top at 29 Diner in Arlington, VA

Last Updated - February 11, 2023

by: John F Croston III - @jfc3

Is Your Website Accessible?

If not, practical ways to make it so.

Hopefully I can help with these questions and more.

John F Croston III

Overview

Washington, DC

Web Content Accessibility Guidelines (WCAG) 2.0

Valid and Semantic HTML and CSS

Page Language

WCAG 2.0 - cont.

Skip Navigation

Text and Fonts

Color and Contrast

a:hover, a:focus, and :active (older IE)

WCAG 2.0 - cont.

“click here”, “read more”, etc.

Headings (h1, h2, h3, etc.)

Tables

WCAG 2.0 - cont.

Forms

Input elements must be explicitly labeled

Search (use skip nav anchor)

M. E. Swing Co. - Coffee Roasters

Valid Semantic HTML and CSS - 4.1.1 and 4.1.2

Validators

Accessibility Checkers

Free Checkers

Accessibility Checkers - Cont.

Free Checkers

Page Language - 3.1.1

Explanation

Example Code

Additional Resources

Blue Moon Cafe in Baltimore, MD

Skip Nav - 2.4.1

Skip Nav - cont.

CSS

Gourdoughs Speciality Doughnuts in Austin, TX

Text and Font Size - 1.4.4

Text and Font Size - cont.

Wedding Reception outside Philly

Color - 1.4.3

Color Contrast

Tools

Color - cont.

Types of Color Blindness

Examples:

Pho Viet on 14th St. NW

a:hover, a:focus, and a:active (older IE) - 2.4.7

CSS Example

Toki Underground on H St. NE

“Click here”, “Read more”, etc. - 2.4.4 and 2.4.9

Don't do it!

Poor example

Good example

On the Bay Seafood in Ocean City, MD

Headings - 2.4.6

Book Title - h1

Impala on H St. NE - Opening Soon

Tables - 1.3.1

Tables - cont.

Taqueria Mexicana at Shenandoah Flea Market

What makes a form accessible and useable? - 1.3.1

Franklin's BBQ in Austin, Texas

FIELDSET and LEGEND

Thurman's Cafe in Columbus, OH

LABEL - 1.3.1

LABEL - cont.

Example

Schmidt's Sausage Haus in Columbus, OH

Radio Buttons and Check Boxes

San Diego farmer's market

SEARCH - 4.1.2

Roadside stand Front Royal, VA

REQUIRED Fields

CSS

Chaps Pit Beef in Baltimore, MD

ARIA - Landmark Roles