Writing Accessible Content

Writing Accessible Content on Udemy

Text likely makes up the majority of the content on your site. Structurally, the text color, line height, and font size set by the TTU template, falls within accessibility requirements. You can't get much more high contrast than mostly black text on a mostly white background. There are a few things you can do to promote accessibility in the text on your page. First, let's talk about headings. Headings convey structure and meaning for your page. You shouldn't just use a heading 5 because you like the way it looks. Similarly, if you have a bit of text that you make bigger and bolder than whatever is around it, well visually you're using that as a heading so why not programmatically make it be a heading.

You should think of your page's content as fitting into like a bulleted outline. The heading 1 is likely the page title. Heading 2s would be the main content sections on the page. Heading 3s would be subsections beneath those heading 2s. Let's say your page was on "US Government". That may be the heading 1. Your heading 2s may be something like: "Executive ...", "Legislative ...", and "Judicial Branches". Within the "Legislative" Heading 2, you may have "Senate" and "House of Representatives" as heading 3s. You can see here the headings are defining a hierarchy and grouping of the content.

Your website probably contains lots of links. It's important that the text of the link is descriptive of where the link is going. 20 links that say "Click Here" isn't very helpful for a user that is just glancing at your page or maybe is using a screen reader to list off all the links on the page. Instead, think about the title of the page you are linking to and use that as the link text. As an example, "Click Here to Learn About the Student Union Building" can easily be changed to "You can find more information on the Student Union Building website." Where in that second example, "Student Union Building" would be your link text.

You also want to avoid having a link open in a new tab, as doing so takes away user choice. There are many ways to make a link open in a new tab, such as Ctrl+Click or Shift+Click or even right-clicking on the link and saying "Open Link in New Tab." If you are forcing a link to open in a new tab, you are taking away that choice from the user and there are not many ways to make it open within the same context that it is in. A lot of the goals of accessibility are centered around what a user expects to happen on a page and what actually happens. And changing that behavior kind of changes what is going to happen with that link. If you must have a link open in a new tab, it is a good idea to add "Opens in New Tab" to the link text. That way you can tell the user, "Hey, something different is going to happen when you click this link."

As said before, the TTU template governs much of how your page looks. We are always working to make this template as accessible as possible, but there may be times where you want to edit how your text looks, and there are some things for you to consider. Text must always have sufficient color contrast with its background. You can use the WebAIM Color Contrast Checker to test the colors used in your design. The Web Content Accessibility Guidelines generally define two levels of accessible color contrast, a double A requirement that we have to meet and a more strict triple A requirement that we should meet where possible. There are also different guidelines based on normal or smaller text and larger or bolder text used on your page. You can use the color pickers here to identify colors and the lightness shaders to make colors brighter or darker and find a combination that fits your design and has sufficient contrast for the text on your page. It's also important that a user should be able to zoom in on a page or alter the spacing of text on the page and still preserve the meaning of the content on the page. So make sure you are never doing anything to restrict that for your users.

It's always best to simplify the text on your page as much as possible. Our students are coming from all over the world. They could be at various stages of learning English, as could the parents, guardians, and friends helping them apply to college. If we can write in a simpler language, we can help more people to understand our content. It's likely that your page deals with highly specialized language for legal, financial, or scientific materials. I would somewhat argue that even those can be simplified. More people understanding your research could mean more people that want to work in your field. If our pages have contracts or terms that we want users to follow, I would hope that we are working to make those documents as easy to understand as possible. Otherwise, we are somewhat intentionally trying to trick our users. That doesn't seem right.

Think about any acronyms or jargon that you use on your page. We may know what FERPA, RRO, or SBS mean, but many of our prospective students may not. Higher education sure loves an acronym. These terms should be defined the first time they are used on the page. Even adding a pronunciation guide to unfamiliar words can help people learn and use the terminology that we use. You should identify any text on your page that isn't in English. This can help screen reading software to properly voice the word, and can also assist tools that work to define or translate the text.

Finally, it's a good idea to always listen to your site through one or more screen reading software tools just to make sure things are read off appropriately. As an example, "8 a.m - 5 p.m" could be voiced as "eight ah dot em five pee dot em". Playing around with how you write a time could increase the understanding of that bit of text. In this case, writing the "a.m" as the capital letters "a" and "m" may be better than the "a.m" that was voiced as "ah dot em". Also, using the word "to" can further explicitly describe that this is a range of time where the dash before wasn't voiced at all. This is just one example, and you may want to look at many parts of your site where you are using text that is maybe a little bit different, maybe formatted a little differently, maybe has special characters, those kinds of things, just to see how something is voiced. You may want to rewrite parts of your page to improve the clarity when that part of your page is read off by screen reading software. It's also possibly a good idea to have multiple screen reading software tools go through your page, as each one may voice the text a little differently.