Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

  • Chris Smith 26 posts 128 karma points
    Feb 17, 2015 @ 13:19
    Chris Smith

    Making alt text mandatory in Umbraco 7 Media Picker


    Is it possible to make the alt text field on the Media Picker a required field?

    I've had a look at the mediapicker.html in \umbraco\views\common\dialogs and have modified the input on around line 38 to include the required attribute but this doesn't seem to have worked.

    <umb-control-group label="@content_altTextOptional"> <input type="text"   class="umb-editor umb-textstring"   ng-model="target.altText" required> </umb-control-group>



  • Jan Skovgaard 11257 posts 23497 karma points MVP 7x admin c-trib
    Feb 17, 2015 @ 15:00
    Jan Skovgaard

    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 Skovgaard 11257 posts 23497 karma points MVP 7x admin c-trib
    Feb 17, 2015 @ 15:02
    Jan Skovgaard

    Just found a good read about proper use of the alt attribute :)


  • Chris Smith 26 posts 128 karma points
    Feb 17, 2015 @ 15:18
    Chris Smith

    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.



  • Jan Skovgaard 11257 posts 23497 karma points MVP 7x admin c-trib
    Feb 17, 2015 @ 15:27
    Jan Skovgaard

    Hi Chris

    You're welcome :)

    A better thing could perhaps be to use a service like 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.


  • ABC Dev Team 22 posts 134 karma points
    Aug 06, 2015 @ 14:43
    ABC Dev Team

    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 () {       

    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"
               class="umb-editor umb-textstring"
               required />
        <span class="help-inline" val-msg-for="imageAltText" val-toggle-msg="required"><localize key="required" /></span>
    <button class="btn btn-primary"
        <localize key="general_insert">Insert</localize>

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

    enter image description here

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

  • ibrahim TUNC 41 posts 98 karma points
    Apr 23, 2020 @ 17:54
    ibrahim TUNC

    Can you give some more information on this subject?

  • P 32 posts 122 karma points
    Feb 09, 2016 @ 13:35

    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 ;)

Please Sign in or register to post replies

Write your reply to: