Accessible HTML Content


The following practices are no longer recommended as they do not meet Accessibility standards

  • Using new window to open up documents and external websites without warning the user. This is very confusing to sightless users.
  • Do not use bold text as a heading. Screen readers look for the semantic heading tag and will not see text that is bold as a heading.
  • In the Hyperlink Manager Dialog box do not copy the url into the link text field. Copy the tooltip field for the link text.
  • FY2010-2011 doesn't read out in a screen reader the way it does for sighted users. Need to use FY2010 to 2011 or FY2010 through 2011

The following practices should be implemented to create accessible web content

  • identify where links are going and the file type
    • Example External Website (opens new window)
    • Documents (pdf) (word) (doc) (docx) (xls)
  • Long lists of links should be broke up into categories

Creating Accessible Content

HTML Content Blocks & Edit Rich Area Text Fields

    Do not place hyperlinks in straight HTML content blocks or in Edit Rich Area text fields in any smart form. Place all links in link/list fields.

      Documents

      Note: The links below open new windows.

        Text and Paragraphs

          Images and Alternative Text

            • What It Means- An image without alternative text results in an empty link.

                • Why it Matters - Images that are the only thing within a link must have descriptive alternative text. If an image is within a link that contains no text and that image does not provide alternative text, a screen reader has no content to present to the user regarding the function of the link.

                  • How to Fix it Add appropriate alternative text that presents the content of the image and/or the function of the link. 

                    • Additional Information About Alternative TextMany editors tend to use generic names for images like 'logo' (Ex: Nevada State Seal) and while this will pass most software tests for accessibility it does not provide meaningful information and will not pass all accessibility tests. As soon as a human being looks at the alternative text it will become apparent that Instead of 'logo' it should say "Nevada State Seal".

                      • Remediation: Make sure meaningful alternative text has been entered for each image.

                        Redundant link: Adjacent links go to the same place

                          • Why It Matters - When adjacent links go to the same location (such as a linked product image and an adjacent linked product name that go to the same product page) this results in additional navigation and repetition for keyboard and screen reader users.

                          • How to Fix ItIf possible, combine the redundant links into one link and remove any redundant text or alternative text (for example, if a product image and product name are in the same link, the image can usually be given alt="").

                          • Remediation:  Combine redundant links into a single link or separate the pages so adjacent links will not be going to the same place.  Combine redundant links or re-direct the links to different urls.

                            Suspicious Link Text: Link text contains extraneous text or may not make sense out of context.

                              Why It Matters - Links, which are often read out of context, should clearly describe the destination or function of the link. Ambiguous text, text that does not make sense out of context, and extraneous text (such as "click here") can cause confusion and should be avoided.

                              How to Fix It - Where appropriate, reword the link text so that it is more descriptive of its destination when read out of context. Remove any extraneous text (such as "click here").

                              The Algorithm... in English A link (including alt text of linked images) contains the phrase "click here" or "click", or the link text is "click here", "here", "more", "more...", "details", "more details", "link", "this page", "continue", "continue reading", "read more", or "button".

                              Remediation: Reword the sentence.  If suspicious link is in navigation reword it so it does not include the words shown in the algorithm above. Make sure link is no longer ambiguous and change the title in the code to eliminate the alerts.

                                Accessible Tables

                                  Tables for Tabular Data

                                    Users can make sure all tables (including those used for layout) on their websites are Section 508 complaint by using the procedures below. If there is a title above the table identifying it do not enter the caption.

                                    Tables for Layout Purposes

                                      While tables are primarily intended for the presentation of tabular information or data, they are often used to control page layout and formatting. Layout tables can introduce reading and navigation order issues and must not contain header (<th>) cells.  Whenever possible, avoid using tables for layout purposes.  You can often solve layout table issues by deleting the table entirely if the information can be presented in another manner.

                                        If you are using a table for layout purposes, be sure you do NOT enter a number in the row or column heading fields, in the caption or summary fields and do not check the "Associate Cells with Header Cells" checkbox in the Table Properties > Accessibility tab.   UPDATED 7/11/2016.

                                        Underlined text is present.

                                          • Why It Matters - Underlines almost universally indicates linked text. Consider removing the underline from the non-link text. Other styling (e.g., bold or italics) can be used to differentiate the text.

                                          • How to Fix ItUnless there is a distinct need for the underlined text, remove the underline from it.

                                          • The Algorithm... in English - A <u> element is present.

                                          • Remediation:  Use italics or bold instead of underlining.