This guide is designed to cover the best way to design and create content on web sites, so that it is accessible to everyone. This guide aims to outline the top tips on how to create engaging and well-structured webpages, ensure video and audio content are accessible and that all web content is usable and accessible for all.
It is important to use significant contrast between the background of your slide and the font color. This will make it easier for those who are color blind or who have low vision to read your slides.
If you are trying to convey information through the use of color, it is important to convey it in another way.
There are a number of web pages, such as National Eye Institute and WebAIM, that have helpful guidance and tips relating to colour contrast and ensuring that webpages are easily accessible to a wider audience.
Take caution when copying & pasting content from any source. Many times hidden style code will also be copied along that could break with best practices and introduce inaccessible content.
There are a few ways to avoid hidden style code from being placed into your guide. The rich text editor has a few useful tools to use. 
This button will show a popup box that will strip out all text formatting and leave behind plain text. Best for simple text.
This button will show a popup box that will keep a lot of the original formatting from the Word document source. This is also the default behavior when pasting directly into the rich text editor. This does not follow best practices so try not to use this feature unless you plan to go through the source and clean up the formatting by hand!
This button will remove all formatting from selected text inside the rich text editor. This will generally solve strange formatting issues you may find from copied text. This button will also remove hard-coded widths from tables that may overflow your guide.
Here is an example default 2x2 table with a header created within the rich text editor.
| Header A | Header B |
|---|---|
| cell A1 | cell B1 |
| cell A2 | cell B2 |
Use rich text Headings as indicators for sections and sub-sections in your guide. This not only provides heirarchical organization and formatting but also makes it easy for screen readers to scan and jump to different content areas.
Never use Heading 1 (<h1> tag in HTML) in your guide as this should only be used once for the entire page.Iorad – helps to build and share tutorials for any desktop/web application instantly. It can be added as a Chrome extension.
How does it work?
First, go to Iorad.com and create your account for free. You can also go to Chrome Webstore and install the Iorad Chrome extension. Once installed, click the Iorad button:
A small window will pop out – click ‘Capture Your Tutorial’ and follow the instructions – creating a tutorial will take you just a few moments. When finished, click ‘Done’ and then you will be able to preview and edit your tutorial. Iorad has already broken the process into steps and automatically adds written instructions that you can check and change if needed.
Once you have completed previewing and editing your tutorial, you can share your tutorial. There are a few ways ofdoing it – please see the left side of the screen:
Provide appropriate document structure - headings, lists and other structural elements provide meaning and structure to web pages. They can also facilitate keyboard navigation within the page.
Ensure links make sense out of context - every link should make sense if the link text is read by itself. Screen reader users may choose to read only the links on a webpage. Certain phrases like "click here" and "more" must be avoided.
