Hi Chris

I'm not sure how to achieve it...but I'm wondering why you want to make it mandatory? It's not always a good idea to have an alternate text on an image. However the alt attribute should always be present but it's allowed to be empty like alt="" if the image is only for decorative purposes and does not contain any useful contextual information that would benefit a person using a screen reader.

I know that many editors tend to forget adding alternative texts when they're appropiate but since they're not appropiate all the time then it does not make sense to add it. So forcing the editors to think of something to add can be a bad idea.

Looking forward to hearing from you.

/Jan

Just found a good read about proper use of the alt attribute http://webaim.org/techniques/alttext/ :)

/Jan

Hi Jan.

My main reason for wanting to do this is because from past experience our editors can be quite forgetful!  

At present the site's content hasn't been fully written so its hard to predict what sort of images will be inserted, i.e. informative images or ones for decoration.  I'm guessing this is something I'll need to bring up in the training and let the editors make the choice.

Thanks for the quick reply.

Cheers

Chris 

Hi Chris

You're welcome :)

A better thing could perhaps be to use a service like http://tenon.io/ to generate accessibility reports somehow and then make editors aware that they perhaps need to add an alt text on a certain image on a certain page? If it's something that is of priority for the client and they're willing to invest in of course.

/Jan

Hi Chris, I'm not sure if the mandatory alt text is still a problem for you, but with a bit of tinkering and learning Angular at the same time I managed to achieve it using the following code changes (line numbers are approx.);

Umbraco\Config\Lang\en.xml (line 155)

Image alt text label was ‘Alternative text (optional)’

<key alias="altTextOptional">Alternative Text (required)</key>

Umbraco\Js\umbraco.controllers.js (line 1114. Note only the last 4 lines are added, the previous lines are to allow you to locate the right place in the script)

$scope.options = {
            url: umbRequestHelper.getApiUrl("mediaApiBaseUrl", "PostAddFile") + "?origin=blueimp",
            autoUpload: true,
            dropZone: $element.find(".umb-dialogs-mediapicker.browser"),
            fileInput: $element.find("input.uploader"),
            formData: {
                currentFolder: -1
            }
        };

        //submit the form
        $scope.submitForm = function () {       
            $scope.submit($scope.target);
        };

Umbraco\Views\common\dialogs\mediapicker.html (note there are 3 separate changes to existing markup blocks)

<form ng-controller="Umbraco.Dialogs.MediaPickerController" ng-submit="submitForm()" name="mediaPickerForm" id="fileupload"  umb-image-upload="options" val-form-manager >


<umb-control-group label="@content_altTextOptional" >
    <input type="text"
           name="imageAltText" 
           class="umb-editor umb-textstring"
           ng-model="target.altText" 
           required />
    <span class="help-inline" val-msg-for="imageAltText" val-toggle-msg="required"><localize key="required" /></span>
</umb-control-group>


<button class="btn btn-primary"
        type="submit">
    <localize key="general_insert">Insert</localize>
</button>

Now when you try and click Insert with an empty alt text value you get this until a value is entered.

I hope this works for you. Ours needed to be mandatory for accessibility purposes.

With regards to the alt text, it probably should be mandatory.

Why? It's the difference between null (the editor forgot to enter a value) and String.Empty (the editor deliberately selected an empty value because it was appropriate in this case).

Stopping editors from automatically selecting the equivalent of String.Empty is another problem ;)

is working on a reply...