Skip to content

Creating an Accessible Web Page

About Creating Accessible Websites

Georgia State website editors must continually work to meet WCAG 2.0 AA-compliant websites. While the standards continue to improve and change our website managers must strive to adhere to these standards and continue to work toward implementing changes that allow for the institution to continually improve its ability to comply. 

Since Georgia State is a public university, we must adhere to the policies suggested by the ADA (American Disabilities Association), so that those with physical limitations can find information on our sites. This is discussed in more detail in the Georgia State Institutional Web policy 

More About Creating Accessible Websites

All WordPress training sessions contain embedded elements of accessible design.  This is important in that it demonstrates how the content management system has native tools to make websites compliant.  

Training sessions are offered almost weekly and you can easily join by contacting support here on UserVoice. 

Beyond WordPress training, the university offers LinkedIn Learning courses where you can get a better understanding of accessibility and a. broader sense of what defines impairment.  You can access this in the University Commkit Website Training webpage

Testing for Accessibility

An important first step is to use automated testing. For most websites, you can use the WAVE tool to test your work. Download the extension for your Chrome Browser.

Testing should also include a screen reader. Since people have different computers this article can assist in better understanding how you can set up this test on your own: SiteImprove Screen Reader. We are continually collecting feedback and working to improve our accessibility.  Some of these changes may require more technical solutions than others.  

Should you come across something you don't understand or believe may be part of a larger change, contact support here on UserVoice and describe what you have discovered.  A support technician will be in touch to discuss the details.

List of Frequently Used Methods to Produce Compliant Webpages

1. Use ALT tags on every media (pictures, documents, graphs, etc.)

Any inline images included in your theme should have alt text. ALT tags must also be in featured images. Even if the code is present to display alt attributes, an appropriately crafted alternative version still needs to be input for those images. You can add alt text to images by going to the media library. Select the picture you'd like to use on your website, then add a quick descriptive sentence to the alt text section.

2. Use a focus keyphrase in your alt text

Search engines use context about an image to understand what's on it. To rank your page in image searches, it's essential to use the focus keyword of your article in the alt text. Yoast SEO checks for synonyms of the keyword you added to the post.

3. Use the same focus key phrase from the alt text in the file name

Use the focus keyphrase you chose in Yoast (mentioned in the previous tip) in the file name. It's simple: if your image shows two students lying in the grass reading, the file name shouldn't be DSC3492.jpg but two-students-reading-in-grass.jpg.

3. Forms should have written error resolutions

All forms should have easily identifiable error messages with specifics on how to fix a form error if the information is incorrect. Also, every form on your website should have obvious labels for each field that a user will have to input. Labels must clearly describe each form of control or field.

4. Write descriptive links

Write links in a way that indicates what the user should expect to see when they click on a specific link. For example, a useful link would be "Learn how to apply for student housing." A bad link would be "Learn more" or just displaying the full URL. All links should clearly describe what the user will see when they click on them.

5. Font should be at least 1.2 em

If users must squint to see the text, then it's too small. Regardless of whether or not the person has a disability. All of our templates use 1.2 em font in the body text. Therefore, you won't have to change the size, but be aware of the size requirements as you build your site.

6. Clear contrast between text

Make sure foreground and background colors have a clear contrast. For example: always bold links and button text.

7. Make sure all Headers are Hierarchical 

Make sure the headers in your page are hierarchical - the level of header indicates priority of content to a screen reader. All pages have a hidden embedded H1. The remainder of the page can flow from this. It's important for the hierarchy of the headers to flow not necessarily the size of the header text. If you need to adjust the size of header element to maintain the proper hierarchy, it's ok.

8. Use consistent window and tab settings

Make sure links open in the current window/tab or a new window/tab consistently. If the link leaves the current site or opens a pdf, the link should always open in a new window/tab.

Feedback and Knowledge Base