4.2 – HTML Pages – Part 2

Continuing from the previous page…

Check the following elements and ensure they are accessible

Tables

HTML tables were designed for tabular data, but they have been and still are occasionally used to structure and layout web pages. These days CSS (Cascading Style Sheets) has replaced the need for table layouts, but you will still occasionally run across them or even need to use one now and again. They aren’t terrible in terms of accessibility as long as they maintain a proper reading order. See the “Ensure a Proper Reading Order” section below.

Create data tables with column headers

Designating column and/or row headers in a table is essential to screen reader users understanding how information is laid out. Screen readers usually have a keyboard command that will inform the user what the column and/or row header is for the data cell their cursor is in, making it easier to navigate and understand the tabular data. Even still, tabular data can be daunting to a screen reader user. So it is best to keep tables small if possible. Consider breaking large tables into smaller ones. But always include column and/or row headers on all tables except layout tables.

Here are D2L specific instructions for creating table headers. If you work within a Learning Management System (LMS) or Content Management System (CMS), there will be similar tools. Check your LMS or CMS support information for specific steps.

Ensure a proper reading order in tables

Screen readers read tables from left to right, top to bottom, one cell at a time (no repeats). If cells are split or merged, the reading order can be thrown off.

Read your table left to right, top to bottom (never repeating a cell). Does it make sense? A screen reader reads tables in this way.

Merged, nested, and split cells change the reading order of tables. Make sure you construct your table in a way that accommodates a good reading order.

See these examples of good and bad data table layouts and then watch these videos on how a screen reader reads a table:

Color

Don’t use color alone to convey meaning

Don’t use color alone to make a distinction, a comparison or to set something off or apart from the rest of the web page. If you categorize something by color alone, those who are color blind or blind will not benefit from the color distinction.

Use sufficient color contrast

If you print your color graphic on a black and white printer, would it be understandable? Without sufficient color contrast, people who are color blind will not be able to benefit from the information.

D2L course developers should check their color contrast with D2L’s color tool

For a stand-alone tool that can test things in many applications (not just D2L), try the Colour Contrast Analyzer Tool.

Flashing/Blinking Content

Eliminate flashing or blinking content, or limit to three FLASHES per second

Any flashing/blinking content (especially content in red) can cause seizures in people with photosensitive epilepsy as well as other photosensitive seizure disorders, so it should be limited and used only when necessary. Web pages that do contain flashing content, should limit the flashing to no more than three flashes per second and not use fully saturated reds in the content. If you do have content that flashes/blinks more than three times per second, freeze the blinking content momentarily so it falls below the three times per second limit. If you have a web video with a scene involving very bright lightning flashes (or other scenes with flashes), edit the video so the lightening doesn’t flash more than three times in any one second period.

 

<< 4.1 – HTML Pages – Part 1                4.3 – Creating Content in D2L >>

Attribution to Portland Community College and D2L Corporation

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s