Adobe® InContext Editing is an online hosted service that lets users make simple web content changes within a web browser. To change a web page, users simply browse to the page, log into the InContext Editing service, and edit the page. The editing options are simple and elegant, and they require no previous knowledge of HTML code or web editing.
The first step in making your page ready for InContext Editing is to add editable regions to it. These regions are similar to those used in Adobe Dreamweaver® and Adobe Contribute® software — you can add editable regions and repeating region groups.
- Adding editable regions
- The content editing environment
- Setting region options
- Creating predefined options
- Creating predefined classes
Adding editable regions
An editable region is a pair of HTML tags that includes the ice:editable attribute in the opening tag. The editable region defines an area on the page that a user can edit directly in a browser. To add an editable region to your page, choose Insert > InContext Editing > Create Editable Region from the Dreamweaver menu.
You can use existing tags that are important for accessibility and wrap them in an editable region. For example, a correctly nested heading element can be made editable, so that the content provider can change the text without having to be instructed to use a heading element. This technique is illustrated in the code sample and screenshot below:
<div ice:editable="">
<h1>Main Heading</h1>
</div>
The content editing environment
An InContext Editing repeating region is a pair of HTML tags that includes the ice:repeating attribute in the opening tag. The repeating region defines an area on the page that a user can repeat and add content to when editing in a browser. For example, if you have a heading and a paragraph of text that follows it, you can transform these elements into a repeating region that a user can then duplicate on a page. Here's an example:
Repeating regions can also be used to ensure a particular accessible structure. For example, for a breadcrumb trail to be accessible, it should be marked up as an ordered list. To make such a list editable, you can identify the first list item as a repeating field, and the list item text as an editable field. This allows content providers to add new items, change them, delete them, and even rearrange them. This technique is illustrated in the following code:
<ol class="breadCrumbs" ice:repeatinggroup="*">
<li class="first"><a href="index.html">home</a></li>
<li ice:repeating="true">
<div ice:editable="*">New breadcrumb</div>
</li>
</ol>
Setting region options
When content providers start editing a page that allows InContext Editing, they are provided with a range of formatting tools similar to those found in common rich text editors.
All formatting changes are applied through cascading style sheets (CSS). Additionally, certain common elements such as links and images can be inserted using the toolbar. The InContext Editing tools also provide features that are interesting from an accessibility perspective:
- Heading elements: Six different heading levels can be chosen from the Advanced > Headings menu.
- Accessible images: When an image is created, its alternative text can be added from the Advanced menu.
- Lists: You can use ordered and unordered lists to structure grouped content.
Creating predefined options
Depending on the developer's preferences, options can be set for each editable region that determine what kind of formatting changes the content provider is allowed to make using the Editable Regions Property inspector (shown below). The options you select will be available to content providers when they edit the contents of the editable region in a browser. For example, if you select the Bold option, content providers will be able to make text bold; if you select the Numbered List and Bulleted List option, content providers will be able to create numbered and bulleted lists; if you select the Link option, content providers will be able to create links. Hover over the icon of each option for a ToolTip about what each one enables.
Certain privileges may result in inaccessible content if the content provider is not aware of common accessibility issues. For example:
- If users are allowed to set both the foreground and background colors of text, they may create color combinations that lack sufficient contrast.
- If users are allowed to change the font size using the default controls, the sizes will not be defined in relative units.
- If users make manual changes using the editing control, the resulting content will contain inline styles that are difficult to override with user-defined style sheets.
To minimize the risk of inaccessible content, follow one of these two approaches:
- Ensure content editors receive instruction on how to add accessible content. For example, show them how to use headings and how to add alternative text to images. Since editable regions often have placeholder text, you could replace that placeholder text with a concise set of instructions.
- Use the Options panel to disable most features that might introduce accessibility issues, and rely on accessible predefined classes to deal with presentation aspects in CSS. This approach is described in more detail in the following section.
Creating predefined classes
The Manage Available CSS Classes dialog box lets you specify which CSS files you want to attach to a particular page. When a content provider edits the page directly in a browser, all the classes from the CSS files you attach will be available for formatting elements in editable regions.
You can use classes to allow creation of preset formatting styles. For example, different classes can be created for different commonly used font sizes (using a relative font size), indented text, highlighted text, and other styles. This still enables users to create interesting looking content, while ensuring the content adheres to important accessibility rules.
The screenshot below shows examples of possible classes:
