Accessibility

Creating an inclusive web experience

Making our website accessible is important so that every visitor has the same experience, regardless of ability. Keeping accessibility in mind as you create web content ends up helping not only disabled users, but it ultimately helps all users.

W3 is the organization that writes the standards for web accessibility. The W3 website is a very good resource for learning about accessibility. 

Understanding user perspectives

Colors

You want to make sure to not rely on colors or visuals alone to portray important information. In regards to color, if you want to make sure users don't miss an important error on your page, you wouldn't want to just make it red to make it stand out in case the user has a visual impairment. Instead, you may want to make it larger, make it bold, add an icon or symbol near the error that stands out (like an exclamation point in a circle), etc. Another important aspect to consider is how much contrast there is between elements. Sometimes you may want to use a texture to display information differently if there is not enough contrast between the colors to show that they are different. You also want to ensure there is enough contrast between any elements that are touching so that they are easily visualized. You can use a color contrast checker to check that the ratio between the two colors are far enough apart to be compliant with ADA. 

Designing UI with Color Blind Users in Mind

Images

Images should have alt text added so that a user with a visual impairment can have a similar experience to sighted users. The alt text should do one of two things: describe what is in the picture and/or explain the function of the picture if it is a link. For example, if you are just using a picture to show students, depending on the context, you will probably want to say more than just "students." You would want to describe what is happening in the picture: "Students sitting at table in the library, talking and studying." Likewise, if you are using a logo or icon to link the user to another page, you'll want to make sure to include the user's destination so that they know why they would want to click on that link. So, if you are using a book icon to link to the library, you may not need to tell the user that the graphic they are clicking on is a book, but simply put "library" in the alt text so that they know the purpose of the link. You also want to make sure to avoid using images with text in them as they will not come through for visitors using a screen reader.

Descriptive link text

Different visitors will prefer or even require accommodations to best use the web. For example, visitors that are using a screenreader to "view" the website will need descriptive link text so they can know where the link will take them. This is helpful not only to users with a screenreader, but to all users. The example below was created using email as an example, but the link issue works the same for a webpage. You never want to leave the URL (https://www.usi.edu/web) as the link text because while the user will know the address they are going to, they will not know the content of that new webpage. "Click here" is a similar issue, because it is not descriptive to where the user is going and if there are more than one link titled "click here," it is impossible for a visitor using a screenreader to know which link they need to choose for where they are wanting to go. 

Navigating through the page

To help all users navigate through your page, you'll want to keep your information concise. You may want to use headers to name each section so that a user can easily find which section they are looking for. Bullet points instead of paragraphs may be an appropriate way to approach this. Visitors using a screenreader will also benefit when you use headers within the text of your webpage. Using headers differentiates different sections throughout the page, much like an outline. This benefits all users by making the different sections easier to skim through. The examples below are specific to blackboard, but it works similarly on a webpage (ours are listed as H1, H2, H3, etc.). The H1 is already automatically created for you with the main heading of your page. The headers that follow the H1, should all be nested sequentially which will help sighted users as well as those using a screenreader.

Files should also be accessible

Any files you link to or have the user download should also be accessible. There are resources online to help you accomplish this. 

There's so much more

Making your page accessible can be overwhelming when you look at all the requirements and consider all the different perspectives users may be coming to our site with but we try to make sure that the tools we're giving you are already accessible before you even start. The main thing you'll need to worry about are the items listed above in regards to the text and images you add to your pages. W3C does offer an "Easy check - A first review of web accessibility" page that gives you a quick reference of what to look for in regards to making your page accessible. This would be a great place to get started if you're looking for more detailed information about web accessibility.