When designing or developing Case Western Reserve University websites and web applications, you must ensure that everyone can access and use them. The following topics can guide you through common elements found on most Case Western Reserve websites and show you how to make them accessible.
Indicate the primary language of every page by using the “lang” attribute in the HTML tag (for example, <html lang="en">). Use the “lang” attribute on specific elements when the language of the element differs from the rest of the page.
While headings help all users understand the organization of your page, they also function as a target for screen reading devices to jump to when a user is searching for specific information.
You should keep the following in mind when using headings:
- Your page title should be the only text set to H1 or Heading 1.
- Headings should be used in the proper order with no heading skipped. For example, there should be no Heading 3 without a Heading 2 parent.
The visual color difference between two colors that either touch or overlap must meet a 4.5:1 contrast ratio for normal text and 3:1 for large text.
Learn how to test color contrast for hexadecimal color codes.
Some users navigate web pages via their keyboard. All sites need to accommodate these users through keyboard accessible features.
Images should have alternative text that briefly, but accurately describes the image and its purpose within the content. Alternative text should be provided with the alt attribute for images in HTML.
You should make sure you are using quality images to help all users, regardless of ability.
Find out more about alternative text and what makes a quality image.
Menus should be consistent across your site. Users should be able to find the main navigation in the same location on every page, and different menus should act similarly so the user can understand new menus without having to learn a new setup or input method.
Some types of menus, like dropdown or flyout menus, are hidden until accessed by the user. Unless these menus are coded properly, they can create accessibility issues for the visually impaired or users that interact with content primarily through the keyboard.
As you develop your site, you should use semantic HTML as much as possible. Semantic HTML or semantic markup is HTML that uses defined elements that describe their meaning to browsers and other developers. Using semantic HTML elements for their correct purpose allows browsers and screen readers to present the information to users in the most understandable method.
As you develop web pages, be aware of the order of the items in your source code. All items in the source code should match the visual read order on the page as it is presented in a browser. This not only makes it easier for others to find content in the source code, but also allows screen readers and other assistive devices to provide content in the intended order.