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.

[A] 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.

[A] 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.

[A] The reading and navigation order is logical and intuitive. and [A] The navigation order of links, form elements, etc. is 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.