Merge pull request #574 from CuBoulder/issue/570

Enhanced Screen-Reader Text on 'Read More' links for Articles served by Article List Pages + Article Blocks
CuBoulder · Dec 1, 2023 · c1ce150 · c1ce150
2 parents e4fa183 + c0ea6bf
commit c1ce150
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 3 deletions.
diff --git a/css/block/ucb-article-feature-block.css b/css/block/ucb-article-feature-block.css
@@ -43,7 +43,6 @@
     text-transform: uppercase;
     font-weight: 600;
     font-size: 75%;
-    padding-bottom: 20px;
 }
 
 .ucb-article-card{

diff --git a/css/block/ucb-article-list-block.css b/css/block/ucb-article-list-block.css
@@ -58,7 +58,6 @@
     text-transform: uppercase;
     font-weight: 600;
     font-size: 75%;
-    padding-bottom: 20px;
 }
 
 .ucb-article-card-summary{

diff --git a/js/ucb-article-feature-block.js b/js/ucb-article-feature-block.js
@@ -277,6 +277,11 @@ class ArticleFeatureBlockElement extends HTMLElement {
                         featureReadMore.className = 'ucb-article-read-more'
                         featureReadMore.href = article.link;
                         featureReadMore.innerText = 'Read More'
+                        //Screen Reader text
+                        var srOnly = document.createElement('span')
+                        srOnly.className = 'sr-only'
+                        srOnly.innerText = ` about ${article.title}`
+                        featureReadMore.appendChild(srOnly)
 
                         // Append
                         featureContainer.appendChild(featureImgLink)
@@ -373,6 +378,11 @@ class ArticleFeatureBlockElement extends HTMLElement {
                 featureReadMore.className = 'ucb-article-read-more'
                 featureReadMore.href = article.link;
                 featureReadMore.innerText = 'Read More'
+                //Screen Reader text
+                var srOnly = document.createElement('span')
+                srOnly.className = 'sr-only'
+                srOnly.innerText = ` about ${article.title}`
+                featureReadMore.appendChild(srOnly)
 
                 // Append
                 featureContainer.appendChild(featureImgLink)
@@ -469,7 +479,12 @@ class ArticleFeatureBlockElement extends HTMLElement {
                         featureReadMore.className = 'ucb-article-read-more'
                         featureReadMore.href = article.link;
                         featureReadMore.innerText = 'Read More'
-
+                        //Screen Reader text
+                        var srOnly = document.createElement('span')
+                        srOnly.className = 'sr-only'
+                        srOnly.innerText = ` about ${article.title}`
+                        featureReadMore.appendChild(srOnly)
+
                         // Append
                         featureContainer.appendChild(featureImgLink)
                         featureContainer.appendChild(featureTitle)

diff --git a/js/ucb-article-list-block.js b/js/ucb-article-list-block.js
@@ -293,6 +293,12 @@ class ArticleListBlockElement extends HTMLElement {
           readMore.classList = 'ucb-article-card-read-more'
           readMore.innerText = `Read More`;
 
+          // Sr-only text
+          var srOnly = document.createElement('span')
+          srOnly.className = 'sr-only'
+          srOnly.innerText = ` about ${articleTitle}`
+          readMore.appendChild(srOnly)
+
           articleBody.appendChild(headerLink)
           articleBody.appendChild(date)
           articleBody.appendChild(articleSummary)
@@ -360,6 +366,11 @@ class ArticleListBlockElement extends HTMLElement {
           readMore.href = articleLink;
           readMore.classList = 'ucb-article-card-read-more'
           readMore.innerText = `Read More`;
+          // Sr-only text
+          var srOnly = document.createElement('span')
+          srOnly.className = 'sr-only'
+          srOnly.innerText = ` about ${articleTitle}`
+          readMore.appendChild(srOnly)
 
           articleBody.appendChild(headerLink)
           articleBody.appendChild(date)
@@ -508,6 +519,11 @@ class ArticleListBlockElement extends HTMLElement {
             readMore.href = articleLink;
             readMore.classList = 'ucb-article-card-read-more'
             readMore.innerText = `Read More`;
+            // Sr-only text
+            var srOnly = document.createElement('span')
+            srOnly.className = 'sr-only'
+            srOnly.innerText = ` about ${articleTitle}`
+            readMore.appendChild(srOnly)
 
             articleBody.appendChild(headerLink)
             articleBody.appendChild(date)

diff --git a/js/ucb-article-list.js b/js/ucb-article-list.js
@@ -270,6 +270,11 @@ function renderArticleList( JSONURL, ExcludeCategories = "", ExcludeTags = "") {
               var readMoreLink = document.createElement('a')
               readMoreLink.href = link;
               readMoreLink.innerText = `Read more`
+              //Screen Reader text
+              var srOnly = document.createElement('span')
+              srOnly.className = 'sr-only'
+              srOnly.innerText = ` about ${title}`
+              readMoreLink.appendChild(srOnly)
 
               articleSummaryReadMore.appendChild(readMoreLink)