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