Developing Webpages with Accessibility and Inclusivity for Everyone in Mind

The internet is a primary source of information, entertainment, and communication. However, for people with disabilities, there are barriers in place that make many of these things inaccessible, as many websites don’t consider their needs. Much of the internet is not yet treated as a public space and does not ensure access to everyone regardless of ability. This article is a guide to writing accessible front-end web apps and making webpages truly inclusive and accessible to all.

This guide focuses specifically on writing accessible HTML, which is probably the most important part of front-end accessibility. That being said, there are other parts of front-end web development (CSS, JavaScript, etc.) that this article ignores. If you want more information on web accessibility, consult additional resources.

Table of Contents

Why Does it Matter Anyway?

How Does it Work on the User’s End?

Language

It’s Just a Matter of Semantics … Except it Actually Matters

Page and Content Structure

Alternative Text

Additional Resources

Development Philosophy

Sources for this Article

Why Does it Matter Anyway?

  • It is important that the internet is accessible to everyone in order to provide equal access and equal opportunity to people with disabilities.
  • People with disabilities comprise roughly 10 percent of the world’s population. An accessible webapge ensures that you are not losing out on 1 in 10 people.
  • Another important consideration for organizations is that web accessibility is required by laws and policies in some cases.
  • And if none of these reasons convince you to make your webpage accessible, consider this: what you do for accessibility overlaps with other web development best practices such as mobile web design, usability, and search engine optimization.

How Does it Work on the User’s End?

People with disabilities use a variety of assistive technologies to use electronic devices and browse the web. In particular, many visually-impaired or blind users access web pages with the help of screen readers. Screen readers parse through the HTML of your web page and read the contents out loud, responding to commands to navigate around the page, and take actions such as clicking on a link, typing in an input field, or submitting a form.

Language

The language we use affects everything in life, including accessibility.

Declaring a Language

Declaring a language is important for screen readers and search engines, and is declared with the <lang> attribute. Defining the correct language in an HTML page helps assistive technology to choose the correct voice profile or character set. The following declares that the web page is in English:

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

If you want to set your webpage to a different language, browse through the list of HTML language ISO codes and place the two-character code in place of “en”. For example, Faroese’s code is fo, so to set a page’s language to Faroese, you would use <html lang="fo">.

Using Clear Language

This is just good practice for web development, but is especially important for web accessibility. Use simple language, try to avoid characters that cannot be read clearly by a screen reader, and don’t use slang or unnecessary jargon. This not only benefits people with cognitive or other disabilities; it benefits readers for whom the text is not written in their first language, children and everyone. Some key principles include:

  • Avoid dashes. For example, instead of writing 3-5, write 3 to 5.
  • Avoid abbreviations. For example, instead of writing Feb, write February.
  • Expand acronyms, at least once or twice. For example, instead of writing GGMU in the first instance, write Glory Glory Man United.

It’s Just a Matter of Semantics … Except it Actually Matters

Semantic HTML means using correct HTML elements for their correct purpose as much as possible. Semantic elements are elements with a meaning, and when screen readers interact with HTML, the meaning matters because Semantic HTML gives context to screen readers.

If you need ‘X’ element, use its corresponding tag. You should always favor native HTML elements, if there is one, over faking your own. For example, if you need to use a button, use the <button> element as opposed to using a <div>.

Non-Semantic HTML elements tell us nothing about their content. Examples include <div> and <span> Semantic HTML elements clearly defines their contexts. Examples include <form>, <header>, <footer>, <button> and <article>.

Page and Content Structure

Structuring your markup correctly with headings is important. By creating a sound outline using headings <h1> to <h6> you help users to better understand the structure of your page and relationships between individual sections. On top of that, it will help users with assistive technology navigate your page. For example, screen readers provide different ways of moving from one piece of content to anothera and users can jump from heading to heading with shortcuts.

When you nest headings skipping levels should be avoided. Don’t use multiple nested <h1> elements to create the outline.

This is an example of good structure:

<body>
    <h1>The main heading</h1>
    <h2>Section Heading</h2>
        <h3>Subheading</h3>
    <h2>Another Section Heading</h2>
</body>

This is an example of bad structure:

<body>
    <h1>The main heading</h1>
      <h1>Section Heading</h1>
    <h4>You Get the Picture</h4>
        <h2>This is Terrible</h2>
    <h3>I don't know why people would structure their page like this</h3>
      <h6>But for some reason they do</h6>
</body>

Alternative Text

The alt attribute in the img tag provides alternative text for images. The value of the alt attribute describes the image to a screen reader. You don’t need to start the description with “Image/Picture/Photo of”. The screen reader does this already.

<body>
  <img src="https://upload.wikimedia.org/wikipedia/commons/0/0d/Samuel_Phillips_Hall.jpg"
  alt="Samuel Phillips Hall"/>
</body>

In the example above, when a screen reader encounters the img tag, it will speak aloud the description of the image (“Samuel Phillips Hall”), instead of simply indicating to the user that an image exists on the page.

Additional Resources

There are several topics that I was unable to cover in this article but are nevertheless important for the accessibility of HTML.

ARIA

Given the limits of space in this article, I wasn’t able to get into a key part of developing accessible web applications in HTML: ARIA. ARIA, which stands for Accessible Rich Internet Applications, is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.

I haven’t really covered information related to ARIA in this article, but you can find resources about ARIA in the MDN Web Docs and on the Web Accessibility Initiative’s Website.

Development Philosophy

People don’t have disabilities; people are disabled by a societies and communities that are apathetic to their needs. Unfortunately, this is also a reality in the software world. When we start separating people with disabilities from the broader population, a clear distinction is drawn between able-bodied people and the disabled on the basis of who does and does not need accessible software. This narrative encourages developers to choose whether they want to, can afford to, or have the extra time to make their software accessible to all. Software accessibility often becomes optional or an add-on feature because of this distinction. In reality, accessibility should be the fundamental building block upon which all software is built, with universal usability in mind. Accessibility isn’t just a medical term that only applies to a certain percentage of people. Accessibility is something that concerns all of us. What we create is useless if it isn’t accessible.

Here’s a decent way to look at web accessibility:

Web accessibility means that people with disabilities can use the Web.

Here’s a much better way to look at web accessibility:

Web accessibility means that everyone can use the Web.

Sources for this Article