Accessibility Examples (Correct and Incorrect Use)
The intention of this page is to better prepare you for the kinds of changes that will need to take place on your website in order to meet WCAG 2.0 accessibility standards in accordance with the Americans with Disabilities Act (ADA).
Please review this information thoroughly. If you feel that the information presented here is incomplete, or if you have any questions or concerns, please feel free to reach out to us at your earliest convenience.
Skip to section:
- Headings break up the page content into sections of information. Deeper headings create deeper subsections.
- Headings must be nested properly. See the example images below for how to nest headings properly.
- Headings are intended for structural purposes only, not to decorate text or create emphasis.
- Headings should not restate the page title. The page title is automatically given its own heading (Heading 1).
- Headings must only be used to title sections of information, not to create spacing or padding between text.
Examples of all of the current heading options. Higher-numbered headings are nested under lower-numbered headings, starting with Heading 1 (the page title).
Properly nested section headings. Major sections of the page are tagged as Heading 2's, and the subsections are tagged as Heading 3's. Headings can only move down one level at a time.
Improperly nested section headings. The first headings used on the page are Heading 4's instead of Heading 2's, and bold is used to style lines of text where section headings should be.
An example of using a heading to style a normal line of text. Headings should only be used to create sections and subsections on a page, or identify important areas of information.
- Links should not use general wording like "Click here" or "Read more." Screen reader users may have difficulty understanding the link purpose out of context.
- Links should not contain the full URL of the target page. Screen readers will read everything in the URL, including symbols and other jargon.
- Links should only be applied to headings and images if necessary, and used sparingly. It might not be immediately obvious that a heading or image is linked.
- Links going to two different pages cannot have the same link text. These are identified as "non-distinguishable" links.
- Links going to a file page must include the file-type (such as PDF) in the link text. Users who do not have the necessary software to open the file can avoid selecting the link.
- Visit the Web and Social Media Services website for more information.
The title of the website or page is turned into the link. It does not use the full URL of the page.
- Learn more about accessibility guidelines and web standards.
The words "accessibility guidelines and web standards" are turned into a link. Words like "Click Here" and "Read More" are not used.
- Information for Current Students. Information for New Students.
By highlighting the words "Current" and "New" as part of the links for Students, they are distinguishable from one another.
- Download the Accessibility Guidelines Form (PDF).
Since the link goes to a file page, the file-type is added to the end of the link so users know what kind of file they are opening.
- Visit http://www.kent.edu/webteam/drupal-training-manual for more information.
The full URL of the page is used. A screen reader will read everything in the URL, including the dots and slashes.
- To learn about accessibility guidelines and web standards, click here.
"Click here" is used to identify the link. It provides no information about where it goes if read out of context.
- Information for Current Students. Information for New Students.
There is no way to determine that the links "Students" and "Students" go to two different pages.
- Download the Accessibility Guidelines Form.
The link does not tell the user what kind of file they are opening when they select it.
- Most images require alternative (alt) text. See the section "Image Alt Text" below for how to add meaningful alt text to an image.
- Images should not be copied and pasted directly from another page (Drupal or CommonSpot). Images must be uploaded as files to Drupal first before being used on a page.
- Images should be sized and saved for the web before being uploaded. Larger images slow down page load times and may not load at all on slow connections.
- Images should be uploaded and added to a page following the guidelines provided on the Drupal Training Manual: Images page.
- Images should not contain text unless absolutely necessary. All text used in an image must also be included in the image alt text, or somewhere closely related to the image.
Image Alt Text
- Image alt text describes the image for screen reader users, or if the image fails to load on the page.
- Image alt text should contain just enough information to describe the image without being too lengthy - between a few words and a short sentence or two.
- Image alt text for images being used as links to another page should describe where the image link is taking the user.
- Image alt text for complex images such as charts or graphs should be accompanied by a link to a text-only description of the image. See the bar graph example below.
- If image alt text is left blank, the image will be skipped over by screen readers. These are identified as "decorative" images. Images such as information graphics and mega menu thumbnails are decorative.
Correct Image Alt Text
Alt Text: Students walk through the new arch on the esplanade extension that connects the Kent State campus with downtown Kent
The alt text description adequately describes the content of the image without becoming too lengthy or overly descriptive.
Alt Text: Flash and fans cheer on the men's basketball team. View the 2017 season schedule.
The image is being used as a link to another page, so the alt text description tells the user what to expect if they select the link.
Alt Text: (left blank)
The alt text description for the information graphics is left blank because the images are decorative, and are only being used to draw attention to the links they're placed above. The adjacent link text is sufficient.
Alt Text: Bar chart showing Kent Campus enrollment over an eight year period, starting in 2006. Enrollment steadily increases each year.
Text-Only version of Kent Campus Enrollment bar chart
The alt text description gives a brief overview of the information being displayed in the chart, while the "Text-Only" link takes the user to a page that explains the chart in greater detail.
Incorrect Image Alt Text
Alt Text: Arch
The alt text description is too short, and does not adequately describe the content of the image.
Alt Text: Flash and fans cheer on the men's basketball team
Although the alt text description describes the content of the image, it doesn't tell the user what to expect if they select the link.
Alt Text: Financial Aid; Scholarships; Financial Literacy; Affordability
The alt text descriptions do not offer useful information to the user, and can cause the screen reader to repeat itself ("Financial Aid," "Financial Aid").
Alt Text: Chart showing student enrollment
The alt text description is too vague, and doesn't accurately describe the purpose of the chart, which is to show Kent Campus enrollment increasing over time. There is no link to a text-only version of the chart for users who might not be able to see the graph or have difficulty interpreting it.
- Tables should be used to organize relevant data and information, not alter the layout or style of a page. Tables used for layout purposes require special code to make them accessible.
- Tables need a heading or Table Caption to provide a meaningful title to the table and properly mark when the user reaches a table on the page.
- Tables must have at least one header row and/or column. Header rows/columns assure that data is being correctly associated with each row or column heading.
- Tables should not have any empty headers. This is especially true for the top-left cell (make sure it is not empty).
- Tables should not be too complex. Break up larger tables into smaller ones if it's possible to split up the information in a logical manner.
The table is given a brief heading to introduce it. The top row is made a header row so that the data below it is read off as part of each corresponding column.
If the data in a table becomes overly complex, it is recommended to break it up into smaller, simpler tables to improve accessibility. Table Captions are used to identify each table.
The table has no heading or table caption to introduce it. Missing header rows or blank cells make the table harder to interpret by screen readers.
The table is being used for layout and design purposes instead of being used to organize relevant data. Screen readers will have an especially hard time trying to read images and headers as part of the table.