Digital Accessibility The Basics | Digital Accessibility

Digital Accessibility is critical in providing equal access to our content for all individuals. At the very core Digital Accessibility means the ability to access digital content. As we have discussed in previous months Accessibility Tips, the smallest accessibility changes on our end can create some of the biggest impacts for our users. So, this month we are going to talk a little bit about the importance of digital accessibility and the little changes that you have been working on over the past few months.

1 in 5 people at any given moment in our world is statistically said to have a disability of some kind which means roughly seven billion people have a disability. These disabilities can range from an individual who needs reading glasses to an individual who is blind or even an individual who may have a mobility disability temporarily or permanently.

There are many categories of disabilities that are important to acknowledge when we are creating digital content because each group of disabilities utilizes various things to engage with our content OR needs certain things added to websites to better engage. Some of these categories are:
•   Learning and Intellectual
•   Hearing
•   Visual
•   Physical
•   Epilepsy
•   Neurological/Traumatic Brain Injuries
•   Dyslexia

Some individuals have a disability that is in more than one category. Due to the wide range of disabilities in the UVA digital space we need make sure that our content is as easy to understand and engage with as it can be.

Accessibility Matters because everyone has a right to access the same information and benefits as individuals who are not currently experiencing a disability. By placing an emphasis on accessibility, it shows that we are committed to the basic ideals of equal opportunity and fairness for every student, faculty, staff, patient, and community members who step foot on grounds both physically and digitally.

Accessibility Basics to Implement Today

Below is a list of things that you can start doing today to help increase the accessibility here at UVA on the digital platforms that YOU and your team(s) have control over. There is a video at the bottom of this accessibility tip that goes into more details about the basics of accessibility and how to apply it to your website and digital platforms today!

Usability vs Accessibility

Useability is defined as the degree to which something is able or fit to be used. Digital Accessibility refers to the usability of information and communication technology (website, mobile app, web application, online documents, etc.).

For something to be accessible it must also be usable to our clients/users, but just because something is usable does not mean that the appropriate accessibility features are in place make it access to users of various abilities in a digital space. This is why when we create something it is important to make sure that we test it with Siteimprove and do a manual check to verify that our content is accessible and usable by the most people.

Contrast

Color contrast is critical to ensure that our users can see all the information that we are presenting to them. This can be text on a webpage, text in an image, and even lines on a graph. It is important to make sure that our color contrast is meeting requirements set forth by the Web Content Accessibility Guidelines (WCAG) so that we can make sure that all users are able to access our content equally. WCAG requires a minimum color contrast ratio of at least 4.5:1 for normal text, and 3:1 for large text (18pt and above, or 14pt bold). Text color and size may be controlled by your site's fixed theme.

You can check the color contrast of text and its background by using an online color contrast checker such as WebAim’s Color Contrast Checker or Lea Verou’s Contrast Ratio Checker (Transparent images/backgrounds).

Headers

Should be used to provide structure to your page. We have six headings that can be used, and they should be used in order all the time. Headings start with heading 1 (h1) and go to heading 6 (h6). Heading 1 (h1) is usually reserved in digital platforms for the page title so we typically start at a heading 2 (H2) but you will want to verify the heading for a specific page with your website administrator, email the Digital Accessibility Coordinator, or by using Siteimprove to check the heading order.

Headings should not be used to style content and if you need a heading restyled for a specific purpose contact your website administrator to get some help. Headers are also critical for users of assistive technology to understand your page. When we skip headers or use headers outside of the purpose to add structure users can become confused and feel as though they have missed something when they have not.

Alt-Text on Images

Alternative (alt) text on images allows users with assistive technology to be able to understand what an image. This alt-text is supplemental content for a user and is only seen by users of assistive technology. If you add an image on a page, make sure you apply alt-text to it so that all users can understand the purpose and meaning behind the image and the content.

Register for our Image trainings or request image training for you and your team today by emailing the Digital Accessibility Coordinator.

Alt-Text on Multimedia (video, audio, etc.)

Like Alt-text on an image, alt-text on multimedia allows users to know what the multimedia is about without having to engage with the whole multimedia element. This is important to always include so that users can choose to interact or bypass content as they wish.

Captions and Transcripts

Captions and transcripts should accompany every multimedia element we have on a digital platform. Captions should accompany each video that has audio and near the video, I recommend right under the video, is an easily accessible transcript. CACS or the Digital Accessibility Coordinator can assist you in how to add a transcript to your website.

Auto Playing Video and Audio

When you have videos, audio, or moving elements you want to make sure that they are not auto playing more than 5 seconds and that they do not play sound. Auto playing, especially with sound can be very jarring to users of assistive technology and users in general. If you have items auto playing you must allow the user to turn them off by pausing them and allowing them to restart. By allowing the user to start, stop, and pause content themselves it will allow them to be able to engage in the content as they wish and in a way that is not startling.

It is important to remember that some users have vestibular disabilities that can become physically ill based off various motion on the screen. Videos or auto playing media, such as gifs, can trigger this and cause harm to our users. Rule of thumb always gives the user the option to start any kind of animation or multimedia and if not make sure you provide an easy and accessible way to stop the animation at the user’s request.

Register for our Multimedia training or request image training for you and your team today by emailing the Digital Accessibility Coordinator.

New Tabs and Windows

People love to open links into new tabs or windows, it can be extremely convenient, but we should always allow the user the option to do that. We never want to force a link to open in a new window or tab automatically and when we must, we must notify the user that the action will occur. The reason we do not open new tabs or windows and we make sure that we are alerting the user when we do is because users of assistive technology, cognitive disabilities, or just older can become confused if they are not informed of the action occurring.

If you have a question about whether a link can open in a new tab or window, contact the Digital Accessibility Coordinator.

Resources to Checkout

Online Training About the Basics of Accessibility

Accessibility, It matters! The Basics Video Transcript

Accessibility, It Matters! The Basics!

BROOKE BAILEY:
Good afternoon and welcome to accessibility it matters the basics!

I just want to say thank you to everyone who is joining us today and to high ed web for allowing me to do this presentation today we are going to talk about the very basics of accessibility and the things that are critical for us to ensure that we are championing the cause for accessibility everywhere we find ourselves but especially in our higher education institutions.

So what does accessibility mean? What Does Accessibility Mean?
At its very foundation accessibility means the ability to access. This means everyone has the right to have access to the same information the right to access the same buildings, the right to access, medicine the right to access anything that one may need. Accessibility benefits everyone not just those with disabilities. And when we dedicate our time and energy into accessibility we are showing that we are committed to the basic ideals of equal opportunity and fairness for every person who encounters our content and our spaces.

Even though we are required by many laws to enforce accessibility as higher education institutions we have the duty to make all of our content accessible to students faculty staff and the communities in which our institutions are in. So with all of this how do we and How Do Our Institutions View People with Disabilities?

There are a few models that we are going to touch on briefly so that we can see what may be influencing our own opinions and our institutions view on accessibility. The first model is the medical model.

This model says that disability is the problem and we should fix the problem in order to help the person this is what most disability offices are based on and what our federal government disability benefits are based on.

The second is the social model. This model says that the problem is actually the environment in which we live and in order to fix the problem we need to make our environments more inclusive. This is where our ADA laws come into play by making our buildings more inclusive.

The third model is the functional solutions model. This model identifies the functional impairments or limitations of each disability and says that the solutions for eradicating those limitations is actually applying innovation to overcome those limitations of disabilities some classify our assistive technology into this model.

the fourth model is the social identity and cultural affiliation model. This model says that the personal identity and culture is actually found within the disability this is best seen in the deaf culture.

The fifth model is the charity or tragedy model. This model says that an unfortunate or tragic condition is worthy of special treatment or is used to make others feel better because of the hard life someone else has had. And this model is actually offensive to many people with disabilities.

Our institutions fall in a mix of all the models of disabilities, but it is important to understand what model or models we are in so that we can use those models as a way to champion accessibility at our universities. You might be thinking are disabilities that impact the digital world really that common? The answer is yes! Roughly one in five people have a disability of some kind. That is 20 percent of the population or approximately 1.5 billion people in the world depending on the stats you look at. They will vary due to how every country defines a disability the stigma around those disabilities in each culture but in general twenty percent of any group has a disability.

Those disabilities include but are not limited to blindness low vision color blindness, deaf-blindness, auditory, motor, cognitive, dyslexia, reading, math, speech, seizures, physiological, psychiatric, and the list goes on and on. Most people who have a disability have more than one which we call compound disabilities in general we have five specific
5 Specific Categories of Disabilities:
Recognizable, hidden, temporary, age related, and web and digital.

They seem pretty straightforward but let's review them real fast so that we are all on the same page.

Recognizable disabilities are the most familiar disabilities. These are the ones we usually see and acknowledge a war veteran who lost an arm. A student who has a white cane because they are blind. These are disabilities that anyone can see.

Hidden disabilities are a little harder as those are disabilities that we may not be able to tell by our physical appearance. You cannot tell that someone has seizures or is dyslexic or sometimes even if they have an auditory disability.

Temporary disabilities are ones that are not forever. Let's say you fell in a hole while running and you end up finding that you have an extra bone in your leg and you end up being on crutches after surgery. Don't laugh it has happened.

Age-related disabilities are things that happen because we are getting older these include things like auditory, visual, and motor disabilities that start to deteriorate as we get older. So with all of this knowledge how do we even start to make an impact in our current roles on the digital side.

Let's start with MAPS, GRAPHS, TABLES OH MY!

The main things all these have in common is this one if you must print a map graph or table make sure if there is color on it that it is printed in color. Nothing is worse than receiving a map of an amusement park and it isn't in color and you can't tell what building or area it is. You might be thinking you're going into the cuddly kitten exhibit but actually you're walking into the alligator pit. Always print in color.

Two if you have a map or a graph always have a legend. There is no reason to not have a legend. The data is important so give the user as much information as they need to be able to process the information and determine what the information is saying.

Three to help both of the above don't only use color to distinguish important information. This also applies to text. For example if you have this table of information someone who doesn't have a vision impairment will see all the greens, reds and yellows to distinguish the different levels of the coding courses. But a person who is color blind might not be able to see the difference in the red and green courses. So how would they know what the difference between the two is if there's no way to tell the difference?

This is why highlighting information not based solely on color is so important. To help both of the above don't only use color to distinguish important information. This also applies to text use patterns, use weights of strokes instead of all the lines on a graph being a solid line change it up with a dotted line. Change the background from a solid fill to a pattern that is easily separated from the other things that are going on the map or the graph. Make things stand out so that if you have to print in black and white the meaning and the information is still accessible and understandable by all just by processing the data that is in front of them.

Let's talk about some general web accessibility topics.

Images my favorite! IMAGES!

There are two things that are important for images those are alternative text and long descriptions. Both have a purpose and both should be used at the correct time.

Long descriptions.

If you have an image that has text or needs a lot of description to get the purpose across make sure your image has a long description associated with it. This allows your users with screen readers to fully understand what is going on but with this it is best practice to not have text on an image unless it is absolutely necessary.

Alternative text.

Alternative text should be used for all images unless the image is purely decorative that means things like image borders you don't need to tell your user what it is. However, I would always code on the side of caution to only have content on the page that is important for the user to help with the processing of the content. Alt-text should always be concise and descriptive.

What do you envision with this statement: two animals fighting on a wall? I bet you you didn't picture this image did you? Now if I would have said an ancient cave painting in France showing two deer with antlers plump bodies and small legs one deer appears to be fallen over or dead. You might have gotten a little closer right? I used to teach college web development students how to write alt text and the tip i would always give them is this. If you had to call your mom and describe to her what the image was what would you tell her? Whatever you would tell her is what you should write.

Headings have come under some heat lately with the new web content accessibility guidelines or WCAG standards as some accessibility professionals believe that nested heading requirements have been nullified in WCAG 2.1. I personally disagree with this and believe the standards still call for a nested heading structure but regardless i encourage you to always use proper heading order for the sole purpose of how headings are actually handled by screen readers and will continue to be handled by them.

When a screen reader pulls up a list of headings and hears the content go from an h2 to an h5 the user is naturally going to be confused and feel as though they are missing content, when in reality it is just poor coding. All users deserve to have well organized content and that means proper nested heading structure.

If you're using headings because of styling change use your classes and your ids to style. Use your classes and id's to be what you want not an improper nested header color contrast is extremely important. I think we have all seen a presentation or have been handed a flyer where the text colors are hard to read how frustrating. Cause if y'all are like me it is extremely frustrating. WCAG has specific standards in which we are required to meet with our color contrast. By federal law we are required to meet WCAG double A standards but i challenge each of us to make our colors involving text to be WCAG AAA compliant in order to be inclusive of more people. Sometimes that isn't possible but where possible i encourage you to go above and beyond just the requirements to champion accessibility.

One thing you will run into a lot is the content writers and owners want to put up files typically pdfs it doesn't matter what document that goes up, you must make those documents are accessible for every user that might come across it. Rule of thumb if it can be an html document make it an html document otherwise make the document a pdf and make sure it is tagged using adobe acrobat pro.

Video and audio. Every video and audio that you add to your digital platforms should at a minimum meet contrast requirements. Flashing requirements and transcript and caption requirements in addition you should consider adding an audio description to your videos which is required for WCAG AA compliance for recorded multimedia and pre-recorded videos. Something to consider for videos that are speeches or content that is along that line is a sign language interpretation.

To have your digital content be as accessible to as many people as possible over the many years a new thing that has come on to the web development scene and it is something that can either make your site better or worse and that is accessible rich internet applications or ARIA. There are specific reasons to use ARIA and I have seen it done really well and i've seen it done really poorly. For anyone who isn't familiar with ARIA its purpose is to allow communication between screen readers and your website's functionality to make your content accessible when you are not able to use standard html markup. ARIA was never intended to be used as a replacement for proper html standards but as a way to enhance accessibility when standard html cannot be used. ARIA should be used sparingly due to the different interpretations and support from screen readers. When ARIA is not supported or when it is used incorrectly it actually makes the accessibility of the site worse. Best practice is always to use semantic html markup first since standard html is supported by all screen readers. The rule of thumb here is if it can be built in semantic html build it in semantic html.

Our last topic for today is on forms. Most forms have three standards the first is timing restrictions second is spamming preventions and third is labels. When we choose to make a form timed we should offer our users two simple things. The first the ability to save their form submission and come back at a later time to complete the form and it is courteous to inform our users of what information is needed to complete the form up front so that they are prepared with the information before starting the form. And two a warning must be given with the ability to extend the time. If the time is not able to be extended the time restriction must be noted at the beginning of the process and regardless of time extension, warnings must be given to the user as the time becomes close to expiration.

When we talk about spam preventions we usually talk about CAPTCHAS or something along those lines that proves that the person is not a spam bot. The key things here are one not all captions are accessible google CAPTCHA specifically have received a numerous amount of complaints over the years for not being accessible. Even though they have made improvements some users still experience issues with them two the language you use around CAPTCHAS can actually trigger some users of traumatic events to have anxiety attacks or worse. Some examples of this that have been noted are victims of sexual assault or violence when asked if they are human they actually are negatively impacted because they have been told that they are in fact not human.

Three: I have seen an uptick in math-related captions which seem to bypass some of the above but you must remember from our disability list there are disabilities that directly relate to math. So I would use those very limitedly. If you find a way to make your form fields validate based off of expected input i would revise that over using captcha whenever possible.

The last piece of the puzzle are labels. Labels are crucial in making our forms accessible they are actually the piece that allow people to use our forms with screen readers. In order to be compliant with WCAG you must have labels on your form fields no ifs ands or buts. Labels not only make your form more accessible but it makes your form more usable because people are used to clicking on the form field's name and being taken to the field that correlates to it.

Before we finish and I answer your questions I just want to leave you all with some things to remember, some resources, and a challenge.

Some things to remember:
One, just because something is usable doesn't mean that it is accessible. You must test everything for accessibility.

Two if in doubt contrast it out. Ensure no matter what you are making that it has the correct contrast.

Three, use headers in the correct order.

Four, use alt text or long description for all images

Five, use captions, transcripts, audio descriptions, and sign language interpretation when needed and ensure that they are implemented.

And Six, accessibility isn't just nice to have it's necessary. You are the champions of accessibility and only you can keep it at the front of your work.

Here are some great resources for accessibility from various leaders and the accessibility world.

accessibilityproject.com is a great place to receive help feedback and to read articles about what is happening in the accessibility community and just a great place to start your accessibility journey.

The next is accessibility actually has its own slack channel. This is a great place to talk with real world certified accessibility professionals about any accessibility issue you may have. It's a great place to discuss solutions and to gain insight from real users about what works and doesn't work and why.

Next we have the high contrast extension for chrome this is a great way to test your high contrast mode and see what works on your site and what doesn't work. Especially in the realm of images.

Something we didn't discuss in this talk but i encourage you to investigate is how different image formats are impacted by high contrast modes. For instance many times pngs will not show up as well as background images in high contrast mode so users could be missing vital information on your site if your site is being viewed in high contrast mode.

Next is deque courses. They offer courses on accessibility ranging from any topic you would want I have used many of these courses receiving my CPACC certification and am using it as a resource for my was and cpwa certifications. Their courses are great but they do cost money, but in my opinion they are worth the cost.

Document Accessibility: Accessibility talks youtube channel. This channel hosts monthly accessibility presentations about various topics and are truly insightful about the world of accessibility.

Next we have nobility. Nobility is a great place to go in general with accessibility but they have great checklists for making sure your documents are fully accessible. Which I use and share with anyone who's trying to make their documents ready for their digital platforms.

Contrast checker is my go to contrast checker and it is made by WebAim and is a must-have site bookmark for me to verify colors for any digital platform. It shows you not only your text and the sizes of your text but also if that is an image if it's actually going to be approved or in a form. So it's just all around great.

Next is the international association of accessibility professionals or IAAP they offer four different certifications for anyone who is wanting to expand their knowledge. It is not an easy thing to accomplish to get a certification from them but once you have become certified you will have the knowledge to conquer most accessibility issues that come your
way. The four certifications that they offer: The first is the CPACC and that is the certified professional and accessibility core competencies. You will learn about all the laws in the whole world that deal with accessibility you'll learn about digital accessibility as well as physical world and it just brings around a full awareness of accessibility as a professional.

The second is the web accessibility specialist or the WAS certification. Next is certified professional and accessibility designation so once you receive the first two certifications you will be granted the third certification which basically says that you are able to do anything with accessibility essentially.

And the fourth is actually a brand new certification that they're offering and it is a certified professional and accessible built environments where you once you pass your examination you will actually be added to a list where you can be contracted out to build accessible environments for people.

In conclusion i want to challenge each of you to accept the hashtag no mouse challenge to raise awareness about accessibility. Challenge your colleagues your friends your family members strangers on the street to help us all increase our awareness and to be able to make our universities a more inclusive environment for our students our faculty our staff and the community members with disabilities.

If you would like the supplemental slideshow PowerPoint that goes along with this presentation that has more facts and text or a transcript of this presentation please email me at bob5h virginia.edu - b o b 5 h at v i r g i n i a dot e d u and i would be more than happy to send you those items and answer questions you may have about accessibility or getting certified yourself. Thank you.