DMP banner

DMP

Increase Text Size
Decrease Text Size
 Change Text Size 

10 Ways to Increase Web Accessibility

1. Create page Structure

Semantic Markup is a way of organizing code so that a browser (or assistive device) can organize information to present to a disabled user.  When working with markup languages, it’s important for the code to be semantic by using tags, structure, and information that can be read and translated by all browsers or user agents.

Page Titles

Provide a page title that is concise and distinct from other pages so it accurately describes the primary purpose of the page.  A title is the first item read and helps a user determine that they are on the right page

Example:

<head>   <title>About Us - Six Revisions
</title> </head>

Page Links

Ensure hyperlinks are self-describing (i.e. About the Admissions Process at Ryerson” vs. “click here”

Example:

<a href=”about.htm”>Click here</a> for 
information about the admissions process 
at Ryerson

will present “Click here” as the link. However,

<a href=”about.htm”>Information about our university.</a>

will display “Information about our university” to a screen-reader user. Descriptive text is displayed as the link.

Heading Structure

Make sure Headings flow in a logical order (i.e. use only 1 H1 tag and that all tags have a proper parent / child relationship) Example of a heading tag.

Example:

<H1>Library Resources at Ryerson</H1>

Associate Form Controls with Labels

Associate Label elements with form controls and ensure that the keyboard focus order (tabindex) matches the implied visual order of the form elements

<label for="searchbox">Enter key words to search:
</label>

<input id="searchbox" name="searchbox" 
type="text"  />

Note: Avoid the use of Captcha, instead, use Email Verification method.

2. Consistent Layout

People with disabilities use navigation features to familiarize themselves with web pages and use this consistency in layout and labelling to quickly pinpoint relevant information for each subsequent page and visit. Frequently, they use navigation structures as a roadmap or signpost—a way of placing themselves within page content.

3. Keyboard navigation

Ensuring keyboard access to a site allows people who cannot use a pointing device to use the site.

Assigning an access key, or keyboard short cut, to a link is one useful way for users to access important links. When the mouse can activate an element, then it should also be capable of being activated by the keyboard..

The tab order of elements on the page follows a logical sequence on the page, and takes into account the purpose of the page. When the tabindex attribute is used but not applied to all controls, the tab order can become inconsistent, which can make filling out forms or navigating through a page difficult.

4. Skip Navigation

Pages with repetitive groups of links and banners such as banners and templates need a way for a user to skip past them directly to the main content of the page.  When style sheets (CSS) are turned off the skip link anchor should still be visible and should be at the top of the page

Consider a keyboard-only user’s visit to a website that uses a top navigation bar on all of its pages. Each time the user navigates to a new page within the site, they must tab through all of these navigation links and other ancillary content, before getting to the main content area of the page.

Example:

<a id="skipnav" href="#content" title="Jump to content">Skip Navigation</a> <ul id="nav">  

Some sites decide to keep the skip navigation link visible, but if you’d rather hide it from sighted users, you can use CSS to indent the link outside of the web browser viewport:

#skipnav {   position:absolute;    top:-10000px; }

5. Using Colour

Colour should not be used as the only way to communicate information.  Provide at least one way to provide needed meaning such as including alternative text equivalent such as to indicate an error in a form field (i.e. highlighted error text in red indicating error).  Text alternatives are useful to those without vision or those who are colourblind or when content is displayed without color.

Graphs and charts can be difficult to understand as meaning is often conveyed exclusively through graphics and colour. Textures or patterns along with high colours can help to communicate distinct information.

An example of a graph

·        Lack of adequate colour contrast

·        Certain colour combinations

6. Tables

The role of data tables is to present information in tabular form, in rows and columns that show the meaning of the information in that grid. When screen readers read straight through data tables—especially large ones—it's easy for users to get lost.

In order for a data table to be accessible, it must have the proper HTML markup, users of screen readers can navigate through one cell at a time, and they will hear the column and row headers spoken to them. The very first step toward creating an accessible data table is to designate row and/or column headers. This is easy to do—most authoring tools provide a method of changing data cells into header cells. In the markup, the <td> tag is used for table data cells and the <th> tag is used for table header cells.

Tables should have a associated title or caption. It is not absolutely necessary to have captions on every data table for accessibility, but it is still a good practice.

Use Cascading Style Sheets (CSS) for page layout instead of tables as they are less prone to rendering issues.

Skip navigation is easy to implement, and useful to have in web pages with a lot of content above the main content area.

7. Label Web form elements

Properly labeled web forms are important as they enable users with disabilities to complete the same tasks as the site requires of other users who complete the form entries. Label input elements with meaningful and descriptive text. This makes it clear to the user what information they should be providing.

Example:

<label for="searchbox">Enter key words to search:</label>

<input id="searchbox" name="searchbox" type="text"  />

With CSS, you can style that label element into an icon or hide it from plain view by pushing it out of the browser viewport, if needed

8. Provide a way for users to skip repetitive content.

Many web sites use mastheads, navigation menus, search forms, and other sections that are identical across all pages. To allow screenreader users to avoid having to listen to these on each new page, your code should provide a way for them to skip to main content on the page. Those who cannot use the mouse have a similar need to use their keyboard to skip over the repetitive content. (In some cases, the navigation links are the most important elements on the page.)

9. Use Cascading Style Sheets (CSS) instead of tables to control page layout.

The strength of CSS lies in the ability to

·         separate content from presentation and

·         allow for more precise control over the layout.

10. Provide alternative text for non-text elements (e.g., images)

If an image, graph drawing or other non-text element adds meaning to a page, then use the alt attribute to provide descriptive alternative text. If it does not add meaning, then alternative text is not necessary, and can add extra noise if included. 

If alternative text (either the alt or the longdesc attribute) is not needed, simply leave the quote marks with nothing between them.

Example:

<img src=”/images/campanile.jpg” height=”35″ width=”10″ alt=”" />

 

** Test against Web Standards **

A site should have robustness built in.  Checking the site against the W3C HTML and CSS validators will ensure that you have clean code.  While issues may not show visually, Non-standard code can cause errors for assistive technology.

 

Bookmark with: Digg Facebook Twitter del.icio.us Newsvine