Accessibility

Links, Images, Styles, Tables

The following list is a break down of the digital accessibility standards and a guide to creating accessible content. The items in the list help content be perceivable, operable and understood by all website visitors.

• Links - When using links, use descriptive and meaningful text to indicate where the link will go.
• Images - When using images, include descriptive and meaningful alternative text to support assistive technology users.
• Heading Styles - When creating topics, categories or sections, use heading styles to make content identifiable and navigable..
• Tables - When using tables, include a caption and the appropriate header row or column header, the caption acts a summary and the headers provide context to the table cells. 
• Accessibility Checker -Use an accessibility checker to identify Links, Image Alt Text, Heading Styles and Table elements on a webpage.

Links

It is important to provide descriptive and meaningful paragraph text for hyperlinks because it allows website visitors to know where the link will go. 

Avoid vague paragraph hyperlink text such as "click here."

Link Title

When using Hyperlinks in the main body paragraph text, include a Title to provide context for the link.

The Link Title can provide context and ad addition information about the link. 

Images

When embedding images, include descriptive alternative text. 

Alternative Text is beneficial for website visitors using a screen reader. 

The Alternative Tex or Alt Text is a an invisible description of the image, allowing blind or low vision website visitors to perceive and understand the content. 

Styles

Heading Styles make content easy read and navigate. 

When creating new topics, categories or sections, use a brief descriptive Heading Style to make the text stand out. 

Easily scan down a webpage and understand an outline of the page when Heading Styles are used. 

Screen Reader users can also utilize the Heading Styles to navigate through the page, similar to someone visually scanning down the page with their eyes. 

Tables

Tables can be a useful way to display content, beside to include a table caption and appropriate table headers.

Table Caption

The Table Caption is a summary  for the content.

The Caption also allows Screen Reader users to easily identify the purpose of the information in the Table. 

Table Header

If appropriate, include a Table Header for the top row, first column or both.

The Table Header will apply a dark background to the cells, making the content distinct.

The Table Header also provides contextual support for Screen Reader users, when navigating through rows and columns, the header cell will be spoken before the data cell, making the Table easy to understand. 

Create links with context and clarity.

WCAG 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. (LevelA)

W3.org (WCAG SC 2.4.4)

When applying a hyperlink, be sure to include descriptive and meaningful display text, along with a title, which is an additional description of the URL.

Links can be applied to an Email Address, Phone Number and Web Address.  

Types of Hyperlinks:

• Email > communications@vcccd.edu > mailto:communications@vcccd.edu
• Phone > (805) 652-5500 > tel:8056525500
• Website > VCCCD Marketing & Communications > https://www.vcccd.edu/departments/marketing-communications-and-outreach

If mail or phone links are placed in the body of a webpage, apply a hyperlink to allow users to activate a call or email. 

Effective Website Links:

For effective website links

1. Write the statement, without referring to the link
2. Apply a hyperlink to the content in the statement. 

To check the effectiveness of a hyperlink, take the link out of context.

An effective hyperlink show's where the link will go based on the descriptive text. 

Assistive technology, such as screen readers, may view links out of context.  A well described link, supports users with enough context to know where the link will go. 

Screen Reader Screen shot

Be sure to use descriptive text when linking to an email, phone number or website.

Link Title:

The Link Title provides context for the linked text

Example Link Title:

Hover over a hyperlink to reveal the Title.

For example, the above link, VCCCD Marketing & Communications, shows the Title displayed with the VCCCD acronym spelled out, providing context to website visitors. 

Link Titles also provide spoken feedback to assistive technology users.  

Applying a Website Link & Title:

1. Write the statement
2. Select text
3. Apply the hyperlink (CTRL + K or CMD + K)
   1. Add the URL
   2. Add a Title

Note, An empty Title field, does not display hover text.

Link Underline Styling

Keep the underline style specifically for hyperlink text.

In general, text should not be underlined unless it is used as a hyperlink. This does not mean that underlined text is inherently bad. It just means that the convention on the web is to underline links. People have gotten used to this convention. Using underlined text for non-link purposes on the web will likely confuse some users, who may attempt to click on the underlined terms.

WebAIM

Apply Underlining to Links

• Highlight the linked text
• Choose the underline option to give the text visual identification. 

If links are not marked with an underline, underlining is available when the mouse cursor hovers over a link. 

Link Underline Comparison

When applying an underline style, the link always appears underlined.

A hyperlink will be underlined by default and the underline disappears when the mouse cursor hovers over the link.

 WebAIM vs WebAIM. 

Alternative Text?

Alternative Text or Alt Text for images is a statement describing a non-text element. 

WCAG 1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose...(LevelA)

W3.org (WCAG SC 1.1.1)

Uploading Images

Alternative Text is required when Embedding images on a Drupal page.

Alternative Text needs to descriptive and meaningful.

Types of Images:

• Image with no text 
• Image with text

Image with no Text:

Image with Tex

Keep in Mind:

• Describe the subject and focus of the image (About 3 to 5 words)
• When using images with embedded text, provide the exact embedded text in the Alt Text field. 
• When using an image as a link, us the Title field to provide context.
• Assistive technology will speak the Alt Text followed by the Title. 

More information about Alt Text can be found in Document Accessibility.

Heading Styles

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

W3.org (WCAG SC 2.4.6)

Use heading styles instead of applying bold or bold and underlined styling for sections, categories or topic lines. . 

When text is marked with an underline, the content may be mistaken as a link. 

Apply a Heading to the Content

1. Place the typing cursor in the line of text
2. Choose a Heading Style from the formatting options

Apply headings in a logical structure. when content breaks into sub topics or categories, use the next heading level to create a structured outline. 

Benefits of Headings

• Website visitors can scan down the page and view an outline of the content based on the heading structure.
• Screen reader users will be able to navigate by heading style, just as other users can scan down the page visually.

Note:

• Topics, categories or sections marked with only bold formatting does not allow screen readers the ability to navigate by heading. 
• Use the WAVE accessibility checker on this webpage to view the heading structure. 

Create Tables with Header Row/Column and a Caption.

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

-W3.org (WCAG SC 1.3.1)

Table Relationships:

• The Table Caption has a relationship with the Table.  The caption provides a description of the table.
• The Table Header Row or Header Column create a relationship with the Table Data Cells.  The Header Row or Column Header provides context for the given Data Cell. 

Example Table

Table Elements:

• <caption> = Table Caption (Describes the Table)
• <th> = Table Header (Describes the Row/Column)
• <td> = Table Data

Adding a Table:

Add Header and a Caption when inserting a Table element.

 Table Headers can be set to 

To assure content is made accessible, use an accessibility checker. 

WebAIM offers a free browser extension to check the accessibility of a web page, it is called WAVE.

WAVE

The Web Accessibility Evaluation Tool is available as a web browser extension for Google Chrome and Mozilla Firefox.

Wave can also be used as a stand alone website, just paste a url and begin checking. 

• WAVE extension for Chrome
• WAVE extension for Firefox
• WAVE standalone website

Evaluating the Check LIST

The WAVE accessibility checker identifies elements on a page with an inline icon.