Â鶹´«Ã½

Accessible Code Basics

Start here if you want to learn the basics of how to write accessible code and how to add accessible HTML to your web pages. Learn about the benefits of writing accessible code.


What is accessible code?

Accessible or semantic code is code that utilizes elements for their intended purpose. Using semantic HTML markup and writing accessible code to be accessible not only makes development easier, but it provides a number of important benefits to your users, especially those that use assistive technology.

To better understand accessible code, let's use a more familiar non-code example: Headings.

If you've ever used Microsoft Word or other document editing software before, then you might be familiar with headings. A heading is a common text formatting option that typically appears in the top ribbon of your chosen document editor. In Microsoft Word, it looks like this:

Screenshot of the headings style bar in Microsoft Word

Headings aren't just there to make your text look fancy (although they can do that too!) - they're used to break up your document into logical sections and subsections, making it easier to read and understand. A sighted user can quickly scan the headings of a document to find a section they want to read, and they can also be used to create a table of contents or document outline. Non-sighted users can quickly jump between headings with a single keypress and use them to navigate between different sections of a document efficiently.

Screenshot of headings navigation in Microsoft Word

These benefits can only be achieved when using headings. Simply styling your text to be bigger, bolder, or use a different color would not achieve the same effect, especially for non-sighted users who rely on headings as an important navigation tool.

The same difference exists in code as well.

In HTML, headings are identified by the use of an <h> tag, along with their corresponding level. For example, a page title or top-level heading would be identified by a Heading 1 or <h1> tag, whereas each section of the page would be identified by Heading 2 or <h2> tags.

Regular (paragraph) text, alternatively, is identified by the use of a <p> tag. Paragraph text has no special attributes or features associated with it. Just like how text in a document can be styled to be bigger, bolder, or a different color, so too can the paragraph text of a <p> tag be styled on a web page. In fact, in both documents and web pages, paragraph text and headings can be styled to look completely identical to one another, but only the headings will provide the benefits listed above.

A comparison of heading text and paragraph text styled to look exactly the same

Using heading <h> tags instead of paragraph <p> tags to break up sections of content on a web page is semantic or accessible code - the heading element is being utilized for its intended purpose. Understanding this basic concept is the foundation for writing accessible code.

Featured Video: How a screen reader user uses headings to navigate a web page


Why is accessible code important?

Now that we've reviewed an example of semantic or accessible code is, you might be wondering why it's important. There are three important benefits to developers and users alike:

  • It makes code easier to understand and develop with
  • It ensures that code is more responsive and adapts to a wide variety of devices and technologies
  • It improves SEO as well as accessibility

Assistive technology users in particular - such as screen reader users - benefit greatly from accessible code, which allows them to more easily understand and navigate the content on a web page or application. Let's review each of these benefits in a little more detail.

It makes code easier to understand and develop with

Accessible code looks and behaves in a way that users and assistive technology expect it to. For example, a button created with the HTML <button> element can receive keyboard focus and be activated with the SPACE or ENTER keys without any additional coding required. Writing code with accessibility in mind creates a better user experience for everyone, and requires less work for developers.

See an example of an accessible HTML button

Writing code with accessibility in mind creates a better user experience for everyone, and requires less work for developers. There will be times, however, when semantic HTML solutions can't be used, and a custom solution is required. For those cases, the Web Accessibility Initiative (WAI) has created a list of common website elements and controls such as menus, dialogs, alerts, widgets, and more, and has published guidelines for how these elements are expected to work and how to make custom implementations of these elements accessible.

It ensures that code is responsive and adaptable

Accessible code is designed to work on a variety of different devices and technologies. A semantic heading, for example, will always be a heading whether it's being read on a desktop computer running Windows or an iPhone running iOS. Responsive content created with accessible code ensures that users are getting the best experience from your website or application regardless of their preferences, such as zoom or text size.

It improves SEO as well as accessibility

Accessible code helps users find your content more easily. The use of semantic headings can help improve your search engine optimization (SEO) rankings for users looking for your content through Google or other search engines. Accessible links and navigation items can make navigation within your website or application easier, and help users find the information they're looking for quickly and without getting lost.

Featured Video: How semantic elements improve keyboard accessibility


Ready to learn more?

Check out the Accessible Code Examples page which lists some commonly used HTML elements and design patterns that have been developed to demonstrate the importance of making your code accessible. The Accessible Code Resources page is full of videos, quick start guides, and other helpful resources to help you with writing accessible code, regardless of whether you're a beginner or expert.

Discover Accessible Code Examples Explore Accessible Code Resources

Heading Order

As mentioned earlier, heading order is important to consider when using headings on a document or web page. Heading order helps determine which information belongs together and is especially important for helping non-sighted screen reader users understand the context of the information being presented to them. For this reason, the heading order of the page needs to be structured and logical. Here are some helpful tips to make the heading order of your page accessible:

  • Heading 1 or <h1> should be reserved for the page title or top-most heading. This enables users to quickly navigate back to the beginning of a lengthy document or web page.
  • The next heading should be a Heading 2 or <h2>. Any major section of content not directly related to the previous section will begin with a Heading 2 to signify the start of a new section.
  • Major sections (identified by a Heading 2) can be broken down further into subsections using  a Heading 3 or <h3>, and those subsections can be broken down further still by using a Heading 4 or <h4>, and so on.
  • Headings can return up as many levels as necessary to indicate the start of a new section or subsection, but should never skip levels going down. For instance, going from a major section Heading 2 or <h2> to a Heading 4 or <h4> might make a sighted user think that they missed a subsection of content, or that it was omitted by mistake. A non-sighted screen reader user who first navigates to a Heading 2 and then tries to navigate to a Heading 3 might think that there's no further content in that section and skip the content under the Heading 4.

An example of correct heading order might look something like this:

  1. Cats <h1>
    1. Big Cats <h2>
      1. Big Cats with Spots <h3>
      2. Big Cats with Stripes <h3>
    2. Small Cats <h2>
      1. Small Cats with Spots <h3>
      2. Small Cats with Stripes <h3>
        1. Small Cats with Stripes and Long Whiskers <h4>
    3. Kittens <h2>

Note how the headings only move down one level at a time, but return to a Heading 2 at the start of every new major section. Try to use the correct heading order whenever possible to avoid confusion and make your content easier to understand for everyone.

Ready to learn more?

Visit the other pages in this section to learn more about how accessible code fits into Kent State's digital footprint.

Hidden