Presentation: Making Accessible Content Easy and Part of Your Work

This was originally presented as an online workshop for the Center for Instructional Development & Distance Education, University of Pittsburgh on February 5, 2015. If you’re familiar with my presentations, everything up to and including the introduction to universal design is quite similar to my past presentations (especially the most recent one). However, after that, this presentation focuses solely on creating content, both online (such as using WordPress) and using software (such as Microsoft Word). As you can imagine, this presentation was geared towards non-technical users, going into much more detail on content guidelines than in any of my other presentations, and for UPitt faculty and staff.

Slides

Slides on GitHub

What is Web Accessibility?

We’re here today to talk about accessibility, but what is web accessibility?

One definition, and what seems to be the most common one is that

Web accessibility means that people with disabilities can use the Web. – W3C Web Accessibility Initiative (WAI)

Having established that, we might look at defining a disability. That’s actually a really hard task, but we can look at the different types of disabilities.

Types of Disabilities

  • visual: other than blindness, this might also refer to people who have difficulty with judging distances and hand-eye coordination
  • auditory: other than deafness, this might also refer to other hearing issues, such as having difficulty focusing on a single voice
  • physical/motor: examples include not being able to grip something or problems with precise movements
  • touch: namely this refers to a lack of sensation with touch
  • learning: is a rather large umbrella term, but includes dyslexia and other reading disabilities, as well as dysphasia and related issues with writing

Why Should You Care?

Numbers

People with a disability are a minority, and not all of them need special consideration for web accessibility, right? While that may be true, you might be surprised by some of the facts.

According to the last US Census in 2010, 16.6% (29.5 mill) of adults (21-64) had a disability.

The number of people with a disability is larger than any one group of ethnic or visible minority in this country.

That’s a Big Minority

Policy & Legislation

IIn the US, there are two Acts to consider.
The Rehabilitation Act of 1973, includes this clause in Section 504

“No otherwise qualified individual with a disability shall […] be excluded from […] any program or activity receiving Federal financial assistance”.
The Americans with Disabilities Act provides civil rights to people with disabilities much like the Civil Rights Act would apply based on race or religion.

Many states, grants, and programs also have their own policies that may be similar or extend the list of requirements.

For more information on how these policies apply at your university, check the Disabilities Resources and Services policies, which includes rights and responsibilities, as well as grievance procedures

And, while you might be convinced, but what about others?

Getting Buy-in

People frequently ask me how to get buy-in from others, because they might be convinced that we should care about accessibility and do something about it, but too often, accessibility is put aside because it’s too difficult, time consuming, or due to a belief that “accessible websites are ugly.”

On a side note, this last excuse is not true. I mean yes, some accessible websites are ugly, but in the same way that some websites are ugly regardless of the level of accessibility. If anything, the most accessible websites I’ve reviewed have been fairly pleasing to the eye.

Just check out gov.uk

There are numerous reasons you can present as benefits for putting into practice the methodologies presented, including that they:

  • reflect institutional mission, leadership, and values, – After all, accessibility is built right into your policies.
  • serve all users, – not just those with disabilities, and I’ll talk more about this
  • make sound fiscal policy, – since it improves efficiency and reduces costs while maintaining quality, avoids retrofitting, avoids inequitable solutions, avoids litigation; frequently fulfills grant/contract requirements – and
  • add value to the institution. – because you have better content, it benefits more people (e.g. captions help people with varying language skills), is easier to maintain and update, and has higher compatibility with various software and hardware.

Which boils down to being more:

  • findable
  • accessible
  • usable
  • shareable
  • efficient
  • collaborative

Of course, knowing why doesn’t tell you how to approach accessibility

Approach to Accessibility

Whether you want to, or because you’re told to, half the battle seems to simply be figuring out your approach.

If, like many others, you see accessibility as something at the end of a checklist, then that’s when you’ll deal with it.

“Accessibility often gets pigeon-holed as simply making sure there are no barriers to access for screen readers or other assistive technology, without regard to usability” – Whitney Quesenbery @whitneyq

Just because something is accessible does not mean it’s usable, but first…

Designing for Assistive Technology

Let’s take a look at her point on “assistive technology”.

Say as part of your approach, you want to make sure your content is accessible to all assistive technology. You start with ‘screen readers’ on your list, and do some searching and start adding, other ‘text-to-speech’ software, ‘screen magnifiers’, ‘joysticks’, what about ‘mobile devices’ with the added accessibility features? What about ‘keyboards’ for keyboard accessibility?

Is there anyone who doesn’t use a keyboard or touch screen regularly?

At this point, you might realize that

“All Technology is Assistive Technology.” – Sara Hendren @ablerism

We are not creating content for a specific piece of technology, we can’t. There are too many potential devices and ways people are using devices to do that. We aren’t even necessarily creating content for people, because…

“There is no average or normal user.” – Sara Hendren @ablerism
We are creating for potential situations, because conditions including physical or environmental ones can be temporary.

So how do you create content to fit assistive technology, if that includes all technology and situations? You don’t.

Universal Design

What we need to do is change the way we think about accessibility, and move towards universal design.

“Universal design is the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.” -Ron Mace

The term, Universal Design, was originally coined by the architect, Ronald Mace, so the principles tend to be based on physical space but can be summarized with these key words:

  • equitable
  • flexible
  • simple
  • intuitive
  • low effort
  • approachable
  • usable

Example

One of the most well-known examples is the wheelchair ramp.

Here’s a thought exercise, which I’ll give you a few moments to think about. Other than wheelchair users, what groups of people might need to use a ramp like this?

Other than wheelchair users, there are many others that find ramps useful or even necessary, such as:

  • parents with strollers,
  • seniors with mobility walkers, and
  • anything else with wheels.

Many places now call it an “access ramp” or just “ramp” to reflect its greater, universal application.

So the goal here is to make your web content accessible and usable for your whole audience, without trying to specifically accommodate for one group. Hopefully, as I go through some guidelines and suggestions, it will occur to you what groups of people might benefit other than people with disabilities.

Content Guidelines

Regardless of whether you’re creating your content in an online system, such as Blackboard, or document editing software, such as Microsoft Word, there are a few simple guidelines you can follow to make your content more accessible.

General Writing

Let’s start with some general writing tips.

  • use consistent language
  • write out acronyms the first time you use them
  • clear and concise

That’s it. Well, okay, not really, but those really are the only ones that are specific to writing style or the use of words. All the other guidelines I will cover are more about structuring or marking up content.

Headings

Imagine you’re writing a report. Think about how you would structure the headings. You’d have your title as a header 1, your various topics as header 2, and any subtopics as header 3. You might even have header 4, 5 or 6 depending on how much you break down each topic. Now apply that thinking to how you structure content on a web page.

  • Header 1 (Title): Making Content Accessible
  • Header 2 (Topic): Creating Documents
  • Header 3 (Subtopic): Using Headers
  • Header 2 (Topic): Creating Media

Issues will arise if you rely on font size or bold instead of headers, or if you use the wrong header level.

Selecting a header is very simple. In Word 2007 or newer, you have a very prominent section of the Home tab in the ribbon. In other software or online editors, usually it is a dropdown. Many programs even have keyboard shortcuts to assign header styles.

If you don’t like the look of a header, then change the style of the header for the entire document.

In most document editing programs, you can right click to get a menu that allows you to select “modify”, whereby you modify the style for the entire document. If you already made the changes you want to a part of your text, you can use the “update style to match selection” option, then everything with that particular style will change to match the text you selected.

Unfortunately, you don’t have much choice in the looks when you’re using an editor inside of an online system, but keep in mind that it helps to make web content consistent across the university.

Font Face, Size, & Colour

When editing your styles, keep in mind that you want to use an easy to use sans-serif font, such as Arial or Verdana. There are of course many others to choose from.

A serif is a small line attached to the end of a stroke in a letter (“Serif”, Wikipedia.), which is what you see circled in the top example. Serifs come in different styles: round, straight edged; but are basically small decorative pieces. Sans-serif fonts do not have serifs, which can frequently make them easier to read.

Next is font size. 12 point or higher is recommended for the body text. For headers, you will simply want to increase it relative to your body text. So if you use a 12 pt body text size, header 3 might be 14 pt, header 2 16 pt, and header 1 18pt. 2 pts is a small gap though, and the bigger the difference, the easier it is to spot the differences between headers when reading text. Consider using bold and italics to differentiate headers too.

For font colour, I recommend black since the background will pretty much always be white. I do say default is another choice, because in some cases, such as links, you may want to leave it as the standard blue colour. The most important thing is that there is a high contrast between the background and your chosen colours. I’ll talk about how to check colour contrast later.

Tables

Tables should only be used for information and data that should be presented in a tabular format. Meaning that you should not use tables for layout purposes. If for example, you need your content in columns, use the columns function.

Make proper use of header columns and/or rows.

If your table is quite complex, provide a summary.

When creating tables in document applications, use the table creation tool and ensure tables have headers assigned. If you export to PDF or paste the table into an online editor, you may need to further edit a table to make it properly accessible.

Basic HTML Table

Just to give you an idea of how it works in HTML, tables have four main elements. The table tag tells the browser this is a table. TR says this is a table row, TH that it is a table cell that is also a table header, and finally, TD which says it is a table cell. You may see the use of other tags within a table, which are necessary for more complex tables, but we will stick with a basic example here.

So a basic table might look something like this. We start with an opening table tag, then the first row. Inside the first row, we have a row header followed by the data. Similarly, in the second row, we specify our row header and data, and then we would have more rows similar to this to list all the headers and data. Finally, we close the table at the end.

Please note that this is the structure when the table headers are all in the leftmost column. If you have column headers all in the top row, then the headers would all be listed in the first row instead.

Links

Links, such a common thing, so it’s simple, but important.

The text for every link should be descriptive and generally, unique within a single page. Imagine there was no other text around it except the title of the page, would you understand what that link is for? If you can’t do it yourself, don’t expect others to.

Math

Just a quick note here. If you ever deal with equations, especially in mathematics, simple arithmetic can be done by typing it out and making sure there are spaces between the numbers and symbols. Otherwise, for more anything more complex, you will want to use MathML.

Media

Images

When you include images, you also need to include alternate or alt text, which allows you to include descriptive information about the image. While the text is not visible to most users, assistive technologies will read the alternate text as a description of the image, so write concisely, while still providing an accurate description of the image.

The important point is that your description should be what the image is trying to convey. A picture of a red panda in an English class might describe facial expression and possible emotion, but that same picture in a Biology class might focus on size and coat colour to determine age, gender, or health.

In Word, you would right click on the image, then choose to “Format picture”. Then, in the alt text section, you would fill in the description. You can include a very brief description in the title field, but WebAIM suggests it as being optional.

Many online systems will have a field box for you to enter the alt text when you are inserting the image rather than having to do it afterwards.

Alternatively, you can give your image a descriptive caption, which everyone will see, in which case, you can leave the alt text blank.

Similarly, if your image has been included for purely decorative purposes or is itself an alternate to a textual explanation, you should leave the alternate text empty.

If you need to use colours for figures, such as graphs, consider very different, high contrast colours. You can also use a mix of colour and patterns. Just imagine if you printed your document using a black and white printer. Would you still be able to properly understand your coloured figures? Try to also have the data in table format if possible.

Also, avoid creating images of text if possible.

Audio & Video

All non-text content, including audio and visual materials should have an alternate, usually text version.

The suggested method for audio is a text transcript. For video, captions are recommended.

In general, text transcripts and captions are also very useful for non-auditory learners and for those whose English is not their first language. Using these two methods should cover your whole audience.

There is also the option of descriptive audio. For those who are not familiar with descriptive audio, it is an additional audio track that is added to a video to describe what is happening. Here is an example:

While descriptive audio is ideal for visually impaired people watching videos, it is generally very costly to make, so it is not usually offered unless it has already been produced.

Alternatively, sometime you will find the description included in the transcript or an alternate version of the captions. You would then simply have two options for captions for people to choose from: one with and one without descriptions.

Much like images, if the audio/video is actually an alternate to text, such as in a tutorial where an explanation is already fully explained in text form, then no alternative is required.

Also make sure that your audio and video do not autoplay. Anything longer than 3 seconds should also have controls to pause and play. However, these should be built into the system you are using for the most part.

Avoid animations, flashing, or very fast changes. Anything that flashes 3 times in any one second period can cause epileptic reactions.

If you would like to learn more about captions and transcripts, Penn State’s
Video Captions and Audio Transcripts Guide is a good place to start.

Media Summary

So, to summarize, alt text for images, transcripts for audio, and transcripts or captions for video or video with a descriptive audio track if it happens to be available.

Creating Documents

One of the most common difficulties with documents is how accessible they are.

When in an online environment, if you can put the information online in text format, that is a lot better than having people open a separate document. This allows people to avoid having another program open.

Many systems even have a “Paste from Word” option, which will keep much of the formatting when copying from Word, but remove all the extra invisible code that is specific to Word that may cause problems viewing or editing content. In some editors, such as WordPress, there is no special paste from Word button but will do the same process automatically.

If you have to post documents, consider following the same guidelines we have covered before posting.

For lecture notes, it’s a good idea to post the PowerPoint with notes in the notes sections.

Assessing Accessibility of Content

After creating your content, you will want to check whether it’s accessible. Luckily, many of the authoring tools we use come with accessibility checkers built-in.

Checking Accessibility in Microsoft Office

In Word, under the File tab, there is an option to “Check Accessibility”. The program will check the accessibility of your document, such as whether you have filled in alt text for images, and walk you through correcting possible issues.

PowerPoint has the same functionality built in as well.

PDF Accessibility

The best way to ensure the accessibility of a PDF you create is to follow the guidelines for creating documents and exporting to PDF. If you have the Adobe plugin, it is best to use that option, otherwise, the built-in “Save as” or “Export” to PDF will work. For more details on what settings to use when exporting, check out the WebAIM Converting Documents to PDF article.

Adobe Acrobat also has an accessibility checker, and a “Make Accessible” wizard, which will help automate part of the process and guide you through fixing any issue.

Basic PDF Text-Readability

What about the cases where you didn’t make the PDF? You might be posting someone else’s document, such as a copy of a journal article. While you can use the “Accessibility Checker” in Adobe Acrobat if you have it, it can be a lot of work to edit the PDF. You may also be in a situation where you do not have Acrobat handy.

At the most basic, check that the PDF is text-readable. The easiest way to check is to try selecting text and copy/pasting it elsewhere. Did you get text? Is the text understandable? If the answer is no, the PDF should be run through OCR. Acrobat has this feature built-in, but there are many other options.

You will still want to have the DRS improve the accessibility of the PDF beyond basic text readability, but if someone needs the document right away and it’s short, it might be enough.

Online Assessment Tools

There are numerous tools to help you check online content. Just a couple of examples, include:

  • WAVE – online web accessibility evaluation tool, of which there is a Firefox plugin version. The online tool allows you to give it a webpage address, but the advantage of the browser plugin is that it can give you different views of the webpage you’re looking at, including pages where you need a login. The views include seeing text-only, or outline view, showing only headers.
  • Color Filter – will simulate what a webpage looks like to people with different types of colourblindness
  • Vischeck – allows image upload or a web address to simulate colour blindness for a particular image.
  • Color Contrast Checker – check the contrast ratio between your text and the background colour on a webpage.
  • W3C Web Accessibility Tools list – for more, including screen emulators, and more code-based accessibility checkers

Need Help? Just Ask

If you’re not sure or stuck on making your content accessible, contact the disability resources and services (DRS). Along with policies, and process, one of their services is to help make accessible versions of documents, books, and other material. The CIDDE along with support, and resources, also offers help with captioning media.

Resources

Accessibility Statement

You’ve made the effort to create accessible content, but what if you forgot something?

One of the great ways to be transparent and show your efforts in supporting equitable access is to have an accessibility statement.

It doesn’t need to be long, but simply a statement to say you’ve made the effort and how to contact you if someone has any concerns.

The CIDDE recommends faculty to put this statement on their course syllabi.

“If you have a disability for which you are or may be requesting an accommodation, you are encouraged to contact both your instructor and Disability Resources and Services (DRS), 140 William Pitt Union, (412) 648-7890, drsrecep@pitt.edu, (412)228-5347 for P3 ASL users, as early as possible in the term. DRS will verify your disability and determine reasonable accommodations for this course.” – CIDDE

If you want to include something on a department or individual website, you can always post a modified version of this. You can, of course, also include more details about what people can expect or not.

It’s really up to you what you include in the statement and how detailed it is. For ideas and examples, check out:
* University of Toronto Accessibility Statement
* University of Oxford Accessibility Statement
* North Carolina State University Accessibility Statement

Take Away

Alright, I know that was a lot of information, so if you missed any of that, don’t worry, my slides will be posted and the recording will be available for you to review.

Hopefully you have enough resources now to make your online content accessible. If you’re stuck, remember, just ask those around you, or ask questions of disability services, CIDDE, or technology support staff. You’re not alone in dealing with these issues or in supporting students.

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” -Tim Berners-Lee @timbernerslee

If you only take away one thing from today, remember that your efforts in making your content accessible can help many others, not just those that are disabled.

So, let’s create content that everyone can use.

Thank you.