Update img tag alt attributes, SEO in mind

Cobb Jung · Cobb Jung · commit 6d99f4503466 · 2020-05-15T15:59:15.000+09:00
Make dom util, create img accept alt parameter. Update alt texts with SEO in mind. Refer to https://blog.hubspot.com/marketing/image-alt-text
diff --git a/lib/utils/domUtil.js b/lib/utils/domUtil.js
@@ -111,12 +111,12 @@ export function createButton({ id, className, innerText } = {}) {
   return _createElement({ tagName: 'button', id: id, className: className, innerText: innerText });
 }
 
-export function createImg({ id, className, src, onerror } = {}) {
+export function createImg({ id, className, src, alt, onerror } = {}) {
   const element = _createElement({
     tagName: 'img',
     id: id,
     className: className,
-    attrs: { src: src }
+    attrs: { src, alt }
   });
 
   element.onerror = onerror;
diff --git a/lib/views/CallLogItem.js b/lib/views/CallLogItem.js
@@ -12,17 +12,22 @@ export class CallLogItem {
     if(callLogInfo) {
       const wrapper = createListItem({ id: callLogInfo.callId, className: className });
       let callType = null;
+      let callTypeAlt = '';
       if(callLogInfo.isVideoCall){
         if(callLogInfo.userRole === 'dc_caller'){
           callType = outgoingVideo;
+          callTypeAlt = 'Outgoing call history';
         } else {
           callType = incomingVideo;
+          callTypeAlt = 'Incoming call history';
         }
       } else {
         if(callLogInfo.userRole === 'dc_caller'){
           callType = outgoingVoice;
+          callTypeAlt = 'Outgoing call history';
         } else {
           callType = incomingVoice;
+          callTypeAlt = 'Incoming call history';
         }
       }
 
@@ -36,14 +41,19 @@ export class CallLogItem {
         displayName = callLogInfo.caller.userId;
       }
 
-      const icoCallType = createImg({ className: `${classes['callLogItemType']}`, src: callType });
+      const icoCallType = createImg({ className: `${classes['callLogItemType']}`, src: callType, alt: callTypeAlt });
       const callTypeDiv = createDiv({ className: `${classes['callLogTypeDiv']}` });
       callTypeDiv.appendChild(icoCallType);
 
-      const profileImg = createImg({ className: `${classes['callLogProfileImg']}`, src: profileImage, onerror: (error) => {
-        error.currentTarget.src = avatarIcon;
-      }});
-      
+      const profileImg = createImg({
+        className: `${classes['callLogProfileImg']}`,
+        src: profileImage,
+        alt: 'Opponent profile photo of call history',
+        onerror: (error) => {
+          error.currentTarget.src = avatarIcon;
+        }
+      });
+
       const profileDiv = createDiv({ className: `${classes['callLogProfileDiv']}` });
       profileDiv.appendChild(profileImg);
 
@@ -85,12 +95,12 @@ export class CallLogItem {
       const btnCallVoice = createDiv({ className: `${classes['callLogVoiceActionBtn']}`});
       callActionBtnWrap.appendChild(btnCallVoice);
       callActionBtnWrap.appendChild(btnCallVideo);
-      
-      
+
+
       const callLogActionDiv = createDiv({ className: `${classes['callLogActionDiv']}` });
       callLogActionDiv.appendChild(callLogStartTime);
       callLogActionDiv.appendChild(callActionBtnWrap);
-      
+
 
       wrapper.appendChild(callTypeDiv);
       wrapper.appendChild(profileDiv);
@@ -135,4 +145,4 @@ export class CallLogItem {
       eventhandler(event, {peerId: this.destPeerID, isVideoCall: false, callOption: null});
     };
   }
-}
+}
diff --git a/lib/views/CallView.js b/lib/views/CallView.js
@@ -24,6 +24,7 @@ export default class CallView extends BaseElement {
 
     this.peerProfile = createImg({
       src: remoteUser.profileUrl,
+      alt: 'Sendbird voice & video call opponent profile photo',
       className: classes['remoteProfile'],
       onerror: (e) => e.target.style.visibility = 'hidden'
     });
diff --git a/views/index.html b/views/index.html
@@ -11,7 +11,7 @@
 <body>
     <div id="container" class="wrapper center bg-white">
         <div id="welcome_view" class="column center">
-            <img src="<%=require('../img/ic-logo-horizontal-purple-300.svg')%>" alt="logo" class="ic-logo-horizontal-purple-300">
+            <img src="<%=require('../img/ic-logo-horizontal-purple-300.svg')%>" alt="Sendbird horizontal logo svg icon" class="ic-logo-horizontal-purple-300">
             <div class="title voice-sample-page">
                 Calls Sample
             </div>
diff --git a/views/widget.html b/views/widget.html
@@ -10,7 +10,7 @@
 <body>
     <div id="container" class="wrapper center">
         <div id="welcome_view" class="column center">
-            <img src="<%=require('../img/ic-logo-horizontal-purple-300.svg')%>" alt="logo" class="ic-logo-horizontal-purple-300" />
+            <img src="<%=require('../img/ic-logo-horizontal-purple-300.svg')%>" alt="Sendbird horizontal svg icon" class="ic-logo-horizontal-purple-300" />
             <div class="voice-sample-page title">
                 Voice Sample Login
             </div>
