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 them and continue to work toward implementing changes that allow the institution to improve its ability to comply continually.
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 because it demonstrates how the content management system has native tools to make websites compliant.
Training sessions are offered almost weekly and you can quickly join by contacting support here on UserVoice.
Beyond WordPress training, the university offers LinkedIn Learning courses that can help you better understand accessibility and a broader sense of what defines impairment. You can access these on the University Commkit Website Training webpage.
Testing for Accessibility
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.
4. Forms should have written error resolutions
All forms should have easily identifiable error messages that specify fixing a form error if the information is incorrect. Also, every form on your website should have prominent labels for each field a user must input. Labels must clearly describe each form of control or field.
5. Write descriptive links
Write links to indicate what the user should expect to see when they click on a specific link. For example, a helpful 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.
6. Font should be at least 1.2 em
If users must squint to see the text, 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.
7. Clear contrast between text
Make sure the foreground and background colors are in a clear contrast. For example, always use bold links and button text. Vibrant blue text on white background does not work except on large text like headers. If the font is responsive, check your mobile device to confirm the layout has a clear contrast.
8. Make sure all Headers are Hierarchical
Make sure the headers in your page are hierarchical—the level of the header indicates the 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 the header element to maintain the proper hierarchy, it's okay.
9. Use consistent window and tab settings
Make sure links open consistently in the current window/tab or a new window/tab. If a link leaves the current site or opens a PDF, it should always open in a new window/tab.