Accessible design for everyone

Since not everyone has the same abilities or equal use of the same senses, one of the keys to accessibility is ensuring that information is transformable from one form into another. Some general guidelines: 

  • Text should remain text and not be replaced by images.  
  • Images must be described with alternate text (“alt” attribute). 
  • Sound files must be accompanied with a transcript. 
  • Video files must be captioned. 
  • There should be sufficient contrast between text and background. 

 

Accessibility Guidelines for all Digital Media

Use Alt Text
  • Every image must have alt text added.  
  • Describe the information, not the picture. Ex: not just "credit cards, or logos, but which ones?"  
  • Active images require descriptive alt text. (Describe what the image is doing, Ex: fading in and out, blinking etc. ) 
  • Images that contain information require descriptive alt text. (Describe picture and information) 
  • Decorative images should have empty alt text. alt="" needs to be placed within the code, or select decorative if an option instead of alt.  
  • No alt text should have the word "image" or photo" as screen readers already read it as such.  
  • Alt text should not be redundant or have the same information as the body text. If so, it can be considered a "decorative" image see Rule 5.  
  • Alt text of a functional image (e.g., an image within a link) should describe the function as well as the content. (EX: social media icons should say "dsa facebook") 
Ensure Contrast Ratio

Contrast is a measure of the difference in perceived brightness between two colors, typically text and the background color. It is expressed as a ratio ranging from 1:1 — white text on a white background — to 21:1 — black text on a white background. To give a frame of reference, on a white background: Graphic illustrating visual vibrance and balanced contrast. 

  • UNT Green has a ratio of 4.74:1 
  • Light Blue has a ratio of 2.29:1 
  • Pure Red has a ratio of 4:1 
  • The measure of the contrast ratio can affect readability. For example, black text on a white background — ratio of 21:1 — is the most readable, but white text on a UNT gray background, a ratio of 5.17:1, and is less readable. 
  • When designing graphics, emails or posting on social media, consider how the contrast ratio will affect the delivery of the message and how will it be perceived by those who are color blind or have low vision.  
  • Industry standards call for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. To test the contrast ratio of two colors, visit the WebAIM Contrast Checker. 
Consider Email and Digital Documents
  • When designing graphics, emails, or posting on social media, consider how the contrast ratio will affect the delivery of the message and how will it be perceived by those who are color blind or have low vision.   To test the contrast ratio of two colors, visit the WebAIM Contrast Checker.  
  • All images should have alt text and as a best practice, they should not be sent as the main body content. For example, type out the information that is on an image such as a flyer within the body of the email so that it is accessible to all.
  • When using Outlook, Word, PDFs or PowerPoint, click on "Review" and then "Check Accessibility" to check for any accessibility issues. By default, PowerPoints are best for meeting accessibility standards. Make sure to add alt text to all images inside of the documents along with graphs.  

 

Web Accessibility Checklist

  • Headers should be in order 1,2,3 etc. (Titles are automatically set as 1). 
  • Add alt text to all images see (Digital Alt text guidelines). 
  • Flyers should not be used as the main body of your page. Instead, type out the information that is on your flyer and/or attach it to an accessible pdf document. 
  • All links should have an Advisory Title or Long Description URL (in Advanced section of Drupal Linking). 
  • Tables should read left to right. 
  • All PDFs should be accessible (See Accessible PDF trainings). When possible, copy and paste information onto a webpage instead of linking to a pdf. 
  • Copy text from word docs and pdfs onto a webpage if possible, for best accessibility results. 
  • Check contrast WebAIM Contrast Checker. 
  • Utilize webforms when possible or fillable pdfs for any forms. 
  • Tab through your site to see if it is accessible to users without mouse capability. 
  • All videos should be embedded from YouTube with closed captioning. 
  • Any Iframes or Interactive Content should have alt text and a link to accessible information. 
  • Check for mobile responsivity by F12 on Chrome or increase zoom to 200% to see if all information is still visible and navigation is correct. 
  • Use consistent navigation menus and avoid on page navigation. 

Additional DSA Web Accessibility Training and Resources can be found at /docs or on the DSA Web Editor's Team page.

 

Social Media Accessibility

Alternative Text Descriptions for Images - When images are used on social media, please provide meaningful alternative text descriptions so that users have the image described to them, giving them equal access to that image as anyone else.

  • Describe the image in context based on details the image adds to the text. 
  • Don't use the words like “graphic” or “image” when describing that image. 
  • Make sure when using a file name in alt text, that the file name isn't random letters and numbers, i.e. picture_349853958.jpg 
  • Many social media platforms offer auto generated alternative text. Feel free to use this option but make sure to check that the auto generated alt text is accurate. 
  • Also, if an image on social media fails to load, the alt text will indicate what the missing image was supposed to be. 

Closed Captioning (Subtitles) for Videos - When publishing a video on social media, please keep in mind that closed captions help make visual content accessible for anyone who is hearing impaired, but also for all the users who watch videos with the sound off or at a low volume. 

  • Many social media platforms offer an option to add closed captions from their platform by using artificial intelligence. 
  • Many platforms like YouTube and Hootsuite use AI to create closed captions where you can upload your videos on those platforms and grab the CC file to put on a video on Facebook or Twitter. 
  • Sometimes with AI auto generating closed captioning, it can have inaccurate results; it is imperative to spend extra time closed captioning the video yourself and making sure it is accurate. 
  • When closed captioning videos, it is also important to time the captions accurately so that captions are aligned with the words being spoken at the time on the video. 
  • Please keep in mind that there are closed captioning and open captioning and that there is a difference between the two. 
    • Closed captions vs open captions - closed captions signifies that the captions are not visible until the viewer activates them (must be turned on/off); open captions are always visible to viewers and are burned-on the video without being able to remove it. 
    • Add open captioning to videos where closed captioning is not possible, i.e. Tiktok, Instagram stories and reels, etc. 

    Hashtags and Emojis 

    • Use hashtags and emojis in moderation. 
    • For hashtags, capitalize the first letter in each word rather than all caps or all lowercase. 
    • Avoid putting emojis in the middle of written content as much as possible. 
    • Place hashtags at the end of posts and tweets when possible. 
    • Double check the descriptions of emojis on Emojipedia. 

    Facebook 

    • Once uploading an image, add alt text to image by clicking on the edit button of that image, preferably before posting. 
    • Add closed captions to videos. 
    • Facebook offers an automatic alt-text feature, but this can be inaccurate at times. 

    Twitter 

    • Captioning isn't native to Twitter, so if you're posting any videos, you will need to either upload a video with open captions or post a link to an already captioned YouTube video. 
    • Image descriptions are available, but they need to be turned on in the accessibility tab in settings. 

    Instagram

    • Once uploading an image, add alt text to image by clicking on the advanced settings button of that image, preferably before posting. 
    • Captioning is not available on this platform, so videos should have open captions added before being uploaded and posted. 
    • Links do not work in captions on Instagram. It is not considered accessible to put a link to more info in the caption because you can't click through it. 
    • If you use links regularly, please use something like Linktree to make your links available and organized  
    • IG stories need to have open captions, as alt-text is not available for this feature. 

    YouTube

    • Be sure to include closed captions to all your videos. YouTube's auto-captions are very inaccurate and not recommended because of all the errors. 
    • To create a CC to your video, you must schedule to video to be published ahead of time and go to the captions tab of your account to select the video to caption. 
    • Be sure that your closed captions are timed with what is being said on the video. 

    4 Things You Can Do to Make Your Content More Accessible  

    • Make your contact information available on your social media account page. 
    • Provide a clickable link to where the same information is more accessible, such as an accessibility website. 
    • Make your social media content available through more than one channel. 
    • Provide links or contact information to official social media support and accessibility teams. 

Resource Links: