This topic provides tips to help you focus on making HTML content pages more accessible to students with disabilities, particularly for those students using assistive technology such as a screen reader.
Use headings to organize content
Headings provide visual chunks to your content, but they also provide navigation for screen readers. You can't just bold regular text; it's important to apply formatted headings. You should also ensure that headings are used in the correct order - do not skip from H1 to H3. Each heading is important to the navigation and flow of the whole.
Group items with ordered and unordered lists
Having lists is a great way to help your reader navigate your content; however, it's vital to use the right kind of formatting for your purposes. Unordered (bulleted) lists indicate that your list does not have sequence; all items are of equal importance. Ordered (numbered) lists indicate a sequence. When you use a list, ensure that you are using correct list formatting (ordered or unordered). Don't use a dash (as a bullet) or a number and a period or parentheses (for example (2) or 2. ) at the beginning of a sentence or phrase - that's not a properly formatted list! Don't use lists as a layout tool for indenting.
Link to additional content
Providing well formed links enhances your content to people using assistive technology. Here are some general guidelines for using links:
- Make sure your user knows where they're going if they click a link. Saying Click Here with the trigger on the word Here isn't helpful to anyone - whether they use assistive technology or not. Use descriptive text, or the name of the page where you're sending the reader. Don't use the link URL as the link text.
- If multiple links have the same link text, they should go to the same destination.
- Users of screen readers can tab through links as a method of content skimming. Do your links make sense when not in the context of the surrounding content?
For more information, see A few tips on accessible text links video from Nomensa.
Consider the colours and effects on your pages
Avoid flashing or blinking content
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 lightning doesn’t flash more than three times in any one second period.
Use a color contrast checker
There is a built-in color checker in the Brightspace HTML editor. As you click on different font colors, the Contrast Ratio numbers will change to indicate the amount of contrast between the font color (foreground color) and the background color. In addition to calculating the contrast ratio numbers, the color checker will also indicate whether the color choices conform to the Web Content Accessibility Guidelines (WCAG).
There are three possible outcomes with regard as to whether the WCAG standards are met:
- Green check mark, indicating that AA WCAG standards are met with a minimum ratio of 4.5:1.
- Caution symbol, indicating that it is close to, but below the 4.5:1 minimum ratio.
- Red circle with white X, indicating poor contrast.
For more information, see About Brightspace Editor.
Designing tables with accessibility in mind
Tables are designed to display tabular data, but are occasionally used to provide structure and layout for web pages. Cascading style sheets (CSS) have replaced the need for table layouts. the biggest consideration when you use a table in your HTML content is whether it maintains a proper reading order so that it can be read by assistive technology.
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.1
Try the Assistive Technology
Look at your course content in the way that your learners will be looking at it.
What does your content sound like on a screen readers?
A screen reader is a computer program that produces an auditory version of the text that is available on a webpage or a computer-generated document. Commonly used screen readers are JAWS®, NVDA, Window-Eyes, and VoiceOver. You can try most of these programs for free, and I suggest you do so in order to get a feel for that user experience. There is a bit of a learning curve when getting started with a screen reader, but as you stumble through your first couple of times using a reader, you’ll likely develop some empathy for students who must rely on such technology for their access to learning.
Test your webpages using only your keyboard
Open one of your course content pages in a new window. Using only your keyboard to navigate, can you access all the features and operate all the buttons or links?
Simple content with text and images may be fairly easy to navigate; however, embedded videos, an audio player, or action buttons may present some challenges. If you find that some of your content is not easily navigable with keyboard-only access, you may need to change the content or get some technical help to make the content more accessible.
Keyboard users typically use the Tab key to navigate through the various components of a webpage. The other most commonly used keys are Enter, Spacebar, and the Arrow keys.
You can learn more about Keyboard Accessibility at WebAIM.
Know when to use PDF as your file type
While delivering content on a web page, such as in an online course, a properly made HTML page is the most accessible file format, PDF can be a good choice for document file type, if:
- The document appearance is critical and must look exactly the same across various different computing platforms.
- The document needs to be encrypted, will include things such as a watermark or a digital signature.
- You want to make it more difficult for the viewer to edit the document.
If you choose to provide a PDF to your learners, ensure that you know how to make your PDF files accessible to learners who use assistive technology.
There are two ways to create an accessible PDF:
- Converting a source file, like a PowerPoint® or a Word document to a PDF
- Scanning a hard copy of a document to PDF.
For more information, see Web Accessibility MOOC for Online Educators public content site.
Use accessible templates for your content pages
If you've read this far and you're thinking that there's a lot to consider, fear not! D2L has developed and shared HTML template packages in an effort to make it easier for course instructors to create accessible, professional looking HTML content files. The templates use a cascading style sheet (CSS) to format the content in HTML files. The accessibility features are built into the CSS file, allowing the content developer to concentrate on adding text, images, and other course resources without concern for proper formatting.
To download the accessible templates in the Brightspace Community, visit HTML Templates (Version 3). These templates are in the Public Domain and are available for you to use - for free!
Note: Content in this topic was consolidated from Four Easy Wins to Make Your HTML Content Pages More Accessible, Three More Ways to Improve Accessibility in your Brightspace Courses, and Six More Tips for Making Online Courses Accessible and has been updated from WAMOE, the Web Accessibility MOOC for Online Educators; co-created by Karen Sorensen of Portland Community College and Barry Dahl of D2L.