Web Accessibility

Document Structure
How many times have you accessed a website and then scrolled up and down looking for some kind of structure to the site? You might have looked for words or phrases that have a bigger font, underlined text, or bold style to give you some indication of what is important. Now, think for a moment: if you have low vision or are blind would you see the same thing?

Of course not, but a screen reader can use the document’s structure to inform users of the major sections of a webpage or give them an idea of what is on the page without having to read it from top to bottom.

It is very useful, but without some form of structure to the electronic document, the screen reader will simply read from the top of the page to the bottom. Screen readers utilize structure elements within the underlying HTML (Hyper Text Markup Language) which makes it easier for users to navigate the web. A good starting point for structuring a webpage can begin with the HTML element called the header (individual components of HTML are referred to as elements).

Proper heading structure in HTML code uses up to six elements in a hierarchical manner with first degree heading as the most important, then second degree and so on. Each degree also has a larger font than the next, so that:

<h1> Heading is this big

<h2> Heading is this big

<h3> Heading is this big

<h4> Heading is this big

<h5> Heading is this big

<h6> Heading is this big

With proper heading structure, a screen reader can provide effective navigation. The user will have several navigation options, such as the ability to view all headings on one page, navigate from one heading to the next, or navigate headings based on degrees (as explained earlier, the user can navigate <h1> headings only, or <h2>, and so on).

However, when structuring a page, formatting such as size or emphasis to the heading element should not be added. Screen readers rely on the literal code of the page to determine structure Therefore, items that have visual formatting attached may not be identified as structural elements by a screen reader.

By the same token, the heading element should not be used to achieve a visual style. Although an <h1> heading element is bigger in size than other fonts, its basic responsibility is for structural rather than visual purposes.

A few other structural suggestions:

Paragraph elements are similar to heading elements in that screen reader users can jump from one paragraph to the next as long as each paragraph is surrounded by <p> elements.

A “Skip Navigation” link is a link that directs the user past navigation links, sub-links, and company logos and takes them directly to the main content of the page.

Lists should be used as intended. Ordered lists (<ol>) convey an order of sequence or importance, and are represented by numbers, letters, or Roman numerals. Unordered lists (<ul>) convey no particular order and are preceded by a bullet symbol (open or filled).

There is much more to say about structuring a web page to be compatible with screen readers, but hopefully this will be a good starting point. Stay tuned to this blog for more information and helpful tips on web accessibility.

David Spears is a member of the Workforce Solutions Navigator team for the Texas Gulf Coast Region. Combining training and education to real world examples, David brings personal and professional experience with disabilities to the table in order to help job seekers with disabilities realize their potential. David has a Bachelor’s of Science degree in Business Administration with over 20 years of experience in the business world.