Publishing for the Web

Publishing for the Web

Accessibility

Accessibility is a guiding principle for making an internet that includes everyone. When practiced, it ensures that many barriers to online participation are removed or minimised. While it especially attends to people with disability, it helps anyone facing obstacles: whether situational-like having broken glasses, or a mouse with a dead battery-or more systemic obstacles-like having limited bandwidth and speed. Accessibility is important, both as a business advantage and a legal obligation, but it’s also something we pursue in recognition of the diversity and dignity of the people we want to communicate with online.

The Four Principles of Accessibility

The Four Principles of Accessibility help define what is most necessary for people to access and use web content. While these principles typically reference user-interface components, they can apply to any information on the web, including how we construct our page, or write text. The four principles of accessibility require that content is:

  1. Perceivable
    Information and user interface components must be presented to users in ways they can perceive.
  2. Operable
    User Interface components and navigation must be operable for users in ways they can perform.
  3. Understandable
    Information and the operation of the User Interface must be understandable.
  4. Robust
    Content must be robust, such that it can be reliably and consistently interpreted by a wide variety of technologies.

If any of these are not true for our web pages, some people will not be able to read your message. If we want to reach people with our important content-content we’ve invested our time and efforts in-we need to make sure that everyone who might access it, can access it. Content producers should be specially concerned with the fourth principle: the robustness of their content.

You can encounter some of the people who rely on an accessible web to better understand-and champion-the importance of accessibility.

Web Content Accessibility Guidelines

A working group of the World Wide Consortium made up of individuals and organizations from around the world, provides guidelines to help implement the Four Principles of Accessibility, and make the web an accessible space. These guidelines are called Web Content Accessibility Guidelines (WCAG), and they can be met in different levels of conformance: A (lowest), AA and AAA (highest). The AA standard of the most recent, stable version available (Version 2.2) is achievable for many organisations. The next version of the guidelines, while still focussed on web technologies, will be broader in scope. It is yet to be published.

Many WCAG guidelines can be met simply by keeping a few things in mind when publishing content, Many are automatically applied when using content management systems and are programmed by developers of author tools. Others require considerable attention or technical resourcing. Web Content Accessibility Guidelines are not necessary reading for everyone, but if you’re interested in pursuing digital communication or web development, strong familiarity will be well regarded, if not essential.

An overview of HTML (Hyper Text Mark-up Language)

The internet relies on content being organised in a semantic structure called HTML (Hyper-Text Mark-up Language). HTML uses standardised tags to assign additional meaning to data or content that a machine is able to process. Maintaining the standards of this markup helps the computers that we use-and those computers driving search engines, social media, apps and bots, and other websites-access and distribute content in a consistent way according to its tags. It also helps the interpretation and rendering of different webpage parts, in a way that humans can usefully experience-though the tags themselves are typically invisible to users.

A paragraph tag, for example, encloses text <p>like this</p>. It lets a computer know that the text within the tags is a paragraph and should be treated like a paragraph, in addition to particular rules or requests made by the website, its user or another computer.

You can explore some tags that might be used in your creative, academic and religious writing:

  • <cite> tags define the title of a creative work, like a poem or book, painting or song
  • <q> tags define an inline quote inside of a paragraph
  • <blockquote> tags define an extended quotation, typically displayed with indentation

In most instances content producers don’t have to bother with these tags manually. But we should keep this mark-up in mind when we publish and organise information on the web because it can affect whether some people can access it at all. It might also mean that we have to shape our information differently online than if it were published in another medium-like a photocopied zine, for example.

Making your web content more accessible

Content producers improve the access (and potential reach) of their content by meeting Web Content Accessibility Guidelines. The Web Accessibility Initiative (WAI) also has some tips to help you meet Web Content Accessibility Guidelines requirements. You can also get started by applying the three simple practices of accessibility that follow, whenever you include headings, images and links within your content:

Nesting headings

The list of nested headings used in this article.
Example of nested headings

HTML example<h1>Publishing for the Web</h1> <h2>Accessibility</h2> <h3>The Four Principles of Accessibility</h3> <h3>Web Content Accessibility Guidelines</h3> <h2>An overview of HTML (Hyper Text Mark-Up Language)</h2> <h2>Making your web content more accessible</h2> <h3>Nesting headings</h3> <h3>Adding alt-text attributes to images</h3> <h3>Describing links</h3> <h4>Alternative examples for link text</h4>

Use heading levels in order, starting with the most important (<h1>) and nesting the rest beneath it (<h2> to <h6>). Each heading of the same or higher level starts a new section. Headings of a lower level create subsections within the section above them.

Try not to skip heading levels-for example, don’t jump directly from a <h2> straight to a <h4>. The only time skipping makes sense is when you’re ending one section and starting another (for instance, a new <h2> can follow an <h4> that closed the previous section).

Because browsers and themes often style headings by level, visual design choices can sometimes clash with proper structure. When that happens, keep your headings in the correct order and adjust the styling instead of using the wrong heading levels.

Adding alt-text attributes to images

Example of alt-text being displayed due to a broken link or disrupted download

HTML example<img src="https://dml.vic.edu.au/broken-link.png"alt="An image displaying its alt-text">

Alt-text (alternative text) is an attribute assigned within an image (<img>) tag. It provides visitors unable to view images directly with a text-based alternative. This helps people who are unable or unwilling to download images, those who have a visual impairment, and bots that are scraping or indexing content. It is also displayed if an image fails to load for whatever reason, and is the default rendering of many images within email software.

Alt-text should be assigned in almost all cases where an image is not strictly decorative. If in doubt, add alt-text. Be helpfully descriptive of the image, yet concise. 125 characters or less is ideal. Include the item’s subjects or features, activities and setting; use adjectives to include interesting and relevant details about the image.

Writing descriptive links provides helpful context for informing people accurately of the information available at the link-target.

HTML example<a href="https://dml.vic.edu.au/accessible-posts#describing-links">Writing descriptive links</a> provides helpful context for informing people accurately of the information available at the link-target.

Include an accurate description of the linked page (the link-target) within the text of your link (link-text)-either by including the linked page title directly or the most relevant phrase in your writing. “See document” and “click here for more information” offers little meaningful reference to the linked page, and relies on a context that some visitors might not experience. For someone using a screen-reader, or viewing the link from a feed of post excerpts these links may have no personal or practical meaning whatsoever.

Not everyone navigates the internet in the same way. If you are using verbs to direct user actions and its possible, it’s best to choose verbs that avoid specific mechanics. “See document” or “click here for more information” refers to actions that might not be possible for people with visual or motor impairments, for example. You can instead choose more accessible verbs that describe the intended outcome beyond the activity. Not only is this way of writing more engaging, and empowering generally, it provides more meaning to the widest possible audience.

Alternative examples for link-text

There may be instances where plainer verbs like “read” are preferable, but you can consider using creative alternatives too. Examples of some dynamic, active verbs you could use, include:

  • Access
  • Browse
  • Check
  • Confirm
  • Consider
  • Consult
  • Discover
  • Encounter
  • Engage with
  • Experience
  • Explore
  • Find
  • Inspect
  • Investigate
  • Learn
  • Search
  • Seek

Some different examples of using dynamic, active verbs or more engaging descriptions of the link-target include: