Social Media Modules

• Go to the Facebook Plugin Page
• Scroll down to the form and fill it out.
  
  • Replace the URL for ‘Facebook Page URL’ using the school’s Facebook URL
  • Set the width of the feed to a px width that is appropriate for the sidebar when the browser is at full width. The number does not require ‘px’ after it. It cannot be less than ‘180’ or more than ‘500’.
  • Set the height of the feed so that it fits well with the page design. Heights less than ‘300’ don’t show much content.
  • Check the box for ‘Use Small Header’ unless the larger header is a better design choice for the site.
  • Check the box for ‘Hide Cover Photo’ unless the cover phote is a better design choice for the site.
  • Leave the box checked for ‘Adapt to plugin Container width’.
  • Unckeck the box for ‘Show Friend’s Faces’.
  • Shortly after commencement of filling out the form, the facebook feed should display in the box below the check boxes. If it does not display, then it is likely that the school does not have the correct settings on their FB account to allow it to display in a feed. The School will need to be contacted and given instructions on how to change the FB settings.
  • Click on the ‘Get Code’ button. A pop-up with two tabs should display. Select the tab for ‘Frame’. Select and copy the the <iframe></iframe> code.
    
• Go to the appropiate page on the school’s website.
• Enable the Visual Builder.
• Click on the + to add a module
  
• Select the ‘Code’ module
  
• When the ‘Code’ module opens, under the ‘Content’ tab and the ‘Text’ item there is a gray box for ‘Code’. Paste the Facebook <iframe></iframe> into the code box.
  
• If the margins or padding around the FB Feed needs to be adjusted, then in the ‘Code’ module, under the ‘Design’ tab, the margin and padding are found in the ‘spacing’ toggle group.
  

• Go to the X Publish Page
• In the box for the question, ‘What would you like to Embed?’, enter the URL for the school’s X page, and then click on the arrow on the right side of the box.
  
• Select the desired display option.
  
• Click on the link for ‘set customization options’.
  
• Fill in the customization form. The width and height, just need a number without ‘px’. Click on the ‘Update’ button.
  
• Click on the ‘Copy Code’ key.
  
• Go to the appropiate page on the school’s website.
• Enable the Visual Builder.
• Click on the + to add a module
  
• Select the ‘Code’ module
  
• When the ‘Code’ module opens, under the ‘Content’ tab and the ‘Text’ item there is a gray box for ‘Code’. Paste the X code into the ‘code’ box.
• Initially, the hyperlink may be the only thing that displays. After a few moments, the feed should display.
  
• If the margins or padding around the X Feed needs to be adjusted, then in the ‘Code’ module, under the ‘Design’ tab, the margin and padding are found in the ‘spacing’ toggle group.
  

Description Typical Location	Type	Input Method	Example	UI and ADA Checklist
Stand alone Icons header or footer	Semantic	HTML Manual		correct link opens in a NEW tab has aria-label color contrast is responsive
Stand alone Icons header	Semantic	HTML Manual		correct link opens in the SAME tab if on the same website has aria-label color contrast is responsive
Social Icons as decoration on a text button	Decorative	CSS Manual		color contrast is responsive

Semantic Icons

Semantic icons convey meaning to the user. These icons prompt the user to interact with the icon such as links to social media, buttons, and other interactive controls or links. Semantic icons must meet ADA requirements which include having an aria-label, so they are added with html.

• <a></a> The anchor tag or ‘a’ tag creates a link on a webpage. Whatever goes <a>IN BETWEEN HERE</a> will be the link on the page. That is often text, but in the case of a social icon, we will put an <i></i> inside like this, <a><i></i></a>.
• href stands for hypertext reference. The href is an attribute of the ‘a’ tag and includes the url (web address) to where the link will take the user. The href can even take a user to a specific place on a page, even on the same page.
• target is an attribute of the ‘a’ tag. Set the target to equal ‘_blank’ when a link will take the user to an external website or document. Set the target to equal ‘_self’ when the link is internal (on the same site).
• aria-label is an attribute of the ‘a’ tag. The words within an aria-label should convey the meaning of what will happen when the user clicks on the link. Screen readers read aloud the text within the aria-label so that the visually impaired will know what the purpose of the link is. An aria-label is required for links without text.
• rel=’noopener’ is an attribute used in the <a> <area> and <form> tags for security purposes. This attribute helps prevent hacking by instructing the browser to navigate to the new website without granting access to the source that opened the link.
• <i></i> sematically, the ‘italic’ tag or ‘i’ tag is meant to turn text to italic, Like this, but most web designers use css for that. FontAwesome uses empty ‘i’ tags in the html for semantic icons in conjuction with css.
• aria-hidden=’true’ is an attribute of the ‘i’ tag. This attribute is used to hide an element from assistive techonologies like screen readers. It is used to prevent confusion, i.e. by hiding the empty ‘i’ tag that is used to add an icon with html, the screen reader will ignor the empty ‘i’ tag and depend on the aria-label in the ‘a’ tag to convey the purpose of the icon link.

Decorative Icons

Decorative icons are ones that are used for the sole purpose to visually enhance a website and does not add information that is not already on the website. Decorative icons are exempt from ADA requirements. Therefore, they do not require an aria-label and can be added with CSS.