Episerver - Blend Accessibility Guide

Perceivable

1.1 Non-text content

Images have a text alternative.

To include alternate text, create a property on ImageFile model of type string with UIHint of UIHint("UIHint.Textarea")

Sample

            [Display(Name = "Alt Text", Order = 1)]
            [UIHint(EPiServer.Web.UIHint.Textarea)]
            public virtual string AltText { get; set; }

Form inputs have properly associated text labels.

Frames are titled.

1.2 Audio and video

Text transcript is included for all prerecorded audio or video.

Supplimental description for video with sound.

Level AA Supplimental descriptive audio for video with sound.

1.3 Page structure

Headings, lists, and special text are used appropriately.

If chosen, you can provide a heading block to allow editors to choose the heading type and cssclass to use with the heading.

The BlockData Model

            public override void SetDefaultValues(ContentType contentType)
            {
                base.SetDefaultValues(contentType);
                this.TitleTagType = "h2";
            }

            [Display(Name = "Title", Order = 1)]
            public virtual string Title { get; set; }

            [Display(Name = "Title Tag Type", Order = 10)]
            [SelectOne(SelectionFactoryType = typeof(HeadingTagSelectionFactory))]
            public virtual string TitleTagType
            {
                get
                {
                    var tagType = this.GetPropertyValue(x => x.TitleTagType);
                    return string.IsNullOrWhiteSpace(tagType) ? "h2" : tagType;
                }

                set { this.SetPropertyValue(x => x.TitleTagType, value); }
            }

            [Display(Name = "Title Tag Css Class", Order = 12)]
            [SelectOne(SelectionFactoryType = typeof(HeadingTagSelectionFactory))]
            public virtual string TitleTagCssClass { get; set; }

The View:

            @model TitleBlock
            @Html.PropertyTemplateFor(x => x.Title, Model.TitleTagType, new { @class = Model.TitleTagCssClass })

The page order is clear and makes sense.

Operable

2.2 Moving content and time limits

Any page or application with a time limit, offers the user options to turn off, adjust, or extend that time limit.

Understandable

3.1 Languages

The language of the page is identified using the HTML lang attribute.

<html lang="@Model.CurrentPage.LanguageBranch">

Level AA The language of page content that is in a different language is identified using the lang attribute.

3.2 Predictable site behavior

When an element received focus it doesn’t change the page in confusing ways.

Interacting with a control doesn’t change the page in unexpected ways without informing the user ahead of time.

3.3 Forms and error handling

Required form elements or specific format requirements are noted in the element’s label.

In episerver 9+, EPiServer now supports EPiServer Froms instead of the standard XForms method

What does this mean, we as developers can now control the output of the html form that is rendered. EPiServer XForms has some work arounds though but those will not be discussed here, we will use EPiServer Forms in this case.

Package Location for episerver forms is

PM> Install-Package EPiServer.Forms

Put all form elements that you are overriding for compliance in the

Views/Shared/Elements/

folder and EPiServer will pick those templates up before they look for their templates based on their view paths.

Sample Textbox Template

              @model TextboxElementBlock
@using EPiServer.Forms.Helpers.Internal
@using EPiServer.Forms.Implementation.Elements
@{
    var formElement = Model.FormElement;
    var labelText = Model.Label;

}
              <div class="Form__Element FormTextbox form-group @Model.GetValidationCssClasses()" data-epiforms-element-name="@formElement.ElementName">
                <label for="@formElement.Guid" class="Form__Element__Caption">@labelText</label>
              <input name="@formElement.ElementName" id="@formElement.Guid" type="text" class="FormTextbox__Input form-control" placeholder="@Model.PlaceHolder" value="@Model.GetDefaultValue()" @Html.Raw(Model.AttributesString) />

                <span data-epiforms-linked-name="@formElement.ElementName" class="Form__Element__ValidationError" style="display: none;">*>/span>
    @Model.RenderDataList()
  </div>

Episerver Accessibility