Accessibility Do's and Dont's

At least 1 in 7 of your site visitors need your web content to be accessible.  You need to be taking a few extra steps to make it visible to those people. It's not a lot of extra work - ISS has built most of it into the CMS, so it happens automatically, but some things simply can't be automated. Here are the extra steps that web editors need to do, so that their public website can be read by all:

Always:

1. Use plain English, complex language can be difficult for some users, especially those with learning difficulties or reduced cognitive abilities.
   
   
2. Make sure the proper Headline order is observed.  Heading 1 should be followed by Heading 2 (not a Heading 3 or 4).
   All pages have a Heading 1 - that's the section name.
   And most content types that let you type in a headline (e.g. 'Content (Rich text)') will create a Heading 2 for you.
   If using an 'Accordion' content type, remember that you use Heading 4's to denote its collapsible segments.  So you must add a Heading 2 and a Heading 3 into the page, making sure they appear before the 'accordion' content.
   
   
3. When listing a number of items, use Bullets or Number the list.
   This, alone, makes it easier for dyslexic readers to read - but their personal screen settings can also automatically add more white-space around the list items, to increase legibility.

4. Make link information meaningful - avoid ambiguous labels such as 'Read More'.
   Instead, add detail (e.g. 'Read more about our research') so that when the link is read out (by a screen reader) out of context, it will make sense.  This is important because, just as you might scan a page for all the links, a person who is blind or a person with vision impairment or low vision can ask their screen reader  to quickly list all links on the current page.

5. Give a title to all your links - screen readers read this out.
   This should not start with "Click here to ..." or "Link to ..,". Screen readers will say 'Link' and then read out whatever is in here, so just describe the page you're linking to. E.g. 'Weather from RTE', 'Course booking form', or 'GY101 (Arts): Course information'.
   
   
6. Do not use the same name for links on the same webpage if their destination is different.
   Try not to create links on any single page that have the same name but different destinations.  Remember to check all drop-down menus, at the top of the page, as well as your side-nav.
   
   
7. Give a description to all your media library images.
   Avoid starting with "Picture of ..." or "Image of ..." because screen readers will begin by saying 'Image:' and will then read out your description text.
   You should describe what's in the image, not what it's for - e.g. use 'Student walking away, wearing a backpack' instead of 'Buy a Bag'
   
   
8. Re-edit any content types that use images to add a description.
   Many older content types have been retro-fitted with image description fields.  So the option to add a description may not have been there, when you first added it, but it is  there now - you just need to re-edit that content to put something in this field.
   
   
9. When you are deleting a link, make sure you do not just delete the text, leaving a blank link on the page.  Unlink first - then delete the text.
   
   
10. Define table column/row headers and set their scope
    
    
11. Add a title="" attribute whenever you include an iframe (such as a youTube video) to a page.
    The title should describe what the video is about - not its contents or its cover photo
    e.g. title="Accessibility Video (Youtube)"

Never:

1. Use an image that contains blocks of text - type that information into your page instead (so screen readers can read it).
   
   
2. Indent entire bullet lists - it creates invalid html, confusing screen readers (and their users).
   
   
3. Add a 'Content (Rich Text)' and then put   in the heading. 
   It's far better to have no heading (at all) than it is to have a blank one - so use a 'content (no title)' content type instead.
   
   
4. Use self-coloured headlines (possibly pasted in from Word)
   Lines that only look like headlines won't be treated as a headline by a screen reader.  This will make the page very difficult to use for a person who is blind or a person with vision impairment or low vision.
   Remember, just like you, a person with low vision will often scan a page, reading the headlines (only) before they read any detail - but they rely on their screen reader to do this.
   If you find a fake headline, there's a quick fix. Simply:
   1. Select the line
   2. Ctrl-X
   3. Turn on Paste as text (this is an option on the top line of t4's WYSIWYG editor)
   4. Ctrl-V
   5. Make it a headline.