How do I format an accessible web page?

Assistive technology tools are just that–technology, pieces of software or hardware that can only work with the information they receive from a website. In order for assistive technology to work most effectively, websites need to convey information in a way that the programs can understand. This is why formatting and layout are so important. Canvas and other accessible platforms tend to handle majority of these issues, but within a page itself, there are things that developers and designers need to be responsible for.

HTML markup used to designate headings, emphasized or special text, etc.

When indicating new sections on a page or document, use headings rather than bold, underlined, or italicized text. Headings allow screen reader users to quickly navigate through a page by jumping from heading to heading. This way, they can find the section they need without having to listen to the entire page be read aloud. Canvas’s Rich Text Editor will apply the correct tags automatically when the correct options are selected.

Canvas text editor with the heading menu highlighted.

Heading tags should be applied in the appropriate order to avoid causing confusion. In Canvas, the page title is Heading 1, so the first heading level on the page itself should be Heading 2. Any sub-headings would be Heading 3, and sub-sub headings are Heading 4. Screen readers call out the heading type before reading the heading text, to help students orient themselves to the flow of information. But if a page goes from Heading 1 to Heading 2 to Heading 4, students may worry that they somehow missed information.

This rule about using appropriate HTML tags also applies to lists, both bulleted and numbered. By appropriately formatting these lists, using the ordered or unordered list buttons in the Rich Text Editor, students using screen readers will be informed that they are about to hear a list and how many items are in it. This is much better for comprehension than manually typing in 1, 2, 3 for each item.

Use white space to break up text.

Rather than writing lengthy, page-long paragraphs (often referred to online as “walls of text”), chunk your information out into smaller blocks with space between them. This makes reading easier for all students, but especially for students with learning disabilities or attention disorders. If their attention wanders from the screen, it’s much easier to start reading again from the beginning of a short paragraph, rather than having to scan through a dense block of text.

Where appropriate, tables have: data cells associated with headers, table captions, and summaries.

Tables are a popular way of organizing and sharing information. Unfortunately, screen readers are often unable to read tables in a way that is easily understandable. Consider the following example from WebAIM:

If you’re not a screen reader user, let’s pretend that you are for just a moment. You’re going to a web site to find out where the biology 205 class is going to be held. You go to a web page that has this information, and this is what you hear:

Table with 10 columns and 7 rows. Department Code, Class Number, Section, Max Enrollment, Current Enrollment, Room Number, Days, Start Time, End Time, Instructor, BIO, 100, 1, 15, 13, 5, Mon,Wed,Fri, 10:00, 11:00, Magde, 100, 2, 15, 7, 5, Tue,Thu, 11:00, 12:30, Indge, 205, 1, 15, 9, 6, Tue,Thu, 09:00, 10:30, Magde, 315, 1, 12, 3, 6, Mon,Wed,Fri, 13:00, 14:00, Indge, BUS, 150, 1, 15, 15, 13, Mon,Wed,Fri, 09:00, 10:00, Roberts, 210, 1, 10, 9, 13, Mon,Wed,Fri, 08:00, 09:00, Rasid.

After listening to this information, do you have any idea where biology 205 is supposed to be held? Probably not.

It is completely possible to make accessible tables, but it requires some additional work in the form of coding and HTML tags. This work can and should be done, but it is important to keep those extra steps in mind when planning course assets. For things like course schedules and grading information, it may be worthwhile to consider alternate methods of presenting the information.

The reading and navigation order, the order of links, and the order of form elements are logical and intuitive.

Sighted users are able to take in an entire webpage in a glance, quickly understanding the arrangement of the page elements. Screen reader users, however, must hear all content in a linear fashion, read out one after the other. For this reason, it is important to consider the way in which headings and links are arranged on the page. Is there a logical flow from one to the next? Would someone skimming only the headings, for example, be able to understand the progression of information throughout the page? Consider the big-picture view of the page as a whole when designing it in order to create a logical presentation.