3. Accessibility basics
Create accessible content with the correct use of headings, color contrast, descriptive alt text and informative links and buttons.
What is accessibility?
Digital accessibility means making your online content accessible to everyone, regardless of their abilities or the device they are using.
Often, simple changes can improve access for people with visual, auditory, motor and cognitive disabilities.
Adapted from the ASU IT Accessibility website
There are four simple things you can do that go a long way towards making your web content accessible.
1. Use correct information structure
Use ordered headings
The content of a webpage should be structured like an organized outline, with headings, subheadings, and sub items under those headings
Heading
- Sub headings
- Sub items
HTML has heading structure to match these components, and they should be used to represent your content in a similar way
Heading 1 (H1)
- Heading 2 (H2)
- Heading 3 (H3)
- Paragraph 1
- Paragraph 2
- Heading 3
- Heading 3
- Heading 4
- Paragraph 1
- Heading 4
- Paragraph 1
- Paragraph 2
- Heading 4
- Heading 3 (H3)
HTML has 6 levels of headings, though typically you’ll only use up to 4, depending on your content.
How to set headings in Pitchfork
Add a Heading block
- In the block prompt, type /heading or click the block inserter and choose the Heading block.
- Change the heading level. The default heading level is H2. To change the heading level, click the “H2” and choose the correct heading from the list.
- You may highlight your entire heading or part of the heading.
- Select the text you want to highlight.
- Open the “More” menu (down carat).
- Choose a UDS highlight option: gold highlight, black highlight, white highlight (for dark backgrounds). Here is an example of gold highlight:
- Select the text you want to highlight.
More about color contrast options for text
Your text color and background colors must be high contrast to be accessible to those with vision differences.
Most of the pre-defined color options are accessible, though expect to see a reminder when you manipulate the colors manually. To see which ASU brand color combinations are accessible, see the Accessible text and background color combinations guide.
Remember that although a color combination is accessible, that does not mean it is recommended. Some text/background color combinations are accessible but not allowed for regular “paragraph” web text by ASU brand standards, but may be only allowed in Headings or in text inside of web graphics.
Examples: black text on gold, maroon text on gold, and gold text on maroon are accessible, but to not meet ASU web standards or web best practices. However in Headings, these combinations would be allowed in some cases.
2. Make informative links and buttons
Screen readers are an assistive technology that will read web content aloud for those with visual disabilities.
When you make a text link, screen readers will read the text link aloud. For this reason, the link text needs to explain what action happen when the link is clicked.
Example 1
Click here to learn about our new master’s degree program.
Learn about our new master’s degree program.
Example 2
You can read about our transfer credit options by reading this guide.
Read our transfer credit options guide.
Example 3
You can self-enroll into the New Student Orientation Canvas course here.
Self-enroll in the New Student Orientation Canvas course.
An easy rule to follow is: Never use “click here,” “this” or “here” links. Use actionable, descriptive text that tells the reader what will happen when they click.
Descriptive links improve usability for all
Like most accessibility changes, using descriptive links improves website usability for everyone. If you look at the examples, which links are easier to see? Which have clearer language? The more descriptive links improve the experience for all users.
3. Always write alt text for images
Like descriptive links, screen readers also read out descriptive text for images. You provide that text. It is called alternative text, or alt text.
How to write good alt text
Start by asking yourself two questions:
- Why is this image important for the content it is near?
- What do I need to describe in order to convey the image and its importance?
Remember that your description is replacing or enhancing the ability to look at the image, so capture what is happening, but also the mood or other engaging details. Use these examples as guides.
Example 1
Alt text
An ASU student wearing a maroon graduation robe and a kente cloth stole smiles as he stands proudly next to ASU President Michael Crow, who wears a ceremonial robe adorned with medals.
Why is this good alt text?
It describes the scene, but also conveys the mood of the subjects by indicating they are smiling and that the graduate seems proud.
Example 2
Alt text
An ASU student athlete in an ASU-branded maroon hoodie and brown pants descends an American Airlines airplane stairway, holding a smartphone in one hand and a maroon Adidas duffel bag in the other.
Why is this good alt text?
It describes the scene well and provides the airline name and other brand names, which can help individuals with low vision discern the details of the image. This is not always required, but can be helpful.
Example 3
Alt text
A woman is captured in a moment of wonder, her profile illuminated by the stylized addition of vibrant light trails swirling around her hand.
Why is this good alt text?
This image combines a photo of a woman with the artistic addition of light trails. The alt text captures the woman’s mood of wonder and let’s the viewer know the trails of light are an artistic addition.
Example 4
Alt text
Portrait of Houqiang Fu on a maroon and gold artistic background.
Why is this good alt text?
The simplest of alt texts for this image would be “Houqiang Fu,” as the rest of the image does not contribute meaning to the content. However, adding “portrait of” before the subject’s name and a quick description of the background lets the reader know more about the type of image is displayed.
How to add alt text to an image
When you upload an image to your website, you type in the alt text in the alt text field.
When adding an image, look for this field in the media library interface, and type in the alt text: 
4. Use plain language
- The use of plain language feels contrary to a university environment, but it is a must for accessibility.
- Why? Several reasons:
- Efficient communication: Webpages are skimmed, not read. Speed matters, getting to the point matters. Plain language accomplishes this.
- Improved understanding and trust: Readers comprehend information more rapidly, and because they understand it, trust it (and us) more.
- More likely to complete instructions correctly: Plain language ensures readers will understand and follow instructions correctly, leading to better compliance with instructions and requirements. We have a lot of instructions out there for our students to follow!
- Preventing misunderstandings: There is less chance of information being misunderstood, reducing the time spent on follow-up clarifications.
- Accessibility for All: Plain language ensures that information is accessible to a broader audience, including readers with cognitive disabilities, low literacy levels or other neurodivergence, and/or whose primary language is not English. 26% of our 2023-24 students are international, so this is very important.
It’s the law.
ASU, like all universities, are required by law to provide accessible websites under the Americans with Disabilities Act (ADA) and Section 504 of the Rehabilitation Act.
In 2023, accessibility compliance moved into the U.S. Department of Justice, and accessibility laws became civil rights, making violations of those laws a violation of a person’s civil rights.
So besides being the right thing to do, it is a requirement and must be followed.
Good news! Many accessibility requirements are “baked in” to our Pitchfork theme, so as long as you follow the recommendations above, you will have done a lot to make your written content and images accessible.
Did you know you can test your site?
ASU provides an accessibility self-audit that requires no knowledge of code. Try it out if you like!
https://accessibility.asu.edu/testing/audit
References/Further reading
Ever heard of WCAG?
“Wi-cag” is how people pronounce WCAG, which is the Web Content Accessibility Guidelines international standards. These standards are wide and deep, updated regularly, and have gradations of compliance: A, AA and AAA (AAA being the highest). ASU is required to meet AA level compliance.
Additional references
Most of these references are from the ASU’s Accessibility website, which is loaded with additional info and relevant examples.
- Headings: https://accessibility.asu.edu/articles/headings
- Informative links and buttons: https://accessibility.asu.edu/articles/links
- Alt text: https://accessibility.asu.edu/articles/images
- Plain language: https://www.plainlanguage.gov/about/benefits/ and https://accessibility.asu.edu/articles/writing
- It’s the law: