Introduction
Inclusion Code is an accessible editor that allows you to easily create HTML contents or Markdown documents. Once in the editor, you can either write the corresponding codes manually, or use the Insert Menu to generate them automatically.
The Inclusion Code interface is a simple one with menu bars, which uses the standard Windows controls, making it accessible to screen reader programs and braille displays used by blind people.
Starting screen
When Inclusion Code starts, a window will appear with several options that we can select to open the editor. They are:
- HTML
- Markdown
- Exit
If HTML is selected, the editor will open in a blank screen, where you can start inserting the HTML tags codes.
If Markdown is selected, the editor will open in a blank screen, where you can start creating a document using Markdown markup tags.
Selecting Exit will exit the program.
HTML Editor Mode
This documentation is the help for the HTML editor option, there is also other help available with the documentation for the Markdown editor.
The HTML editor mode in Inclusion Code makes easier the web content creation process by automating HTML tags. The user selects the desired element from the Insert Menu and the program will generate the corresponding tags and copy them into the editor. So content can be created in a very short time, without necessarily having to know HTML.
Also, since the tags can be generated automatically allows the user to learn HTML coding. When you learn HTML, you can create pages on the Internet as well as format content to publish them on the web. Although today there are many tools that allow you to create web pages without having to know HTML programming, such as Microsoft Word, these HTML codes are not clean.
Web accessibility
Inclusion Code promotes the creation of websites that follow the accessibility guidelines of both the w3c WCAG (International) and the Section 508 (United States).
The tool can be used by a blind person to show webmasters and web programmers, how to use the accessibility guidelines. For example, when an image is added from the Insert, Image menu, once the image is selected, the program will request for a text description. This lets explain the use of alternative texts is required as a priority in the accessibility guidelines.
Important note when integrating audios, images and videos
When an audio, image or video is added from the Insert menu, the program will automatically generate the necessary code with the respective HTML tags.
However, this code will assign a specific directory by default. For example, / audio for audio content, / image for image and graphic content and / video for video content.
Therefore, all these multimedia files are required to be stored in the corresponding folders in the initial Inclusion Code folder. This is due to the fact that if you are interested in uploading the contents to a server, using FTP, these contents can be loaded correctly, since they will be in the corresponding directory generated by the program.
If the files are not saved in these folders, they cannot be presented on the website.
Recommended use
We recommend using the HTML editor mode in Inclusion Code to:
- As a HTML programming learning tool.
- To quickly create HTML content and copy and paste it into web publishing tools such as Wordpress, among others.
- To create simple web pages.
- To demostrate accessible HTML best practice coding to webmasters and web programmers.
HTML editor features
- The program can generate HTML tags automatically for the element selected from the Insert Menu, copying them into the editor.
- You can preview the HTML codes in the web browser from within the program.
- Reading aloud the HTML codes in the editor as well as the menus selections and program messages. The user can select any of the SAPI5 voices available in Windows.
- Sound effects for various program events.
- Select the font type and size to use in the editor.
- Select high contrast colors for background and editor texts.
- All program options can be used by keyboard commands.
- Menus of the program available in English or Spanish.
Program compatibility
Inclusion Code is compatible with the following Windows versions:
10/8/7 and with both 32 and 64 bit architectures.
Also, Inclusion Code does not require installation, since it is a self-executing program, ideal to have it on a portable USB flash drive, and use it on any Windows computer.
Menus and keyboard commands
List of all program menus, with their keyboard shortcut and a brief description.
File Menu
New
Clear the editor for a new HTML file.
Alt + f, n
Open
Open a previously saved HTML file. The same will be loaded in the editor. Important: The Inclusion Code editor supports files with ANSI encoding. To open a document with UTF-8 encoding, it must be done from the Import UTF-8 option.
Alt + f, o
Save
It will save the file that is currently in the editor and that had already been previously saved. It will be saved with the same name. Important: The Inclusion Code editor saves files in ANSI encoding. To save a document with UTF-8 encoding it must be done from the Export UTF-8 option.
Alt + f, s
Save As
Save the current HTML file, allowing filename selection. Important: The Inclusion Code editor saves files in ANSI encoding. To save a document with UTF-8 encoding it must be done from the Export UTF-8 option.
Alt + f, a
Import UTF-8
A previously saved HTML file with UTF-8 encoding will open. The same will be loaded in the editor. Important: the Inclusion Code editor will convert the texts as ANSI. To save them again as UTF-8, you must go to the Export UTF-8 option. Alt + f, i
Export to Notepad (UTF-8)
Save the current HTML file in Notepad as an UTF-8 encoding. Alt + f, e
Print a hard copy of the current HTML code which is in the editor. Alt + f, p
Exit editor
Exit the editor and return to the main menu.
Alt + f, x
Edit Menu
Undo
Undo the last action.
Alt + e, u
Cut
Remove the current selection and copy it to the clipboard.
Alt + e, c
Copy
Copy the current selection to the clipboard.
Alt + e, o
Paste
Paste the contents of the clipboard at the current caret position.
Alt + e, p
Delete
Delete the selected text.
Alt + e, l
Select All
Select and highlight all text.
Alt + e, s
Find/Replace
Find instance of text and replace it with designated new text.
Alt + e, f
Find Next
Find the next instance of the text designated.
Alt + e, n
Insert menu
General HTML tags
It will present a window with a list of several basic HTML tags. It must be moved with the down arrow or up arrow, and pressing Enter will insert the code in the current cursor position in the editor. If the label requires that texts be written, a window will appear with an edit box and once the texts have been written, the Enter key must be pressed for integration into the editor.
Alt + i, g
The basic tags that can be selected are:
- Paragraph
- Link
- Heading 1
- Heading 2
- Heading 4
- Heading 5
- Heading 6
- New line
- Horizontal line
- Strong
- Emphasis
- Comment
Image
A file browser window will open where you can select a file in .jpg, .gif or .png format. Once selected, a window will appear with an edit box where you must write the text description of that image that is the equivalent of the ALT attribute. This text description is accessible to blind person with their screen reader programs.
Alt + i, i
List
A window is presented where the type of list must be selected, then another window will appear to select the number of items and finally the windows will appear with edit boxes to write the items in the list.
Alt + i, l
Audio
A file browser window will open where you can select a file in .mp3 format. Once selected, the HTML codes of an audio player that includes buttons for playback, pause, volume up and volume will be automatically generated.
Alt + i, a
Video
A file browser window will open where you can select a file in .mp4 format. Once selected, the HTML codes of a video player that includes buttons to play and stop will be automatically generated, in addition to a selector of the percentage of the video played.
Alt + i, v
Global HTML structure
Codes with the html, head and body sections will be integrated in the editor.
Alt + i, h
Code menu
Preview in browser
Show the HTML codes as a web page, on the default Internet browser.
Alt + c, b
Document info
A window will appear with the information on the number of lines, characters and words of the texts in the editor.
Alt + c, i
Read editor text
Read the current editor content with the system default text to speech engine.
Alt + c, r
Stop reading
Stop the actual text to speech audio feedback.
Alt + c, s
Settings menu
Language
Select between English or Spanish language for the menus of the program. The software will restart, so the new language can take effect. Also, verify that the actual SAPI5 text to speech voice, is in the same language of the menus. Alt + o, l
Font
Select the desired font face, size and style. All text in the editor will appear in this font.
Alt + o, f
Color contrast
High contrast colors combinations (black background and white letters) can be selected for use in the editor.
Alt + o, c
Sounds
Use sound effects on options windows and code selected from the menus.
Alt + o, s
Text to speech preferences
Choose to activate the speech messages option. Also, change the actual system SAPI5 text to speech voice and language.
Alt + o, t
Help menu
Documentation
This help document will open in your browser.
Alt + h, d
Inclusion Code web page
You will access the www.inclusioncode.com web page, you must have an active Internet connection.
Alt + h, i
About
Information about the current version and author of Inclusion Code.
Alt + h, a