Thing 6 – Accessibility

Thing 6 – Accessibility

January 22, 2019 0 By JR

This week’s think is accessibility, particularly when it comes to creating web content. The 23 things site provides a list:

When creating online content always keep the following in mind:

  • Don’t only convey information through colour or an image. Ensure there are text alternatives to enable people with sight impairments to access the information.
  • Ensure that text can be resized.
  • Ensure that font and colour can be changed: on the Web this can be done through Cascading Style Sheets.
  • Avoiding using animations, and if it is necessary to use them please provide a warning.
  • Ensure that your online materials can be accessed without using a mouse.
  • Videos should be subtitled or accompanied by a transcript for those with hearing impairments and feature descriptions for those with visual impairments.
  • Use inclusive and respectful language and avoid unnecessarily using gendered terms

Creating accessible online resources has been on my mind more and more as our unit continues to develop not only individual online courses, but now entire certificate and degree pathways online. Even though there is no mandating force that requires us to create our webpages for online learning to an accessibility standard, we have been investigating what we might do to improve out courses over time. Lucky for us, JIBC posted a guideline document we plan on adopting for our context and we will use as a guide for future developments beginning this year hopefully. One other place that I’ve thought about accessibility from time to time is PPT decks. Instructors love slide decks regardless of the medium of their course delivery. Typically, I focused mostly on font size and colour contrast (you would not believe how much red over green I still see). I knew there were other things to consider, but didn’t know necessarily where to start. That’s why I’m so glad this playlist turned up in one of my feeds one day:

Another take on making presentations themselves more accessible has to do with how they are presented. Robin DeRosa shows her thought process, and how she’s changed her presentations in this 21 tweet thread, check it out:

Of course, accessibility isn’t just about the physical aspects of our world, but also social and linguistic constructs. One of the readings this week takes a look at designing forms (surveys etc) for gender diversity and inclusion. How many times have you been asked to fill out a form and were presented with a question that had radial responses that didn’t quite match how you wanted to answer (even outside of the sex or gender question)? I do like the advise that is given for creating forms and asking questions in a respectful way in the article Designing forms for gender diversity and inclusion:

  1. Give people a really good reason for asking
  2. Make it private, safe, and anonymous
  3. Always make it optional
  4. Ask for pronouns instead, if that’s all you need to know
  5. Be ready for a complicated answer
  6. Consider Internationalization
  7. Just don’t ask

Quite a few of the readings, and what I’ve come across in terms of accessibility remind me of a presentation I saw at the Art Gallery of Alberta one year, at an event hosted by MADE (Media Architecture Design Edmonton). The talk was about inclusive design, and was presented by someone from either Ryerson or OCAD in Canada, I can’t recall which now. At a time when universal design was all the rage at most speaking events I attended, it was interesting to hear about the principles of inclusive design in contrast to that. At the time, my partner was also taking a course at ualberta on integrative design which presented its own comparisons and contrasts to inclusive and universal design. My general take away from the distinctions, in the context of the form, we that UD would be about trying to list every possibility and ID more about allowing the user to determine their interaction with the medium. So for example, making it optional, providing some suggestions as radial buttons, as well as including ‘other’ fields allows the user to determine how to proceed.

Step 2 for this thing challenges us to do one of three tasks: use WAVE to evaluate a website you’ve made, check out the accessibility features on your phone, reflect on gendered experiences you’ve had using online forms. I’ve never seen this WAVE tool before so let’s give that a go. The tool just looks at one page at a time, and as our courses are built using multiple pages or posts I just grabbed one sample. I changed the filter to WCAG 2.0 AA standards. It’s got a pretty cool interface providing details as well as icons over a live version of the webpage to show you errors, alerts, features, structured elements, HTML5 and ARIA.

I think this scan will be representative of many of our courses delivered in WordPress (I didn’t do one of our typical courses as I don’t think this tool can check sites in a walled garden like Blackboard). We use a template for many of our WP courses, and this one indicates:

  • linked image missing alternative text (we were aware of this problem in many courses and are working to correct for that)
  • Missing form label – A form control does not have a corresponding label. This appears on the site search bar.
  • Empty link – a link contains no text. I actually can’t see where on the page this is referring to.
  • Orphaned form label. I can’t seem to find this either.
  • Skipped heading level. What’s neat about this interface in WAVE is that it doesn’t just tell me the error (in yellow) but also the structural elements in blue. I can see there is a spot here where we have H1, no body text, and then an H3. Good catch WAVE.
  • Redundant links. It tells me there are three links near eachother that all go to the same place, but I only see two.

Actually, I have to say I’m a little surprised it was so few problems. I tried out one of my demo sites on my personal WPMS install and that turned up a whole bunch more. I can see myself using WAVE in the future, and sharing it with the other IDs I work with.


Photo by Darius Bashar on Unsplash