Tips on making your playschool website accessible

The Assistance to Ontarians with Disabilities Act (AODA) is already in force, and some member centres have already addressed issues like physical access to their premises. You may be aware that the AODA also establishes some statutory requirements for how you communicate with the public —whether through signs and notices at your centre or in your communications—whether by phone, email, or websites and social media.

Website timeline: no imminent deadlines, but …

The Ontario government is using the Web Consortium Accessibility Guidelines (WCAG) as the basis for assessing how organizations comply with basic accessibility needs. You can run an online check of your website to get a general picture of how well you meet the standards at any given time. Note that some criteria cannot be checked automatically but require a subjective look at the site’s content: eg are parts of the site hard to understand if graphics have been turned off and/or aren’t visible to the user?

WCAG 2.0 has three grades, A, AA, and AAA. The government’s targets (below) may become irrelevant as technologies change, but this is the sort of thing which may be addressed in annual reviews of the Act, so it is worthwhile to keep informed in case there are changes to either targets or dates.

2014 —large organizations (over 50 employees) need any new sites which they have created to comply with WCAG 2.0 A
2017 —Any written or visual information should be made available in an alternative form on request (for what this can mean, see next section)
2021 —all websites and all organizations covered under the Act should comply with WCAG 2.0 AA.

2. Having an accessible site can help you meet other requirements

Alternatives to printed information (required by 2017; recommended now)

Smaller organizations (1—49 staff) do not yet have a requirement to have an accessible website—but you will be expected to provide accessible alternatives on request. This is already the case for prepared emergency information (see below) and will be the case for all other printed material by 1 January 2017. Either the requirement or the timeline may change on subsequent annual review.

  • Target those accessible formats which may be most needed by clients, with others to be provided within a reasonable timeframe.
  • Consult with the client (or person making an enquiry) to find out which format would best meet their needs.
  • Audio (eg an mp3 download via your website) is an easy way to add basic info in a useable format. An even simpler fix in some circumstances might be to read a printed or online document over the phone to your client, if that is what their disability requires.
  • Refusing a request for adapted information is an offence under the Ontario Human Rights Act for any size of organization. Do your best to provide some form of accessible information within a reasonable time—say 24—48 hours for a first-time enquiry, or quicker for an existing client.
  • If your online feedback processes —such as write-back forms or questionnaires—are not accessible, you should provide multiple alternatives. A guideline would be to have at least one accessible written format and at least one audio format (which could be a live phonecall or call-back).

Prepared emergency information (required now)

  • “Prepared emergency information” refers to such things as fire prevention, seasonal flu, anaphylaxis, etc. These must have accessible alternatives on request (for either staff or clients). Again, this could be met by offering the information in a recording or phonecall for those with visual or reading disabilities.
  • There is no accessibility requirement for real time emergency info, for instance during a building evacuation. Common sense in how you communicate to everyone involved is sufficient.

3. Making your website more accessible: it’s just common sense

Accessibility is not just about making adjustments to your website in order to pass a disability access test—though that is an important goal to keep in mind. Accessibility is also about making your *site easier to use for all users*—smartphone users, people with old or smaller computers, and people with conditions which we don’t think of as “disabilities”.

Your site’s overall appearance:

  1. Is the layout designed to be readable —and look good— at various screen sizes, and can it be read properly with non-visual technology (eg screen reader software for the blind)?
    • Most modern sites use stylesheets (also known as ‘cascading style sheets,’ or CSS for short). A single stylesheet might contain all the styles for different types of device—eg desktop, tablet, smartphone, print, and aural—or there may be separate stylesheets for each of these.1
    • Some older websites use layout schemes which cause problems on modern browsers and for people using assistive technology like screen readers. An example of an outdated, and non-standards-compliant, layout is one which uses grid-like tables to give the effect of a two- or three-column layout on a standard computer screen. Although they may look good on a regular desktop screen, these tables may not scale down properly, making your website nearly impossible to read on a tablet or smartphone, and making navigation very difficult for the blind or partially sighted.2 By comparison, a standards-compliant and accessible CSS layout can give desktop users a table-like experience over two, three or more columns, while giving other users a simpler single-column site—without losing any of your site’s core content.
  2. Does the colour scheme provide enough contrast between background and text colours?
    • This is an important consideration for people with weak eyes (which may include everything from chronic eye disease to late-night tiredness!) or colour-blindness. There are online tools which allow you to test individual colour combinations.
  3. Can the type size be easily increased?
    • Most browsers have a built-in zoom function, where users can press Ctrl + to increase type size (or both type and graphics). It can also be useful to have a simple Javascript font-size selector on your page itself—among other things, it shows your commitment to being accessible. Be sure that your stylesheets show type sizes in relative units—eg 100%, 120%, and so on—rather than using absolute values such as ‘16px’ or ‘12pt’.
  4. Does the entire site need an overhaul?
    • You should consider a redesign if your site is more than 5—6 years old, as standards have changed a lot over the intervening years. If you need to update your site’s content regularly—for instance, if you have a monthly online newsletter—you may want to use a content management system such as Wordpress, Drupal, or Textpattern, which are standards-compliant ‘out of the box’. Templates are easily available, and can be modified to give your site a more personal feel.
    • If you are attached to aspects of your site’s current design, it is usually possible to adapt them to fit a modern layout and/or content management system.
      • If you are using a (volunteer or commercial) web designer, make sure that they are designing with accessibility in mind, rather than for an initial visual impact.
      • You should get rid of / convert any places in your site where blocks of text have been converted to an image—such ‘text images’ can’t be decoded by screenreader software. If you use PowerPoint or a similar program to design your brochures and other print material, be careful when exporting your artwork for use on a website. It’s best to copy and save the text portions of your artwork as text rather than using PowerPoint’s “export as HTML” function, which is not good for accessible web use.
      • Ideally, if your site has a table-based layout, convert it to CSS, as this presents fewer navigation obstacles. Search “convert tables to css” for online tips and tools.

4. Good composition: making pages (and emails, newsletters, and posters) more readable for everyone

The way you compose your text — be it on a webpage, in an email, or in print— can be just as important as having an accessible overall design. Here are some suggestions on how to make your content cleaner and more readable.

  • Be careful what you emphasize. There are different tools which people use to draw attention to individual words and phrases: bold, italics, all capitals, underline, colour, indents, exclamation marks, and quote marks.
    • Keep it simple. It can be hard on the eyes—and very confusing—to read a page which contains several different types of emphasis. People with dyslexia or aphasia are particularly sensitive to excessive emphasis or an unexpected mix of different styles. Moreover, some styles—such as underlining and all-capitals — can change the expected shapes of letters.
    • Bold can be your friend, and it may be the only form of emphasis you need. If you use it for a single word or phrase, it helps the reader find the most important ideas in a longer paragraph or page. It is not a good idea to set an entire paragraph in bold, as it becomes hard to read (your eyes need plenty of whitespace to scan text effectively).
    • Italics are likewise best used for single words or phrases. They are a softer form of emphasis, and are often used to mark text which is different in some way—for instance, the title of a book or movie, or a short quote from someone. Try to avoid use bold and italic together on the same phrase: this looks particularly clunky in serif typefaces, and is generally hard to read.3
    • You wouldn’t want to receive an email which is in ALL CAPITALS—the popular term for this style of writing is ‘shouting.’ It can irritate people, just like out-loud shouting. It’s also hard to read if it goes on for more than a word or two, whether in an email or on a website. All-caps can be used in headlines, but preferably with a sans-serif face for a softer visual effect.
    • Underlining is something which comes naturally to people who learned to type on manual typewriters, where it was the only way to create emphasis. But in the computer age, underlining can cause confusion in two different ways. First, it distorts the shape of some letters, making it difficult for people with dyslexia and similar disorders. Second, both websites and email messages commonly use underlines for clickable hyperlinks. Your users are likely to be either confused, frustrated, or both if an underlined phrase is not a hyperlink.4
    • Using different colours for emphasis can make a page confused and cluttered. Be aware that your hyperlinks are normally in a distinctive colour—usually blue—and your headings and subheadings may also be in colour. This is usually all the variation that the reader may need or want in a page (if you feel your page looks flat, try adding a bright photo or graphic).
    • Indenting the whole text of important paragraphs (not just the first line) can be a good form of emphasis. Bulleted or numbered lists are also useful; be sure you use a style which also indents the list.5
  • It is not a good idea to change font families within the body of your document or email message. Your text is more readable, and looks better, if just one font is used for all your body text (with a contrasting font weight or style for headings).
    • Be very careful if pasting text into your document from Word or another program. Where possible, import it as plain text (the methods for doing this vary from system to system) and then reformat it to match the rest of the document.
  • Quote marks and exclamation marks are best used naturally, and not just as a way to punch something up. Be warned that they may look “ironic” if used incorrectly!
  • Try to organize your site so people can navigate with as few clicks as possible. If you are directing a person to an external page (eg your Facebook page) to find a link or a resource, be sure you are not sending them in an endless loop.

5. Checking your PDFs for accessibility

Most PDFs are exported from the program they were composed in—which could be a word processor like Word (later versions only) or OpenOffice, or a desktop publishing program like Quark, InDesign, or Publisher.

You can see if your PDFs are accessible (at least partly) by opening a PDF viewer program such as Adobe Reader or Apple Preview, and using your mouse to select the text. If your text shows up with line-by-line highlights, it means that the text can be easily read by a screen reading program. If it doesn’t show up, it could mean that your pages have been saved as images—not as a mixture of text and images—and are therefore unreadable by an aural screen reader.

How to fix? Look at the PDF export settings for your word processor or DTP program; if there is an option called “save as image” (or similar) make sure it is not selected.

If you have a program which can’t export PDFs —eg an older version of Word—you can easily get the free program PDFCreator sourceforge.net/projects/pdfcreator which generates PDFs through your print menu. PDFs created this way are high-quality — with all the original document’s formatting and graphics — and can be viewed or exported as plain text if necessary.

By Ken Simons, PCPC webmaster, April 2013

Notes

1 Smartphones have different needs than older cellphone browsers, due to having higher screen resolution in the same (or slightly larger) screen width. If your website has a stylesheet called ‘mobile.css’, chances are that it is intended for older phones.

2 Tables can be (and are) still used in HTML for organizing data. For instance, playschool websites often use tables to show their fees, with different rows or columns for number of days, cooperating versus noncooperating parents, and so forth. These become even more accessible if there is a summary describing the table and if there are clear headings for each column (with no blank columns).

3 The bold-italic combination is unavoidable in some situations, for instance when your headlines or subheads are normally in bold and there is one word which needs to be further emphasized.

4 Underlines are not compulsory for hyperlinks, but they are the default choice (for instance, in email messages and when stylesheets are turned off on a webpage) and are understood by most people as signifying a link.

5 This document uses different indents for different levels of bullet, creating what is called a nested list.

Share/Save/Bookmark

PCPC: Parent Co-operative Preschool Corporation
1571 Sandhurst Circle, PO Box 63512, Toronto, ON • MIV 1V0
Tel 416-410-2667 (voicemail) • E-mail info@pcpcontario.org
Social media PCPC Facebook page
Website www.pcpcontario.orgTerms and conditions

PCPC is a registered charity. You can make a donation by credit card via PayPal here.

The Co-Operators logo
We gratefully acknowledge support from the Co-Operators Group.


Printed from www.pcpcontario.org © PCPC 2005-2017.