°ÄÃÅÁùºÏ²Ê

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)

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 > °ÄÃÅÁùºÏ²Ê Marketing & Communications > /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, °ÄÃÅÁùºÏ²Ê Marketing & Communications, shows the Title displayed with the °ÄÃÅÁùºÏ²ÊÌý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.

Ìý

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.

ÌýÌývsÌý.Ìý

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)

Ìý

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 (°ÄÃÅÁùºÏ²Ê 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)

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)

-

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.Ìý

Ìý

Evaluating the Check LIST

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