Creating Accessible Web Content

Writing Text

Text underpins nearly every piece of content that we create. This foundational role means that - despite its simplicity - it is crucial to get it correct.

Spacing & Layout

It can be tempting to use whatever is quickest laying out content. This might work visually, but it often results in misusing elements that have significant meanings.

One of the most common causes of problems comes from using empty paragraphs or spaces to create padding. This type of padding doesn't respond to changes in screen size or zoom level. This can cause issues for mobile users and people who rely on magnification to read small text. There may also be issues with screen readers. Most screen readers insert pauses between each paragraph or require users to explicitly advance to the next paragraph after it finishes reading one. In either case long stretches of empty paragraphs are frustrating.

Tables are another common cause of problems which are covered in more detail in the Using Tables section.

Best practice is to use the layout features that your tools provide. The features vary depending on the tool, but there are a few commonalities:

• Use a standard spacing around paragraphs and headings. This is typically fixed in websites, but most document editors allow you to adjust this.
• Use built-in column tools instead of manually creating tables. Tables can be used for layout, but doing so while ensuring that they are accessible is much more work. In general, tables should only be used to present rows of data.

Creating Hyperlinks

There are three main rules that you should follow when creating links.

1. The narrative still makes sense, even if the link is broken.
2. The linked text is enough to give someone a good idea of where it will lead them.

The following is a series of examples using the Speak Up Speak Out Wisconsin tip submission form. This covers some common barriers and how to address them. We'll begin with a basic (and inaccessible) example.

Report a bullying incident: https://www.p3campus.com/tipform.aspx?ID=5150

The immediate issue with this is that a screen reader will try to pronounce it as if it was normal text. This runs into a problem because "raw" URLs like this aren't meant to be spoken. There are exceptions for URLs like dpi.wi.gov/accessibility, that could be easily remembered. But no one is going to benefit from hearing "'H' 'T' 'T' 'P' 'S' (pause) slash slash 'W' 'W' 'W' dot 'P' three campus dot com slash tip form dot 'A' 'S' 'P' 'X' 'I' 'D' equals five thousand one hundred and fifty."

We can improve this by making it into an actual hyper link, instead of a raw URL. A common (but inaccessible) approach is to hyperlink text that says "Click here" or "Learn more."

Click here to report a bullying incident.

This solves our previous issue but highlights another problem. Most screen readers have features that let users quickly find the content that is relevant to them without needing to wait for the screen reader to read everything. This is a lot like how sighted users can skim through a page. One of the most commonly used features is the ability jump through the interactive parts of a page (like the links or buttons). However, this means that they don't get any of the context around the link, just the link itself.

We can improve this by expanding the text to include more context.

Click here to report a bullying incident.

The link is passably accessible at this point, but it can be better. We're still saying "Click here" which doesn't apply to people using a keyboard or touch screen. In situations where you need to tell your audience to interact with some part of the page, you should prefer generic verbs like select, submit, or choose. However, in this case we can omit "Click here" entirely because it is redundant; it's a link and people already know that they should click, tap, or select them.

At the highest level, you can also build for robustness. You will often need to link to pages outside of your control, and the URLs of those pages may change without warning. You will want to update the links if you can, but there will always be a gap between when it breaks and when you find out about it. You can mitigate this by ensuring that your audience has enough context to find the information on their own. The final (fully accessible) version of our link is this:

Report a bullying incident at the Speak Up Speak Out Wisconsin tip line.

This ensures that, even if the link breaks, your audience will be able to find it with a quick Google search. Beyond just the text surrounding the link, this also uses the "title" attribute to add a tooltip with additional information.

Adding Emphasis

If text needs to be emphasized, then it should be bolded or italicized, depending on the type of emphasis. You should avoid underlining and highlighting text.

Bold text represents “strong emphasis.” This just means that the bolded text is important enough that it should be given extra attention. Generally, you should bold text that you need to ensure that people don’t skim past. For example, it would be a good idea to bold the cutoff date on a page about registration submissions.

Italic text represents “stress emphasis.” This is generally only used on one or two words at a time, and it indicates that those particular words should be stressed. This can help disambiguate the text by drawing attention to the most important part. For example, the statement “I never said that” can have multiple, subtly different, meanings depending on which word is emphasized.

There is often some confusion surrounding the underline feature that many web content editors provide. Many of them implement this with the "<u>" element. Under previous versions of the web standard this did refer to underlined text. However, in the current standard, it indicates an "unarticulated annotation" (the only common example of this is the "red squiggly line" that editors add to spelling errors). Assistive tools might still describe this as an underline due to support for older standards but it is bad practice to rely on it. Additionally, most users expect underlined text to be a hyperlink, so underlining text that isn’t a link can be confusing.

Highlighting is often completely ignored by assistive tools. Even in the cases where an assistive tool announces the change in color, it can be difficult for a user to know what that change is meant to signify. Beyond that, highlighting can introduce color contrast issues that make it difficult for users with color blindness or low color vision to read the highlighted text.

Structuring Content

Well organized content is beneficial for everyone. Assistive tools provide features that allow their users to quickly navigate between regions and sections as long as those elements exist. However, anything that helps assistive tools also helps search engines; this makes important information easier for anyone to find.

Using Headings

Headings provide important structural information. Most assistive tools can present their users with the headings on a page so that the users can easily navigate to specific sections. While not strictly required, it’s good practice to have some content between a heading and its first subheading. This can be as simple as a short summary of the rest of the section.

Headings can be one of 6 levels. These levels are typically referred to as H1 through H6. H1 is the top-level heading; it is generally the title of your page, and you should only ever have one per page. After the H1 you can have any number of H2s. After each H2 you can have any number of H3s. This continues all the way down to H6. It is important that you avoid skipping any levels.

Using Lists

Lists are one of the most common ways to organize information. Assistive tools give users the ability to easily navigate the items in a list and provide helpful information, such as the number of items in the list.

There are two types of lists: numbered (ordered) and bulleted (unordered). There isn’t a significant difference between the two types for simple lists. However, nested lists should generally be numbered, since most numbered lists will cycle through numbers, letters, and roman numerals to make it more clear which level of nesting the current item is on.

Avoid using dashes or other characters to create paragraphs that look like lists. These can be confusing to people using a screen reader. Most editors will try to replace these “fake” lists automatically, but they don't always catch this, especially with copied content.

Using Tables

It is important that tables are used to present information that is actually tabular. This means that each row in the table contains information about a single item and each column describes some detail of those items.

An example of a good table is something like the bell schedule shown here. Each row describes a single period in the day, and each column has a single piece of information about each period. It’s also important to make sure that tables have headings. In this example, there are both column headings (the Period, Start Time, and End Time) and row headings (the names of each period).