Accessibility by Design Websites and Applications

Practice a “structure-first” approach to web design in which structural markup takes place before visual formatting.

• HTML tags define document structure, while CSS controls the appearance and behavior.
• A structural focus ensures that web pages can be understood when styles are turned off.
• Well structured web pages are more flexible for both users and designers.

• Migrate to HTML5 for greater device interoperability. HTML5 takes accessibility into account.

JavaScript can cause your site or application to be completely inaccessible, so it’s critical to continue checking accessibility of these elements as you go.

Don’t wait until you’re finished to find out that it’s not accessible and you have to start over.

• Always test JavaScript elements to make sure they behave as expected when navigating with a keyboard and a screen reader.

Web pages should still function when JavaScript is turned off.

• Add <noscript> tags to tell users what they’re missing if JavaScript isn’t available.
  • For example: <script type=”text/javascript”>   document.write(“This page was last updated ” + showDate() + “. “); </script><noscript>   <p>Page modification date displays here when JavaScript is enabled.</p></noscript>

WAI-ARIA, the Accessible Rich Internet Applications Suite, is a W3C protocol designed to make Web applications and content more accessible for people with disabilities.

Using ARIA with dynamic content, such as sliders, tree menus, or other scripted controls that use AJAX and related technologies, can improve the accessibility of a site.

• What is WAI-ARIA?
• Using ARIA

CAPTCHA has a host of accessibility issues and should be avoided. Honeypots are a decent alternative, according to the W3C.

• W3C: Inaccessibility of CAPTCHA

For those who cannot or prefer not to use a mouse, web sites normally can be operated with a keyboard alone (e.g. users can tab between focus elements like menus, links, and form fields).

Browsers typically display a visible border around the element that currently has keyboard focus, but sometimes it’s difficult for users to see.

If you wish to improve upon the browser’s default focus indicator, you can use the :focus selector in CSS.  For example:

a:hover, a:active, a:focus { background-color: #004C23; color: #ffffff; }

• Don’t purposely disable the keyboard focus indicator
• Consider contrast when selecting the color of the focus indicator so that it is clearly visible on all backgrounds.

Design and test your content to ensure that it is still readable and there is no loss of content or functionality at 200% magnification.

• Provide large fonts by default
• Ensure that text containers resize when the text resizes
• Use relative measurements
• Specify the size of text containers using em units or percentages (CSS)
• Use percentage, named font sizes, or em units for font sizes (CSS)
• Set column widths so that lines can average 80 characters or less when the browser is resized (CSS)
• Scale form elements which contain text (CSS)
• Calculate size and position in a way that scales with text size (Scripting)
• Provide sufficient inter-line and inter-column spacing
• Use server-side scripts to resize images of text
• Scale form elements which contain text (CSS)

Avoid

• Scaling font sizes smaller than the user-agent default
• Justified text
• The use of text in raster images. If you cannot avoid this, ensure that text in raster images is at least 18pt

Media player controls should be both screen reader and keyboard accessible. This includes video and audio players, but also other interactive content such as photo sliders.

This is a common issue with WordPress plugins, so select plugins carefully.

The controls should receive visible focus using the Tab key and Arrow keys and be activated by the Enter key or space bar.

For screen reader accessibility, the characteristics of each media player control must be stated by the screen reader. These characteristics are:

• Name (“Play,” “Fast Forward”)
• State (“selected,” “expanded”)
• Role (“button,” “list”)
• Value (“75%” for volume)

Two links on a page should not go to the same location, especially if they are adjacent. This is a common issue with WordPress plugins, so you may need to choose a plugin that you can edit.

Instead of having separate links for an image and its text caption, put both image and text inside a single link, and give the image an empty alt attribute (alt=””) so screen readers will not hear redundant text.

<a href=”https://source.colostate.edu/“><img src=”source.jpg” alt=””><br>Source</a> 

Many websites include navigational menus at or near the top of every page, above the main content.  Screen reader user and keyboard users need a mechanism to get past the menus without having to go through them.

Skip navigation or “skip to main content” links target the HTML element containing the page’s main content and enable users to efficiently skip redundant menus.  These links are implemented by including a named anchor in front of top-level navigation, as shown below:

<!doctype html>

<html lang=”en”>

<head>…</head>

<body>

<a href=’#content’>Skip over navigation</a>

<nav>…</nav>

<div id=”content”>…</div>

</body>

</html>

Often these skip navigation links are visibly hidden using CSS, but are made visible on :focus so it only appears once users press the tab key.

• Visit WebAIM: “Skip Navigation”

A web page should be navigable using only the Tab and Enter keys.

• To facilitate keyboard navigation, set the tab order of links and form elements so that each can be accessed in a logical, sequential order using tabindex = number.
• Make sure that the keyboard does not ‘get lost’ between elements by removing hidden elements from the tab order.

See W3C form specifications under Tabbing Navigation for more information.