Accessibility Page Elements

Accessibility - Page Elements

Headers

Page headers help describe an orderly hierarchy to page content, and should be used in order. On this page, at the very top you'll see the phrase "Web Information, Resources, and Requirements". This text is an H1, meaning it's the highest level heading. Below that, at the top of the body text, is the phrase "Accessibility Page Elements". This text is an H2, meaning that it's a subheader under the H1. Each of the sections on this page ("Headers", "Tables", etc) are h3's, meaning that they're sub types of page elements.

By convention, on the Drupal pages, a department/division title are placed automatically as an H1 at the top of the page. It is your responsibility to start your page content with an h2 that describes the title of the page. Other headers on your page should start with h3, with subheaders of those being h4, h5, and h6, in order.

Tables

For a number of years, tables were used to format and style pages, since they were often the only way to properly align the page in older browsers. However, using tables for layout has been considered wrong for at least the last ten years. HTML is supposed to be semantically correct, which simplifies styling, maintenance and accessibility. Consequently, tables should be used only to present tabular data.

Additionally, on Drupal, tables are automatically destroyed and recreated in order to accommodate the limited screen space available on mobile. When a table follows semantic HTML conventions, you will increase the number of users able to see it.

Frames

Frames have a long history of incorrect use that has led to regular accessibility problems. If your site must use them, you are responsible for ensuring their proper implementation. On Drupal, we have blocked frame tags and iframe tags, though there are some circumstances where we can assist you in displaying a iframes. Please consult with the web team regarding frames.

Forms

Form elements should be correctly labeled with label tags, either by enclosing the input element, or through the for attribute. If you're creating a form on Drupal, these labels are created automatically for you, though it is your responsibility to create meaningful labels.