Accessibility bug : Footer Icons not visible to screen reader

Problem:

The interactive elements hidden from screen reader [High priority] - Social media links hidden from screen readers

the markup can be found: /www/sites/all/modules/custom/corp_markup/theme/sitewide/footer.tpl.php/footer.tpl.php

the main styling can be found: /www/sites/all/themes/corp_base/assets/css/site/includes/_site-footer.scss

the sass mixins can be found: /www/sites/all/themes/corp_base/assets/css/site/includes/icons/_mixins.scss

Identify areas to learn:

• HTML5 accessibility terms

Testing tools:

• Browserstack
• Ngrok setting up ngrok

Learn/ Practice:

Implementation:

/www/sites/all/themes/corp_base/assets/css/site/includes/icons/_mixins.scss

the background-image and background-position properties must be changed from:

@mixin iconTwitter ($color:$black) {
    background-image: url(data);
    background-position: 0 0;
}

the sizing of the icons are controlled by these mixins, $grid-typo-spacing-xs and $grid-typo-spacing-xs :

/www/sites/all/themes/corp_base/assets/css/site/includes/buttons/_social-media.scss

.nav-social__icon {
    @include rem(height, $grid-typo-spacing-xs);
    @include rem(width, $grid-typo-spacing-xs);
    display: block;
    margin: 0;
    overflow: hidden;