Accessibility Tip: Header Tags

As good information practitioners, we all know to put “alt” tags on our images and make our text legible for users with disabilities. But one aspect of accessibility often overlooked by the producers of web content is the structure of individual webpages. We’re more concerned with the alignment of a paragraph under a title than we are the association of that paragraph to the title. We create long blocks of text separated into flat paragraphs, without marking where one section ends and another begins. If we do use header tags to mark pages and sections, we think of them as style elements: they make certain text bigger and more visible. But header tags are not merely decorative: they are an essential element that denote the organization and meaning of the content on your webpages to screen readers.

If you use font styles or sizes to mark your section headers, this is what the page looks like to a sighted user:

Page Title

Section 1
Text text text text text.

Section 2
Text text text text text.

It seems nice and hierarchical, with a clearly defined structure, doesn’t it? But this is how a screen reader processes it:

Page Title. Section 1. Text text text text text. Section 2. Text text text text text.

In order to find “Section 2,” the user has to wade through the rest of the page. Since all of the text has equal weight, they can’t use the handy features of their screen reader software to scan the page quickly for a sense of its structure and contents. However, if you mark up “Page Title” as header 1, “Section 1” as header 2, and “Section 2” as another header 2, users with screen readers could read the page the same way a sighted user would.

Beyond accessibility, proper structuring of webpages takes us one step closer to the semantic web we all love to talk about. <strong> means “strong.” <em> means “emphasis.” Neither of them mean “I start a new section.” This is what headers are for!

With this in mind, make sure your headers follow the proper order when you apply them to your webpages. Another issue that arises from thinking about headers as styling elements is that people are sometimes tempted to skip over <h1> and use <h2> or <h3> because they’re smaller and fit what the designers want it to look like on screen. This makes as much sense as putting a title in the “subtitle” field of a book record because it looks prettier that way in the online catalog! If you put an <h2> tag in your webpage, you must have an <h1> before it. Then you can use CSS or the “style” attribute to modify the font size and looks, e.g. <h1 style=”font-size:120%”>.

Note: In the IU Libraries Content Manager, the title you enter for your webpage (the “page name”) will always be in <h1>. Each webpage should have only one <h1>, so begin your page content headers with <h2> and go down the line.

For more information on structuring webpages with headers, see the W3C’s HTML Techniques for Web Content Accessibility Guidelines. The Accessibility and Usability Guide for Penn State also offers practical advice and examples, with nods to other common pitfalls in structuring HTML documents.

EDUCAUSE goes mobile!

Thanks to Mary Popp and Courtney Greene for pointing out that current issues of both the EDUCAUSE Review and EDUCAUSE Quarterly focus on mobile technologies – including articles on mobile literacy, mobile teaching & learning, augmented reality, texting, and other good stuff.

There are a few articles not related to mobile here as well – I’d particularly like to draw your attention to a great article on why technology needs to be made accessible to visually-disabled students: “College is Hard Enough: Digital Technology Should Work for Everyone.”

Happy reading!

Accessibility Tip: Helping Dyslexic Users

Here’s a group of users we often forget about when we consider making our web pages accessible: dyslexic readers. Dyslexia is a fairly common disability, and we no doubt have quite a few folks in the IU community who live with it.

There are some easy guidelines we can follow when creating web pages that will make them easier for people with dyslexia – and for others, too – to read. Check out this very clear and helpful article from UXMovement: 6 Surprising Bad Practices That Hurt Dyslexic Users. And then read this response from someone who is actually dyslexic, outlining what actually works for them (which may not hold true for every person with dyslexia): A Dyslexic’s Thoughts on Webpages

Questions or comments about this or other web accessibility issues? We’d love to hear from you – leave a comment on this post, or get in touch with anyone from DUX!

Accessibility Tip: Using the “alt” tag

Whether you are uploading your image via the Content Manager’s image upload widget or linking it in some other way, one of the necessary HTML attributes for any image is the alt tag. The text in your alt tag is used by screen readers, so that people who access the web using this assistive technology will be able to get the information that you are conveying in your image.

Userfocus has published an absolutely terrific post outlining five different ways to use alt text, and when you should use each kind. Read it here.