5X社区

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).

Learn more about WCAG 2.0 and 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

  • 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.

Correct Headings

  • Heading styles one through six are stacked vertically to show how they will appear nested properly on a page
    Examples of all of the current heading options. Higher-numbered headings are nested under lower-numbered headings, starting with Heading 1 (the page title).
  • An example of properly nested headings showing heading twos as major sections and heading threes as subsections
    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.

Incorrect Headings

  • An example of improperly nested headings and bold lines of text where headings should be
    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 a heading being used to style a normal line of text
    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

  • 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.

Correct Links

  1. 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.
  2. 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.
  3. 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.
  4. 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.

Incorrect Links

  1. 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.
  2. 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.
  3. 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.
  4. Download the Accessibility Guidelines Form.
    The link does not tell the user what kind of file they are opening when they select it.

Images

  • Images should not contain text unless absolutely necessary.   All text used in an image must also be included in the image alt text.
  • 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.

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

  • 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.
  • 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.
  • Decorative graphics are placed above links for financial aid, scholarships, financial literacy, and affordability. The alt text for these graphics is 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.
  • 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

  • Arch

    The alt text description is too short, and does not adequately describe the content of the image.
  • 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.
  • Decorative graphics are placed above links for financial aid, scholarships, financial literacy, and affordability. The alt text for these graphics matches the link text.

    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").
  • 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

  • Tables should be used to organize relevant data and information, not to alter the layout or style of a page.
  • Tables need a table caption, which can be styled as a heading, to provide a meaningful title for the table and properly mark when the user reaches a table on the page.
  • Tables must have at least one header row or column. Table header rows and columns make the table easier to understand by grouping relevant data together, and help screen reader users identify where they are in the table.
  • Tables should not have any empty header cells. Header cells are used to properly identify the information in each row or column, and empty header cells can be especially confusing for screen reader users.
  • 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.

Correct Tables

  • An example of a table with a heading above it and a header row with three columns for events, dates, and times
    The table is given a brief heading to introduce it on the page. The top row is tagged as a header row so that the data cells below it are correctly associated with their corresponding columns.
  • An example of a larger table split into two smaller tables, and table captions placed above each to give them meaningful titles
    If the data in a table becomes overly complex, it might be easier to understand if it's broken up into smaller, simpler tables. Table captions are used to identify each table.

Incorrect Tables

  • An example of a table without a proper header row and missing column information
    The table has no heading or table caption to introduce it on the page. Missing header rows and blank cells can make the data in the table difficult to understand.
  • An example of a table used to display information about the Kent State Main Campus by changing the layout of the page
    The table is being used to change the layout of information on the page instead of organizing relevant data. Screen reader users may have an especially difficult time understanding and navigating the content of the table.

Additional Resources

漏 2024 5X社区 All rights reserved.