Web Accessibility Coordinator to help make OHIO's online presence more inclusive and accessible
New login requirement coming for Faculty & Advising Center on Sep. 28, 2017
Complete a website audit in 3 simple steps
Redesigned Finance website first to go live in new Web CMS
An outline for web accessibility: Structure your content
Accessibility: The Web is for Everyone
OHIO People search gets easier for humans, harder for bots
Web CMS: Prioritized website migration list now available
2017 Blackboard Learn upgrade details
New login requirement coming for My OHIO Success Network on Apr. 18, 2017
deco-circuit-banner

An outline for web accessibility: Structure your content

Monday, July 3, 2017
from staff reports  

This is the second in a series of stories about making OHIO's websites more accessible.

You don’t have to be a code whiz to make web pages accessible. In fact, one of the most effective ways to improve accessibility doesn’t require any coding at all. It just requires you to visualize your content as an outline.

Structure is where it’s at

On a page with a lot of text, like this Compass article, it makes sense to break that text up into manageable, logical sections, each with its own headline or title. That way visitors can skip to sections that interest them most.

How headings enhance accessibility

While it’s possible to use larger font sizes and different colors to make sections stand out, assistive technologies like screen readers cannot use visual cues like bolding or font size/color to identify different parts of the page. For a screen reader to work well with your page, your content needs to use specially formatted text called headings.

Applying a heading is no more difficult than making a line of text bold or italic. Unlike bold and italic, which are purely visual, headings are hierarchical, much like the numbered and lettered sections in an outline for an academic paper. Heading 1 is the most important headline and is normally the page title. Heading 2 is for main sub-sections. If necessary, you can create further subdivisions with Heading 3, 4, 5, and 6 tags. You can have as many sub-headings (Heading 2, 3, 4, 5, and 6) as you like on a web page. Just make sure never to skip levels when descending. In other words, don't jump from Heading 2 to Heading 4 or 5. It’s also a good idea to only have a single Heading 1 per page.

Creating an outline for your content before you format and publish it is a good way to make sure everything is ordered correctly.

What about visual cues?

People sometimes use headings to make their pages more visually pleasing, but that can make content confusing for someone with a screen reader if the headings are out of order. Ideally, the various heading formats on a web page should make sense visually. Heading 1 should be the most striking, Heading 2 the next most prominent, etc. If using headings in the proper order is visually awkward on your site, then that’s something that should be addressed in your site’s overall design.

OIT and UCM are building the headings in OHIO’s new Web CMS to be both visually pleasing and logical.

Accessible content is good content

Using headings correctly helps our websites make more sense, not just for people who use assistive technologies like screen readers, but for all visitors. Having content organized in a logical order also may contribute to improved search engine results. 

--- 

The three-year long Web Content Management System (Web CMS) project will migrate approximately 200 university websites from CommonSpot to a modern Web CMS that offers improved usability, accessibility, and ease of maintenance. The new service also will make it easier to optimize web pages for search engines, making it more likely that OHIO pages will appear near the top of relevant Internet searches. Finally, the project will encourage digital marketing efforts and facilitate consistent branding across the institution.


Related Links

The Web is for Everyone