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 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.
   
   Note: You can easily see what headings are on a page with our 'Show Headlines' bookmarklet. This will work on your published pages and also in the T4 preview window. 
   
   
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 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. ✔ 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 'Students walking away in a busy outdoor area, on-campus, wearing University-branded backpacks' instead of 'Buy a Bag'
   
   
7. ✔ 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.
   
   
8. ✔ When you are deleting a link, make sure you do not just delete the text, leaving a blank link on the page.  The safest way to remove a link is to do the following: Unlink first - then delete the text.
   
   
9. ✔ Define table column/row headers correctly.  This is automatic in the current version of t4 but if you created a table in version 7, make sure it's correct by opening 'cell properties' for each of your header cells' and ensuring that:
   (a) the Cell Type is set to 'Header Cell'.
   (b) the Scope is set to 'Column' (if the header is on the first row)
         or the Scope is set to 'Row' (if the header is on the first column).
   Remember to do this for every header cell on the table.
   
   
10. ✔ 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. ❌ Never use an image that contains blocks of text - type that information into your page instead (so screen readers can read it).
   
   
2. ❌ Never indent bullet lists - it creates invalid html, confusing screen readers (and their users).
   
   
3. ❌ Never create links on any single page that have the same clickable text but different destinations.  Remember to check all the drop-down menus, at the top of the page, as well as your side-nav, to be sure your link's clickable text is not in use already.
   
   
4. ❌ Never add a content type that expects a title - e.g. "Content (Rich Text)" - and then put a non-breaking space (i.e. a special HTML character sequence that adds a space) in the title field.
   It's far better to have no heading (at all) than it is to have a blank one - so, in this case, you should use the "Content (no title)" content type instead.
   
   
5. ❌ Never 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 anyone who relies on assistive software.
   Remember, just like you, someone 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. Choose 'Edit' - 'Paste as text' (in t4's WYSIWYG editor)
   4. Ctrl-V
   5. Make it a headline (by choosing 'Format' - 'Blocks' - 'Heading X', in t4's WYSIWYG editor).